聊一聊传统css盒子模型和css3新增的盒子模型

 时间:2026-04-23 10:07:42

1、css盒子模型包括width\height\padding\border\margin这么些内容

聊一聊传统css盒子模型和css3新增的盒子模型

2、传统css盒子模型的width和height不是盒子的宽高而是盒子中内容的宽高!!!

聊一聊传统css盒子模型和css3新增的盒子模型

3、那么,盒子的宽高到底啥啥呢?

盒子的宽度=width+padding(left/right)+border(left/right);

盒子的高度=height+padding(top/bottom)+border(top+bottom);

聊一聊传统css盒子模型和css3新增的盒子模型

4、css3新增的盒子模型:

当元素设置了 box-sizing:border-box;这个样式,例如下面一小段代码:

.ele{

    box-sizing:border-box;

}

width和height就不仅仅是内容的宽高,而是代表着整个盒子的宽高,这里已经包含了padding和border。

聊一聊传统css盒子模型和css3新增的盒子模型

5、所以说,以后修改padding或者border的值,盒子大小是不变的,变化的是盒子中的内容宽高~

聊一聊传统css盒子模型和css3新增的盒子模型

6、说了这么多,童鞋们了解了吗?了解了吗?了解了吗?

聊一聊传统css盒子模型和css3新增的盒子模型

  • Ubuntu17.10安装Wine3.0
  • 如何使目标客户成为有效客户
  • 如何关闭搜狗输入法的简繁切换
  • 下载网站时目标被屏蔽?试试这样做
  • 哔哩哔哩word高手教程
  • 热门搜索
    电子商务专业怎么样 鱼的做法大全家常 自粘墙纸怎么贴 鸡刨豆腐的家常做法 炸丸子的家常做法 手机怎么清理 天龙八部视角怎么调远 挖掘机视频表演大全 视力矫正方法有哪些 亲戚借钱不还怎么办