布局-float-margin-padding

布局

布局从上到下，而后再从左右；先用div进行占位，便是设置框架，而后Css美化

PS：注意设置长和宽 再设置float ； id不能数字命名

 

 Float

不用浮动的话，div默认会上下排列（块状元素）

使用float，让该div浮起，没加float的div会在 浮起的div下面（由于浮上去了）；若是不想被盖住，下面的div可使用clean进行声明（老子不想被你遮住）；总之，至关分为2层，而且互不干扰

一、 使用左浮动的div就会从最左边开始浮，依次从左到右排序直到最右，就会换行又从左到右；

2、左浮和右浮都是在同一个层次，因此左浮和右浮不会重叠。

问题：父容器中有两个子容器，若是定义了父容器的宽度，没有定义高度；两个子容器都浮动，父容器没有清除，那么父容器有多高？

答： 父容器高度为0，由于子容器都浮在上面，没有把父容器撑大。若是去除两个子容器的浮动则高度等于子容器

 

 清楚浮动的问题

当div上面有另外一个div的float遮挡时，使用clear：left等清除，则添加清除的div会在下面（类块状）

 

当属性设置float（浮动）时，他所在的物理位置已经脱离文档流了，可是大多时候咱们但愿文档流能识别float（浮动）,或者是但愿float（浮动）后面的元素不被float（浮动）所影响，这个时候咱们就须要用clear:both;来清除。

 

Clear属性通常使用在紧邻后面的元素的清除浮动

 

 

Margin Padding div

div也被叫作盒子；div是块元素，因此会本身占1行；使用spin是行内元素能设置样式（不能设置竖直方向的内外边距）

通常同级盒子与盒子之间的距离叫作外边距margin（若是写四个就从上逆时针；，）

内边距是内容与盒子边的距离padding

若是一组div具备类似的属性咱们能够用class 表示一类（名能够同样）

盒子的border的三要素：宽、形状、颜色；

border ：宽 样式 颜色 ；另外直接能够仅某条边进行设置（详情见CSS彻底参考手册）

实战：利用css控制border 和div和作出三角。因太粗的边是三角形状的，类门框

内边距的问题 ：一个div设置了border和长宽以后，再添加padding的大小，会让div形状变大，变大的部分就是padding的值；原来的div大小是不变的，可以添加内容的空间仍是那么大（magin不会）

增长padding注意总长度，能够经过修改width的长度调节

实际的height = height + margin-top + margin-bottom + padding-top + padding-bottom + 2 border

margin重叠：相邻的div上下边距值非相加，而是取最大的边距值