CSS盒模型、浮动布局和定位技术

这部分总结来自我很早的时候看过的一本叫做《CSS 高效开发实战》的书。最近无意中从以前的一堆onenote笔记中翻到一点读那本书的时候的笔记。书写的并不好建议不要看，但是这部分知识讲的比较详细，就把它们挂到博客来咯。

1. CSS盒子模型

一个盒子模型由内至外包括：
内容（Content）：默认情况下元素的宽高指的是内容的宽高（可通过box-sizing:border-box来修改元素宽高属性包含的范围）
内边距（Padding）：内容与边框之间的距离
边框（Border）：包裹元素和内边距的线框，
外边距（Margin）：元素与其他元素之间的距离

2. 浮动布局

使用float属性，为元素设置浮动，有如下需要注意的事项：

• (1) 为块级元素设置浮动后，其默认的100%宽度被修改为随内容自动调整
• (2) 设置了浮动的元素会脱离正常的文档流，其自身的行为可通过该元素的前一个元素来确定：
  • 如果该元素的前一个元素是正常流内的元素，则该元素元素会紧贴在其下方；
  • 如果该元素的前一个元素也是浮动的元素，则该元素会紧跟在其右侧，如果该行没有足够空间则换至下一行；
• (3) 浮动元素的后一个元素的行为则需要根据自身来判断：
  • 如果该元素也是浮动的元素，则按照2）中的规则进行判断；
  • 如果该元素是正常流的元素，则其自动补位到其前方最近的正常流的元素下方，但其中的内容会尽可能不被遮挡在它上方的浮动元素遮挡，甚至会因此溢出到元素的外面；
• (4) 使用clear属性为元素设置清除浮动，清除浮动可以让某个元素的左右两侧不允许出现浮动的元素，该元素会为了避开浮动的元素而调整自己的位置。一个典型的用法是：当一个父元素中所有的元素都被设置为浮动时，父元素的高度无法被撑开，这时可以通过：
  • 在最后一个浮动的子元素后面添加带有clear:both属性的空元素
  • 使用:after伪类，在父元素的末尾生成带有display:block;clear:both属性的空字符串
  • 使用BFC块级格式化上下文概念，为父元素添加overflow:hidden属性，创建一个BFC

3. 定位技术

使用position属性对元素进行定位，有如下几种定位方式（属性值）：

• (1) static：正常流定位（无定位），默认的定位方式，带有该属性的元素left/top/bottom/right/z-index五个属性都不生效，无法设置偏移量
• (2) relative：相对定位，相对于正常流定位，与正常流定位的区别是可通过left/top/bottom/right/z-index五个属性为元素设置偏移量
• (3)absolute：绝对定位，相对于最近的有定位的祖先元素进行定位，如果没有则相对于整个HTML文档进行定位
• (4) fixed：固定定位，相对于浏览器窗口进行定位，不随网页滚动

其中，absolute和fixed两种定位方式下元素会有如下变化：

• (1) 如果被定位的元素是块级元素，则该元素的默认宽度不再是100%，而是根据内容自动调整
• (2) 不定义z-index的情况下，absolute和fixed的元素会覆盖在正常元素上
• (3) 完全脱离文档流，不再占据文档空间

补充：可以使用z-index属性来设置浮动元素的z轴分层关系，值大的在上层，需要注意的是：

• (1) z-index仅对已定位元素有效；
• (2)z-index只可比较同级元素，只能对同级元素进行分层；
• (3) z-index定位过的元素，他们的子元素也只能在其内部进行分层，原理同上一条
• (4) z-index不会作用于窗口控件，如select对象。