2017年总结的前端文章——CSS盒模型详解

CSS的盒模型是CSS的基础,同时也是难点,这个问题经常在面试中会被问到,属于经典问题了。很多博客里讲得也很模糊不清,于是,我在这里重新整理一下。
可以认为每个html标签都是一个方块,然后这个方块又包着几个小方块,如同盒子一层层的包裹着,这就是所谓的盒模型。

盒模型分为IE盒模型和W3C标准盒模型。

IE盒模型和W3C标准盒模型的区别是什么?

1. W3C 标准盒模型:

属性width,height只包含内容content,不包含border和padding。

2. IE 盒模型:

属性width,height包含border和padding,指的是content+padding+border。

在ie8+浏览器中使用哪个盒模型可以由box-sizing(CSS新增的属性)控制,默认值为content-box,即标准盒模型;如果将box-sizing设为border-box则用的是IE盒模型。如果在ie6,7,8中DOCTYPE缺失会触发IE模式。在当前W3C标准中盒模型是可以通过box-sizing自由的进行切换的。

content-box(标准盒模型)

width = 内容的宽度

height = 内容的高度

border-box(IE盒模型)

width = border + padding + 内容的宽度

height = border + padding + 内容的高度

谷歌浏览器,按下F12,然后把右边栏的滚动条拉到最下面你就会看到一个东西:

通过代码来对其进行理解,更直观,如下
.box{
        width:200px;
        height:200px;
        background-color:pink;
}
此时,盒子大小就是content的大小。
.box{
        width:200px;
        height:200px;
        background-color:pink;
        padding:20px;
}
此时,盒子的长宽变成了240x240,显然,padding是能够改变盒子的大小的,这时盒子大小就等于content+padding。
.box{
        width:200px;
        height:200px;
        background-color:pink;
        padding:20px;
        border:10px solid black;
}
此时,盒子的长宽变成了260x260,所以这时盒子大小就等于content+padding+border。但是盒子的大小并未发生变化。

所以说,盒子的大小为content+padding+border即内容的(width)+内边距的再加上边框,而不加上margin。很多时候,我们会错误地把margin算入,若那样的话,上面这种情形盒子的大小应该是260x270,但实际情况并不是这样的。

css的盒模型由content(内容)、padding(内边距)、border(边框)、margin(外边距)组成。但盒子的大小由content+padding+border这几部分决定,把margin算进去的那是盒子占据的位置,而不是盒子的大小!

我们可以试着给上面的粉色方块设置box-sizing属性为border-box发现,会发现:无论我们怎么改border和padding盒子大小始终是定义的width和height。如下
.box{
        width:200px;
        height:200px;
        background-color:pink;
        box-sizing:border-box;
        padding:20px;
}

我们在编写页面代码时应尽量使用标准的W3C模型(需在页面中声明DOCTYPE类型),这样可以避免多个浏览器对同一页面的不兼容。

因为若不声明DOCTYPE类型,IE浏览器会将盒子模型解释为IE盒子模型,FireFox等会将其解释为W3C盒子模型;若在页面中声明了DOCTYPE类型,所有的浏览器都会把盒模型解释为W3C盒模型。

作者:哆来咪er
链接:https://juejin.im/post/59ef72f5f265da4320026f76
来源:掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

原文地址:https://www.cnblogs.com/QianBoy/p/8150694.html

时间: 2024-10-05 08:16:28

2017年总结的前端文章——CSS盒模型详解的相关文章

css盒模型详解

盒模型是css布局的基石,它规定了网页元素如何显示以及元素间相互关系. css定义所有的元素都可以拥有像盒子一样的外形和平面空间. 即都包含内容区.补白(填充).边框.边界(外边距)这就是盒模型. 换句话说,盒模型就如同一个房子,除了内部的货物以外,内部的其他空间就相当于接下来要介绍的padding属性: 房子的墙壁就相对于border属性: 房屋院子就相当于margin属性: 房屋占地面积=内部货物+内部其他空间+墙壁宽度+院子面积. 综上所述,盒模型的总大小=内部元素+padding空间+b

