盒子模型
发布时间：2024-08-11 13:57 作者：一友画
盒子模型特性
4个组成部分：宽高、内间距、边框、外边距。
-
1.内边距padding
-
a)padding-top 上内边距；
padding-right 右内边距；
padding-bottom 下内边距；
padding-left 左内边距；
-
b)padding: 10px; 表示上下左右方向
-
c)padding: 10px 20px; 表示上下方向、左右方向
-
d)padding: 10px 20px 30px; 表示上方向、左右方向、下方向
-
e)padding: 10px 20px 30px 40px; 表示上方向、右方向、下方向、左方向
-
2.外边距margin
-
a)margin-top 上外边距；
margin-right 右外边距；
margin-bottom 下外边距；
margin-left 左外边距；
-
b)margin: 10px; 表示上下左右方向
-
c)margin: 10px 20px; 表示上下方向、左右方向
-
d)margin: 10px 20px 30px; 表示上方向、左右方向、下方向
-
e)margin: 10px 20px 30px 40px; 表示上方向、右方向、下方向、左方向
-
f)margin: 0 auto; 表示让盒子居中
-
3.边框border
-
a)border-color: red; 表示边框的颜色
-
b)border-width: 2px; 表示边框的宽度
-
c)border-style: solid; 表示边框的类型
border-style: none; 没有边框；
border-style: solid; 定义实线边框；
border-style: dotted; 定义点状边框；
border-style: dashed; 定义虚线边框；
border-style: double; 定义双线边框；
border-style: groove; 定义3D凹槽边框；
border-style: ridge; 定义3D垄状边框；
border-style: inset; 定义3D inset边框；
border-style: outset; 定义3D outset边框；
总结text-align:center;和magin:0 auto;
|
|
margin:0 auto; |
text-align:center; |
|
针对的对象 |
盒子--块元素（标签本身） |
标签内部的行元素 |
|
居中的范围 |
在父盒子中居中 |
自己内部 |
以上内容，在整理时难免有疏漏错误之处，如有发现，可以通过顶部的“联系站长”提出反馈，感谢您的支持！