本篇文章给大家带来了关于css的相关知识,其中主要介绍了css盒子模型以及box-sizing属性的相关问题,box-sizing属性定义如何计算一个元素的总宽度和总高度,主要设置是否需要加上内边距(padding)和边框等,下面一起来看一下,希望对大家有帮助。
CSS 基础框盒模型是 CSS 规范的一个模块,它定义了一种长方形的盒子, 包括它们各自的内边距(padding)与外边距(margin
),并根据视觉格式化模型来生成元素,对其进行布置、编排、布局。常被直译为盒子模型、盒模型或框模型。
盒模型有以下分类:
宽度width
= 内容宽度(content
) + padding
+ border
+ margin
内容宽度仅仅只有content
。如果设置一个元素的宽为100px
,那么这个元素的内容区会有100px
宽,并且任何边框和内边距的宽度都会被增加到最后绘制出来的元素宽度中。
宽度width
= 内容宽度(content
+ padding
+ border
) + margin
内容宽度包含了content
、border
、padding
。如果将一个元素的width
设为100px
,那么这100px
会包含它的border
和padding
,内容区的实际宽度是width
减去(border
+ padding
)的值。大多数情况下,这使得我们更容易地设定一个元素的宽高。
box-sizing
属性有以下两个属性值。
box-sizing属性定义如何计算一个元素的总宽度和总高度,主要设置是否需要加上内边距(padding)和边框等。
例如,假如您需要并排放置两个带边框的框,可通过将 box-sizing 设置为 "border-box"。这样就可以让浏览器呈现出带有指定宽度和高度的框,并把边框和内边距放入框中。
默认情况下,元素的宽度(width) 和高度(height)计算方式如下:
width(宽度) + padding(内边距) + border(边框) = 元素实际宽度
height(高度) + padding(内边距) + border(边框) = 元素实际高度
默认值,使用标准盒子模型。
.contentBox { box-sizing: content-box; width: 350px; border: 10px solid black; padding: 0 10px;}
以上代码在浏览器中的渲染的实际宽度是390px
。
使用怪异模式盒子模型。
.borderBox { box-sizing: border-box; width: 350px; border: 10px solid black; padding: 0 10px;}
以上代码在浏览器中的渲染的实际宽度就是350px
。
示例如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>123</title> <style> div.container { width: 100%; border: 2px solid black; } div.box { box-sizing: border-box; width: 50%; border: 5px solid red; float: left; } </style> </head> <body> <div class="container"> <div class="box">这个 div 占据了左边部分</div> <div class="box">这个 div 占据了右边部分</div> <div style="clear:both;"></div> </div> </body> </html>
输出结果:
示例二:
<!DOCTYPE html> <html> <head> <style> * { box-sizing: border-box; } #example1 { width: 300px; padding: 40px; border: 15px solid blue; } #example2 { width: 300px; padding: 10px; border: 2px solid red; } </style> </head> <body> <h1>通用的 box-sizing</h1> <p>使用 “box-sizing:border-box” 可以让前端开发人员减少很多工作。 上面 head 部分中的第一个样式确保所有元素都以这种更直观的方式调整大小。 你设置的宽度就是实际的宽度,不需要考虑内边距和边框:</p> <div id="example1">div 的完整宽度为 300px, 不需要考虑内边距和边框。</div> <br> <div id="example2">这个 div 的完整宽度也是 300px, 也不需要考虑内边距和边框。</div> </body> </html>
输出结果:
一个被定义成块级的(block)盒子会表现出以下行为:
width
和height
属性可以发挥作用h1-h6
、p
、p
、section
都处于block
状态一个被定义成内联的(inline)盒子会表现出以下行为:
width
和height
属性将不起作用a
元素、span
、em
以及strong
都处于inline
状态如果不希望一个项切换到新行,但希望它可以设定宽度和高度,此时我们可以将该元素设置为inline-block
。
display 属性值 |
|
---|---|
块级盒子 | block |
内联盒子 | inline |
行内块 | inline-block |
border: 10px double red;
10px、双实线、红色边框。
以上是介绍下CSS盒子模型以及box-sizing属性的详细内容。更多信息请关注PHP中文网其他相关文章!