前端学习2——CSS3

眼眸流转

已于 2022-09-20 23:02:12 修改

阅读量556

点赞数

分类专栏：前端学习文章标签：前端 css3

于 2022-08-22 08:52:01 首次发布

本文链接：https://blog.csdn.net/gyfghh/article/details/126459025

版权

前端学习专栏收录该内容

6 篇文章 0 订阅

订阅专栏

前端学习2——CSS3

0、css注释

/* 这是一条注释 */

1、样式优先级

行内样式>内部样式>外部样式

1.1、行内样式

<p style=”font-size:14px color:green;”>CSS3</p>

1.2、内部样式

<head>
    <style>
        p{
            font-size:14px;
            color:green;
        }
    </style>
</head >

1.3、外部样式

<style>
	@import "index.css";
</style>

<link href="css文件路径" rel="stylesheet" type="text/css" />

link引用的CSS会同时被加载，而@import引用的CSS会等到页面全部被下载完再被加载。因此有时候浏览@import加载CSS的页面时开始会没有样式(闪烁）。并且link兼容性比@import更好

2、CSS选择器

2.1、简单选择器

选择器	例子	例子描述
.*class	.intro	选取所有 class=“intro” 的元素。
#id	#firstname	选取 id=“firstname” 的那个元素。
*	*	选取所有元素。
element	p	选取所有元素。
element,element,…	div, p	选取所有元素和所有元素。

1、元素选择器（元素名）

p {
  text-align: center;
  color: red;
}

2、id 选择器（id名）

#para1 {
  text-align: center;
  color: red;
}

3、类选择器（类名）

.center {
  text-align: center;
  color: red;
}

4、通用选择器（*）

* {
  text-align: center;
  color: blue;
}

2.2、组合选择器

选择器	示例	示例描述
element element	div p	选择元素内的所有元素。
element>element	div > p	选择其父元素是元素的所有元素。
element+element	div + p	选择所有紧随元素之后的元素。
element1~element2	p ~ ul	选择前面有元素的每个元素。

1、后代选择器（空格）

div p {
  background-color: yellow;
}

div元素内的所有p元素

2、子选择器（>）

div > p {
  background-color: yellow;
}

选择div一级子元素的所有p元素

3、兄弟选择器（+）

div + p {
  background-color: yellow;
}

<p>相邻的同胞选择器（+）选择所有作为指定元素的相邻的同级元素。</p>

<div>
  <p>div 中的段落 1。</p>
  <p>div 中的段落 2。</p>
</div>

<p>段落 3。不在 div 中。</p>
<p>段落 4。不在 div 中。</p>

选择紧随div之后的所有p元素

4、通用兄弟选择器（~）

div ~ p {
  background-color: yellow;
}

<p>段落 1。</p>

<div>
  <p>段落 2。</p>
</div>

<p>段落 3。</p>
<code>一些代码。</code>
<p>段落 4。</p>

选择属于div同级的所有p元素：

2.3、伪类选择器

定义元素的特殊状态

选择器	例子	例子描述
:active	a:active	选择活动的链接。
:hover	a:hover/div:hover	选择鼠标悬停其上的链接。
:link	a:link	选择所有未被访问的链接。
:visited	a:visited	选择所有已访问的链接。

/* 未访问的链接 */
a:link {
  color: #FF0000;
}

/* 已访问的链接 */
a:visited {
  color: #00FF00;
}

/* 鼠标悬停链接 */
a:hover {
  color: #FF00FF;
}

/* 已选择的链接 */
a:active {
  color: #0000FF;
}

a:hover必须定义在 a:link和 a:visited之后，才能生效！

a:active必须在 CSS 定义中的 a:hover之后才能生效！

选择器	例子	例子描述
:checked	input:checked	选择每个被选中的元素。
:disabled	input:disabled	选择每个被禁用的元素。
:enabled	input:enabled	选择每个已启用的元素。
:focus	input:focus	选择获得焦点的元素。
:in-range	input:in-range	选择具有指定范围内的值的元素。
:out-of-range	input:out-of-range	选择值在指定范围之外的元素。
:invalid	input:invalid	选择所有具有无效值的元素。
:valid	input:valid	选择所有具有有效值的元素。
:read-only	input:read-only	选择指定了 “readonly” 属性的元素。
:read-write	input:read-write	选择不带 “readonly” 属性的元素。
:required	input:required	选择指定了 “required” 属性的元素。
:optional	input:optional	选择不带 “required” 属性的元素。

选择器	例子	例子描述
:empty	p:empty	选择没有子元素的每个元素。
:first-child	p:first-child	选择作为其父的首个子元素的每个元素。
:last-child	p:last-child	选择作为其父的最后一个子元素的每个元素。
:nth-child(n)	p:nth-child(2)	选择作为其父的第二个子元素的每个元素。
:nth-last-child(n)	p:nth-last-child(2)	选择作为父的第二个子元素的每个元素，从最后一个子元素计数。
:only-child	p:only-child	选择作为其父的唯一子元素的元素。
:first-of-type	p:first-of-type	选择作为其父的首个元素的每个元素。
:last-of-type	p:last-of-type	选择作为其父的最后一个元素的每个元素。
:nth-of-type(n)	p:nth-of-type(2)	选择作为其父的第二个元素的每个元素。
:nth-last-of-type(n)	p:nth-last-of-type(2)	选择作为父的第二个元素的每个元素，从最后一个子元素计数
:lang(language)	p:lang(it)	选择每个 lang 属性值以 “it” 开头的元素。
:only-of-type	p:only-of-type	选择作为其父的唯一元素的每个元素。

选择器	例子	例子描述
:not(selector)	:not§	选择每个非元素的元素。
:root	root	选择元素的根元素。
:target	#news:target	选择当前活动的 #news 元素（单击包含该锚名称的 URL）。

2.4、伪元素选择器

设置元素指定部分的样式

选择器	例子	例子描述
::after	p::after	在每个元素之后插入内容。
::before	p::before	在每个元素之前插入内容。
::first-letter	p::first-letter	选择每个元素的首字母。
::first-line	p::first-line	选择每个元素的首行。
::selection	p::selection	选择用户选择的元素部分。

