css box-sizing

原文来源: 老姜博客 css第24讲之css box-sizing

box-sizing:用来控制padding和border是否包含在width和height之中.

支持两种取值:

content-box
border-box

默认情况下，element的最终长度和宽度计算公式如下:

width + padding + border = element最终的宽度
height + padding + border = element最终的高度

所以，当你设置width和height，其实最终的大小是大于你设置的(主要是padding和margin的值影响)

注意不要把margin混在一起，margin不参与计算

在线试玩

通过上面的例子可以看到，同样的width和height，最终的效果还是不一样的，所以这个设计工作带来一定的困难.

为了保障width和height的一致性，可以通过box-sizing属性来改变对应的计算方式.

box-sizing设置为border-box可以控制实际的宽度和高度为指定的设置，主要通过向内挤压给content的空间.

通常页面css都会进行全局设置:

* {box-sizing: border-box;
}

在线试玩

css box-sizing相关推荐

css的box模型_拆箱CSS Box模型的基础
css的box模型 by Bryan Smith 通过布莱恩史密斯拆箱CSS Box模型的基础 (Unboxing the basics of the CSS Box Model) Understa ...
html5调盒子边框大小,CSS3 - 盒子大小(CSS3 - Box Sizing)
CSS3 - 盒子大小(CSS3 - Box Sizing) Box大小调整属性用于更改元素的高度和宽度. 从css2开始,box属性的工作方式如下所示 -width + padding + bord ...
css里box是什么文件,CSS Box盒模型的详细解说
CSS盒子模型在于你做css之后每个元素都由一个包围该元素的矩形框定义.了解框模型的工作原理是理解CSS并更好地控制布局和演示的关键.话不多说,让我们直接讨论一下CSS盒子模型是什么,一个盒子如何影响 ...
洛阳郊区1980年地图_在无聊的郊区居住中解释CSS Box模型
洛阳郊区1980年地图 by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) 如果您去过一个普通的郊区社区,那么您可以了解CSS Box Model. (If you ...
CSS Box Shadow Bottom Only [复制]
本文翻译自:CSS Box Shadow Bottom Only [duplicate] This question already has an answer here: 这个问题在这里已有答案: ...
html5 box sizing,CSS 盒模型与box-sizing
一.盒模型一个web页面由许多html元素组成,而每一个html元素都可以表示为一个矩形的盒子,CSS盒模型正是描述这些矩形盒子的存在. MDN的描述: When laying out a docu ...
CSS BOX类型和display属性
BOX类型会影响呈现和布局, 基本的BOX类型有两种: 块级(block-level)和行内级(inline-level). 事实上还有其他类型的BOX(如table, list-item等), 不过 ...
CSS Box Model 盒子模型
1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...
css box 等高布局,css实现等高布局有哪些方式
什么是等高布局? 指在同一个父容器中,子元素高度相等的布局. 从等高布局实现方式来说分为两类: 1.伪等高子元素高度差依然存在,只是视觉上给人感觉就是等高. 2.真等高子元素高度相等. 伪等高实现 ...
【CSS 弹性盒子布局 (Flexible Box Layout)】
CSS 弹性盒子布局 Flexible Box Layout CSS 弹性盒子布局 (Flexible Box Layout) 1. 弹性盒子布局的基本概念和术语 2. flex 属性: 设置伸缩 ...

css box-sizing

css box-sizing相关推荐

最新文章

热门文章