HTML+CSS+JavaScript复习笔记持更（九）——CSS3常用属性之盒模型

盒模型

盒模型是CSS中最最重要的概念之一了，这个概念比较抽象，它规定了元素框处理元素内容、外边距、内边距、边框的方式。

内、外边距的属性

内边距：padding
外边距：margin
边框：border

简单的说，把页面的每一个元素，想象成一个盒子，最中心最里面的就是元素内容，元素内容被内边距包裹起来，而边框又包含了内边距，最后最外面是外边距

所以从外到内的顺序是：外边距、边框、内边距、元素内容

在使用的时候：
外边距不在边框内，主要用于元素整体位置调整
内边距在边框内，主要用于元素在边框内的位置调整

tip：内边距的空间也会受到元素的属性影响，比如背景颜色

语法格式：

效果样式：

在这里，可能不太容易看的出来，我们可以调出控制台再看，就比较容易：

看背景颜色，我们的内边距也算在背景颜色里了，也就是说内边距也算是元素主体内容的一部分。

在margin和padding中都是一样属性赋值：
如果赋值四个数字（带单位，空格间隔），那就是依次对（上、右、下、左）四个方向设置
如果赋值三个数字（带单位，空格间隔），那就是依次对（上、左右、下）三个方向设置
如果赋值两个数字（带单位，空格间隔），那就是依次对（上下、左右）两个方向设置
如果赋值一个数字（带单位），那就是同时对（上、右、下、左）四个方向设置

当然，也可以单独设置某个方向的margin或者padding
语法举例：margin-top:;、padding-right:;

边框的属性

边框，主要设置的就是边框宽度、边框颜色、边框样式、圆角。

当然，对于我这种懒人来说，最常用的还是简写，直接写border
，就可以设置宽度、样式、颜色，简单便捷。

语法用例：
圆角：border-radius: 50%;
边框宽度：border-width: 20px;
边框颜色：border-color: red;
边框样式：border-style: solid;

常用简写：border：1px solid red

注：圆角的50%，效果就是一个圆