CSS(CSS3)学习笔记（二）

上一篇

上一篇

---

CSS盒子（盒、框）模型

在布局文档时，浏览器的呈现引擎根据标准 CSS 基础盒子模型，将每个元素表示为一个矩形盒子。 CSS 决定这些盒子的大小、位置和属性（颜色、背景、边框大小等）。

• CSS 基础盒子模型是 CSS 的一个模块，它定义了矩形盒子，包括它们的内边距和外边距，这些矩形盒子是为元素生成的，并根据视觉格式模型进行布局。

每个盒子由四个部分（或区域）组成：内容(content)、内边距(padding)、边框(border)和外边距(margin)。

内边距(Padding)

padding属性

padding属性是以下属性的简写：

• padding-top
• padding-right
• padding-bottom
• padding-left

可以使用 1~4 个< length >或< percentage >值指定 padding 属性（取值不能为负）。

/* <length> 属性值 */
padding: 1em;
padding: 5px;

/* <percentage> 属性值 */
padding: 10%;

/* 上下 | 左右 */
padding: 5% 10%;

/* 上 | 左右 | 下 */
padding: 1em 2em 2em;

/* 上 | 右 | 下 | 左 */
padding: 5px 1em 0 2em;

边框(Border)

border属性

border 属性是以下属性的简写：

• border-width
• border-style
• border-color

可以使用 1~3 个值指定 border 属性（值的顺序无关紧要）。

/* style */
border: solid;

/* width | style */
border: 2px dotted;

/* style | color */
border: outset #f33;

/* width | style | color */
border: medium dashed green;

border-width属性

border-width 属性是以下属性的简写：

• border-top-width
• border-right-width
• border-bottom-width
• border-left-width

可以使用 1~4 个< length >或关键字值指定 border-width 属性。

/* 关键字值 */
border-width: thin;  /* 薄边框 */
border-width: medium;  /* 中边框 */
border-width: thick;  /* 厚边框 */

/* <length> 属性值 */
border-width: 4px;
border-width: 1.2rem;

/* 上下 | 左右 */
border-width: 2px 1.5em;

/* 上 | 左右 | 下 */
border-width: 1px 2em 1.5cm;

/* 上 | 右 | 下 | 左 */
border-width: 1px 2em 0 4rem;

border-style属性

border-style 属性是以下属性的简写：

• border-top-style
• border-right-style
• border-bottom-style
• border-left-style

可以使用 1~4 个关键字值指定 border-style 属性。

/* 关键字值 */
border-style: none;  /* 和关键字 hidden 类似，不显示边框。
							在这种情况下，如果没有设定背景图片，border-width 的值为 0。
							在单元格边框重叠情况下，none 值优先级最低，即如果存在其他的重叠边框，则会显示为那个边框。 */
border-style: hidden;  /* 和关键字 none 类似，不显示边框。
							在这种情况下，如果没有设定背景图片，border-width 的值为 0。
							在单元格边框重叠情况下，hidden 值优先级最高，即如果存在其他的重叠边框，边框不会显示。 */
border-style: dotted;  /* 一系列圆点。
							标准中没有定义两点之间的间隔大小，视不同实现而定。
							圆点半径是 border-width 计算值的一半。 */
border-style: dashed;  /* 一系列短的方形虚线。
							标准中没有定义线段的长度和大小，视不同实现而定。 */
border-style: solid;  /* 一条实线。 */
border-style: double;  /* 一条双实线，宽度是 border-width。 */
border-style: groove;  /* 有雕刻效果的边框，样式与 ridge 相反。 */
border-style: ridge;  /* 有浮雕效果的边框，样式与 groove 相反。 */
border-style: inset;  /* 有陷入效果的边框，样式与 outset 相反。
							当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 groove 的样式。 */
border-style: outset;  /* 有突出效果的边框，样式与 inset 相反。
							当它指定到 border-collapse 为 collapsed 的单元格时，会显示为 ridge 的样式。 */

/* 上下 | 左右 */
border-style: dotted solid;

/* 上 | 左右 | 下 */
border-style: hidden double dashed;

/* 上 | 右 | 下 | 左 */
border-style: none solid dotted dashed; 

border-color属性

border-color 属性是以下属性的简写：

• border-top-color
• border-right-color
• border-bottom-color
• border-left-color

