CSS学习(8)盒模型

时间:2021-09-01 05:47:02

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

CSS学习(8)盒模型