h1::before {
  content: url(smiley.gif);
}

h1::after {
  content: url(smiley.gif);
}

p::first-letter {
  color: #ff0000;
  font-size: xx-large;
}

p::first-line {
  color: #0000ff;
  font-variant: small-caps;
}

::selection {
  color: red; 
  background: yellow;
}

2.5、属性选择器

选择器	例子	例子描述
[attribute]	[target]	选择带有 target 属性的所有元素。
[attribute=value]	[target=_blank]	选择带有 target=“_blank” 属性的所有元素。
[attribute~=value]	[title~=flower]	选择带有包含 “flower” 一词的 title 属性的所有元素。
[attribute\|=value]	[lang\|=en]	选择带有以 “en” 开头的 lang 属性的所有元素。
[attribute^=value]	a[href^=“https”]	选择其 href 属性值以 “https” 开头的每个元素。
[attribute$=value]	a[href$=“.pdf”]	选择其 href 属性值以 “.pdf” 结尾的每个元素。
[attribute=value*]	a[href*=“w3school”]	选择其 href 属性值包含子串 “w3school” 的每个元素。

1、[attribute] 选择器

a[target] {
  background-color: yellow;
}

选择带有 target 属性的所有元素

2、[attribute=“value”] 选择器

a[target="_blank"] { 
  background-color: yellow;
}

选择带有 target=“_blank” 属性的所有元素

3、[attribute~=“value”] 选择器

[title~="flower"] {
  border: 5px solid yellow;
}

选择带有包含 “flower” 一词的 title 属性的所有元素

4、[attribute^=“value”] 选择器

[class|="top"] {
  background: yellow;
}

选择其 class 属性值以 “top” 开头的每个元素

5、[attribute$=“value”] 选择器

[class$="test"] {
  background: yellow;
}

选取 class 属性以 “test” 结尾的所有元素

6、[attribute*=“value”] 选择器

[class*="te"] {
  background: yellow;
}

选取 class 属性包含 “te” 的所有元素

3、CSS选择器的权重

选择器	权重
标签选择器	0001
类选择器	0010
id选择器	0100
行内样式	1000
!important	10000

多个选择器搭配使用权重为其和
阶级不可逾越

4、基本属性

4.1、颜色

值	描述
name	预定义颜色，见附录
rgb(red, green, blue)/rgba(red, green, blue, alpha)	RGB颜色值
#rrggbb	16进制颜色值
hsla(hue, saturation, lightness)	HSL颜色值

1、name

预定义颜色，见附录

2、RGB

rgb(red, green, blue)
每个参数 (red、green 以及 blue) 定义了 0 到 255 之间的颜色强度
rgba(red, green, blue, alpha)
alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字

3、HRE

#rrggbb
rr（红色）、gg（绿色）和 bb（蓝色）是介于 00 和 ff 之间的十六进制值

4、HSLA

hsla(hue, saturation, lightness)
色相（hue）是色轮上从 0 到 360 的度数。0 是红色，120 是绿色，240 是蓝色
饱和度（saturation）是一个百分比值，0％表示灰色阴影，而 100％是全色
亮度（lightness）也是百分比，0％是黑色，50％是既不明也不暗，100％是白色

5、transparent

透明

4.2、背景

属性	值	描述
background-attachment	scroll（默认）、fixed（固定）	设置背景图像是固定的还是与页面的其余部分一起滚动。
background-clip	border-box（边框盒）、padding-box（内边距框）、content-box（内容框）	规定背景的绘制区域。
background-color	RGB、HEX、HSL	设置元素的背景色。
background-image	url(‘URL’)、none	设置元素的背景图像。
background-origin	border-box（边框盒）、padding-box（内边距框）、content-box（内容框）	规定在何处放置背景图像。
background-position	top\center\bottom\left\center\right、%、px	设置背景图像的开始位置。
background-repeat	repeat（默认）、repeat-x、repeat-y、no-repeat	设置背景图像是否及如何重复。
background-size	px、%、cover、contain	规定背景图像的尺寸。

1、背景色（background-color）

有效的颜色名称 - 比如 “red”
十六进制值 - 比如 “#ff0000”
RGB 值 - 比如 “rgb(255,0,0)”

2、透明度（opacity）

取值范围为 0.0 - 1.0。值越低，越透明

3、背景图（background-image）

默认情况下，图像会重复，以覆盖整个元素
background-image: url(“paper.gif”);
某些图像应只适合水平或垂直方向上重复，否则它们看起来会很奇怪

4、背景重复（background-repeat）

background-repeat: repeat-x;图像仅在水平方向重复
background-repeat: no-repeat;只显示一次背景图像

5、背景位置（background-position）

background-position: right top;
px

6、背景附着状态（background-attachment）

fixed、scroll

7、背景属性简写

顺序应为

background-color
background-image
background-repeat
background-attachment
background-position

属性值之一缺失并不要紧，只要按照此顺序设置其他值即可

body {
  background-color: #ffffff;
  background-image: url("tree.png");
  background-repeat: no-repeat;
  background-position: right top;
}

body {
  background: #ffffff url("tree.png") no-repeat right top;
}

4.3、边框

属性	值	描述
border-style	dotted、dashed	指定要显示的边框类型
border-width	#rrggbb	16进制颜色值
border-color	hsla(hue, saturation, lightness)	HSL颜色值
border-radius	px、%

1、边框样式（border-style）

dotted - 定义点线边框
dashed - 定义虚线边框
solid - 定义实线边框
double - 定义双边框
groove - 定义 3D 坡口边框。效果取决于 border-color 值
ridge - 定义 3D 脊线边框。效果取决于 border-color 值
inset - 定义 3D inset 边框。效果取决于 border-color 值
outset - 定义 3D outset 边框。效果取决于 border-color 值
none - 定义无边框
hidden - 定义隐藏边框

