CSS盒模型简单介绍

一、概念

1.盒模型:就是把HTML页面中的元素看作是以一个矩形的盒子,也就是一个装东西的容器。

2.盒模型包含四部分:内容(content)、内边距也称之为补白和填充区(padding)边框(border)外边距(margin

二、盒模型的组成

1)padding:是盒子边框和内容之间的填充区。

作用是用来控制父元素于子元素之间的距离,或者用来控制容器与内容之间的间距。

设置方式:

padding-left:左内边距
padding-right:右内边距
padding-top:上内边距
padding-bottom:下内边距
padding:复合写法

2)margin:是元素即盒子边框以外的区域,margin是占位置的。

作用是用来控制同辈元素的间距或者位置关系。

设置方式:

margin-left:左外边距
margin-right:右外边距
margin-top:上外边距
margin-bottom:下外边距
margin:复合写法

3)border:边框是加在元素大小之外的,即边框是占位置的。

4)内容:

内容区的宽 ​ width
内容区的高 ​ height

三、盒子的计算大小

1.元素的总宽度:为内容的宽度+padding-right值+padding-left值+border-right值+border-left值+margin-right值+margin-left值

2.元素的总高度:为内容的高度+padding-top值+padding-bottom值+border-top值+border-bottom值+margin-top值+margin-bottom值

  • 0
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值