css盒模型简介

如何了解盒模型

盒模型简介：盒模型是css布局的基石，它规定了网页元素如何显示以及元素间相互关系。css定义所有的元素都可以拥有像盒子一样的外形和平面空间. 盒模型的组成：内容区、补白/填充、边框、边界/外边距。

一：盒模型结构大概：

从里到外：盒模型包括

内容区content　　内填充padding　　盒子边框border　　外边距margin

二：各个部分的用法：

padding的用法：

1.padding是长在内容和盒子之间，在盒子内部

2.为了调整子元素在父元素里面的位置关系

3.padding的特点：padding值会把盒子撑大

4.如果想让盒子保持原有的大小，需要在宽高的基础上减掉padding值

5.给单一方向设置padding值：

padding-top/right/bottom/left:;

6.padding设置方法：

padding:30px; 四周

padding:30px 20px; 上下左右

padding:30px 20px 10px; 上左右下

padding:30px 20px 40px 10px; 上右下左

7.padding不能设置负值

8.padding不会对背景图造成影响

9.如果一个盒子没有设置固定的宽和高，添加padding是不用减的

　　margin的用法：

1.margin长在元素之外的

2.margin控制同级元素与元素之间的位置关系

3.margin不会对盒子本身的大小宽高造成影响

4.给单一方向设置margin值：

margin-top/right/bottom/left:;

5.margin设置方法：

margin:30px; 四周

margin:30px 20px; 上下左右

margin:30px 20px 10px; 上左右下

margin:30px 20px 40px 10px; 上右下左

6.margin可以设置负值

7.margin常出现的bug：

a:当父元素和子元素都没有设置浮动的情况下，

如果给第一个子元素添加margin-top，

会错误的把margin-top加在父元素

b：上下相邻两个元素之间的margin值，不会叠加，按照最大值去设置

8.margin: 0 auto; 让当前元素在父元素中左右居中

在网页布局中经常会混淆margin和padding的用法，只要记住：

margin用在同级，padding用在父子级

　　border的用法：

border-width:1px;

border-style:solid;

border-color:red;

　　　　 border:1px solid red;（复合式/简写写法）

1.常用线条类型：

solid（实心） dashed（虚线）

dotted（点状线） double（双线）none（无）

2.如何给单一方向添加去除边框

border-left/right/top/bottom:1px solid red;

border-left:none; 去除边框

3.border的其他设置：

border-width:1px 2px 3px 4px;

border-style:solid dashed;

border-color:red blue green;

这三个属性每个最多能接收4个属性值

1个属性值：四周

2个属性值：四周左右

3个属性值：四周左右下

4个属性值：上右下左

三：盒子大小计算：

　　　　元素的总宽度：width + padding + border + margin

　　　　元素的总高度：height + padding + border + margin

综上就和盒子模型的全部内容了，在网页中快捷键F12可以清晰的看见盒子的结构

巴特西