border-style属性可以设置一到四个值（上、右、下、左）（上、左右、下）（上下、左右）（上下左右），与此同时也可以单独设置，例如：border-top-style、border-bottom-style、border-left-style、border-right-style

2、边框宽度（border-width）

border-width属性可以设置一到四个值（上、右、下、左）（上、左右、下）（上下、左右）（上下左右），与此同时也可以单独设置，例如：border-top-width、border-bottom-width、border-left-width、border-right-width

3、边框颜色（border-color）

name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
transparent

border-color属性可以设置一到四个值（上、右、下、左）（上、左右、下）（上下、左右）（上下左右），与此同时也可以单独设置，例如：border-top-color、border-bottom-color、border-left-color、border-right-color

4、边框属性简写

顺序应为

border-width
border-style
border-color

p {
  border: 5px solid red;
}

p {
  border-left: 6px solid red;
  background-color: lightgrey;
}

5、圆角边框

border-radius属性用于向元素添加圆角边框，单位px、%

p {
  border: 2px solid red;
  border-radius: 5px;
}

6、边框图像

border-image属性允许指定要使用的图像，而不是包围普通边框

属性	取值	说明
border-image-source	url(‘URL’)、none	规定用作边框的图像的路径。
border-image-slice	number、%、fill	规定如何裁切边框图像。
border-image-width	number、%、auto	规定边框图像的宽度
border-image-outset	number	规定边框图像区域超出边框盒的量
border-image-repeat	stretch（拉伸）、repeat（重复）、round（重复、会缩放适应）	规定边框图像应重复、圆角、还是拉伸

用作边框的图像
在哪里裁切图像
定义中间部分应重复还是拉伸

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 round;
}

#borderimg {
  border: 10px solid transparent;
  padding: 15px;
  border-image: url(border.png) 30 stretch;
}

4.4、边距

1、外边距（margin）

用于在任何定义的边框之外，为元素周围创建空间

p {
  margin-top: 100px;
  margin-bottom: 100px;
  margin-right: 150px;
  margin-left: 80px;
}

p {
  margin: 100px 100px 150px 80px;
}

margin属性可以设置一到四个值（上、右、下、左）（上、左右、下）（上下、左右）（上下左右），与此同时也可以单独设置，例如：margin-top、margin-bottom、margin-left、margin-right

当两个垂直外边距相遇时，它们将形成一个外边距。合并后的外边距的高度等于两个发生合并的外边距的高度中的较大者。

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-viUDdVpx-1663686122272)(C:\Users\Qingshu\AppData\Roaming\Typora\typora-user-images\image-20220610121911752.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ME9Lhdif-1663686122274)(C:\Users\Qingshu\AppData\Roaming\Typora\typora-user-images\image-20220610121928003.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vXacfyjm-1663686122275)(C:\Users\Qingshu\AppData\Roaming\Typora\typora-user-images\image-20220610121945147.png)]

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-S2lgA3C3-1663686122275)(C:\Users\Qingshu\AppData\Roaming\Typora\typora-user-images\image-20220610121956058.png)]

2、内边距（padding ）

用于在任何定义的边界内的元素内容周围生成空间

div {
  padding-top: 50px;
  padding-right: 30px;
  padding-bottom: 50px;
  padding-left: 80px;
}

div {
  padding: 50px 30px 50px 80px;
}

padding 属性可以设置一到四个值（上、右、下、左）（上、左右、下）（上下、左右）（上下左右），与此同时也可以单独设置，例如：padding -top、padding -bottom、padding -left、padding -right

4.5、盒/框模型

在这里插入图片描述

4.6、轮廓

1、轮廓样式（outline-style）

dotted - 定义点状的轮廓
dashed - 定义虚线的轮廓
solid - 定义实线的轮廓
double - 定义双线的轮廓
groove - 定义 3D 凹槽轮廓
ridge - 定义 3D 凸槽轮廓
inset - 定义 3D 凹边轮廓
outset - 定义 3D 凸边轮廓
none - 定义无轮廓
hidden - 定义隐藏的轮廓

outline-style属性可以设置一到四个值（上、右、下、左）（上、左右、下）（上下、左右）（上下左右），与此同时也可以单独设置，例如：outline-top-style、outline-bottom-style、outline-left-style、outline-right-style

2、轮廓宽度（outline-width）

thin（通常为 1px）
medium（通常为 3px）
thick （通常为 5px）
特定尺寸（以 px、pt、cm、em 计）

3、轮廓颜色（outline-color）

name - 指定颜色名，比如 “red”
HEX - 指定十六进制值，比如 “#ff0000”
RGB - 指定 RGB 值，比如 “rgb(255,0,0)”
HSL - 指定 HSL 值，比如 “hsl(0, 100%, 50%)”
invert - 执行颜色反转（确保轮廓可见，无论是什么颜色背景）

4、轮廓属性简写

顺序应为

outline-width
outline-style
outline-color

p {
    outline-width: 5px;
    outline-style: solid;
    outline-color: yellow;
}

p {
    outline: 5px solid yellow;
}

5、轮廓偏移（outline-offset）

在元素的轮廓与边框之间添加空间，元素及其轮廓之间的空间是透明的

p {
  margin: 50px;
  border: 1px solid black;
  outline: 1px solid red;
  outline-offset: 25px;
}

4.7、文本

1、文本颜色（color）、背景色（background-color）

color属性用于设置文本的颜色

background-color属性用于设置文本的背景颜色

h1 {
  background-color: black;
  color: white;
}

2、文本方向（direction）

指定文本方向/书写方向

值	描述
ltr	默认。文本方向从左到右。
rtl	文本方向从右到左。
inherit	规定应该从父元素继承 direction 属性的值。

3、文本对齐（text-align）

用于设置文本的水平对齐方式

left
center
right
justify（分散对齐）

4、文本装饰（text-decoration）

用于设置或删除文本装饰

overline（上划线）
line-through（删除线）
underline（下划线）
none

5、文本转换（text-transform）

属性用于指定文本中的大写和小写字母

uppercase
lowercase
capitalize（首字母大写）

6、文本间距

