聊一聊CSS盒模型

这篇文章将会比较系统的讲解CSS盒模型

干货预警……

1.1引语:什么是盒模型

盒模型是CSS中的一种基础设计模式,定义了Web元素是如何看做盒子解析的,每一个元素都是一个盒模型,包括Html和body标签元素.

1.2 盒模型是如何解析的

我们先来看一个例子

两种标准对比图如下图所示:

先来看一下在W3C标准浏览器中各个参数

再看一下IE6以下浏览器的参数

对比可见:IE6以下版本浏览器的宽度包含了元素的padding和border值

IE6以下的浏览器可以说是老古董了,不排除有些收藏爱好者在使用,当然浏览器收藏家可以说是非常罕见了,所以目前大多数浏览器还是使用W3C标准的盒模型。

但是!!form表单的部分元素还在使用传统的盒模型,比如input中的submit,reset等元素……

作为一名合格的程序猿,我们当然是希望一切尽在掌握之中!那么……如何才能做盒模型的主宰呢?

1.3 盒模型的主宰:box-sizing

这个属性主要有三个参数

content-box:W3C 标准模型

border-box:(IE6以下版本和IE6~IE7怪异模式)传统标准

inherit:继承父元素的盒模型模式

1.4 边距重叠问题

额……不太喜欢写长文,那么下一篇见!下一篇,我们一起来认识一下BFC!

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20180903G0PEPE00?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券