一周一章前端书·第16周：《HTML与CSS进阶教程》S02E0

第5章：盒子模型

5.1 CSS盒子模型

• 页面的所有元素都可以看成一个盒子。
• 盒子模型由content、padding、border、margin四大属性构成。

content内容

• 四大属性中的必填项。元素的内容可以是文本、图片等多种类型。
• 我们可以通过witdh、height属性来设置元素内容的宽高，可以通过overflow属性处理内容溢出的情况。

padding内边距

• 内边距也称为“补白”，指元素内容和边框之间的距离。
• 可以通过内边距的四个方向属性设置指定方向与边框的距离：padding-top、padding-right、padding-bottom、padding-left（也可以通过简写属性padding设置，顺时针的方向）

border边框

• 设置边框属性有三个属性：border-width(边框宽度)、border-style(边框类型)、border-color(边框颜色)。

margin外边距

• margin可以设定盒子与盒子之间的距离，可能是父子元素的距离，也可能是兄弟元素之间的距离。
• margin也是CSS布局的一个重要手段。
• margin的属性和padding一样，可以指定上下左右四个方向的外边距：margin-top、margin-right、margin-bottom、margin-left（同样是顺时针，上右下左的顺序）。

5.2 深入border

• border:0和border:none的区别：
  • border:0是把边框的宽度定义为0，虽然页面上看不见，但浏览器依然会进行渲染；
  • border:none是定义无边框，页面上看不见，同时浏览器也不会进行渲染；
  • 在IE6和IE7上会存在显示得不一样的兼容效果，性能上差别不大；

5.3 深入padding

• 通过padding可以实现背景图片 + 偏移内容的按钮效果：
• image

5.4 外边距叠加

• margin用来设置盒子与盒子之间的距离，但如果设置上下相邻的两个盒子的margin属性的话，会出现外边距叠加的情况：
• 比如说A和B两个元素垂直相邻，A{margin-bottom:10px}，B{margin-top:15px;}，最终叠加的距离等于15px（取外边距的最大值）。
• margin叠加的注意事项：
  • 只有垂直的外边距会叠加(margin-top+margin-bottom)，而水平的外边距不会；
  • 外边距叠加最终的高度取外边距中的最大值；
  • 垂直外边距叠加，只会在三种情况下出现：同级元素叠加、父子元素叠加、空元素；
  • 只有block和inline-block元素才会有外边距叠加的情况，inline行内元素的margin-top和margin-bottom设置无效；

• CSS之所以定义外边距叠加，初衷是为了更好的对文章进行排版，像文章的段落之间就是垂直相邻的，显然外边距叠加时只保留一个值排版更优美。

  
  image
• 所以我们在实际的开发中，应当统一使用margin-top或统一使用margin-bottom，不要混用，从而可以降低出现问题的风险。

5.5 负margin技术

5.5.1 负margin简介

image

• 在普通文档流中，设置负margin的元素流动方向是从右到左，从下到上；
• 在浮动布局中，则是根据浮动的方向来定；

5.5.2 负margin技巧

• 图片与文字对齐

  
  image

• 实现自适应两列布局

  
  image

• 元素垂直居中

  
  image
• 通过margin-top:-1来实现选中tab的下边框效果
  image

5.6 overflow

• overflow四个属性来定义当内容溢出元素边框时的处理：
  • overflow:visible：默认值，溢出的内容可见；
  • overflow:hidden：溢出的内容隐藏，以免影响布局；
  • oveflow:scroll：通过滚动条显示内容溢出；
  • overflow:auto：和scroll相似，不同的是auto值溢出时，才显示；
• 另外overflow:hidden可以清除浮动。