列表样式

列表样式可以设置其列表符号，列表图片（代替列表符号），列表符号的位置。

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或浮动的时候）

a) 举例：position:relative; left:10px; top:15px;

标准流与非标准流

流：水流的流——所有“水”（物体）往一个方向“流过去”——挤压。

标准流：就是原始的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）：同文字（Ａ）

C：“内容”为块元素： margin:0 auto;

垂直居中：

A：“内容”为一行文字或文字性行内元素（span，a，b，u）：在父盒子上设置line-height为父盒子的高度；

B：“内容”为具有一定形状的行内元素（如img，input，textarea）：同块元素（Ｃ）

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{}

CSS

CSS