box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)
盒子类型:
1.行盒,display属性=inline的元素,不换行(默认值)
2.块盒,display属性=block的元素,换行
浏览器默认样式表设置的块盒:容器元素、h1~h6、p
常见的行盒:span、a、img、video、audio
盒子的组成部分
无论是行盒还是块盒,都有下面4个部分组成,从内到外分别是:
①内容区域 content
内容盒:content-box
width height
②填充区 padding
填充盒:padding-box(内容区+填充区)
padding-left padding-right padding-top padding-bottom 简写 padding:上 右 下 左(顺时针)
③边框 border
边框盒:border-box(内容区+填充区+边框)
边框样式border-style 边框宽度border-width(简写) 边框颜色border-color(简写)
border-top-width border-right-width border-bottom-width border-left-width
④外边距 margin
边框到其他盒子的距离
margin-top margin-right margin-bottom margin-left
简写margin