CSS盒子模型

1、盒子模型的介绍

  • 盒子的概念:
    • 页面中的每一个标签,都可看做是一个“盒子”,通过盒子的视角更方便的进行布局
    • 浏览器在渲染(显示)网页时,会将网页中的元素看做是一个矩形区域,我们也形象的称之为盒子
  • 盒子模型
    • CSS中规定每个盒子分别由:内容区域(content)、内边距区域(padding)、边框区域(border)、外边框区域(margin),这就是盒子模型

2、内容区域的宽度和高度

  • 作用:利用 widthheight 属性默认设置是盒子内容区域的大小
  • 属性:width / height
  • 常见取值:数字 + px

3、边框(boder) - 连写形式

  • 属性名:border
  • 属性值:单个取值的连写,取值之间以空格隔开
    • 如:border : 10px solid red;
  • 快捷键:bd + tab
  • 边框 - 单方向设置
    • 场景:只给盒子的某个方向单独设置边框
    • 属性名:border - 方位名词
    • 属性值:连写的取值

4、内边距(padding)

  • 属性名:padding
  • 属性值:取值之间以空格隔开
    • 如:boder : 10px solid red;

5、CSS3盒模型(自动内减)

  • 操作:给盒子设置属性box-sizing : border-box ; 即可
  • 优点:浏览器会自动计算多余大小,自动在内容中减去

6、清除默认内外边距

  • 场景:浏览器会默认给部分标签设置默认的margin和padding,但一般在项目开发前需要先清除这些标签默认的margin和padding,后续自己设置
    • 比如:body标签默认有margin : 8px
    • 比如:p标签默认有上下的margin
    • 比如:ul标签默认有上下的margin和padding-left
    • ......
  • 解决方法:
* {
    margin: 0;
    padding: 0;
}

7、外边距折叠现象

7.1、合并现象

  • 场景:垂直布局块级元素,上下的margin会合并
  • 结果:最终两者距离为margin的最大值
  • 解决方法:尽量避免就好
    • 只给其中一个盒子设置margin即可 

7.2、塌陷现象

  • 场景:互相嵌套块级元素,子元素的 margin-top 会作用在父元素上
  • 结果:导致父元素一起往下移动
  • 解决方法:
    • 给父元素设置border-top 或者 padding-top (分割父子元素的margin-top)
    • 给父元素设置overflow : hidden
    • 转换成行内块元素
    • 设置浮动

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值