CSS盒模型-内容盒-填充盒-边框盒

盒模型

box:盒子,每个元素在页面中都会生成一个矩形区域(盒子)

盒子类型:
1.行盒,display属性值设置为inline的元素
2.块盒,display等于block的元素

行盒在页面中不换行,块盒独占一行
display默认值为inline,dispaly不存在继承

浏览器默认样式表设置的块盒:容器元素(div、header、article、section、aside、footer),文字元素(h1~h6),p元素
常见的行盒:span、a、img、video、audio(和内容相关的,默认基本都是行盒)
无论是行盒还是块盒,都由下面几个部分组成,从内到外分别是:

1.内容 content

内容部分通常叫做整个盒子的内容盒

2.填充 padding

padding-left、padding-right、padding-top、padding-bottom
padding:属性简写 上右下左(顺时针)
填充区+内容区=填充盒 padding-box

3.边框 border

边框 = 边框宽度 + 边框宽度 + 边框颜色

border: 1px solid red

border一般简写,拆分开来包含下面几个属性名
边框宽度:border-width
边框样式:border-style
边框颜色:border-color
边框+填充区+内容区=边框盒 border-box

4.外边距 margin

边框到其他盒子的距离
margin-top、margin-right、margi-bottom、margin-left

如果您发现文章中有不妥之处请与我联系,我将感激不尽
转载著明:sayc.cc 菠萝吹雪的博客

评论

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now

×