前端学习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）

  • px

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属性用于指定文本第一行的缩进

  • px

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

  • px

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

  • px

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

  • px

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属性

前端学习2——CSS3相关推荐

  1. Web前端学习记录——CSS3过渡属性+定位实现简单的动画效果

    css3过渡属性: 属性 描述 transition-property 检索或设置对象中的参与过渡的属性 transition-duration 检索或设置对象过渡的持续时间 transition-d ...

  2. 03前端学习之CSS3(2)

    文章目录 十四.用户界面样式: 1. 鼠标样式(cursor): 2. 轮廓(outline) 3. 防止拖拽文本域(resize): 4. 垂直对齐(vertical-align): 4.1 取出图 ...

  3. 前端学习笔记—CSS3

    视频地址:最新前端开发入门教程,web前端零基础html5 +css3+前端项目视频教程 CSS基础认识 基础认识 中文名称: CSS:层叠样式表(Cascading style sheets) 作用 ...

  4. 02前端学习之CSS3(1)

    文章目录 一.CSS介绍: 1. CSS的发展历程: 2. CSS初识: 3. CSS样式规则: 4. CSS注释: 二.font字体: 1. font-size: 字号大小: 2. font-fam ...

  5. 从零开始前端学习[32]:css3中新增加的一些文本属性

    css3中新增加的一些文本属性 css中相关的文本属性 css3中增加的一些文本属性 direction文本显示方向 多行超出文本显示省略号 text-shadow字体的阴影设置 text-strok ...

  6. 好程序员web前端学习路线分享css3中的渐进增强和降级

    好程序员web前端学习路线分享css3中的渐进增强和降级,渐进增强和降级这两个概念是在 CSS3 出现之后火起来的.由于低级浏览器不支持 CSS3,但是 CSS3 特效太优秀不忍放弃,所以在高级浏览器 ...

  7. 前端学习笔记之CSS3基础语法与盒模型（二）

    前端学习笔记之 CSS3基础语法与盒模型 CSS3简介 CSS(cascading style sheet,层叠式样式表)是用来给HTML标签添加样式的语言 CSS3是CSS的最新版本,增加了大量的样 ...

  8. 前端学习六——html5+CSS3

    前端学习六--html5+CSS3 HTML5 H5新增语义标签 多媒体标签 audio音频标签 audio音频标签常见属性 音频标签语法 视频标签video 视频标签语法 H5新增input表单.表 ...

  9. 【FE前端学习】第二阶段任务-基础

    技能学习部分: 1.需要熟练掌握HTML标签以及CSS各个常用属性. 2.掌握CSS3 常用属性 3.掌握jquery的基本用法,对于JS基本逻辑语句需要熟练掌握 上文 [FE前端学习]第二阶段任务- ...

最新文章

  1. Go 学习笔记（34）— Go 方法声明、方法调用、方法值、方法表达式、切片对象方法、指针对象方法
  2. mysql binlog 恢复 表_MySQL通过Binlog恢复删除的表
  3. (转)SQLServer实例讲解
  4. php mysql 线程安全_PHP 线程安全与非线程安全版本的区别深入解析
  5. 计算机如何退出1.1.2模式,华为fastboot模式怎么进入和退出?
  6. 2.Elasticsearch插件推荐及安装
  7. 用.net中的SqlBulkCopy类批量复制数据 （转载）
  8. 清涟基因--顾大夫工作室相关网站
  9. 求 s = a+aa+aaa+… …+aaa…a的值，其中a是一个数字
  10. java 处理汉字枚举类_浅谈java枚举类（附代码）
  11. matlab计数重叠细胞,医学图像处理案例（三）——用分水岭算法分割重叠细胞
  12. HTML网页设计：五、行内元素和块元素
  13. iOS之苹果和百度地图的使用
  14. Java27岁啦——一次争执引起的Java内卷生涯
  15. MySQL英语不好能学吗_英语不好，我能学好编程语言吗
  16. 阿里云服务器上安装nginx
  17. 【数据治理】One ID中的核心技术ID-Mapping究竟是怎么实现的
  18. 实现单点登录SAP PO JAVA客户端（ESR/ID），无需每次下载
  19. 大前端学习--两个多月来的收获与进步 学习总结
  20. 数据结构中的原子、分子和物质

热门文章

  1. 写在2012年初，回顾与展望
  2. 【CHRISTOPHER J.C. BURGES】模式识别的支持向量机教程
  3. Python 外星人入侵游戏（一）：武装飞船（下）
  4. linux 下MP4Box命令
  5. 批判马斯洛需求层次模型
  6. 网页设计：30个灰常漂亮的老外网页设计作品
  7. 服务器中间件版本信息泄露,中间件版本信息泄露漏洞
  8. Elasticsearch集群配置
  9. 计算机毕业设计ssm宠物领养平台16e63系统+程序+源码+lw+远程部署
  10. 顶尖的个人作品集网站设计欣赏