前端-css盒模型与浮动 QIan 锋 逆 战 班

盒模型：
1 . content（内容区） 注：元素的宽和高
2 . padding（填充区） 注：用来控制父元素和子元素之间的位置系；
用来控制元素和内容之间的位置关系的。
特点：添加了padding值之后，padding值会把元素原有的大小撑大， 如果让元素原本大小不变得话，需要在元素的宽高上减掉所加的padding；
3 . border（边框区） 注：盒子的边缘
4 . margin（外边界区） 注：控制同辈元素之间的位置关系。
特点：margin是现在是在元素边框以外的空白区。
padding用法：
padding-top:30px; 上填充
padding-right:30px; 右填充
padding-bottom:30px; 下填充
padding-left:30px; 左填充
margin用法：
margin-top:30px; 上外边距
margin-right:30px; 右外边距
margin-bottom:30px; 下外边距
margin-left:30px; 左外边距
注意： margin 是可以写负值的，padding不可以写负值；margin不会影响元素的实际宽高，但是也会曾加的他的所占区域

盒模型作用：
规定了网页元素如何显示以及元素间相互关系
一个标准盒模型所占位置组成：
宽高（content）+padding+border+margin
元素宽度实际占有的位置大小：
宽+左右padding+左右border+左右margin
元素高度实际占有的位置大小：
高+上下padding+上下border+上下margin
margin的bug：
1、上下的两个元素之间的margin值会重叠显示；谁的值大 就以谁的margin值来显示。（BFC 解决）

		2、当父元素里的第一个子元素（块元素），添加margin-top的时候，会错误的把margin-top值添加给父元素。（建立在当前的元素们 没有添加边框和浮动的前提下。）

解决方法：
bfc 给父元素添加overflow：hidden； 推荐使用
给父元素和子元素添加浮动属性；
可以给父元素添加边框
把margin改成padding
什么是标准流文档：
简单来说，我们的web页面和ps一些设计软件有本质的区别
网页制作是一个从上而下的概念，像织“围脖”；一样而设计软件，想让他去哪就去拿想画哪就画哪。
标准流文档的作用： 让上下排列的元素，可以并排显示。
注意： 元素添加浮动之后，就飘起来了，原本在标准文档流里额位置就不在占有了，后面的内容会把位置补上去。
如果有N个元素要在一排并列显示，那么着N个元素都需要添加浮动属性。

   浮动后排版的顺序是跟HTML里的标签属性顺序有关的。
  添加了浮动之后的属性，对margin：0 auto;就不生效了。

       浮动的显示规则：浮动对象会像左或者右移动直到遇到边框（border）、填充值（padding）、外边界（margin）或者另一个块元素为止。

清除浮动：
clear： none 不清除
left 清除左浮动
right 清除右浮动
both 清除两侧浮动 比较常用

注：
清除浮动属性 ，不是给浮动元素加的，，，是给受到浮动元素影响的元素加的。

说明：
清除浮动属性，只针对于自身起作用，对其他元素是没有影响的。
浮动：
1 . float ： left 左浮动
right 右浮动
none 没有浮动
常见的块元素： div、form、table、p、pre、h1～h5、dl、ol、ul……
常见的内联元素有：span、a、strong、em、label、input、select、textarea、img、br……

注意：如果所有标签设置浮动，就会并排显示 并且都不区分行内块状元素，可以设置高度