当前位置:网站首页 > 今日头条 > 正文

松鼠鱼,个人总结的div css的学习秘籍,gate

admin 0

一、html元素分类

2.1、尖端元素(Top-level element)

界说

组成html页面最尖端标签

特色

1、 不行设置宽高;

2、 必须在文档流中处于第一流方位;

3、 包含一切块级元素及内联元素,不行被包含;

常见元素

html

body

frameset

2.2、块级元素(Block-level element)

界说

以块显现的元素,常用于排版,默许状况下每一个块级元素会换行显现。

特色

1、每一个块级元素总是在新行上开端;

2、高度,行高以及外边距和内边距都可操控;

3、宽度缺省是它的容器的100%,除非设定一个宽度;

4、它能够包容内联元素和其他块元素;

常见元素

address - 地址

blockquote - 块引证

center - 举中对齐块 (html5取消了该标签)

div - 常用块级简单,也是css layout的首要标签盗火线下载

dl - 界说列表

fieldset - form操控组

form -&nbs三修奇仙p;交互表单

h1 - 大标题

h2 - 副标题

h3 - 3级标题

h4 - 4级标题

h5 - 5级标题

h6 - 6级标题

hr - 水平分隔线

isindex - input prompt

menu - 菜单列表

noframes - frames可选内容,(关于不支撑frame的浏览器显现此区块内容)

no - 可选脚本内容(关于不支撑的浏览器显现此内容)

ol - 排序表单

p - 阶段

pre - 格式化文本

table - 表格

ul - 非排序列表(无序列表)

address - 地址

2.3、内联元素(Inline element )

界说

内嵌元素、行内元素,默许状况下一个或许多个内联元素会一行显现。

特色

1、内联元素之间会在同一行显现;

2、设置宽度width 无效,宽度取决于元素中文字或图片的宽度;

3、设置高度height无效,高度只能经过line-height设置;

4、设置外边距margin 只要左右margin有用,上下无效;

5、设置外边距padding只要左右padding有用,上下无效;

6、只能包容文本或许其他内联元素;

常见元素

a - 锚点

abbr - 缩写

acronym - 首字

b - 粗体(不引荐)

bdo - bidi override

big - 大字体

br - 换行

cite - 引证

code - 计算机代码(在引证源码的时分需求)

dfn - 界说字段

em - 着重

font - 字体设定(不引荐) (html5取消了该标签)

i - 斜体

img - 图片

input - 输入框

kbd - 界说键盘文本

label - 表格标签

q - 短引证

s - 中划线(不引荐)

samp - 界说典范计算机代码

select - 项目挑选

small - 小字体文本

span - 常用内联容器,界说文本内区块

strike - 中划线

strong - 粗体着重

sub - 下标

sup - 上标

textarea - 多行文本输入框

tt - 电传文本

u - 下划线

var - 界说变量

二、要点布局css特色介绍

2.1、定位(position)

2.1.1、默许值-static

默许值,没有定位,即正常方位,元素呈现在正常的HTML流中。当一个div为无定位状况时, top, bottom, left, right 或许 z-index 声明失效。(相对定位demo1)

2.1.2、相对定位-relative

界说

生成相对定位的元素,相关于其正常方位、结合TRBL特色(TOP、RIGHT、BOTTOM、LEFT)进行定位。

特色

1、relative坚持目标地点文档流中的方位,也便是说它具有和static相同的呈现方法,它相同占有在文档流中的固定方位,后边的目标不会侵吞或掩盖;

2、定位参照父级的原始点为原始点,无父级则以BODY的原始点为原始点,当父级内有padding等CSS特色时,当时级的原始点则参照父级内容区的原始点进行定位;

2.1.3、肯定定位-absolute

界说

肯定定位,使元素脱离文档流方位,结合TRBL特色(TOP、RIGHT、BOTTOM、LEFT)进行定位。

特色

1、absolute不坚持目标地点文档流中的方位,它不占有在文档流中的固定方位,后边的目标会侵吞或掩盖;

2、假如父级(无限)没有设定position特色,那么当时的absolute则结合TRBL特色以浏览器左上角为原始点进行定位。假如父级(无限)设定position特色,那么当时的absolute则结合TRBL特色以父级(最近)的左上角为原始点进行定位;

2.1.4、固定定位-fixed

界说

固定定位,使元素脱离文档流方位,结合TRBL特色(TOP、RIGHT、BOTTOM、LEFT)依据浏览器方位进行定位。

特色

当一个层界说了fixed之后,则这个层总是依据浏览器的窗口结合TRBL特色来进行元素的定位,相关于浏览器来主动调整该层的方位。