可以使用 1~4 个< color >值指定 border-color 属性。

/* <color> 属性值 */
border-color: red;

/* 上下 | 左右 */
border-color: red #f015ca;

/* 上 | 左右 | 下 */
border-color: red rgb(240,30,50,.7) green;

/* 上 | 右 | 下 | 左 */
border-color: red yellow green blue;

border-image属性

border-image 属性是以下属性的简写：

• border-image-source
• border-image-slice
• border-image-width
• border-image-outset
• border-image-repeat

可以使用 1~5 个值指定 border-image 属性。

/* source | slice */
border-image: linear-gradient(red, blue) 27;

/* source | slice | repeat */
border-image: url("/images/border.png") 27 space;

/* source | slice | width */
border-image: linear-gradient(red, blue) 27 / 35px;

/* source | slice | width | outset | repeat */
border-image: url("/images/border.png") 27 23 / 50px 30px / 1rem round space;

border-image-source属性

/* 关键字值 */
border-image-source: none;  /* 将显示由 border-style 定义的外观。 */

/* <image> 属性值 */
border-image-source: url(image.jpg);
border-image-source: linear-gradient(to top, red, yellow);

border-image-slice属性

将 border-image-source 指定的图像划分为多个区域。

• 角区域（4个）：每一个被使用一次来形成最终 border image 的角。
• 边缘区域（4个）：在最终 border image 中重复、缩放或以其他方式进行修改，以匹配元素的尺寸。
• 中间区域（1个）：默认情况下，它会被丢弃，但如果设置了关键字 fill ，它会像 background image 一样使用。

使用以下命令指定 border-image-slice 属性（负值无效；大于其相应维度的值将被钳制为100%）。

• 1~4 个< percentage >或< number >值
• （可选，可放在任意位置）关键字 fill

/* <percentage> 属性值 */
border-image-slice: 30%;

/* <number> 属性值 */
border-image-slice: 40;

/* 上下 | 左右 */
border-image-slice: 10% 30%;

/* 上 | 左右 | 下 */
border-image-slice: 30 30% 45;

/* 上 | 右 | 下 | 左 */
border-image-slice: 7 12 14 5; 

/* 关键字值 */
border-image-slice: fill;  /* 保留中间图像区域并将其显示为 background image ，但堆叠在实际 background 之上。
							其 width 和 height 的大小分别与 top 和 left 图像区域相匹配。 */

border-image-width属性

可以使用 1~4 个< length >或< percentage >或< number >或关键字值指定 border-image-width 属性。

/* 关键字值 */
border-image-width: auto;

/* <length> 属性值 */
border-image-width: 1rem;

/* <percentage> 属性值 */
border-image-width: 25%;

/* <number> 属性值 */
border-image-width: 3;

/* 上下 | 左右 */
border-image-width: 2em 3em;

/* 上 | 左右 | 下 */
border-image-width: 5% 15% 10%;

/* 上 | 右 | 下 | 左 */
border-image-width: 5% 2em 10% auto;

border-image-outset属性

设置 border image 超出 border 部分的距离。

• 超出部分不会触发溢出滚动条，也不会捕获鼠标事件。

可以使用 1~4 个< length >或< number >值指定 border-image-outset 属性（负值无效）。

/* <length> 属性值 */
border-image-outset: 1rem;

/* <number> 属性值 */
border-image-outset: 1.5;

/* 上下 | 左右 */
border-image-outset: 1 1.2;

/* 上 | 左右 | 下 */
border-image-outset: 30px 2 45px;

/* 上 | 右 | 下 | 左 */
border-image-outset: 7px 12px 14px 5px;

border-image-repeat属性

调整源图像的边缘区域以适应元素 border image 的尺寸。

可以使用 1~2 个关键字值指定 border-image-repeat 属性。

/* 关键字值 */
border-image-repeat: stretch;  /* 源图像的边缘区域被拉伸以填充每个边界之间的间隙。 */
border-image-repeat: repeat;  /* 源图像的边缘区域平铺（重复）以填充每个边界之间的间隙。瓷砖可以裁剪以达到适当的配合。 */
border-image-repeat: round;  /* 源图像的边缘区域平铺（重复）以填充每个边界之间的间隙。瓷砖可以拉伸以达到适当的配合。 */
border-image-repeat: space;  /* 源图像的边缘区域平铺（重复）以填充每个边界之间的间隙。额外的空间将分布在瓷砖之间，以实现适当的配合。 */

