CSS 盒模型
在 CSS 中,所有的元素都被一个个的“盒子(box)”包围着。盒子的组成:content 内容,padding 内填充,border 边框,margin 外边距
CSS 盒模型的注意点
- padding 不能为负值,margin 可以为负值
- 背景色会平铺到非 margin 的区域,比如 border 无颜色会显示背景色
css
.box1 {
width: 100px;
height: 100px;
padding: 20px;
background: pink;
border: 10px rgba(0, 0, 0, 0.1) solid;
margin: 20px;
}
- margin-top 传递的现象及解决方案
解决方案可以用下面方式,或 BFC 方式
css
/* 可选的解决方法 */
border: 1px solid pink;
- margin 上下叠加的现象及解决方案
解决方案可以用下面方式,或 BFC 方式
css
/* 可选的解决方法 */
margin-bottom: 70px;
块级盒子与内联盒子
最常用的两种“盒子”——块级盒子(block box)和内联盒子(inline box)
- 块级盒子:div p h1 ...
- 内联盒子:span a strong ...
块级盒子的特性
- 独占一行
- 支持所有样式
- 不写宽度的时候,跟父容器的宽度相同
- 所占区域是一个矩形
内联盒子的特性
- 盒子不会产生换行
- 有些样式不支持,如:width height 等
- 不写宽度的时候,宽度由内容决定
- 所占的区域不一定是矩形
- 内联标签之间会有空隙
自适应盒模型
自适应盒模型指的是,当盒子不设置宽度时,盒模型相关组成部分处理的方式是如何的
标准盒模型与怪异盒模型
- 在标准盒模型中,如果你给设置的 width 和 height,实际设置的是 content box,padding 和 border 再加上设置的宽高一起决定整个盒子的大小,即
width = content width
- 在怪异盒模型中,所有宽度都是可见宽度,所有内容宽度是该宽度减去边框和填充部分,即
width= content width + border width + padding width
box-sizing 属性
- content-box: width、height -> content
- border-box: width、height -> content + padding + border
- 应用1:量取尺寸时不用再去计算一些值,比如固定
height 100px
css
.box {
height: 100px;
padding: 20px 0;
box-sizing: border-box;
}
- 应用2:解决一些需要设置百分比和盒模型值,比如
width 100%
css
input {
width: 100%;
padding: 20px 0;
box-sizing: border-box;
}