freeCodeCamp之CSS 盒子模型

免费学习编程的网站 freeCodeCamp(🔥) - 官方版(英文)

效果展示

盒子模型详解

对一个文档进行布局的时候,浏览器的渲染引擎会根据标准之一的 CSS 基础框盒模型,将所有元素表示为一个个矩形的盒子(box)。CSS 决定这些盒子的大小、位置以及属性(例如颜色、背景、边框尺寸…)。
image-1668756568027

盒子组成

一个盒子由外到内可以分成四个部分:

  • margin(外边距)
  • border(边框)
  • padding(内边距)
  • content(内容)

会发现margin、border、padding是CSS属性,因此可以通过这三个属性来控制盒子的这三个部分。而content则是HTML元素的内容。

当box-sizing:content-box时,这种盒子模型成为标准盒子模型,当box-sizing: border-box时,这种盒子模型称为IE盒子模型。

标准盒子模型

盒子的宽度 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right
盒子的高度 = height + padding-top + padding-bottom + border-top + border-bottom + margin-top + margin-bottom

IE盒子模型

width和height属性设置的就是盒子的宽度和高度

盒子成分分析

外边距区域

margin area 由外边距边界限制,用空白区域扩展边框区域,以分开相邻的元素。它的尺寸为 margin-box 宽度 和 margin-box 高度。

外边距区域的大小由 margin-top、margin-right、margin-bottom、margin-left,和简写属性 margin 控制。在发生外边距合并的情况下,由于盒之间共享外边距,外边距不容易弄清楚。

最后,请注意,除可替换元素外,对于行内元素来说,尽管内容周围存在内边距与边框,但其占用空间(每一行文字的高度)则由 line-height 属性决定,即使边框和内边距仍会显示在内容周围。

内边距区域

padding area 由内边距边界限制,扩展自内容区域,负责延伸内容区域的背景,填充元素中内容与边框的间距。它的尺寸是 padding-box 宽度 和 padding-box 高度。

内边距的粗细可以由 padding-top、padding-right、padding-bottom、padding-left,和简写属性 padding 控制。

边框区域

border area 由边框边界限制,扩展自内边距区域,是容纳边框的区域。其尺寸为 border-box 宽度 和 border-box 高度。
简写属性border进行设置。

  • border-top:上边界
  • border-bottom:下边界
  • border-left:左边界
  • border-right:右边界

当border属性的色值不明确指定时,如border: 1px solid,边框颜色与当前元素的字体颜色color相同。

/*使用简写属性,同时设置四条边界,四条边界的宽度、样式和颜色都是一样的*/
border: 2px solid green;

/*下面的样式与上面的样式等价*/
border-top: 2px solid green;
border-bottom: 2px solid green;
border-left: 2px solid green;
border-right: 2px solid green;

/*下面的样式与上面的样式等价*/
border-width: 2px;
border-style: dotted;
border-color: green;

border-sytle属性可取值:

none:定义无边框。
hidden:与 “none” 相同。不过应用于表时除外,对于表,hidden 用于解决边框冲突。
dotted:定义点状边框。在大多数浏览器中呈现为实线。
dashed:定义虚线。在大多数浏览器中呈现为实线。
solid:定义实线。
double:定义双线。双线的宽度等于 border-width 的值。
groove:定义 3D 凹槽边框。其效果取决于 border-color 的值。
ridge:定义 3D 垄状边框。其效果取决于 border-color 的值。
inset:定义 3D inset 边框。其效果取决于 border-color 的值。
outset:定义 3D outset 边框。其效果取决于 border-color 的值。
inherit:规定应该从父元素继承边框样式。

边界半径
边界半径由属性border-radius进行控制,这是一个简写属性,像上面提到过的margin、padding等一样,可以有一个、两个、三个或四个值进行设置。同样也可以对盒子的每一个角的半径进行单独设置。
边界半径可以使用 px、em 等长度单位,也可以使用百分数。

border-radius值的个数以及每个值对应控制的位置:

一个值:设置四个角有相同的边界半径;
两个值:第一个值设置左上角和右下角,第二个值设置右上角和左下角;
三个值:第一个值设置左上角,第二个值设置右上角和左下角,第三个值设置右下角;
四个值:第一个值设置左上角,第二个值设置右上角,第三个值设置右下角,第四个之设置左下角。

/*以简写属性的三个值为例*/
border-radius: 10px 20px 30px;
/*下面样式与上面简写属性样式等价*/
border-top-left-radius: 10px;
border-top-right-radius: 20px;
border-bottom-right-radius: 30px;
border-bottom-left-radius: 20px;

盒子阴影box-shadow

在盒子的组成成分之外,CSS3给盒子添加了阴影。盒子的阴影由box-shadow属性控制,阴影的轮廓与盒子边界border的轮廓一样
可以在同一个元素上设置多个阴影效果,并用逗号将他们分隔开。该属性可设置的值包括阴影的X轴偏移量、Y轴偏移量、模糊半径、扩散半径和颜色。
语法

box-shadow: h-shadow v-shadow blur spread color inset;
.one {
    /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
  box-shadow: 0 0 3px 3px #efb762;
}

转换transform

描述:转换是css3中的一个特征,可以实现元素的缩放,位移,变形。
作用:使元素在位置或者形状上发生一定的改变。
属性值:

  • scale:缩放(一般)

格式: transform:scale(x,y)
x:表示水平方向上的缩放倍数
y:表示垂直方向上的缩放倍数
如果只写一个值表示等比例缩放。
【注意】

  1. 缩放只是一种视觉效果,不会对别的盒子造成影响。
  2. 取值大于1表示放大,小于1表示缩小。
  • translate 位移(重点)

格式:
transform:translate(水平位移量,垂直位移量)
取值:水平位移量为正,向右移动,垂直方向的正方形为下。
只写一个值,表示水平位移量。
参数为百分比的话,是相对于自身的宽高。
位移只是一种视觉效果,不会对别的盒子造成影响。

  • rotate 旋转(重点)

格式:transform:rotate(角度(deg))
单位:deg,正值:顺时针,负值:逆时针。

  • skew 倾斜(了解)

格式:
transform:skew(水平倾斜角度,垂直倾斜角度)
单位:deg 正值:顺指针 负值:逆时针
两个角度相交,不要大于等于90deg.

filter 属性

CSS属性 filter 将模糊或颜色偏移等图形效果应用于元素。滤镜通常用于调整图像、背景和边框的渲染。
CSS 语法

filter: none | blur() | brightness() | contrast() | drop-shadow() | grayscale() | hue-rotate() | invert() | opacity() | saturate() | sepia() | url();
/* 使用单个滤镜 (如果传入的参数是百分数,那么也可以传入对应的小数:40% --> 0.4)*/
filter: blur(5px);
filter: brightness(40%);
filter: contrast(200%);
filter: drop-shadow(16px 16px 20px blue);
filter: grayscale(50%);
filter: hue-rotate(90deg);
filter: invert(75%);
filter: opacity(25%);
filter: saturate(30%);
filter: sepia(60%);

/* 使用多个滤镜 */
filter: contrast(175%) brightness(3%);

/* 不使用任何滤镜 */
filter: none;

MDN示例

filter属性详解