CSS:盒模型

盒模型

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

盒子类型:

  1. 行盒,display等于inline的元素
  2. 块盒,display等于block的元素

行盒在页面中不换行、块盒独占一行

display默认值为inline

浏览器默认样式表设置的块盒:容器元素、h1~h6、p

常见的行盒:span、a、img、video、audio

盒子的组成部分

无论是行盒、还是块盒,都由下面几个部分组成,从内到外分别是:

  1. 内容 content

width、height,设置的是盒子内容的宽高

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

  1. 填充(内边距) padding

盒子边框到盒子内容的距离

padding-left、padding-right、padding-top、padding-bottom

padding: 简写属性

padding: 上 右 下 左

填充区+内容区 = 填充盒 padding-box

  1. 边框 border

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

边框样式:border-style
边框宽度:border-width
边框颜色:border-color

边框+填充区+内容区 = 边框盒 border-box

  1. 外边距 margin

边框到其他盒子的距离

margin-top、margin-left、margin-right、margin-bottom

速写属性margin

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值