[TOC] ## 前言 也许你自认为非常熟悉基本的css2属性以及效果，但有些知识盲区你还是不清楚的。 ## 置换元素 * 有些元素本身，你认为是行内元素但是却可以设置高宽，比如input、button、img等，这些元素本身其实是行内块级元素，具有行内块级的基本特征。 * 置换元素设置padding-top以及padding-bottom是有效的，设置line-height无效；而行内非置换元素无效，两者对于padding-left,padding-right都是有效的。 * 拓展延伸：行内非置换元素设置行高无效，高度识别自动。 ## margin塌陷 1. 行内非置换元素，在写外边距时，如果外层盒模型没有padding,border时，行内元素的margin-top会移植到父元素的margin-top实现，而本身没有margin-top效果，俗称margin塌陷。下面代码的最终效果p margin-top:15px,span没有margin-top的效果。（外层模型有padding,border可以正常实现外层10px 内层15px的外间距） ~~~ <p style="margin-top:10px"> <span style="margin-top:15px">我是行内非块级元素</span> </p> ~~~ 2. 行内置换元素，不管外层是否有padding,border时，都会正常实现外层10px 内层15px的外间距。 ~~~ <p style="margin-top:10px"> <img style="margin-top:15px" src=""> </p> ~~~ ## 同级元素margin合并问题 1. 本元素margin-bottom与下一个元素margin-top ,取较大值15px ~~~ <p style="margin-bottom:15px"> </p> <p style="margin-top:10px"> </p> ~~~ 1. 本元素margin-right与下一个元素margin-left ,取和也就是25px ~~~ <span style="margin-right:15px;"> sdv </span> <span style="margin-left:10px"> sdv </span> ~~~ ## 同时筛选出符合多个条件 * 中间不加任何空格,多用于追加active样式，前提在保证语法正确的情况下 ~~~ .a.active{} <span class="a active"></span> ~~~