/* 上下 | 左右 */
border-image-repeat: round stretch;

border-radius属性

border-radius 属性是以下属性的简写：

• border-top-left-radius
• border-top-right-radius
• border-bottom-right-radius
• border-bottom-left-radius

使用 1~4 个< length >或< percentage >值，用于设置角的单个半径。

/* <length> 属性值 */
border-radius: 10px;

/* <percentage> 属性值 */
border-radius: 5%;

/* 上左和下右 | 上右和下左 */
border-radius: 10px 5%;

/* 上左 | 上右和下左 | 下右 */
border-radius: 2px 4px 2px;

/* 上左 | 上右 | 下右 | 下左 */
border-radius: 1px 0 3px 4px;

使用 “/” 后跟 1~4 个< length >或< percentage >值，用于设置一个额外的半径（设置椭圆角）。

/* 第一半径值 / 第二半径值 */
border-radius: 10px / 20px;

/* 第一半径值 / 上左和下右 | 上右和下左 */
border-radius: 10px 5% / 20px 30px;

/* 第一半径值 / 上左 | 上右和下左 | 下右 */
border-radius: 10px 5px 2em / 20px 25px 30%;

/* 第一半径值 / 上左 | 上右 | 下右 | 下左 */
border-radius: 10px 5% / 20px 25em 30px 35em;

border-shadow属性

在元素的框架周围添加阴影效果，可以设置多个效果，用逗号分隔。长方体阴影由相对于元素的X和Y偏移、模糊和扩散半径以及颜色来描述。

如果在具有长方体阴影的元素上指定了 border-radius ，则长方体阴影将采用相同的圆角。多个盒子阴影的z顺序与多个文本阴影相同（第一个指定的阴影在顶部）。

使用以下命令指定 border-shadow 属性：

• 2~4 个< length >值：
  • 前 2 个值为< offset-x >< offset-y >
  • 第 3 个值为< blur radius >
  • 第 4 个值为< spread radius >
• （默认）关键字 none
• （可选）关键字 inset
• （可选）1 个< color >值
• 要指定多个阴影，请提供以逗号分隔的阴影列表。

/* 关键字值 */
box-shadow: none;

/* <color> 如果未指定，则默认为<currentcolor> */

/* offset-x | offset-y | color */
box-shadow: 60px -16px teal;

/* <offset-x>指定水平距离。负值将阴影放置在元素的左侧。
	<offset-y>指定垂直距离。负值将阴影放置在元素的上方。 */

/* offset-x | offset-y | blur-radius | color */
box-shadow: 10px 5px 5px black;

/* <blur-radius>
	该值越大，模糊越大，因此阴影变得越大、越亮。
	不允许负值。
	如果未指定，它将为0（阴影的边是尖锐的） */

/* offset-x | offset-y | blur-radius | spread-radius | color */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* <spread-radius>
	正值将导致阴影扩大并变大，负值将导致阴影缩小。
	如果未指定，则为0（阴影大小与元素相同）。 */

/* inset | offset-x | offset-y | color */
box-shadow: inset 5em 1em gold;

/* <inset>
	如果未指定（默认），则假定阴影是放置阴影（就像框被提升到内容上方一样）。
	inset关键字的存在会将阴影更改为帧内的阴影（就好像内容被压在框内一样）。
	嵌入阴影绘制在边框内部（即使是透明的），背景上方，内容下方。 */

/* 以逗号分隔的阴影列表 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

外边距(Margin)

margin属性

margin 属性是以下属性的简写：

• margin-top
• margin-right
• margin-bottom
• margin-left

可以使用 1~4 个值指定 margin 属性（取值为负时元素会比原来更接近临近元素）

/* 关键字值 */
margin: auto;

/* <length> 属性值 */
margin: 1em;
margin: -3px;

/* <percentage> 属性值 */
margin: 5%;
margin: -5%;

/* 上下 | 左右 */
margin: 5% auto;

/* 上 | 左右 | 下 */
margin: 1em auto 2em;

/* 上 | 右 | 下 | 左 */
margin: 2px 1em 0 auto;

外边距重叠

