盒子模型
盒子模型属性看下图就很直白了
- width 和height 设置了内容框的宽/高
- padding 家族属性设置内边距的宽度(别忘了普通属性比如 padding-bottom ,一次设置一个边).
- border 家族属性设置边界的宽度、样式和颜色(许多可用的普通边界属性还有很多)。
- margin 家族属性设置包围CSS盒子外部区域的宽度,这个属性推开布局中其他的CSS盒子
溢流(overflow)
当用绝对的值设置盒子的大小时(比如,固定像素的 width 和 height),内容可能会超出设置的大小,此时内容就会溢流盒子。要控制这时候发生的事情,我们可以使用 overflow 属性。 该属性有几个可能的取值,不过最常用的是:
- auto:如果内容太多,那么超出盒子大小的内容会被隐藏,滚动条显示出来,从而可以让用户滚动看到所有内容。
- hidden:如果内容太多,那么超出盒子大小的内容被隐藏了。
- visible:如果内容太多,超出盒子大小的内容显示在盒子之外(这通常是默认的行为)。
背景剪裁 (Background clip)
盒背景由颜色和图像组成,堆叠在彼此之间(background-color,background-image)。它们被应用于一个盒并在该盒子下画。默认情况下,背景延伸到边界的外边缘。这通常很好,但在某些情况下可能会令人烦恼(如果您有一个平铺的背景图片,您只想扩展到内容的边缘呢?)这种行为可以通过设置background-clip属性。
轮廓(Outline)
盒子的 outline 看起来像边界,但是它不是盒模型的一部分。它表现得像边界,但是是画在盒子之上,不会修改盒子的大小(具体来说,ouline 是画在边界框之外,外边距区域之内)。
设置宽和高的约束
通过属性 min-width、max-width、min-height 和 max-height 实现设置大小约束
width: 70%;
max-width: 1280px;
min-width: 480px;
完全改变盒模型
一个盒子的总宽度是它的width
, padding-right
,padding-left
,border-right
和border-left
属性之和。 在某些情况下比较麻烦(例如,要是您想要一个宽度为50%的盒子(box),边界(border)和内边距(padding)以像素为单位怎么办?)为了避免这种问题,可以使用属性box-sizing
调整盒模型。 用值 border-box
,它将盒模型更改为这样新的模型:
我们来看一个生动的例子。 我们将设置两个相同的<div>
元素,赋予每个元素相同的width,border和padding。 我们还将使用一些 JavaScript 脚本来打印出每个盒子宽度的计算值(最终屏幕上的像素值)。 唯一的区别是底部的盒子我们给出box-sizing: border-box
,顶部的盒子留着默认行为
<div class="one"></div>
<div class="two"></div>
html {
font-family: sans-serif;
background: #ccc;
}
.one, .two {
background: red;
width: 300px;
height: 150px;
padding: 20px;
border: 10px solid black;
margin: 20px auto;
}
.two {
box-sizing: border-box;
}
用JavaScript计算两个框的计算宽高值
var one = document.querySelector('.one');
var two = document.querySelector('.two');
function outputWH(box) {
var width = box.offsetWidth;
var height = box.offsetHeight;
box.textContent = 'Width: ' + width + 'px, Height: ' + height + 'px.'
}
outputWH(one);
outputWH(two);
效果:
第一个框的宽度和高度等于content + padding + border。 然而,第二个框的宽度和高度等于通过CSS设置在 content 的宽度和高度。 padding 和 border 并没有添加到总宽度和高度上; 反而,他们占用一些内容的空间,使内容更小,并保持总体尺寸相同。
盒子显示(display)类型
常见的display的类型
display
可以有很多种不同的值, 其中三种常见的值为 block
, inline
, 和 inline-block.
- 块盒(
block
box)是被定义为堆放在其它盒子之上的盒子(即盒子之前以及之后的内容出现在不同的行上),并且可以给它设置高度和宽度。上面所述的整个盒模型都适用于块盒。 - 行内盒(
inline
box)与块盒相反:它跟随文档的文本流堆放(即,它会与周围的文本和其它行内元素出现在同一行,并且其内容会像段落中的文本行一样,随着文本流换行)。宽度和高度设置对行内盒无效;在行内盒上的所有内边距、外边距和边界设置会改变周围文本的位置,但是不会影响周围块盒的位置。 - 行内块盒(
inline-block
box)介于前两者之间: 它会像行内盒一样,跟随周围的文本流堆放,不会在其前后创建换行;不过,它可以像块盒一样,使用宽度和高度设置大小,并且维护其块完整性 — 它不会跨段落行换行(对于一行文本容纳不下的行内盒,会落到第二行上,因为第一行上没有足够的空间容纳它,并且不会跨两行换行)。
块级元素默认设置为 display: block;
,行内元素默认设置为 display: inline;
。
不常见的display类型
同时, display
属性也有一些不常用的值,在以后你将会遇到。其中一些已经出现了有一段时间,并且可以很好的被支持, 而另一些则比较新,不能够被很好的支持。这些值通常是为了使创建网页/网页应用更简单而被创造出来。最被关注的有这些:
display: table
— 允许你像处理table布局那样处理非table元素,而不是滥用HTML的<table>标签来达到同样的目的。display: flex
— 允许你处理一些困扰CSS已久的一些传统布局问题,例如布置一系列弹性等宽容器或者垂直居中内容。display: grid
— 给出一种简单实现CSS网格系统的方式,而在传统上它依赖于一些棘手难以处理的CSS网格框架。