text-indent属性用于指定文本第一行的缩进

letter-spacing属性用于指定文本中字符之间的间距

line-height属性用于指定行之间的间距

word-spacing属性用于指定文本中单词之间的间距

white-space属性指定元素内部空白的处理方式

值	描述
normal	默认。空白会被浏览器忽略。
pre	空白会被浏览器保留。其行为方式类似 HTML 中的标签。
nowrap	文本不会换行，文本会在在同一行上继续，直到遇到标签为止。
pre-wrap	保留空白符序列，但是正常地进行换行。
pre-line	合并空白符序列，但是保留换行符。
inherit	规定应该从父元素继承 white-space 属性的值。

7、文本阴影（text-shadow）

为文本添加阴影

值	描述
h-shadow	必需。水平阴影的位置。允许负值。
v-shadow	必需。垂直阴影的位置。允许负值。
blur	可选。模糊的距离。
color	可选。阴影的颜色。

8、文字溢出（text-overflow）

规定应如何向用户呈现未显示的溢出内容，使用前需保证white-space: nowrap;overflow: hidden;

值	描述
clip	裁剪文本。
ellipsis	显示省略符号来代表被修剪的文本。
string	使用给定的字符串来代表被修剪的文本。

/*文本溢出部分直接裁剪*/
p {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: clip; 
}

/*文本溢出部分三个省略号*/
p {
  white-space: nowrap; 
  overflow: hidden;
  text-overflow: ellipsis; 
}

9、文字换行（word-wrap）

使长文字能够被折断并换到下一行

值	描述
normal	只在允许的断字点换行（浏览器保持默认处理）。
break-word	在长单词或 URL 地址内部进行换行。

10、文字换行规则（word-break）

值	描述
normal	使用浏览器默认的换行规则。
break-all	允许在单词内换行。
keep-all	只能在半角空格或连字符处换行。

4.8、字体

属性	描述
font	简写属性。在一条声明中设置所有字体属性。
font-family	规定文本的字体系列（字体族）。
font-size	规定文本的字体大小。
font-style	规定文本的字体样式。
font-variant	规定是否以小型大写字母的字体显示文本。
font-weight	规定字体的粗细。

1、字体分类

衬线字体（Serif）- 在每个字母的边缘都有一个小的笔触。它们营造出一种形式感和优雅感
无衬线字体（Sans-serif）- 字体线条简洁（没有小笔画）。它们营造出现代而简约的外观
等宽字体（Monospace）- 这里所有字母都有相同的固定宽度。它们创造出机械式的外观
草书字体（Cursive）- 模仿了人类的笔迹
幻想字体（Fantasy）- 是装饰性/俏皮的字体

2、字体类型（font-family）

p {
  font-family:"Times New Roman",Georgia,Serif;
}

3、字体样式（font-style）

主要用于指定字体样式

normal - 文字正常显示
italic - 文本以斜体显示

4、字体大小（font-size）

设置文本的大小

px
em（1em=16px）

5、字体属性简写

顺序应为

font-style
font-variant
font-weight
font-size/line-height
font-family

p {
  font:italic bold 12px/20px arial,sans-serif;
}

6、自定义字体

@font-face {
  font-family: myFirstFont;
  src: url(sansation_light.woff);
}

div {
  font-family: myFirstFont;
}

描述符	值	描述
font-family	name	必需。定义字体名称。
src	URL	必需。定义字体文件的 URL。
font-stretch	normalcondensedultra-condensedextra-condensedsemi-condensedexpandedsemi-expandedextra-expandedultra-expanded	可选。定义应如何拉伸字体。默认值是 “normal”。
font-style	normalitalicoblique	可选。定义字体的样式。默认值是 “normal”。
font-weight	normalbold100200300400500600700800900	可选。定义字体的粗细。默认值是 “normal”。
unicode-range	unicode-range	可选。定义字体支持的 UNICODE 字符范围。默认值是 “U+0-10FFFF”。

4.9、链接属性

/* 未被访问的链接 */
a:link {
  color: red;
}

/* 已被访问的链接 */
a:visited {
  color: green;
}

/* 将鼠标悬停在链接上 */
a:hover {
  color: hotpink;
}

/* 被选择的链接 */
a:active {
  color: blue;
}

4.10、列表属性

1、项目标记

list-style-type属性指定列表项标记的类型

值	描述
none	无标记。
disc	默认。标记是实心圆。
circle	标记是空心圆。
square	标记是实心方块。
decimal	标记是数字。
decimal-leading-zero	0开头的数字标记。(01, 02, 03, 等。)
lower-roman	小写罗马数字(i, ii, iii, iv, v, 等。)
upper-roman	大写罗马数字(I, II, III, IV, V, 等。)
lower-alpha	小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)
upper-alpha	大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)
lower-greek	小写希腊字母(alpha, beta, gamma, 等。)
lower-latin	小写拉丁字母(a, b, c, d, e, 等。)
upper-latin	大写拉丁字母(A, B, C, D, E, 等。)
hebrew	传统的希伯来编号方式
armenian	传统的亚美尼亚编号方式
georgian	传统的乔治亚编号方式(an, ban, gan, 等。)
cjk-ideographic	简单的表意数字
hiragana	标记是：a, i, u, e, o, ka, ki, 等。（日文片假名）
katakana	标记是：A, I, U, E, O, KA, KI, 等。（日文片假名）
hiragana-iroha	标记是：i, ro, ha, ni, ho, he, to, 等。（日文片假名）
katakana-iroha	标记是：I, RO, HA, NI, HO, HE, TO, 等。（日文片假名）

ul.a {
  list-style-type: circle;
}

2、图像项目标记

list-style-image属性将图像指定为列表项标记

值	描述
URL	图像的路径。
none	默认。无图形被显示。

ul {
  list-style-image: url('sqpurple.gif');
}

3、项目标记位置

list-style-position属性指定列表项标记（项目符号）的位置

值	描述
inside	列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside	默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。

ul.b {
  list-style-position: inside;
}

4、列表属性简写

