css盒子模型

1.什么是盒子模型？

html把每一个标签都当做盒子来看待，里面的属性分别有 padding border margin属性。

标准盒子模型的组成部分：

margin+padding+border+content(内容)

怪异盒子模型组成部分：

margin+content

2.边框

border-width:边框宽度

border-style:边框样式 实线 虚线 双线;

solid dashed    double

border-color:边框颜色

复合写法：

border:1px solid red;

单方向边框

下边框：border-bottom: 3px solid pink;

上边框：border-top

左边框：border-left

右边框：border-right

3.圆角

border-radius: 像素/比分比（50%可以把正方形变成圆）

单方向的角度改变：

border-top-left-radius: 35px;

border-top-right-radius: 135px;

border-bottom-right-radius: 40px;

border-bottom-left-radius: 140px;

4.内边距/内填充

padding的主要作用：产生让内容到边的距离和标签变大。

padding有4个方向值：

padding-top:

padding-right:

padding-bottom:

padding-left:

padding的复合写法：

padding:上 右 下 左;

padding:上 左右 下 ;

padding:上下 左右 ;

padding:上下左右 ;

5.外边距

margin的主要作用:让标签与标签之间产生距离。

margin有4个方向值：

margin-top:

margin-right:

margin-bottom:

margin-left:

margin的复合写法：

margin:上 右 下 左;

margin:上 左右 下 ;

margin:上下 左右 ;

margin:上下左右 ;

6. 属性 值 作用

display block 显示/让行元素变成块元素

inline 让块元素变成行元素

inline-block         让其他元素变成行内块元素

none 隐藏

7.标准盒子模型（w3c标准）的计算方式

margin+padding+border+content

外边距+内边距+边框+元素（内容）

怪异盒子模型（w3c标准）的计算方式

border+content

--怪异盒子模型这么产生的？

1) 给元素添加CSS3属性box-sizing:border-box;

2)文档结构的doctype不写，

3）这个是在IE8 IE7 IE6 IE5等低版本上有，测试可以在win7系统上比较老旧的IE浏览器上，win10自带的新IE浏览器不可以。

--有什么影响？

如果pc端网站开发，需要兼容ie低版本浏览器。微软不在维护低版本浏览器了，换言之pc端一般情况下不需要兼容低版本。