CSS盒子模型详解-优快云博客

定义：

margin：外边距，围绕在元素边框的空白区，在元素外创建额外的空白。

border：边框，围绕元素内容和内边距的一条或多条线。

padding：内边距，在边框和内容区之间。

属性：

margin（外边距也叫作空白）：

接受任何长度单位，百分数值和负值，还可设置为auto。

margin

margin-top

margin-right

margin-bottom

margin-left

top-right-bottom-left顺序

margin：0 auto/*布局居中显示*/

border（边框）：

边框有3个方面：宽度width 样式style 颜色color（可以不按顺序）

如：border-top-color

属性同margin，top-right-bottom-left顺序

如果想要边框出现，就必须声明样式

什么是边框？

边框就是环绕在标签宽度和高度周围的线条。
2.边框属性的格式
2.1连写（同时设置四条边的边框）
border:边框的宽度边框的样式边框i的颜色；
快捷键：bd+ border:1px solid #000
（solid表示实线，dashed表示虚线）
注意点：
1.连写格式中颜色属性可以省略，省略之后默认黑色。
2.连写格式中样式属性不能省略，省略之后看不到边框。
3.连写格式中宽度可以省略，省略之后还是可以看到边框。
2.2连写（分别设置四条边的边框）
border-top:边框的宽度边框的样式边框的颜色;
border-right:边框的宽度边框的样式边框的颜色;
border-bottom:边框的宽度边框的样式边框的颜色;
border-left:边框的宽度边框的样式边框的颜色;
快捷键：
bt+br+bb+bl+

2.3连写（按照要素分别设置四条边的边框）。
border-width：上右下左；
border-style：上右下左；
border-color：上右下左；
注意点：
1.这三个属性的取值是按照顺时针来赋值，也就是按照上右下左来赋值，而不是按照日常生活中的上下左右。
2.这三个属性的取值省略时的规律：
2.1上右下左>上右下>左边的取值和右边的一样。
2.2上右下左>上右 >左边的取值和右边的一样，下边的取值和上边一样。
2.3上右下左>上 >右下左边取值和上边一样。
3.非连写（方向+要素）
border-left-width：20px;
border-left-style：double;
border-left-color：pink

padding（内边距也叫作填充）：

接受长度值，百分数值但不接受负值。

属性同margin，top-right-bottom-left顺序

变态盒模型：

box-sizing：border-box;

（以特定的方式定义匹配某个区域的特定元素）

盒子弧度：

border-radius：10px;

盒子阴影：

box-shadow：10px 10px ;

x方向偏移（必需） y方向偏移（必需）

其他属性可选：