码迷,mamicode.com
首页 > Web开发 > 详细

CSS学习(8)盒模型

时间:2019-09-21 21:46:45      阅读:122      评论:0      收藏:0      [点我收藏+]

标签:默认值   style   otto   简写   isp   block   子类   填充   图片   

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

标签:默认值   style   otto   简写   isp   block   子类   填充   图片   

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

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!