list-style用于在一条声明中设置所有列表属性，顺序为

list-style-type：如果指定了 list-style-image，那么在由于某种原因而无法显示图像时，会显示这个属性的值
list-style-position：指定列表项标记应显示在内容流的内部还是外部
list-style-image：将图像指定为列表项标记

ul {
  list-style: square inside url("sqpurple.gif");
}

4.11、表格属性

1、全宽表格

table {
  width: 100%;
}

2、边框

border属性设置表格边框属性

border-collapse属性设置是否将表格边框折叠为单一边框

值	描述
separate	默认值。边框会被分开。不会忽略 border-spacing 和 empty-cells 属性。
collapse	如果可能，边框会合并为一个单一的边框。会忽略 border-spacing 和 empty-cells 属性。

table {
  border-collapse: collapse;
}

table, th, td {
  border: 1px solid black;
}

3、水平对齐

th {
  text-align: center;
}

4、垂直对齐

td {
  height: 50px;
  vertical-align: bottom;
}

5、表格内边距

th, td {
  padding: 15px;
  text-align: left;
}

4.12、图像属性

1、圆角图像

img {
  border-radius: 8px;
}

2、图像滤镜

img {
  filter: grayscale(100%);
}

3、object-fit

fill：默认值。调整替换后的内容大小，以填充元素的内容框。如有必要，将拉伸或挤压物体以适应该对象。
contain：缩放替换后的内容以保持其纵横比，同时将其放入元素的内容框。
cover：调整替换内容的大小，以在填充元素的整个内容框时保持其长宽比。该对象将被裁剪以适应。
none：不对替换的内容调整大小。
scale-down：调整内容大小就像没有指定内容或包含内容一样（将导致较小的具体对象尺寸）

img {
  width: 200px;
  height: 400px;
  object-fit: cover;
}

5、高级属性

5.1、display

值

描述

none

此元素不会被显示。

block

此元素将显示为块级元素，此元素前后会带有换行符。

inline

默认。此元素会被显示为内联元素，元素前后没有换行符。

inline-block

行内块元素。

list-item

此元素会作为列表显示。

run-in

此元素会根据上下文作为块级元素或内联元素显示。

table

此元素会作为块级表格来显示（类似），表格前后带有换行符。

inline-table

此元素会作为内联表格来显示（类似），表格前后没有换行符。

table-row-group

此元素会作为一个或多个行的分组来显示（类似

table-header-group

此元素会作为一个或多个行的分组来显示（类似

table-footer-group

此元素会作为一个或多个行的分组来显示（类似

table-row

此元素会作为一个表格行显示（类似

table-column-group

此元素会作为一个或多个列的分组来显示（类似

table-column

此元素会作为一个单元格列显示（类似

table-cell

此元素会作为一个表格单元格显示（类似

和

）

table-caption

此元素会作为一个表格标题显示（类似

）

inherit

规定应该从父元素继承 display 属性的值。

）。）。）。）。）。）

5.2、visibility

值	描述
visible	默认值。元素是可见的。
hidden	元素是不可见的。
collapse	当在表格元素中使用时，此值可删除一行或一列，但是它不会影响表格的布局。被行或列占据的空间会留给其他内容使用。如果此值被用在其他的元素上，会呈现为 “hidden”。
inherit	规定应该从父元素继承 visibility 属性的值。

display属性设置为 none可以隐藏元素，元素在页面中不占据空间，而visibility设置为hidden虽然不显示但仍占据空间。

5.3、定位（position）

属性规定应用于元素的定位方法的类型

值	说明
static	默认值。静态定位，元素不受 top、bottom、left 和 right 属性的影响
relative	相对定位，元素相对于其正常位置进行定位，设置相对定位的元素的 top、right、bottom 和 left 属性将导致其偏离其正常位置进行调整
absolute	绝对定位，元素相对于最近的定位祖先元素进行定位
sticky	粘性定位，根据滚动位置在相对（relative）和固定（fixed）之间切换，直到在视口中遇到给定的偏移位置为止
fixed	固定定位，元素相对于视口定位的，即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素

5.4、层次/元素重叠处理（z-index）

指定元素的顺序（哪个元素应放置在其他元素的前面或后面）

值	描述
auto	默认。堆叠顺序与父元素相等。
number	设置元素的堆叠顺序。
inherit	规定应该从父元素继承 z-index 属性的值。

5.5、溢出处理（overflow）

指定在元素的内容太大而无法放入指定区域时是剪裁内容还是添加滚动条

值	描述
visible	默认。溢出没有被剪裁，内容在元素框外渲染
hidden	溢出被剪裁，其余内容将不可见
scroll	溢出被剪裁，同时添加滚动条以查看其余内容
auto	仅在必要时添加滚动条

同时overflow-x和overflow-y属性可以单独处理是水平、垂直地内容的溢出

5.6、浮动（float）

用于定位和格式化内容

值	描述
left	元素浮动到其容器的左侧
right	元素浮动在其容器的右侧
none	默认值。元素不会浮动（将显示在文本中刚出现的位置）。
inherit	元素继承其父级的 float 值

5.7、清除浮动（clear）

指定哪些元素可以浮动于被清除元素的旁边以及哪一侧

值	描述
left	左侧不允许浮动元素
right	右侧不允许浮动元素
none	允许两侧都有浮动元素。默认值
both	左侧或右侧均不允许浮动元素
inherit	元素继承其父级的 clear 值

如果一个元素比包含它的元素高，并且它是浮动的，它将“溢出”到其容器之外，然后可以向包含元素添加 overflow: auto;，来解决此问题。

5.8、对齐

水平居中对齐块元素

margin: auto;

居中对齐文本

text-align: center;

居中对齐图像

display: block;
margin-left: auto;
margin-right: auto;
width: 40%;

5.9、透明度（opacity）

取值范围为 0.0-1.0，值越低，越透明

使用opacity属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读，如果不希望对子元素应用不透明度，请使用 RGBA 颜色值。

div {
  opacity: 0.3;
}

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */
}

5.10、计数器（counter-reset）

