css盒模型content-box和border-box

2024-06-02 03:46:23

1、简述

css盒模型分为两种，一种是ie老版本的怪异模式后来被css3接受，另一种是w3c的标准盒模型，我们在使用中可以根据业务需求来选择不同的盒模型。
我们可以在css样式中根据box-sizing来设置不同的盒模型。
下面来看具体的细节。

2、标准模式（content-box）

当box-sizing:content-box时，我们使用的是标准盒模型，这时候css定义的width宽度只包含元素的content宽度。
总宽度 = width + padding(左右) + border(左右)。
举个栗子：

.right {box-sizing:content-box;width:500px;height: 500px;padding:20px;border:50px solid #ccc;background: red;
}

此时元素right的总宽度为:
width(500px) + padding(20px * 2) + border(50px * 2) = 640px

3、怪异模式（border-box）

当box-sizing:border-box时，我们使用的是怪异模式盒模型，这时候css定义的width宽度会包含元素的content宽度+padding(左右)宽度 + border(左右)宽度。
总宽度 = width 。
举个栗子：

.right {box-sizing:border-box;width:500px;height: 500px;padding:20px;border:50px solid #ccc;background: red;
}

此时元素right的总宽度为:
width(500px) = 500px
因为在这里width的值已经包含了padding + border 的值了
也就是说 content + padding * 2 + border * 2 = width

4、注意事项

1、在主流现代浏览器解析时默认使用content-box来解析盒模型，也就是说我们只有在用到border-box时需要显式的写在css表中。
2、在计算padding和border时，经常是左右上下都有的，所以我们的padding和border经常要对它的数值乘以二来去计算。

css盒模型content-box和border-box相关推荐

html盒模型中border的写法,CSS盒模型--边框设置：border: 1px solid red(像素样式颜色 )，border-bottom:1px dotted #ccc...
盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...
CSS盒模型--边框设置：border: 1px solid red(像素样式颜色 )，border-bottom:1px dotted #ccc
盒模型--边框(一) 盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为div来设置边框粗细为2px.样式为实心的.颜色为红色的边框: div ...
html5 box sizing,CSS 盒模型与box-sizing
一.盒模型一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
css盒模型和元素绘制
转自:http://www.mysjtu.com/page/M0/S438/438952.html 一.什么是css盒模型? W3C组织就建议把所有网页上的对象都放在一个盒(box)中,设计师可以通过 ...
深入理解CSS盒模型 - 程序猿的程 - 博客园
深入理解CSS盒模型本文是学习中传思客在慕课网开的课程<前端跳槽面试必备技巧>的学习笔记.课程地址:https://coding.imooc.com/class/evaluation/1 ...
CSS 盒模型与box-sizing
一.盒模型一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
html盒子模型子元素怎么水平占满父元素_前端面试常考问题之css盒模型
一.题目:谈一谈你对CSS盒模型的认识专业的面试,一定会问 CSS 盒模型.对于这个题目,我们要回答一下几个方面: (1)基本概念:content.padding.margin. (2)标准盒模型. ...
Css盒模型有哪几部分，标准盒模型和IE盒模型有哪些区别
首先介绍Css的盒模型也就是标准盒模型(BOX Model) 包含了内容(content) 内边距(padding) 边框(border) 外边框(margin) 这是大家经常用到的,也是现在的标准 ...
从零开始学前端 - 7. CSS盒模型 margin和padding详解
作者: 她不美却常驻我心博客地址: https://blog.csdn.net/qq_39506551 微信公众号:老王的前端分享每篇文章纯属个人经验观点,如有错误疏漏欢迎指正.转载请附带作者信息 ...
尖刀出鞘的display常用属性及css盒模型深入研究
一:diplay:inline-block 含义:指元素创建了一个行级的块级元素,该元素内部(内容)被格式化成一个块级元素,同时元素本身则被格式化成一个行内元素.更简单的说就是说inline-bloc ...

最新文章

热门文章