2020-03-22

大前端基础之Css盒模型

在讲css盒模型之前，我们先讲讲Css概念，其简单点说就是美化网站用的，是层叠样式表的简写，是一种表现层的布局语言。而打个比方，如果说人的骨架是HTML5构造出来的，而我们穿的衣服以及化妆等用来装饰人体的是Css美化出来的，而我们人的动作以及与别人交互的行为等是JS实现的。

Css盒模型简单概述：

就是上述所说的“人体”骨架的一种，也可以说是我们人体骨架中的黄金比例。页面上的所有元素，包括文本、图像、超级链接、div块等，都可以被看作盒子，由盒子将页面中的元素包含在一个矩形区域内，这个矩形区域则称为“盒模型”。

Css盒模型的分类：

盒模型可以分成两类，第一为标准w3c盒模型，第二为ie盒模型，也称为怪异盒模型，其示意图为下：

标准w3c盒模型

IE怪异盒模型

两种盒模型不同的是，怪异盒模型宽高包括了内容区，左右内边距和左右边框大小，而标准盒模型却没有。两者也可以用box-sizing属性转换，其在content-box时为标准盒模型，也是默认情况，其在border-box时为怪异盒模型。

Css盒模型的组成：

两种盒子模型如上图所示，从里到外由content（内容），padding（内边距），border（边框），margin（外边距）4部分组成。标准盒子的高宽严格遵循w3c规则。

组成成分说明：

1:Margin(外边距)和padding（内边距）

margin和padding两者的写法大致相似，常见的单位有px、em、%等，但是外边框margin完全是透明的，我们只能设置它的边距，其值可以为正负值，而内边距padding不是完全透明的，还可以设置背景颜色和图片，其值不能为负值。其两者包含了上（top）右（right）下（bottom）左（left）四条边，写法如上边距：margin-top、padding-bottom等。开发者也有四者一起写的如margin：1px 2px 3px 4px；表示盒子顺时针上右下左，中间用空格隔开。三者一起写的如margin：1px 2px 3px；表示盒子上边距、左右边距、下边距，中间用空格隔开。两者一起写的如margin：1px 2px；表示盒子上下边框，左右边框，中间也要用空格隔开，写一个的时候表示四条边都是此值。而padding的写法和margin的写法一致。

注意：当父子元素不存在浮动时，如果子元素设置了margin值，子元素显示不正常。

如例图：子元素黑色盒子的margin-top值显示在了父元素红色和盒子的外面！

2：border（边框）

最基本的，border边框属性也和边距属性一样可以分别对每一条边进行设置：border-top等，而值得注意的是，当border的属性色值不明确的时候如border：1px solid；其边框颜色和当前元素的颜色color值一样。而没有单独给出border的属性值时，border值为：宽度 样式 颜色；中间用空格隔开。

而除了单独对每一条边框进行设置，border属性还可以对border-width（边框宽度，常见单位如px、em、%），border-style（边框样式），border-color（边框颜色）进行设置。其中边框样式属性值和效果图大致如下图所示。

除此之外，border属性还可以连着写如border-top-color表示上边框颜色、border-left-style表示左边框样式等。

拓展：

（1）border-radius表示边界半径，也就是圆角

（2）border-image表示图形边界，是CSS3新增的内容，而且当前也只有一些新主流的浏览器才能实现。需要借助background-clip（边界）属性。

（3）Box-shadow表示盒子阴影，也是CSS3新增内容，阴影的轮廓和box边界的border的轮廓一样。

其有感兴趣的同行师兄弟也可在评论区留下你宝贵的建议，下期，我也会将我自己的一些看法发表。