body {
  counter-reset: section;
}

h2::before {
  counter-increment: section;
  content: "Section " counter(section) ": ";
}

body {
  counter-reset: section;
}

h1 {
  counter-reset: subsection;
}

h1::before {
  counter-increment: section;
  content: "Section " counter(section) ". ";
}

h2::before {
  counter-increment: subsection;
  content: counter(section) "." counter(subsection) " ";
}

5.11、单位

1、绝对长度

绝对长度单位是固定的，用任何一个绝对长度表示的长度都将恰好显示为这个尺寸

不建议在屏幕上使用绝对长度单位，因为屏幕尺寸变化很大。但是，如果已知输出介质，则可以使用它们，例如用于打印

单位	描述
cm	厘米
mm	毫米
in	英寸 (1in = 96px = 2.54cm)
px *	像素 (1px = 1/96th of 1in)
pt	点 (1pt = 1/72 of 1in)
pc	派卡 (1pc = 12 pt)

2、相对长度

单位	描述
em	相对于元素的字体大小（font-size）（2em 表示当前字体大小的 2 倍）
ex	相对于当前字体的 x-height(极少使用)
ch	相对于 “0”（零）的宽度
rem	相对于根元素的字体大小（font-size）
vw	相对于视口*宽度的 1%
vh	相对于视口*高度的 1%
vmin	相对于视口*较小尺寸的 1％
vmax	相对于视口*较大尺寸的 1％
%	相对于父元素

5.12、渐变

1、线性渐变

即向下/向上/向左/向右/对角线渐变

必须定义至少两个色标，色标是要呈现平滑过渡的颜色。还可以设置起点和方向（或角度）以及渐变效果
background-image: linear-gradient(direction, color-stop1, color-stop2, …);
background-image: linear-gradient(angle, color-stop1, color-stop2, …);

#grad {
  background-image: linear-gradient(red, yellow);
}

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

#grad {
  background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

循环线性渐变

#grad {
  background-image: repeating-linear-gradient(red, yellow 10%, green 20%);
}

2、径向渐变

由其中心定义渐变

必须定义至少两个色标
background-image: radial-gradient(shape size at position, start-color, …, last-color);
shape 为椭圆形，size 为最远角，position 为中心

#grad {
  background-image: radial-gradient(red, yellow, green);
}

#grad {
  background-image: radial-gradient(red 5%, yellow 15%, green 60%);
}

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

循环径向渐变

#grad {
  background-image: repeating-radial-gradient(red, yellow 10%, green 15%);
}

5.13、阴影

1、文本阴影

h1 {
  text-shadow: 2px 2px red;
}

h1 {
  text-shadow: 2px 2px 5px red;
}

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

2、盒子阴影

div {
  box-shadow: 10px 10px grey;
}

div {
  box-shadow: 10px 10px 5px grey;
}

div.card {
  width: 250px;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  text-align: center;
}

5.14、转换

transform属性允许在2D层面转换元素

1、2D转换

函数	描述
matrix(n,n,n,n,n,n)	定义 2D 转换，使用六个值的矩阵。
translate(x,y)	定义 2D 转换，沿着 X 和 Y 轴移动元素。
translateX(n)	定义 2D 转换，沿着 X 轴移动元素。
translateY(n)	定义 2D 转换，沿着 Y 轴移动元素。
scale(x,y)	定义 2D 缩放转换，改变元素的宽度和高度。
scaleX(n)	定义 2D 缩放转换，改变元素的宽度。
scaleY(n)	定义 2D 缩放转换，改变元素的高度。
rotate(angle)	定义 2D 旋转，在参数中规定角度。
skew(x-angle,y-angle)	定义 2D 倾斜转换，沿着 X 和 Y 轴。
skewX(angle)	定义 2D 倾斜转换，沿着 X 轴。
skewY(angle)	定义 2D 倾斜转换，沿着 Y 轴。

translate()方法从其当前位置移动元素（根据为 X 轴和 Y 轴指定的参数）

div {
  transform: translate(50px, 100px);
}

rotate()方法根据给定的角度顺时针或逆时针旋转元素

div {
  transform: rotate(20deg);
}

div {
  transform: rotate(-20deg);
}

skew()方法使元素沿 X 和 Y 轴倾斜给定角度

div {
  transform: skew(20deg, 10deg);
}

/* 第二个参数不指定为0 */
div {
  transform: skew(20deg);
}

matrix()方法把所有 2D 变换方法组合为一个

参数分别为：matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())

div {
  transform: matrix(1, -0.3, 0, 1, 0, 0);
}

scale()方法增加或减少元素的大小（根据给定的宽度和高度参数）

div {
  transform: scale(2, 3);
}

div {
  transform: scale(0.5, 0.5);
}

2、3D转换

函数	描述
matrix3d(n,n,n,n,n,n, n,n,n,n,n,n,n,n,n,n)	定义 3D 转换，使用 16 个值的 4x4 矩阵。
translate3d(x,y,z)	定义 3D 转化。
translateX(x)	定义 3D 转化，仅使用用于 X 轴的值。
translateY(y)	定义 3D 转化，仅使用用于 Y 轴的值。
translateZ(z)	定义 3D 转化，仅使用用于 Z 轴的值。
scale3d(x,y,z)	定义 3D 缩放转换。
scaleX(x)	定义 3D 缩放转换，通过给定一个 X 轴的值。
scaleY(y)	定义 3D 缩放转换，通过给定一个 Y 轴的值。
scaleZ(z)	定义 3D 缩放转换，通过给定一个 Z 轴的值。
rotate3d(x,y,z,angle)	定义 3D 旋转。
rotateX(angle)	定义沿 X 轴的 3D 旋转。
rotateY(angle)	定义沿 Y 轴的 3D 旋转。
rotateZ(angle)	定义沿 Z 轴的 3D 旋转。
perspective(n)	定义 3D 转换元素的透视视图。

5.15、过渡

在给定的时间内平滑地改变属性值

添加效果的 CSS 属性
效果的持续时间

1、快速入门

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
}
div:hover {
  width: 300px;
}

