Box Model 盒子模型

Box Model盒子模型，是初学者在学习HTMl5时会学到的一个重要的模型，也有一些人称它为框模型，因为盒子是属于3维，而框是平面的。称之为盒子模型，是因为其结构和盒子十分相似，其最外面是margin，然后border，里面是padding，三者包围了content.

margin: 20px;/*上右下左用同一个数据*/

margin: 20px 30px;/*上下 左右分别用2个数据*/

margin: 20px 30px 40px/*上 左右 下*/

margin: 5px 10px 20px 30px;/*顺时针顺序 上 右 下 左*/

overflow属性规定了内容溢出盒子时如何处理

visible:内容不会被修剪，会呈现在元素框外

auto:如果内容被修剪，

hidden:隐藏

scroll:滚动条

border-radius为元素添加圆角边框。

box-shadow是给元素块添加周边阴影效果。

1:X方向的偏移

2：Y方向的偏移

3：阴影模糊程度，值越大越模糊

4：阴影模糊半径

5：阴影阴影颜色

超链接样式的四种状态

未访问状态（a:link）

已访问样式(a:visited)

鼠标移上状态(a:hover)

激活选定状态(a:active)（鼠标点击未取消）

设置超链接样式的步骤：

确定页面所有链接样式是否相同，否则分开定义

先定义四个状态共有样式，再分别定义其他状态

margin border padding都会影响页面布局，content不变

实际宽度：在content的基础上加上margin，border或padding

变态盒模型 border-box 添加padding或者border不会影响页面布局，只会

挤压页面内容content

盒子的摆放模式

标准流模式

块级盒子(div)从上自下排列，宽度自动伸展占据整个浏览器，自动换行

行级盒子(span)从上自下排列，从左到右，空间是内容所占据的空间，自动换行

非标准流模式——浮动与定位

float属性使元素脱离了常规文档流而表现为向右或向左浮动

float属性的取值

right

left

none

1.浮动盒子的宽度不会自动伸展，宽度以内容和margin、padding属性为准

2.标准流中其他盒子将视浮动盒子不存在而占据浮动盒子的位置，但内容会受到浮动盒子宽度的影响

3.可以设置clear属性使标 准流中其他盒子不受之前盒子的浮动影响

4.父级盒子中的所有盒子都采用浮动形式，若父级盒子未指定高度则父级盒子的高度为0，

因为所有盒子都是浮动已脱离标准流。解决办法增加一个标准流的盒子

清除浮动方式一

在父元素中添加一个新的元素

为新元素设置clear:both

清除浮动方式二

.clearfix:after

{

content:" ";

diplay:table;

clear;both;

}

outline(轮廓)是绘制于元素周围的一条线，位于边框边缘的外围，

可起到突出元素的作用，轮廓线不会占据空间

语法：outline:<'outline-width'>||<'outline-style'>||<'outline-color'>

outline:2px solid red