CSS重点知识点整理

1、一、CSS选择器1、 标签选择器2、 类选择器3、 ID选择器二、CSS复合选择器1、后代选择器l 在CSS选择器中通过嵌套的方式，对特殊位置的HTML标签进行声明l 外层的标签写在前面，内层的标签写在后面，之间用空格分隔l 标签嵌套时，内层的标签成为外层标签的后代2、交集选择器l 由两个选择器直接连接构成，选中二者各自元素范围的交集l 第一个必须是标签选择器，第二个必须是类选择器或者ID选择器l 选择器之间不能有空格，必须连续书写3、并集选择器l 多个选择器通过逗号连接而成l 利用并集选择器同时声明风格相同样式三、CSS美化网页1、<span>标签2、字体样式l Font-fam

2、ily：设置字体类型l Font-size：设置字体大小l Font-weight：设置字体粗细3、文本属性l Color：设置文本颜色l Text-align：设置元素水平对齐方式l Text-indent：设置首行文本的缩进l Line-height：设置文本的行高l Text-decoration：设置文本的装饰4、超链接样式实际网页开发中通常只设置两种状态，一种是a包括链接的各个状态，一是a:hover -鼠标移到对象上的样式5、网页背景l Background-color：背景颜色l Background-image：背景图像l Background-repeat：背景重复方式l B

3、ackground-position：背景定位。-属性值可以为数值，可以为百分比，也可以为关键词；第一个为水平方向，第二个为垂直方向。l Background：背景样式简写Background：背景颜色 背景图片 背景定位 背景是否重复显示；例：background:#C00 url(image/arrow-down.gif) 205px 10px no-repeat; 6、列表样式l List-style-type：none 无标记符号l List-style-type：disc实心圆l List-style-type：circle空心圆l List-style-type：square实心正

4、方形l List-style-type：decimal数字四、盒子模型CSS 盒子模型，包含了元素内容（content）、内边距（padding）、边框（border）、外边距（margin）几个要素。1、 边框borderl border-width：边框粗细l border-style：边框样式 dashed：虚线；solid：实线；l border-color：边框颜色l border：边框设置连写border：边框粗细 边框样式 边框颜色 或者border：边框颜色 边框粗细 边框样式例：border:#f00 1px solid;2、 外边距marginmargin是设置对象外边距外

5、延边距离。（1）margin说明margin的值有三种情况，可以为正整数和负整数并加单位如PX像素；可以为auto自动属性(margin-left:auto 自动)；可以为百分比（%）值。margin-left：对象左边外延边距margin-right：对象右边外延边距 margin-top：对象上边外延边距margin-bottom：对象下边外延边距（2）外边距margin缩写A、只有上下情况缩写原始：margin-top:5px; margin-bottom:6px缩写简写为：margin:5px 0 6px 0或margin:5px auto 6px autoB、只有左右情况缩写原始：m

6、argin-left:5px; margin-right:6px缩写简写为：margin:0 6px 0 5px或margin:auto 6px auto 5pxC、四边相同值缩写原始：margin-top:5px; margin-bottom:5px; margin-left:5px; margin-right:5px缩写：margin:5px;D、四边不同值缩写：上 右 左 下原始：margin-top:5px; margin-bottom:6px; margin-left:7px; margin-right:8px缩写：margin:5px 8px 6px 7px;E、四边其中上下值和左

7、右值各相同缩写原始：margin-top:5px;margin-bottom:5px; margin-left:7px; margin-right:7px缩写：margin:5px 7px;F、设置布局局中margin:0 auto 设置对象上下间距为0，左右自动。可拆分： margin:0 auto 0 auto；还可拆分为：margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;4、 内边距paddingA、四边相同padding简写如果padding四边设置值相同，假如为5px， CSS简写为：padding:5px

8、;B、四边不同padding简写Padding:40px 30px 50px 20px;注意每个数值后一个空格间隔隔开解释分别意思第一个40px代表“上”padding-top:40px;第二个30px代表“右”padding-right:30px;第三个50px代表“下”padding-bottom:50px;第四个20px代表“左”padding-left:20px;五、display属性1、控制元素的显示和隐藏2、块级元素与行级元素的转变Ø block 块级元素的默认值，元素会被显示为块级元素，该元素前后会带有换行符Ø inline 行内元素/内联元素的默认值。元素会

9、被显示为内联元素，该元素前后没有换行符 Ø none 设置元素不会被显示Ø inline-block：行内块元素 css2.1新增的特性。既拥有了block元素可以设置width和height的特性，又保持了inline元素不换行的特性。六、浮动Float属性：属性值 说明Left 元素向左浮动Right 元素向右浮动None 默认值。元素不浮动假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行)；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的

10、顶部总是和上一个元素的底部对齐。七、清除浮动clear属性：属性值 说明Left 左侧不允许浮动元素Right 右侧不允许浮动元素both 左、右两侧不允许浮动元素None 默认值。允许浮动元素出现在两侧八、溢出处理overflow属性：属性值 说明visible 默认值。内容不会被修剪，会呈现在盒子之外hidden 内容会被修剪，并且其余内容是不可见的九、定位网页元素position属性：Position:static | absolute | relative |参数statice：默认值。无特殊定位参数absolute：绝对定位，将对象从文档流中脱离。使用了绝对定位的元素以它最近的一个“

11、已经定位”的“祖先元素” 为基准进行偏移。如果没有已经定位的祖先元素，那么会以浏览器窗口为基准进行定位。参数relative：相对于它本来要放的位置,将依据leftrighttopbottom等属性在正常文档流中偏移位置；它原本所占的空间仍保留。注意：要激活对象的绝对定位，必须指定leftrighttopbottom属性中的至少一个，并且设置此属性值为absolute;十、z-index属性调整元素定位时重叠层的上下位置z-index属性值：整数，默认值为0注意：要想给元素设置z-index样式，必须先让它变成定位元素，说的明白一点，就是要给元素设置一个postion:relative(定位元素