2.1.5、div层-z-index

界说

z-index 特色设置元素的堆叠次序。具有更高堆叠次序的元素总是会处于堆叠次序较低的元素的前面。

特色

1、z-index只能在position特色值为relative或absolute或fixed的元素上有用;

2、同级且position特色值均为relative的元素无法比较z-index;

3、z-index值只决议同一父元素中的同级子元素的堆叠次序,父元素的z-index值(假如有)为子元素界说了堆叠次序(css版堆叠“拼爹”);

4、向上追溯找不到含有z-index值的父元素的状况下,则能够视为自在的z-index元素,它能够与父元素的同级兄弟定位元素或其他自在的定位元素来比较z-index的值,决议其堆叠次序;

5、同级元素的z-index值假如相同,则堆叠次序由元素在文档中的先后方位决议,后呈现的会在上面;

2.2、起浮(float)

2.2.1、界说

float 特色界说元素在哪个方向起浮。在 CSS 中,任何元素都能够起浮。起浮元素会生成一个块级框,而不管它本身是何种元素。

假如在一行之上只要很少的空间可供起浮元素,那么这个元素会跳至下一行,这个进程会继续到某一行具有满足的空间停止。

2.2.2、特色

请看下图,当把框 1 向右起浮时,它脱离文档流而且向右移动,直到它的右边际碰到包含框的右边际。

再请看下图,当奇门气数天机秘法框 1 向左起浮时,它脱离文档流而且向左移动,直到它的左面际碰到包含框的左面际。松鼠鱼,个人总结的div css的学习秘籍,gate因为它不再处于文档流中,所以它不占有空间,实践上掩盖住了框 2,使框 2 从视图中消失。

假如把一切三个框都向左移动,那么框 1 向左起浮直到碰到包含框,别的两个框向左起浮直到碰到前一个起浮框。

如下图所示,假如包含框太窄,无法包容水平摆放的三个起浮元素,那么其它起浮块向下移动,直到有满足的空间。假如起浮元素的高度不同,那么当它们向下移动时或许被其它起浮元素“卡住”。

2.2.3、起浮铲除-clear

界说

clear 特色规则元素的哪一侧不答应其他起浮元素。

特色值

left

在左面不答应起浮元素。

right

在右侧不答应起浮元素。

both

在左右两边均不答应起浮元素。

none

默许值。答应起浮元素呈现在两边。

inherit

规则应该从父元素承继 clear 特色的值。

特色

假定期望让一个图片起浮到文本块的左面,而且期望这幅图片和文本包含在另一个具有布景色彩和边框的元素中。您或许编写下面的代码:

.news {

background-color: gray;

border: solid 1px black;

}

.news img {

float: left;

}

.news p {

float: right;

}

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>

这种状况下,呈现了一个问题。因为起浮元素脱离了文档流,所以围住图片和文本的 div 不占有空间。

怎么让围住元素在视觉上围住起浮元素呢?需求在这个元素中的某个当地运用 clear。

这种完成方法,因为没有现有的元素能够运用整理,所电影还魂砂以只能增加一个空元素而且整理它。代码如下

.news { background-color: gray; border: solid 1px black; }

.news im米菲哭了g { float: left; }

.news p { float: right; }

.clear { clear: both; }

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

<div class="clear"></div>

</div>

这样能够完成咱们期望的作用,可是需求增加剩余的代码夏凡的老婆。常常有元素能够运用 clear,可是有时分不得不为了进行布局而增加无意义的符号。

因而,针对这一问题,引荐运用以下处理方案,那便是对容器 div 进行起浮。

.news&n熄灯情人bsp;{ background-color: gray; border: solid 1px black; float: left; }

.news img { float: left; }

.news p { float: right; }

<div class="news">

<img src="news-pic.jpg" />

<p>some text</p>

</div>

2.3、外边距、内边距(margin & padding)

2.3.1、外边距-margin

界说

鸿沟,元素周围生成额定的空白区。“空白duebass七七区”通常是指其他元素不能呈现且父元素布景可见的区域。——CSS威望攻略

特色

1、margin始终是通明的。

2、margin经过运用独自的特色,能够对上、右、下、左的外边距进行设置。即郝万山治病不怎么样:margin-top、margin-right、margin-bottom、margin-le松鼠鱼,个人总结的div css的学习秘籍,gateft。

3、外边距的 margin-width 的值类型有:auto | length | percentage,也能够运用简写的外边距特色一同改动一切的外边距:margin: top right bottom left;(eg: margin:10px 20px 30px 40px) 回忆方法是元素周围正上方顺时针“上右下左”回忆。

