CSS - 盒子模型

Box Model

CSS

发布日期: 2017-12-25

文章字数: 1.5k

阅读时长: 6 分

阅读次数:

前言: 盒子模型分为IE盒模型和W3C标准盒模型, IE盒模型指的是IE6之前IE浏览器所识别的盒子模型, IE6之后IE浏览器在标准兼容模式下使用的是W3C标准盒模型, 本文只研究W3C标准盒模型

盒子包括4部分, 从里到外分别是: content(内容)、border(边框)、padding(内边距)、margin(外边距)

W3C标准盒模型

标准盒子模型中的CSS属性

width属性

语法: width : 数值 + 单位

注意点: 指的是内容(content)的宽度

height属性

语法: height : 数值 + 单位

注意点: 指的是内容(content)的高度

border整合属性

语法: border: width style color

注意点: 三个属性值均允许省略(缺失), 但不建议

分类属性:

按方向(direction)细分: border-top、border-right、border-bottom、border-left
按类型(type)细分: border-width(边框大小)、border-style(边框样式)、border-color(边框颜色)

注意点:

边框的方向属性语法: border-(direction) : width style color
border整合属性实际是同时设置四个方向属性的width、style、color
根据方向和类型可以继续细分出 border-(direnction)-(type) 12个属性
border-color 不设值, 默认和目标元素的前景色(color)一致
border-style 常用值

padding整合属性

语法: padding: val

可按方向细分: padding-top、padding-right、padding-bottom、padding-left

注意点:

可取值 auto(自动) 或者 具体数值 + 单位
padding整合属性, 设置4个值时, 表示分别设置 上右下左 方向的内边距
padding整合属性, 只设置一个值, 表示同时四个方向的内边距
padding整合属性设置2个值, 即padding : x y , 表示 padding-left 和 padding-right 的值为 x, padding-top 和 padding-bottom 的值为 y
padding整合属性设置3个值, 即padding: left y right, 表示 padding-left 值为 left, padding-right 值为 right, padding-top 和 padding-bottom 的值为 y

margin整合属性

语法: margin : val

可按方向细分: marigin-top、margin-right、margin-bottom、margin-left

注意点:

可取值 auto(自动) 或者 具体数值 + 单位
margin整合属性, 设置4个值时, 表示分别设置 上右下左 方向的外边距
margin整合属性, 只设置一个值, 表示同时四个方向的外边距
margin整合属性设置2个值, 即margin: x y , 表示 margin-left 和 margin-right 的值为 x, margin-top 和 margin-bottom 的值为 y
margin整合属性设置3个值, 即margin: left y right, 表示 margin-left 值为 left, margin-right 值为 right, margin-top 和 margin-bottom 的值为 y

box-sizing属性

CSS3属性, 设置元素的盒模型的表现形式

语法: box-sizing : content-box(默认值, 标准盒模型)|border-box(可理解为IE盒模型)

border-box

观察上图可得, 当 box-sizing 设置为 border-box 时：

width 包括 content、padding-left、padding-right、border-left、border-right
height 包括 content、padding-top、padding-bottom、border-top、border-bottom

盒子模型的其他属性

border-radius整合属性

设置圆角边框(圆角半径)

语法: border-radius : val

分类属性:

border-top-left-radius : x [y] 左上角
border-top-right-radius : x [y] 右上角
border-bottom-right-radius : x [y] 右下角
border-bottom-left-radius : x [y] 左下角

注意点:

当使用单位为 % 时, x 相对当前元素width进行计算, y 相对当前元素height进行计算
只设一个值, 表示水平和垂直半径值一样(非计算值)

border-radius整合属性实际是同时设置4个角的圆角半径, 效果如下

水平和垂直半径值一样

border-radius : 35px;
/* 等同于 */
border-top-left-radius : 35px;
border-top-right-radius : 35px;
border-bottom-right-radius : 35px;
border-bottom-left-radius : 35px;

border-radius : 35px 25px;
/* 等同于 */
border-top-left-radius : 35px;
border-top-right-radius : 25px;
border-bottom-right-radius : 35px;
border-bottom-left-radius : 25px;

border-radius : 35px 25px 15px;
/* 等同于 */
border-top-left-radius : 35px;
border-top-right-radius : 25px;
border-bottom-right-radius : 15px;
border-bottom-left-radius : 25px;

border-radius : 35px 25px 15px 5px;
/* 等同于 */
border-top-left-radius : 35px;
border-top-right-radius : 25px;
border-bottom-right-radius : 15px;
border-bottom-left-radius : 5px;

水平和垂直方向半径不一样, 设置垂直方向半径, 与水平方向半径赋值效果一样, 最终效果如下

border-radius : 35px 25px 15px 5px / 5px 15px 25px 35px;
/* 等同于 */
border-top-left-radius : 35px 5px;
border-top-right-radius : 25px 15px;
border-bottom-right-radius : 15px 25px;
border-bottom-left-radius : 5px 35px;