首页 > Web开发 > 详细

CSS学习(8)盒模型

时间:2019-09-21 20:17:35      阅读:100      评论:0      收藏:0      [点我收藏+]

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)盒模型

原文:https://www.cnblogs.com/1016391912pm/p/11564321.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!