2、改变若干属性值

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 4s;
}
div:hover {
  width: 300px;
  height: 300px;
}

3、过渡的速度曲线

ease - 规定过渡效果，先缓慢地开始，然后加速，然后缓慢地结束（默认）
linear - 规定从开始到结束具有相同速度的过渡效果
ease-in -规定缓慢开始的过渡效果
ease-out - 规定缓慢结束的过渡效果
ease-in-out - 规定开始和结束较慢的过渡效果
cubic-bezier(n,n,n,n) - 允许您在三次贝塞尔函数中定义自己的值

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: linear;
}
div:hover {
  width: 300px;
}

4、延迟过渡

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s;
  transition-timing-function: linear;
  transition-delay: 1s;
}
div:hover {
  width: 300px;
}

5、过渡+转换

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s, height 2s, transform 2s;
}

div:hover {
  width: 300px;
  height: 300px;
  transform: rotate(180deg);
}

6、简写

div {
  width: 100px;
  height: 100px;
  background: red;
  transition: width 2s linear 1s;
}

div:hover {
  width: 300px;
}

5.16、动画

动画使元素逐渐从一种样式变为另一种样式

1、动画定义

animation-name属性指定动画的名称

animation-duration属性指定动画运行时间

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

2、延迟动画

animation-delay属性规定动画开始的延迟时间（负值也是允许的。如果使用负值，则动画将开始播放，如同已播放 N 秒）

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-delay: 2s;
}
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

3、动画重复次数

animation-iteration-count属性指定动画应运行的次数（“infinite” 使动画永远持续下去）

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 3;
}
@keyframes example {
  from {background-color: red;}
  to {background-color: yellow;}
}

4、动画方向

animation-direction属性指定是向前播放、向后播放还是交替播放动画

normal：动画正常播放（向前）。默认值
reverse：动画以反方向播放（向后）
alternate：动画先向前播放，然后向后
alternate-reverse：动画先向后播放，然后向前

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

5、动画运动曲线

animation-timing-function属性规定动画的速度曲线

ease：指定从慢速开始，然后加快，然后缓慢结束的动画（默认）
linear：规定从开始到结束的速度相同的动画
ease-in：规定慢速开始的动画
ease-out：规定慢速结束的动画
ease-in-out：指定开始和结束较慢的动画
cubic-bezier(n,n,n,n)：运行您在三次贝塞尔函数中定义自己的值

div {
  width: 100px;
  height: 100px;
  position: relative;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
  animation-iteration-count: 2;
  animation-direction: alternate-reverse;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:red; left:0px; top:0px;}
}

6、动画填充模式

animation-fill-mode属性规定动画结束后目标元素的样式

none：默认值。动画在执行之前或之后不会对元素应用任何样式。
forwards：元素将保留由最后一个关键帧设置的样式值
backwards：元素将获取由第一个关键帧设置的样式值
both：动画会同时遵循向前和向后的规则，从而在两个方向上扩展动画属性

div {
  width: 100px;
  height: 100px;
  background: red;
  position: relative;
  animation-name: example;
  animation-duration: 3s;
  animation-fill-mode: forwards;
}
@keyframes example {
  0%   {background-color:red; left:0px; top:0px;}
  25%  {background-color:yellow; left:200px; top:0px;}
  50%  {background-color:blue; left:200px; top:200px;}
  75%  {background-color:green; left:0px; top:200px;}
  100% {background-color:pink; left:0px; top:0px;}
}

7、动画属性简写

animation：animation-name animation-duration animation-timing-function animation-delay animation-iteration-count animation-direction;

