CSS盒子模型基础解析

1.简单理解盒子模型

        如图：

外边距：与其他盒子的距离。

内边距：自身内容与边框的距离。

2.浏览器中的盒子模型

        在浏览器中将该设置打开按F12进入

左下选择标签，右下查看对应标签的盒子模型。

3.margin、padding

如该标签：

       

设置外边距为30px；

        

效果：

如果我们只想设定一边的外边距呢例如只设定左边：margin-left: 30px;

或者：margin: 0 0 0 30px; 四个值分别是上右下左（顺时针）的外边距。

也有三个值、两个值的，例如margin：0 0 30px; 这里就自己去实践看看效果吧。

4.内容大小 width、height、max-width、min-width

width: 120px;
height: 120px;

效果：如上图效果一样内容区为120px*120px;

width的属性值可以为百分比，例：width: 100%;

其意思是宽度为父标签宽度的100%;

max-width: 顾名思义就是最大宽度，及父标签的100%。

min-width: 最小宽度，根据需求自设，及当用户缩放浏览器界面时限定最小宽度可以保证整个模型不会混乱。

盒子实际宽度=margin+padding+border+width(自身宽度)；

height与width同理。

5.边框border

border-style：

none 无边框

hidden 有但是隐藏

dotted  边框为点线

dashed  边框为虚线

solid  边框为单实线

double 边框为双实线

同样万一我们只需要一边有边框，例如：网页下面的蓝色横线

同上面的margin一样border也可以只定义一边有边框：

例：

.text{
    width: 120px;
    border-bottom-style: solid;
    border-width: 4px;
    text-align: center;
}

效果：

同理border也可以写四个值来表示对应边框样式：

.text{
    width: 120px;
    border-style: none none solid none;
    border-width: 4px;
    text-align: center;
}

与上面效果相同。

同理border-width也可以这样写四个边的边框厚度。

总结：盒子模型原理其实非常简单，实现同一样式可以有多种方式，但是当盒子多起来之后盒子之间的位置，父子、兄弟关系及百分比用的谁的百分比。建议划重点。。。。。。。。