HTML盒子模型

盒子模型

主要分为网页内容（content），外边距（margin），边框（border），内边距（padding）四个部分


边框border

属性	分支属性
border-color	border-top-color
	border-right-color
	border-bottom-color
	border-left-color
	border-color 属性设置顺序为上-右-下-左 / 上下-左右 / 上下左右
border-width	border-top-width
	border-right-width
	border-bottom-width
	border-left-width
	border-width 属性设置顺序为上-右-下-左 / 上下-左右 / 上下左右
border-style 值：实线(solid) dashed(虚线) dotted(点线) double(双实线)	border-top-style
	border-right-style
	border-bottom-style
	border-left-style
	border-style 属性设置顺序为上-右-下-左 / 上下-左右 / 上下左右
border-radius	用来设置边框角的圆润程度 可用百分数或px来设置，数值越大圆的部分越大

设置外边框

border:1px solid red;

外边距margin

属性	分支属性
margin	margin-top
	margin-right
	margin-bottom
	margin-left
	margin 属性设置顺序为上-右-下-左 / 上下-左右 / 上下左右

盒子居中显示

margin:0px auto;
使用条件：1.本元素需为块级元素；2.本元素需设置宽高。

内边距padding

属性	分支属性
padding	padding-top
	padding-right
	padding-bottom
	padding-left
	padding 属性设置顺序为上-右-下-左 / 上下-左右 / 上下左右

盒子尺寸模型

属性	值	说明
box-sizing	content-box	表示中心内容尺寸不变
box-sizing	border-box	表示边框尺寸不变

---

今天的分享就是这些啦，欢迎正在学习web的伙伴们“挑毛病”“提意见”，当然了也欢迎各种表扬奥～（比心，比心）