CSS一些总结

Posted 2020-07-30

1. display

block：块元素，默认宽度为100%，可以设置元素的宽高，默认占满一行。块元素包括div，h1-h6，form，table，ul，ol等；

inline：行内元素，默认宽度为内容的宽度，width和height对inline元素无效，margin top和bottom对行内元素无效，因为行内元素的行高是由line-height决定的，而margin left和right则有效。行内元素包括span，image，a等；

inline-block：元素具有行内和块元素的特性，可以设置宽高，并且可以并排显示；

2. position

static：元素默认的值，不会被定位；

absolute：绝对定位，是相对于最近的被定位的祖先元素的定位，如果没有被定位的祖先元素，则默认对body定位；元素被决定定位后，会脱离文档流，默认的位置会被其他元素占据；

relative：相对于默认位置的定位，如果没有设置top和left等属性，则显示位置与static一样；被相对定位的元素不会脱离文档流。

fixed：元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。

3. 盒子模型

普遍浏览器计算总宽度公式为 = margin-left + border-left + padding-left + width + padding-right + border-right + margin-right

而IE（低于IE9）比较特殊的计算方式为 ＝ margin-left + width + margin-right

W3C 最后为了解决这个问题，在 CSS3 中加了 box-sizing 这个属性。当我们设置 box-sizing: border-box; 时，border 和 padding 就被包含在了宽高之内，和 IE 之前的标准是一样的。所以，为了避免你同一份 css 在不同浏览器下表现不同，最好加上：

*, *:before, *:after {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

4. float

浮动元素会脱离文档流，原本该占据的位置会被其他非浮动元素占据。而清除浮动，一般是添加在需要清除浮动的元素身。元素被浮动之后默认变为块级元素。

5. margin和padding的合并与抵销

对于相邻的2个元素，margin-bottom ＝ 20和margin-top ＝ 35，之间的margin会出现抵销，最终的margin是35，取较大的值；

对于相邻的2个元素，padding-bottom ＝ 20和padding-top ＝ 35，之间的padding会出现累加，最终的padding是55，取两者的和；

 

参考资料：

http://zh.learnlayout.com/

http://geekplux.com/2014/04/25/several_core_concepts_of_css.html