前端之CSS盒模型介绍

css盒模型 css盒模型是css的基石,盒模型由content(主体内容),padding(补白,填充),border(边框),margin(外间距); 1.content: width:数值+单位; 主体内容的宽度 height:数值+单位; 主体内容的高度 2.padding(补白或填充): (a)padding:10px; 设置一个值,代表上,下,左,右均为10px (b)padding:20px 10px; 设置两个值,代表上下为20px,左右为10px (c)padding:20px

前端之CSS盒模型

一:基础选择器 * (统配选择器):HTML,body,body下用于显示的标签 div (标签选择器):该标签名对应的所有该标签 . (class选择器)(eg: .div => class="div"):类名为div的所有标签 # (id 选择器)(eg:#div => id="div"):id 名为div的唯一标签 <!DOCTYPE html> <html> <head> <meta charset=&q

盒模型详解

(1)未加任何修饰的盒模型 1 <template> 2 <div> 3 <div class="top">上列</div> 4 <div class="bottom">下列</div> 5 </div> 6 </template> 7 8 <script> 9 export default { 10 name: 'Home' 11 } 12 </scr

2017年总结的前端文章——CSS高级技巧汇总

1. 页面顶部阴影 body:before{ content: ""; position: fixed; top:-10px; left: 0; width: 100%; height: 10px; box-shadow: 0px 0px 10px rgba(0,0,0,.8); z-index: 100; } 2. 给 body 添加行高 你不需要分别添加 line-height 到每个p,h标记等.只要添加到 body 即可: body { line-height: 1; } li

CSS 选择器【详解】

转自:http://www.cnblogs.com/polk6/archive/2013/07/19/3142142.html CSS 选择器及各样式引用方式介绍 一个好的界面,是一个Web吸引人们最大的卖点. Css :层叠样式表 (Cascading Style Sheets),定义了如何显示HTML元素. 1.选择器的分类 语法结构: 1.1 Id选择器 1.1.1 格式 #id :#+元素的id:id是区分大小写. 1.1.2 示例 #title1 {background-color:B

大前端学习笔记整理【一】CSS盒模型与基于盒模型的6种元素居中方案

概览 CSS盒模型,规定了元素框来处理元素的 内容.内边距.边框和外边距的方式 元素部分是指内容部分,也是最实际的内容,包围内容的称之为内边距,内边距外围是边框,边框外围就是外边距:且外边距是透明的,所以并不会阻挡其后的元素 * { margin: 0; padding: 0; } 这是在CSS中最常见的初始化CSS的代码,用于覆盖浏览器的默认样式 浏览器兼容性 大多数浏览器都会按照上面的图示来呈现内容.然而 IE 5 和 6 的呈现却是不正确的.根据 W3C 的规范,元素内容占据的空间是由 w

从零开始学习前端开发 — 3、CSS盒模型

★  盒子模型 (标准的盒模型) css盒模型的概念及组成 css盒模型是css的基石,每个html标签都可以看作是一个盒模型. css盒模型是由内容(content),补白或填充(padding),边框(border),外边距(margin)四部分组成(具体如图所示) 1.内容(content) 宽度 width:数值+单位; 高度 height:数值+单位; eg: .box{width:200px;height:100px;} 2.补白或填充 (设置内容和边框之间的距离) 语法:paddi

HTML和CSS前端教程05-CSS盒模型

目录 1. CSS盒模型 1.1 元素的尺寸 1.2. 元素内边距 padding 1.3. 元素外边距 margin 1.4. 处理溢出overflow 1.5. 元素的可见性Visibility 2. CSS元素的盒类型 2.1. 块级元素(区块) 2.2. 行内元素 2.3. 行内-块元素 2.4. 盒类型元素转换dispaly 3. CSS盒元素的浮动float 1. CSS盒模型 元素的尺寸 1.1 元素的尺寸 属性 值 说明 width auto.长度值或百分比 元素的宽度 heig