盒子模型及其浮动、定位属性

1. 盒子模型  

        盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型，一个页面由可以由多个盒子组成。

盒子的组成：内容区域 + 边框(border) + 内边距（padding）+ 外边距(margin)；

2. 元素 

 

3.  网页布局方式（用于摆放盒子）

        一个完整的网页，是标准流、浮动、定位一起完成布局的，每个都有自己的专门用法。

• 标准流：标签按照规定好默认方式排列，垂直的块级盒子显示就用标准流布局；
• 浮动：可让多个块级元素一行显示或者左右对齐盒子，横向排列盒子就用浮动布局；
• 定   位：定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示。如果元素自由在某个盒子内移动就用定位布局。

4. 浮动

        浮动是网页布局中非常重要的一个属性，这个属性一开始设计的初衷是为了网页的文字环绕效果。

4.1 浮动属性：选择器 { float: 属性值; }

4.2 浮动特点

• 浮动的元素脱离了标准流，即脱标；

• 浮动的元素只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（图片）会产生文字环绕效果；

• 浮动的元素有收缩效果，行内元素浮动以块级特性去呈现，大小根据内容大小决定；

• 浮动的元素一行排列并顶部对齐，无缝衔接，若父盒装不下，则另起一行；

4.3 浮动缺陷

        浮动的子标签因为脱离了标准文档流，无法撑开父盒子的高度，导致父盒子高度塌陷。如果网页中出现了这种问题，会导致我们整个网页的布局紊乱。

解决措施：清除浮动

注意：
- 如果父盒子本身有高度，就不会影响下面的标准流，则不需要清除浮动
- 清除浮动之后，父级就会根据浮动的子盒子自动检测高度。

4.4 BFC块级格式化上下文

        overflow属性不仅仅有以上效果，那么当一个元素设置了overflow:hidden|auto|scroll属性之后，它会形成一个BFC区域，我们叫做它为块级格式化上下文，它是一个独立的渲染区域。BFC只是一个规则，浮动不会影响其它BFC中元素的布局，而清除浮动只能清除同一BFC中在它前面的元素的浮动，浮动定位和清除浮动只会应用于同一个BFC的元素。只要我们让父盒子形成BFC的区域，那么它就会清除区域中浮动元素带来的影响。

BFC布局规则：
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边， 与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float 元素重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不影响外面的元素。反之也如此。
6.计算BFC的高度时，浮动元素也参与计算

会生成BFC的元素：
1.根元素
2.float属性不为none
3.position为absolute或fixed
4.display为inline-block
5.overflow不为visible

5. 定位 

        定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒

5.1 定位组成

定位 = 定位模式 (position) + 边偏移 (方位名词)

定位模式 用于指定一个元素在文档中的定位方式。边偏移则决定了该元素的最终位置。边偏移需要和定位模式联合使用，单独使用无效 。

  

5.2 定位口诀

        子绝父相：子级是绝对定位的话，父级要用相对定位

• 绝对定位的盒子是拼爹的，所以要和父级搭配一起来使用，父盒子需要加定位限制子盒子在父盒子内显示。
• 因为父级需要占有位置，因此是相对定位， 子盒子不需要占有位置，则是绝对定位。

5.3 堆叠顺序 z-index

        在使用定位布局时，可能会出现盒子重叠的情况。此时，可以使用 z-index 来控制盒子的前后次序 (z轴)

• 语法：选择器 { z-index: 属性值; }
• 属性值：正整数、负整数或 0，默认值是 0，数值越大，盒子越靠上；
• 如果属性值相同，则按照书写顺序，后来居上；
• 数字后面不能加单位。

注意：z-index只能应用于相对定位、绝对定位和固定定位的元素，其他标准流、浮动和静态定位无效。

5.4 应用