特色值

margin省掉的数值写法,根本如下:

1、 假如margin只要一个值,表明上右下左的margin同为这个值。

例如:margin:10px; 就等于 margin:10px 10px 10px 10px;

2、 假如 margin 只要两个值,第一个值表明上下margin值,第二个值为左右margin的值。

例如:margin:10px 20px; 就等于 margin:10px 20px 10px 20px;

3、 假如margin有三个值,第一个值表明上margin值,第二个值表明左右margin的值,第三个值表明下margin的值。

例如:margin:10px 20px 30px; 就等于 margin:10px 20px 30px 20px;

4、 假如margin有四个值,那这四个值别离对应上右下左这四个margin值。

例如:margin:10px 20px 30px 40px;

笔直外边距兼并

外边距兼并指的是,当两个笔直外边距相遇时,它们将构成一个外边距。兼并后的外边距的高度等于两个发作兼并的外边距的高度中的较大者。只要一般文档流中块框的笔直外边距才会发作外边距兼并。行内框、起浮框或肯定定位之间的外边距不会兼并。

当一个元素呈现在另一个元素上面时,第一个元素的下外边距与第那书总不结束二个元素的上外边距会发作兼并。请看下图:

当一个元素包含在另一个元素中时(假定没有内边距或边框把外边距分离隔),它们的上和/或下外边距也会发作兼并。请看下图:

假定有一个空元素,它有外边距,可是没有边框或填充。在这种状况下,上外边距与下外边距就碰到了一同,它们会发作兼并:

假如这个外边距遇到另一个元素的外边距,它还会发作兼并:

2.3.2、内边距-padding

界说

padding 简写特色在一个声明中设置一切内边距特色。该特色不答应运用负值。

特色

1、Padding并非是通明的,其布景依据元素的布景来决议。

2、padding经过运用独自的特色,能够对上、右、下、左的内边距进行设置。即:padding-top、padding-right、padding-bottom、padding-left。

3、内边距的 padding-width 的值类型有:auto | length | percentage制止运用auto,padding缩写中用了auto体现反常(css的bug)也能够运用简写的内边距特色一同改动一切的内边距:padding: top right bottom l维荣的妻子eft;(eg: padding:10px 松鼠鱼,个人总结的div css的学习秘籍,gate20px 30px 40px) 回忆方法是元素周围正上方顺时针“上右下左”回忆。

特色值

padding省掉的数值写法,根本如下:

1、 假如padding只要一个值,表明上右下左的padding同为这个值。

例如:padding:10px; 就等于 padding:10px 10px 10px 10px;

2、 假如 padding只要两个值,第一个值表明上下padding值,第二个值为左右padding的值。

例如:padding:10px 20px; 就等于 padding:10px 20px 10px 20px;

3、 假如padding有三个值,第一个值表明上padding值,第二个值表明左右padding的值,第三个值表明下padding的值。

例如:padding:10px 20px 30px; 就等于 padding:10px 20px 30px 20px;

4、 假如padding有四个值,那这四个值别离对应上右下左这四个padding值。

例如:padding:10px 20px 30px 40px;

2.3.3、盒子模型-box model

盒子模型有两种,别离是 IE 盒子模型和规范 W3C 盒子模型,如下图

从上图能够看到规范 W3C 盒子模型的规模包含 margin、border、padding、content,而且 content 部分不包含其他部分。

从上图能够看到 IE 盒子模型的规模也包含 margin、border、padding、content,和规范 W3C 盒子模型不同的是:IE 盒子模型的 content 部分包含了 border 和 pading。

规范盒子模型声明

至实践开发中,咱们应当挑选“规范 W3C 盒子模型”。怎么样才算是挑选了“规范 W3C 盒子模型”呢?很简单,便是在网页的顶部加上 DOCTYPE 声明。假如不加 DOCTYPE 声明,那么各个浏览器会依据自己的行为去了解网页,即 IE 浏览器会选用 IE 盒子模型去解说你的盒子,而 FF 会选用规范&松鼠鱼,个人总结的div css的学习秘籍,gatenbsp;W3C 盒子模型解说你的盒子,所以网页在不同的浏览器中就显现的不一样了。反之,假如加上了 DOCTYPE 声明,那么一切浏览器都会选用规范 W3C 盒子模型去解说你的盒子,网页就能在各个浏览器中显现共同了。

2.4、边框(border)

2.4.1、界说