块的上外边距(margin-top)和下外边距(margin-bottom)有时重叠为单个边距，这种行为称为外边距重叠。

• 两者都是正值，取最大值
• 两者一正一负，取两者的和
• 两者都是负值，取最小值

第一种情况：相邻兄弟元素

相邻兄弟元素的外边距重叠（除非后一元素需要通过浮点清除）。

第二种情况：没有内容将父元素和后代元素分开时

• 如果没有 border、padding、inline content、创建 block 格式化文本、或清除浮动，来分开一个块元素与其内一个或多个后代块元素的 margin-top ；
• 没有 border、padding、inline content、min-height、或 max-height ，来分开一个块元素与其内的一个或多个后代块元素的 margin-bottom ；
• 则父代块元素和其内后代块元素外边距重叠，重叠部分最终会溢出到父代块元素外面。

第三种情况：空的块级元素

如果一个块元素完全没有设定 border、padding、height、或min-height ，将其 margin-top 与其 margin-bottom 分开，则其顶部和底部外边距重叠。

盒子大小（box-sizing属性）

属性值：

content-box（默认值）：所设置的 width 与 height 只包括 content 的宽和高。

• width = content 的宽度
• height = content 的高度
• 总宽度 = margin + border + padding + width

border-box：所设置的 width 与 height 包括 content+padding+border 的宽和高。

• width = border + padding + content 的宽度
• height = border + padding + content 的高度
• 总宽度 = margin + width

定位布局

定位(Position)

position属性

设置元素在文档中的位置。top、right、bottom 和 left 属性确定定位元素的最终位置。

position: static;  /* 默认。元素根据文档的正常流定位。 */

position: relative; 
top: 40px; left: 40px;
/* 根据 top、right、bottom 和 left 的值相对于自身进行偏移。
	页面布局中为元素指定的空间与 static 一样。
	
/* 当 z-index 的值不是 auto 时，该值将创建一个新的堆栈上下文。 */

position: absolute;
top: 40px; left: 40px;
/* 相对于其最近的祖先（如果有）进行定位；否则，它相对于初始包含块进行定位。
	
/* 当 z-index 的值不是 auto 时，该值将创建一个新的堆栈上下文。
	绝对定位盒子的外边距不会与其他外边距重叠。 */

position: fixed;
top: 40px; left: 40px;
/* 相对于由视口建立的初始包含块进行定位，除非它的一个祖先将“变换”、“透视”或“过滤器”属性设置为“无”以外的其他属性，在这种情况下，该祖先的行为与包含块相同。
	（请注意，浏览器与透视图和过滤器之间存在不一致，这有助于包含块的形成。）
	
/* 此值始终创建新的堆栈上下文。在打印文档中，元素被放置在每页的相同位置。 */

position: -webkit-sticky;
position: sticky;  /* 粘滞 */
top: 20px;
/* 根据 top、right、bottom 和 left 的值相对于其最近的滚动祖先和包含块（最近的块级祖先）进行偏移，包括与表相关的元素。

/* 此值始终创建新的堆栈上下文。请注意，粘滞元素“粘滞”到其最近的祖先，该祖先具有“滚动机制”（在溢出被隐藏、滚动、自动或覆盖时创建），即使该祖先不是最近的实际滚动祖先。这有效地抑制了任何“粘性”行为。 */

定位类型

1. 定位元素是 position 值为 relative，absolute，fixed 或 sticky 的元素（除 static 以外）。
2. 相对定位元素是 position 值为 relative 的元素。元素根据文档的正常流定位。top 和 bottom 属性指定相对于其正常位置的垂直偏移；left 和 right 属性指定水平偏移。偏移不会影响任何其他元素的位置。
3. 绝对定位元素是 position 值为 absolute 或 fixed 的元素。元素将从正常文档流中移除，并且不会在页面布局中为元素创建空间。top、right、bottom 和 left 属性指定从元素包含块的边的偏移（包含块是相对于定位元素的祖先）。如果元素有外边距，则将外边距添加到偏移量。元素为其内容建立一个新的块格式上下文（BFC）。
4. 粘性定位元素是 position 值为 sticky 的元素。元素根据文档的正常流定位。它被视为相对定位，直到它的包含块在其流根（或滚动其中的容器）内越过指定的阈值（例如将 top 设置为除"auto"以外的值），此时它被视为“卡住”，直到遇到包含块的相反边缘。偏移不会影响任何其他元素的位置。

