sizebox模型下载_Beware of box model size (留心盒子模型大小)

文章为csslint中文版译文，点击原文可查看英文版，如遇到翻译错误或错别字啥的，请留言指出~ 译文内容不定期更新~ 返回目录

盒子模型是CSS当中最常误解的内容之一。"盒子模型 (Box model)"会参考一系列盒子属性来最终确定元素的显示。盒子的最里层为内容。内容被内边距包裹,内边距之外再由边框包裹。盒子最终的宽度也就由以上的属性相互影响,是不是有些小困惑。来,看下面的例子:

.mybox {

border: 1px solid black;

padding: 5px;

width: 100px;

}

新手可能会觉得拥有mybox类的元素宽度为100像素。但实际上呢,宽度是112像素,这是因为宽度最终由内容内边距边框相加而得。当开发人考虑到以上属性组合时,也会因为不同的想法行为产生错误。

通过将box-sizing属性值设置为border-box,可以使绝大多数游览器(现代游览器)遵循宽高是元素本身的大小,例子如下:

.mybox {

box-sizing: border-box;

border: 1px solid black;

padding: 5px;

width: 100px;

}

那么现在,这个拥有mybox类的元素,实际宽度就为100像素了,内边距与边框将占据其中的空间,剩下的88像素将是内容的宽度.

规则详情

规则 ID: box-model

此规则意在消除潜在的盒子模型大小问题。因此,规则将在以下情况出现警告:

1.width被与border,border-left,border-right,padding,padding-left,padding-right属性同时使用时

2.height被与border,border-top,border-bottom,padding,padding-top,padding-bottom属性同时使用时

如果box-sizing属性已指定,则假定你已非常清楚盒子模型的规则,以上的情况,此规则将不会出现警告。

以下的例子将会出现警告:

/* width and border */

.mybox {

border: 1px solid black;

width: 100px;

}

以下的例子将不会出现警告:

/* width and border with box-sizing */

.mybox {

box-sizing: border-box;

border: 1px solid black;

width: 100px;

}

/* width and border-top */

.mybox {

border-top: 1px solid black;

width: 100px;

}

/* height and border-top of none */

.mybox {

border-top: none;

height: 100px;

}

sizebox模型下载_Beware of box model size (留心盒子模型大小)相关推荐

用php做盒子模型,什么是CSS盒子模型？一文带你了解CSS盒子模型
本篇文章给大家带来的内容是关于什么是CSS盒子模型?一文带你了解CSS盒子模型,有一定的参考价值,有需要的朋友可以参考一下,希望对你有所帮助. 什么是CSS盒子模型网页设计中常听的属性名:内容(co ...
前端笔记（5）盒子模型，边框，内外边距，盒子模型布局，ps基本操作，列表样式，圆角边框，盒子阴影
css样式表/层叠样式表(3) (1)盒子模型 (2)盒子边框 (3)表格的细线边框 (4)内边距padding 内盒尺寸计算(元素实际大小) padding不会影响盒子大小的情况 (5)外边距mar ...
R语言SIR模型（Susceptible Infected Recovered Model）代码sir模型实例
最近我们被客户要求撰写关于SIR的研究报告,包括一些图形和统计输出. SIR模型定义 SIR模型是一种传播模型,是信息传播过程的抽象描述. SIR模型是传染病模型中最经典的模型,其中S表示易感者,I表 ...
html盒模型中border的写法,【前端】盒子模型的边框样式属性和应用技巧讲解
分割页面中不同的盒子,常常需要给元素设置边框效果.在CSS中边框属性包括边框样式属性(border-style).边框宽度属性(border-width).边框颜色属性(border-color).单 ...
CSS Box Model 盒子模型
1. 介绍 1.1 什么是 Box Model 在HTML中的每个element(元素)都可以看作一个矩形的盒子,矩形从内到外依次由元素的内容(content).内边距(padding).边框(bor ...
七天学会h5和css3之盒子模型内边距和外边距（27）
先来练习一个题目:做一个新浪体育文本页面.,可能你现在并不能很好的做出这个效果,但是学习了本节后,你将很快的做出这个页面,具体代码和效果如下: <!DOCTYPE html PUBLIC &qu ...
0基础快速入门CSS技术栈（5）—图解详细阐述说透CSS的盒子模型（超级重要）、圆角边框、盒子阴影及相关重要的笔试题——css的核心中的核心（附详细案例源码解析过程）2021.01.07更新
文章目录 1. 盒子模型(CSS重点) 1.1 看透网页布局的本质 1.2 盒子模型(Box Model) 1.3 盒子边框(border) 1.3.1 边框综合设置 1.3.2 example01 ...
CSS基础——盒子模型【学习笔记】
盒子模型(Box Model) 所谓盒子模型: 就是把HTML页面中的布局元素看作是一个矩形的盒子,也就是一个盛装内容的容器. 盒子模型有元素的内容.边框(border).内边距(padding).和 ...
CSS学习笔记7—盒子模型
盒子模型(CSS重点) 学习目标理解: 能说出盒子模型有那四部分组成能说出内边距的作用以及对盒子的影响能说出padding设置不同数值个数分别代表的意思能说出块级盒子居中对齐需要的2个条件能 ...

sizebox模型下载_Beware of box model size (留心盒子模型大小)

sizebox模型下载_Beware of box model size (留心盒子模型大小)相关推荐

最新文章

热门文章