元素外边距内便是元素的的边框 (border)。元素的边框便是环绕元素内容和内边据的一条或多松鼠鱼,个人总结的div css的学习秘籍,gate条线。

边框有 3 个特色:宽度、款式,以及色彩。

例如:borde松鼠鱼,个人总结的div css的学习秘籍,gater:1px solid #333333;(此处界说了一个宽度为1像素,款式为实线,色彩为灰色的边框款式)

2.4.2、款式-border-style

CSS 的border-style特色界说了10个不同的非 inherit 款式,包含none。

描绘

none

界说无边框。

hidden

与 "none" 相同。不过运用于表时在外,关于表,hidden 用于处理边框抵触。

dotted

界说点状边框。在大多数浏览器中呈现为实线。

dashed

界说虚线。在大多数浏览器中呈现为实线。

solid

界说实线。

double

界说双线。双线的宽度等于 border-width 的值。

groove

界说 3D 凹槽边框快汇宝。其作用取决于 border-color 的值。

ridge

界说 3D 垄状边框。其作用取决于 border-color 的值。

inset

界说 3D inset 边框。其作用取决于 border-color 的值。

outset

界说 3D outset 边框。其效益枳融果取决于 border-color 的值。

inherit

规则应该从父元素继一订就走承边框款式。

Border-style 支撑省掉式写法,如下:

比方 1

border-style: dotted solid double dashed;

· 上边框是点状

· 右边框是实线

· 下边框是双线

· 左面框是虚线

比方 2

border-style: dotted solid double;

· 上边框是点状

· 右边框和左面框是实线

· 下边框是双线

比方 3

border-style: dotted solid;

&mi强吻揉胸ddot; 上边框和下边框是点状

· 右边框和左面框是实线

比方 4

border-style: dotted;

· 一切 4个边框都是点状

除了省掉式写法,必要时还能够进行单鸿沟说,如:

border-top-style:……

border-right-style:……

border-bottom-style:……

border-left-style:……

2.4.3、宽度-border-width

border-width 简写特色为元素的一切边框设置宽度,或许独自地为各边边框设置宽度。只要当边框款式不是 none 时才起作用。假如边框款式是 none,边框宽度实践上会重置为 0。不答应指定负长度值。佳宁娜雷人搞笑舞蹈

CSS 的border-width特色界说了几种款式,见下表。

描绘

thin

界说细的边框。

medium

默许。界说中等的边框。

thick

界说粗的边框。

length

答应您自界说边框的宽度。

与border-style彭具才同理,border-width也支撑省掉式写法:

比方 1

border-width: thin medium thick 10px;

· 上边框是细边凯登克劳斯框

· 右边框是中等边框

· 下边框是粗边框

· 左面框是 10px 宽的边框

比方 2

border-width: thin medium thick;

· 上边框是 10px

· 右边框和左面框是中等边框

· 下边框是粗边框

比方 3

border-width: thin medium;

· 上边框和下边框是细边框

· 右边框和左面框是中等边框

比方 4

border-width: thin;

· 一切 4 个边框都是细边框

相同地,除了省掉式写法,也能够经过下列特色别离设置边框各边的宽度:

border-top-width: ……

border-right-width: ……

border-bottom-width: ……

border-left-width: ……

2.4.4、色彩-border-color

border-color 特色设置四条边框的色彩。此特色可设置 1 到 4 种色彩。

border-color 特色是一个简写特色,可设置一个元素的一切边框中可见部分的色彩,或许为4个边别离设置不同的色彩。

CSS 的border-color特色支撑下表几种色彩写法:

描绘

color_name

规则色彩值为色彩称号的边框色彩(比方 red)。

hex_number

规则色彩值为十六进制值的边框色彩(比方 #ff0000)。

rgb_number

规则色彩值为 rgb 代码的边框色彩(比方 rgb(255,0,0))。

transparent

默许值。边框色彩为通明。

省掉式写法

比方 1

border-color:red green blue pink;

· 上边框是赤色

· 右边框是绿色

· 下边框是蓝色

· 左面框是粉色

比方 2

border-color: red green blue;

· 上边框是赤色

· 右边框和左面框是绿色

· 下边框是蓝色

比方 3

border-color: red green;

· 上边框和下边框是赤色

· 右边框和左面框是绿色

比方 4

border-color: red;

· 一切 4 个边框松鼠鱼,个人总结的div css的学习秘籍,gate都是赤色

还有一些单边边框色彩特色。它们的原理与单边款式和宽度特色相同:

border-top-color: ……

border-right-color: ……

border-bottom-color:&nb毒魂护腿sp;……

border-left-color: ……

转自:二飞日志