大多数情况下，height 和 width 设置为"auto"的绝对定位元素的大小都是为了适合其内容。但是，可以通过指定 top 和 bottom 并保留未指定的 height（即"auto"），使未替换的绝对定位元素填充可用的垂直空间。同样，也可以通过指定 left 和 right 并将 width 保留为"auto"来填充可用的水平空间。

除了上述情况（绝对定位的元素填充可用空间）：

• 如果同时指定了 top 和 bottom（从技术上讲，不是"auto"），top 赢。
• 如果同时指定了 left 和 right，当方向为 ltr（English，horizontal Japanese 等）时，left 赢；当方向为rtl（Persian，Arabic，Hebrew 等）时，right 赢。

浮动(Float)

float属性

将元素放置在其容器的左侧或右侧，允许文本和内联元素环绕它。

元素从文档的正常流中移除，但仍然是流的一部分（与绝对定位相反）。

float: left;  /* 元素在其包含块的左侧浮动。 */
float: right;  /* 元素在其包含块的右侧浮动。 */
float: none;  /* 元素不浮动。 */
float: inline-start;  /* 元素在其包含块的起始端浮动。ltr 脚本在左侧，rtl 脚本在右侧。 */
float: inline-end;  /* 元素在其包含块的末端浮动。ltr 脚本在右侧，rtl 脚本在左侧。 */

浮动定位

当一个元素被浮动时，它将从文档的正常流中移除（尽管它仍然是文档的一部分）。

它将向左或向右移动，直到它接触到其包含盒子的边缘或另一个浮动元素。

额外的方块将继续堆叠，直到它们填满包含盒子，然后它们将换到下一行。

浮动元素至少与其最高的嵌套浮动子元素一样高。

清除(Clear)

clear属性

设置一个元素是否要移动到它前面的浮动元素之下（清除）。适用于浮动和非浮动元素。

clear: none;  /* 元素不会下移以清除之前的浮动元素 */
clear: left;  /* 元素下移以清除之前的左浮动 */
clear: right;  /* 元素下移以清除之前的右浮动 */
clear: both;  /* 元素下移以清除之前的左右浮动 */
clear: inline-start;  /* 元素下移以清除其包含块起始端的浮动，即 ltr 脚本上的左浮动和 rtl 脚本上的右浮动。 */
clear: inline-end;  /* 元素下移以清除其包含块末端的浮动，即 ltr 脚本上的右浮动和 rtl 脚本上的左浮动。 */

清除浮动

应用于非浮动块时，它会将元素的边框边向下移动，直到它低于所有相关浮动的边框边。非浮动块的上外边距重叠。

两个浮动元素之间的垂直（上下）外边距不会重叠。

应用于浮动元素时，底部元素的外边距边将移动到所有相关浮动的外边距边之下。这会影响后面浮动的定位，因为后面浮动的定位不能高于前面浮动。

要清除的相关浮动是同一块格式上下文中较早的浮动。

如果一个元素只包含浮动元素，它的高度将重叠为零。如果您希望它始终能够调整大小，使其包含浮动元素，则需要自清除其子代。这称为 clearfix，一种方法是将 clear 属性添加到已替换的 ::after 伪元素中。

z-index

设置定位元素及其子元素或 flex 项的 z 顺序。较大z索引的重叠元素覆盖较小z索引的元素。

对于定位盒子（即具有除静态以外的任何位置的盒子），z-index属性指定：

• 当前堆栈上下文中盒子的堆栈级别
• 盒子是否建立本地堆栈上下文

可以使用 1 个关键字或< integer >值指定 z-index 属性。

/* 关键字值 */
z-index: auto;

/* 该盒子不会建立新的本地堆栈上下文。
	当前堆栈上下文中生成的盒子的堆栈级别与其父盒子相同。 */

/* <integer> 值 */
z-index: 0;
z-index: 3;
z-index: 289;
z-index: -1; /* 负值以降低优先级 */

/* <integer>是当前堆栈上下文中生成的盒子的堆栈级别。
	该盒子还建立了一个本地堆栈上下文，其堆栈级别为0。
	这意味着子代的z索引不会与此元素外部元素的z索引进行比较。 */

---

上一篇