一、列表相关属性二、表格相关属性1.边框相关属性2.表格table独有属性三、背景相关属性stylediv{/*设置背景颜色默认值transparent */background-color:;/*设置背景图片*/background-img:;/*设置背景图片的重复方式*/background-repeat:;/*控制背景图片的位置第一种用关键词*//*控制背景图片的位置第二种用具体的像素值*/background-position:;/*复合属性全写一起*/}/style三、鼠标相关属性属性名 cursor设置鼠标光标的样式值pointer小手move移动图标text文字选择器crosshair十字架wait等待help帮助/*自定义鼠标图标*/ cursor: url(图片地址).pointer四、常用长度单位1.px像素2.em相对于当前元素的font-size或其父元素的倍数3.rem相对于根元素的font-size的倍数4.% 相对其父元素的百分比CSS中设置长度必须加单位否则无效五、元素的显示模式1.块级元素line可以通过CSS调整宽高2.行内元素inline不可以通过CSS调整宽高3.行内块元素inline-block可以通过CSS调整宽高六、修改元素的显示模式七、盒子模型的组成部分CSS会把所有的HTML元素看作一个盒子所有样式也基于这个盒子1.margin外边距盒子与外界的距离2.border边框盒子的边框3.padding内边距紧贴内容的补白区域4.content内容元素中的文本或后代元素都是盒子大小content左右padding左右bordermargin不会影响盒子的大小但会影响盒子的位置7.1盒子模型的内容区_content7.2内边距_padding注意1.padding不能为负数2.行内元素的左右内边距没有问题上下内边距不能完美设置3.块级元素行内元素四个方向都可以完美设置7.3盒子边框_border也可以加上left ,right, top, bottom例如border-left-color: ;7.4盒子外边距_margin用法与7.2内边距_padding相同注意事项7.5margin塌陷问题7.6 margin合并问题7.7样式继承7.8元素默认样式前四个不用记作为了解7.9布局小技巧1.块在块元素居中headstyle.outer{width:400px;height:400px;background-color:gray;overflow:hidden;}.inner{width:200px;height:100px;background-color:orange;margin:0 auto;margin:150px;text-align:center;line-height:100px;}/style/headbodydivclassouterdivclassinnerinner/div/div/body2.行元素在块元素里居中headstyle.outer{width:400px;height:400px;background-color:gray;text-align:center;line-height:400px;}.span{backgrround-color:orange;font-size:20px;}/style/headbodydivclassouterspan555/span/div/body3.行内块元素与纯文本在块元素中居中headstyle.outer{width:400px;height:400px;background-color:gray;line-height:400px;font-size:0px;/*字体越小图片越居中所以为0此时图片居中*/}img{vertical-align:middle;/*图片与文本对齐由于字体设计原因此时文本不在中央*/}.span{font-size:4px;vertical-align:middle;backgrround-color:orange;}/style/headbodydivclassouterspan555/spanimgsrc地址alt/div/body7.10元素之间空白问题产生原因行内元素行内块元素之间的换行会被浏览器解析为一个空格解决方式1.不换行2.使其父元素 font-size: 0;再给需要显示文字的元素单独设置字体大小7.11行内块元素的幽灵空白问题产生原因 行内块元素与文本的基线对齐而文本的基线与文本底端之间有一定距离解决方式1.给行内块元素设置 vertical 值不为 baseline 就行middle bottom top 均可2.如父元素只有一张图片设置图片为 displayblock3.给父元素设置 font-size: 0; 。如果行内块元素还有文本则需要单独设置 font-size八、关于默认长度九、处理内容溢出十、隐藏元素方式