HTML布局的学习记录

一、盒子模型

HTML中的每个元素都是盒子，每个盒子都有margin，border，padding，content构成。

二、为什么要有盒子模型呢？

答：举个例子快递小哥在送货前，首先得把商品装车吧， 如果有西瓜、显示屏、瓜子、化妆品等形状各异，直接装的话那画面太难了！但实际中每个商品外面会包装个纸箱或者套个袋子，只需把箱子码好就可以送货了，是不是省事多了。 浏览器在布局的时候也是如此，每个元素的特性都不一样，外面套个盒子，那布局的时候就是摆盒子了，容易多了。

本质：盒子模型隔绝了元素内容的多样性，提高了布局效率和开发效率。

三、标准盒子和怪异盒子

为什么有时候调整盒子的padding和border会导致盒子的可视区域变化呢？

答：盒子模型在面积计算方面有多种模式，常见的有border-box和content-box，通过box-sizing进行指定

注意：width值得是css中设置的属性width，layout-width是实际在浏览器中的看到的宽度

border-box：width=border+padding+content，layout-width=width，称为怪异盒子

conent-box： width=content，`layout-width=border+padding+width，称为标准盒子

总结：默认的为标准盒子模型conent-box,css属性中的width和height仅指content的大小，调整padding和border`

则盒子的可视区域会变化；而怪异盒子模型border-box，则width和height包括border、padding、content，调整其中任意属性，则可视区域不会变化，而content会增大或者减小。

四、盒子的margin-left 、margin-right、margin-top、margin-bottom的生效策略

4.1 为什么同时设置了盒子的margin-left 、margin-right，只有margin-left生效呢？

答：布局的时候，浏览器是从左开始布局的，设置的间距其实是大于等于的判定。左间距为30px，右间距为50px，那么如果右边的实际空间剩余超过50px，则即可。

4.2 为什么同时设置了盒子的margin-top 、margin-bottom，只有margin-top生效呢？

答：布局的时候，浏览器是从上往下布局的，设置的间距其实是大于等于的判定。上间距为30px，下间距为50px，那么如果下边的实际空间剩余超过50px，则即可。

综上所述：浏览器布局从左上到开始，生效的为margin-right和margin-bottom则在兄弟元素的时候会生效。

五、float布局相关

5.1 为什么会出现高度塌陷？

• 什么是高度塌陷？

  答：高度塌陷是指父子元素关系，父元素未指定高度，依靠内部子元素来撑起来。子元素内部设置了float的属性，会导致父元素的高度为0（也就是塌陷）。原因是float脱离了正常的文档流，子元素不能再撑起来父元素。

• 如何解决高度塌陷或者称清除浮动？

  /*box为父级容器,利用overflow触发BFC*/
  .box {
    overflow: hidden;
  }
  /*利用clear清除*/
  .clearfix:after{
    content: "";
    display: block;
    visibility: hidden;  
    clear: both;
  }
  /*兼容IE6*/
  .clearfix {
    /* 触发 hasLayout */ 
    zoom: 1; 
  }

5.2 float的元素如何上浮呢

设置为float的元素会向左上或者右上进行浮动，如果遇到最近的块元素（独占一行），浮动的元素就会停止，可以把块元素想象成一堵墙即可，最外层的块元素是body。如果多个元素浮动，则按照HTML的结构顺序依次进行浮动，后浮动的挨着前浮动的（同时left或者right）

5.3 浮动元素会有哪些影响呢

• 高度塌陷，详见5.1

• 浮动元素会脱离文档流：不在正常的文档流中，其它在正常文档流中的元素会认为它不存在。

• 提升视图层次，浮动的元素的z-index会自己提升

• 浮动元素会改变部分元素的特性：内联元素浮动后，width和height可以进行指定

六、BFC是什么，有什么用途

BFC是什么

BFC是一个独立的布局环境，BFC内部的元素布局与外部互不影响

BFC的用途（常用的）

• 父子层级可以解决：外边距塌陷、高度塌陷

• BFC和其它元素可以解决的问题：float的元素不会发生重叠，边距合并（套用一个div触发BFC，不推荐会改变HTML的结构）

  触发BFC的条件

元素或属性	属性值
float	left、right
position	absolute、fixed
overflow	hidden、auto、scroll
display	inline-block、table-cell

上述来源于参考链接的汇总，感谢作者的分享

六、定位相关

CSS中的布局方式有static、relative、absolute、fixed，四种。默认的为static布局按照块级元素和内联元素的特性，正常布局，也就是说的文档流。

个人当时理解不到的地方：块级元素独占一行，有时候看到的div可能宽度不到一屏，但实际在文档流中的影响的区域是一行的，布局的时候可以自己脑补满屏。

因为正常的文档流方式，满足不了实际中的一些布局效果。例如多个块元素能在一行排列么？理解定位的关键是参考系的确定

布局方式	参考元素
static	正常文档流方式
relative	相对于正常文档流方式中的位置，不脱离文档流
absolute	最近的非static的祖先元素，脱离文档流，z-index提升
fixed	absolute的特殊情况，参靠的是浏览器窗口也就是body，脱离文档流，z-index提升

CSS要想熟练掌握，理论是基础，关键还是写页面，写页面！