6.6盒子模型2

盒子模型的组成

content+padding+border

magin属于盒子模型，但是不决定盒子大小

box-sizing:border-box

例：

行内元素和块元素

行内元素

<span><a><img>……

块元素

<div><p><h1>^<h6>……

块元素可以设置magin和padding

行内元素也可以设置padding和magin，但是magin-top和magin-bottom不生效

值 说明

none 设置元素不会被显示

inline 元素会被显示为内联元素

block 元素会被显示为块级元素

inline-block 行内块元素

二：浮动float

属性值 说明

left 元素向左浮动

right 元素向右浮动

none 默认值，元素不浮动

盒子塌陷怎么办

清除浮动

clear属性

1、浮动元素后面加空div

2、设置父元素的高度

3、父级添加overflow属性

溢出处理overflow属性

属性值    说明

visible    默认值。内容不会被修剪，会呈现在盒子之外

hidden    内容会被修剪，并且其余内容是不可见的

scroll    内容会被修剪，但是浏览器会显示滚动条以便查看其余内容

auto    如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容

4、

父级添加伪类after

.clear:after{

    content: '';          /*在clear类后面添加内容为空*/

    display: block;      /*把添加的内容转化为块元素*/

    clear: both;         /*清除这个元素两边的浮动*/

}