div {
  animation-name: example;
  animation-duration: 5s;
  animation-timing-function: linear;
  animation-delay: 2s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

div {
  animation: example 5s linear 2s infinite alternate;
}

5.17、多列

1、创建多列

column-count属性规定元素应被划分的列数

div {
  column-count: 3;
}

2、列间隔

column-gap属性规定列之间的间隔

div {
  column-count: 3;
  column-gap: 40px;
}

3、列间样式

column-rule-style属性规定列之间的规则样式

值	描述
none	定义没有规则。
hidden	定义隐藏规则。
dotted	定义点状规则。
dashed	定义虚线规则。
solid	定义实线规则。
double	定义双线规则。
groove	定义 3D grooved 规则。该效果取决于宽度和颜色值。
ridge	定义 3D ridged 规则。该效果取决于宽度和颜色值。
inset	定义 3D inset 规则。该效果取决于宽度和颜色值。
outset	定义 3D outset 规则。该效果取决于宽度和颜色值。

div {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
}

column-rule-width属性规定列之间的规则宽度

div {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-width: 1px;
}

column-rule-color属性规定列之间的规则的颜色

div {
  column-count: 3;
  column-gap: 40px;
  column-rule-style: solid;
  column-rule-width: 1px;
  column-rule-color: lightblue;
}

column-rule 属性是用于设置上面所有 column-rule-* 属性的简写属性

div {
  column-count: 3;
  column-gap: 40px;
  column-rule: 1px solid lightblue;
}

4、跨列

column-span属性规定元素应跨越多少列

h2 {
  column-span: all;
}

5、列宽度

div {
  column-count: 3;
  column-gap: 40px;
  column-width: 100px;
}

5.18、变量

全局变量

:root {
  --blue: #1e90ff;
  --white: #ffffff; 
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  background-color: var(--white);
  color: var(--blue);
  border: 1px solid var(--blue);
  padding: 5px;
}

局部变量

:root {
  --blue: #1e90ff;
  --white: #ffffff;
}

body {
  background-color: var(--blue);
}

h2 {
  border-bottom: 2px solid var(--blue);
}

.container {
  color: var(--blue);
  background-color: var(--white);
  padding: 15px;
}

button {
  --button-blue: #0000ff;
  background-color: var(--white);
  color: var(--button-blue);
  border: 1px solid var(--button-blue);
  padding: 5px;
}

5.19、媒体查询

0、媒体类型

值	描述
all	用于所有媒体类型设备。
print	用于打印机。
screen	用于计算机屏幕、平板电脑、智能手机等等。
speech	用于大声“读出”页面的屏幕阅读器。

1、语法

@media not|only mediatype and (expressions) {
  CSS-Code;
}

@media screen and (min-width: 480px) {
  body {
    background-color: lightgreen;
  }
}

5.20、盒子模型

box-sizing属性定义元素宽度和高度的计算方式：它们是否应包含内边距（padding）和边框。

值	描述
content-box	这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。
border-box	为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

5.21、Flexbox

需要明确两个东西

flex container：默认存在两根轴：水平的主轴（main axis）和垂直的交叉轴（cross axis）

主轴（横轴）的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end

交叉轴（竖轴）的开始位置叫做cross start，结束位置叫做cross end
flex item：默认沿主轴排列。单个项目占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

在这里插入图片描述

1、容器

方向

flex-direction属性定义容器要在哪个方向上堆叠 flex 项目

值	描述
row	默认值。作为一行，水平地显示弹性项目（超出一行按照比例收缩）
row-reverse	等同行，但方向相反。
column	作为列，垂直地显示弹性项目。
column-reverse	等同列，但方向相反。

.flex-container {
  display: flex;
  flex-direction: column;
}

换行

flex-wrap属性规定是否应该对 flex 项目换行

值	描述
nowrap	默认值。规定弹性项目不会换行。
wrap	规定弹性项目会在需要时换行。
wrap-reverse	规定弹性项目会在需要时换行，以反方向。

.flex-container {
  display: flex;
  flex-wrap: wrap;
}

flex-direction、flex-wrap简写

flex-flow属性是用于同时设置 flex-direction 和 flex-wrap 属性的简写属性

.flex-container {
  display: flex;
  flex-flow: row wrap;
}

对齐（主轴）

justify-content属性用于在主轴对齐 flex 项目

值	描述
flex-start	默认值。项目位于容器的开头。
flex-end	项目位于容器的结尾。
center	项目位于容器中央。
space-between	项目在行与行之间留有间隔。
space-around	项目在行之前、行之间和行之后留有空间。

.flex-container {
  display: flex;
  justify-content: center;
}

对齐（交叉轴）

align-items属性用于在交叉轴上对齐 flex 项目

值	描述
stretch	默认。项目被拉伸以适合容器。
center	项目位于容器的中央。
flex-start	项目位于容器的开头。
flex-end	项目位于容器的末端。
baseline	项目被定位到容器的基线（项目的第一行文字的基线对齐）

.flex-container {
  display: flex;
  height: 200px;
  align-items: center;
}

对齐（多行）

align-content属性定义了多根轴线（多行）的对齐方式（如果项目只有一根轴线，该属性不起作用）

值	描述
stretch	默认值。行拉伸以占据剩余空间。
center	朝着弹性容器的中央对行打包。
flex-start	朝着弹性容器的开头对行打包。
flex-end	朝着弹性容器的结尾对行打包。
space-between	行均匀分布在弹性容器中。
space-around	行均匀分布在弹性容器中，两端各占一半。

.flex-container {
  display: flex;
  height: 600px;
  flex-wrap: wrap;
  align-content: center;
}

2、项目

排序

order属性规定 flex 项目的顺序（必须是数字，默认值是 0，越小越靠前）

<div class="flex-container">
  <div style="order: 3">1</div>
  <div style="order: 2">2</div>
  <div style="order: 4">3</div> 
  <div style="order: 1">4</div>
</div>

弹性

放大是因为有剩余空间，缩小就是因为项目的宽度超过容器有一个超出空间

flex-grow属性定义flex item的放大比例，默认为0

flex-grow用于分配容器的剩余空间
默认为 0 ，即如果容器存在剩余空间，也不放大
将多少剩余空间拿来分配：剩余空间 * (所有项目的flex-grow之和 >= 1 ? 1 : 所有项目的flex-grow之和)
- 如果所有项目的flex-grow之和大于等于1，那么就是所有的剩余空间都拿来分配，否则乘以系数即为要分配的剩余空间
每个项目分配到多少剩余空间：要分配的剩余空间 * (单个项目flex-grow / 所有项目的flex-grow之和)
- 按照 flex-grow 占比进行分配
实际操作下会对两个公式更好的理解：https://www.w3school.com.cn/tiy/t.asp?f=css3_flexbox_flex-grow

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div>
</div>

flex-shrink属性定义了项目的缩小比例，默认为1

flex-shrink用于分配容器的超出空间
超出空间中多少用来压缩：超出空间 * (所有项目的flex-shrink之和 >= 1 ? 1 : 所有项目的flex-shrink之和)
- 如果没有超出空间，那么就不用压缩了；如果超出空间为100px，所有项目的flex-shrink之和为0.6，那么60px用来压缩
每个项目缩小多少空间
- 要压缩的空间 * (单个项目flex-shrink / 所有项目的flex-shrink之和)

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-shrink: 0">3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
</div>

长度

flex-basis属性规定 flex 项目的初始长度

width，flex-basis同时存在时，flex-basis优先级更高
实际宽度同样会受flex-grow和flex-shrink影响

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

简写

flex属性是 flex-grow、flex-shrink 和 flex-basis 属性的简写属性

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex: 0 0 200px">3</div>
  <div>4</div>
</div>

对齐（交叉轴）

align-self属性规定弹性容器内所选项目的对齐方式

align-self属性允许单个flex item有与其他flex item不一样的纵轴对齐方式，可覆盖align-items属性

眼眸流转

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
前端学习2——CSS3

div {}描述符值描述name必需。定义字体名称。srcURL必需。定义字体文件的 URL。可选。定义应如何拉伸字体。默认值是 “normal”。font-style可选。定义字体的样式。默认值是 “normal”。可选。定义字体的粗细。默认值是 “normal”。可选。定义字体支持的 UNICODE 字符范围。默认值是 “U+0-10FFFF”。animation-name属性指定动画的名称animation-duration属性指定动画运行时间div {.........
复制链接

扫一扫