盒子模型&float浮动

盒子模型组成部分：border、content、margin、padding；

盒子总尺寸=border（边框）+content（内容宽度）+padding（内边距）；

box-sizing:border-box;

 怪异盒模型，设置的元素宽度和高度就是盒子最终的宽度和高度，里面的的实际大小会自动的进行计算，怪异盒模型实际运用比较多

box-sizing:content-box;默认值，盒子的总尺度，可不写；

box-sizing:inherit;元素继承父元素的盒子模型模式；

块级元素

<h1>…<h6>、<p>、<div>、列表

行内元素

<span>、<a>、<img/>、<strong>、<em>、<i>、...

行内块元素：<input>…

行内标签可以包含于块级标签中，成为它的子元素，很少使用行内元素包裹块元素

块级元素会独占一行，其宽度自动填满其父元素宽度

行内元素不会独占一行，相邻的行内元素会排列在同一行里，直到一行排不下，才会换行，其宽度随元素的内容而变化

块级元素可以设置 width, height属性，行内元素设置width,  height无效

块级元素可以设置margin 和 padding

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

display属性

控制元素的显示和隐藏

块级元素与行内元素的转变

值 说明

none 设置元素不会被显示

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

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

inline-block 行内块元素，块元素转换成行内元素

浮动—float属性

可以让块元素在一行排列，也可以改变块元素方向

属性值 说明

left    元素向左浮动

right 元素向右浮动

none 默认值，元素不浮动

设置宽度和右浮动后，为什么边框塌陷了？怎么解决？

浮动元素脱离标准文档流

清除浮动：clear属性

clear清除浮动，清除方向与浮动方向必须保持一致

clear:left/right——float-left/right

clear:both 无论浮动方向如何，均可清除

属性值 说明

left 在左侧不允许浮动元素

right 在右侧不允许浮动元素

both 在左、右两侧不允许浮动元素

none 默认值。允许浮动元素出现在两侧

解决父级边框塌陷的方法

clear属性可以清除浮动对其他元素造成的影响，可是依然解决不了父级边框塌陷问题，怎么办？

1、浮动元素后面加空且没有设置浮动的div并设置clear:both;

多占用一个无意义div盒子

2、设置父元素的高度

缺点，高度固定，不能自动根据子盒子适应相应高度

3.父级添加overflow属性

溢出处理

overflow属性

属性值 说明

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

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

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

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

除了visible默认值，其余都可以解决父级边框塌陷

缺点：如果存在下拉框的话也会被隐藏

4、父级添加伪类after

.clear:after{

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

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

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

}

5. 父元素添加 display: flow-root;的方式清楚浮动，无副作用的方式清除浮动

 

小结

清除浮动，防止父级边框塌陷的四种方法

浮动元素后面加空div

简单，空div会造成HTML代码冗余

设置父元素的高度

简单，元素固定高会降低扩展性

父级添加overflow属性

简单，下拉列表框的场景不能用

父级添加伪类after

写法比上面稍微复杂一点，但是没有副作用，推荐使用

display:inline-block和float的区别

可以让元素排在一行，并且支持宽度和高度，代码实现起来方便

位置方向不可控制，会解析空格

inline-block-解决缝隙的两种方法：

1. 两个元素之间连在一起，放在同一行，不要存在空格
2. 给父元素设置字体大小为零
3. IE 6、IE 7上不支持

float 可以让元素排在一行并且支持宽度和高度，可以决定排列方向