列表样式
列表样式可以设置其列表符号,列表图片(代替列表符号),列表符号的位置。
list-style-type: 设置列表符号,可以是我们之前学的无序列表符或有序列表符。
list-style-image:设置列表的图片(此时list-style-type自动就无效了,被代替了)
list-style-position: 指将列表符放在li的里面还是外面:outside(外面,默认值),inside(里面)
è list-style: 这是综合属性,可以设置上述几个。
定位属性
定位就是指把元素(标签)放在哪个位置。
实际上,每个元素都有个定位属性:position。其有4个值:
1, position:static ——静态定位;——所有元素的初始定位方式就是静态(没有额外使用position或浮动的时候)
2, position:relative; ——相对定位:其实就是指一个元素在其父盒子中本来该放的位置(静态位置)的一个相对值(错位值)。必须使用left和top配合来设置该值。
a) 举例:position:relative; left:10px; top:15px;
3, position:absolute; ——绝对定位;指该元素相对于其上级具有非静态定位的元素的一个绝对位置。如果上级没有非静态定位设置,则会相对网页主体(html标签)。常常绝对定位就是用于在整个网页上进行“绝对位置设定”——就是相对网页主体来说。
4, position:fixed; ——固定定位;有点类似绝对定位,但其是相对于整个“可视窗口”来设置的定位,(绝对定位是相当于网页的版面的绝对值)。固定定位的盒子是以“窗口”为参照系,而绝对定位和相对定位的盒子是以网页为参照系。
定位就是指把元素(标签)放在哪个位置。
实际上,每个元素都有个定位属性:position。其有4个值:
1, position:static ——静态定位;——所有元素的初始定位方式就是静态(没有额外使用position或浮动的时候)
2, position:relative; ——相对定位:其实就是指一个元素在其父盒子中本来该放的位置(静态位置)的一个相对值(错位值)。必须使用left和top配合来设置该值。
a) 举例:position:relative; left:10px; top:15px;
3, position:absolute; ——绝对定位;指该元素相对于其上级具有非静态定位的元素的一个绝对位置。如果上级没有非静态定位设置,则会相对网页主体(html标签)。常常绝对定位就是用于在整个网页上进行“绝对位置设定”——就是相对网页主体来说。
4, position:fixed; ——固定定位;有点类似绝对定位,但其是相对于整个“可视窗口”来设置的定位,(绝对定位是相当于网页的版面的绝对值)。固定定位的盒子是以“窗口”为参照系,而绝对定位和相对定位的盒子是以网页为参照系。
标准流与非标准流
流:水流的流——所有“水”(物体)往一个方向“流过去”——挤压。
标准流:就是原始的html标签在网页中的原始表现——在遵循块元素和行内元素的基础上,全都往“右上角”挤靠过去。
非标准流:使用position的非静态定位方式影响的元素位置,或者使用浮动而影响的元素的位置。
CSS优先级
基本优先级:
!important 〉 行内样式 > id选择器 > 类选择器|伪类选择器 > 标签选择器 > 通用选择器 > 继承属性
综合优先级(只讨论选择器):
则下列选择器的优先级如何呢?
.a1 div{}
.a1 .a2{}
.a1 div .a2 span{}
#d1 div {}
#d1 .a1 {}
则他们比较优先级的原则是:
1, 比较最高的优先级选择器的多少,多者胜;
2, 最高的数量相等的时候,比较次高,多者胜;
3, 依次类推
各种居中总结
前提: 父盒子固定大小(宽高),其里面的“内容”在水平和垂直方向的居中对齐的常见做法:
内部居中:
水平居中:
A:“内容”为一行文字或文字性行内元素(span,a,b,u):在父盒子上设置text-align:center;
B:“内容”为具有一定形状的行内元素(如img,input,textarea):同文字(A)
C:“内容”为块元素: margin:0 auto;
垂直居中:
A:“内容”为一行文字或文字性行内元素(span,a,b,u):在父盒子上设置line-height为父盒子的高度;
B:“内容”为具有一定形状的行内元素(如img,input,textarea):同块元素(C)
C:“内容”为块元素: 在块元素上设置:position:relative;top为父盒子高度一半;margin-top为该块元素高度一半的负值
外部居中:
img与textarea与其紧挨着的文字垂直居中对齐:设置其vertical-align:middle;
input与紧挨着的文字自然垂直居中。
昨日回顾
列表样式:
list-style-type: 列表项目符
list-style-image:列表项目图片(相当于自定义列表项目符)
list-style-position:设定列表项目符的位置(放在li里面还是外面,默认是外面)
list-stype:综合属性
定位方式:
position: static; 静态定位,是默认值。
position: relative; 相对定位;需要设定left/top值。
position: absolute; 绝对定位;需要设定left/top值。
position: fixed; 固定定位;需要设定left/top值。
css优先级:
!important 〉 行内样式 > id选择器 〉类(伪类)选择器〉标签选择器〉通用选择器〉继承样式。
对于层级选择器(复合选择器),则他们的优先级由最大的那项的数量决定。如果最大优先级的选择器的数量相同,则再比较下一级的数量,依次类推。
#id1 .c1 .cc1 div{}