CSS 样式继承

参考：

特点：

  • 有具体指出的属性，使用具体指出的
  • 其它使用优先级，推导给定的

总结

  • 越近的优先级越高

优先级

  • 内联 > 内部 > 外部 > 浏览器默认值

破除继承和优先级关系

  • 使用“!important”

背景 Background

background-color

  • 颜色

    • 指定方式

      • #ff6600: 十六进制
      • rgb(1, 2, 3) : RGB 样式
      • green: 颜色名称
    • 注意：不需要带引号

  • eg:

    • p {background-color: #ff6600}
    • p {background-color: green}

background-image

  • 图片

    • 指定方式：“url('paper.gif')”

  • 可以指定多个图片

    • 靠前的在上面

      • eg: background-image: url(img_flwr.gif), url(paper.gif);

background-repeat

CSS background-repeat property

  • 背景图片展开方式

    • 备选值

      • repeat

    • 阵列重复排布

      • no-repeat

    • 单独一张图片

      • repeat-x

    • 水平分布

      • repeat-y
      • space
      • round
      • initial

background-position

background-position - CSS: Cascading Style Sheets | MDN

  • 固定位置

    • 备选值

      • left — right
      • top — bottom
      • center
      • 百分比
    • 70% 20%

    • 水平百分比，垂直百分比

      • 偏移量
    • bottom 10px right 10px
    • top right 10px

  • eg:

    • p {background-color: right top; }

background-attachment

  • 图片固定状态

  • 备选值

    • scroll

      • 随页面上下滚动

    • fixed

      • 相对窗口的位置固定

background-clip

  • 图片伸展状态，（裁剪程度）

  • 备选值

    • border-box
    • content-box
    • padding-box
    • initial

background-origin

  • 相对给定元素，固定的位点

    • 注：在 background-attachment == fixed 时，无效

  • 取值

background-size

W3Schools CSS background-size demonstration

  • 图片大小

  • 备选值

    • auto

      • 图片本来大小
      • 默认值

    • cover

      • 放大或裁剪以占满整个 container

    • contain

      • 占满，调整大小，不会裁剪
    • initial
    • inherit

    • "width height" 宽 + 高

      • 200px
      • 50%
      • 200px 100px
      • 10% 50%

opacity

  • 不透明度

  • 备选值

    • 数值：0 ~ 1

定义快捷方法

  • background 属性

    • eg: style="background: #ffffff url("img_tree.png") no-repeat right top;"

文本 Text

color

  • 文本颜色

text-align

  • 文本对齐

  • 备选值

    • left
    • right
    • center

    • justify

      • 分散对齐

文本分布方向

direction

CSS direction property

  • 水平方向问题

  • 备选值

    • ltr

  • left to right: 从左向右分布，默认值

    • rtl

  • right to left

    • initial
    • inherit

unicode-bidi

CSS unicode-bidi property

  • 单词本身字母的排布（逆向等）

    • 与 direction 一齐起作用

  • 备选值

    • normal
    • embeded
    • bidi-override

  • 逆向

    • …

vertical-align

  • 垂直对齐问题

    • 不只是文本，设置的是元素的对齐属性

  • 备选值

    • top
    • middle
    • bottom

text-decoration

  • 文本修饰（下划线，删除线）

  • 备选值

    • none

      • 取消修饰

    • line-through

      • 删除线

    • underline

      • 下划线

text-transform

https://www.w3schools.com/cssref/pr_text_text-transform.asp

  • 文本转换

    • 大小写等

  • 备选值

    • none

    • capitalize

      • 标题样式

    • uppercase

      • 大写

    • lowercase

      • 小写
    • initial
    • inherit

缩进与文本间距问题

text-indent

  • 首行缩进

  • 备选值

    • 长度

      • 2em

    • 百分比

      • 5%

latter-spacing

  • 字符间距

  • 备选值

    • normal
    • length
    • initial
    • inherit

line-height

  • 行间距

word-spacing

  • 单词间距

  • 备选值

    • normal: 多个空格，转成一个，默认值
    • nowrap: 同 normal，但是不会自动换行，除非<br> 标签
    • pre: 类似<pre>标签，不处理空格，<br> 换行
    • pre-line: 合并空格，保留换行符
    • pre-wrap: 不合并空格，正常换行

  • 注：

    • pre-line –> 空格处理同 nromal, 不处理换行符
    • pre-wrap –> 不处理空格， 换行符处理同 normal
    • wrap –> 处理换行
    • line –> 处理行内空格

text-shadow

  • 阴影问题

  • 备选值

    • 样式

      • “水平距离 垂直距离 糢糊尺寸 颜色”
      • eg:
    • "2px 2px"
    • "2px 2px red": 包括颜色
    • "2px 2px 5px red": 包括糢糊和颜色

字体

font-family

  • 字体分类

    • Serif: 衬线字体
    • Sans-Serif: 无衬线字体
    • Monospace: 等宽字体

  • 格式

    • eg:

      • font-family: "Times New Roman", Times, serif;
    • 逗号分割的多个字体，后面的字体作为备选（找不到前面的字体时）
    • 含空格的字体，引号包含起来

font-style

  • 字体样式

  • 备选值

    • normal: 正常
    • italic: 斜体
    • oblique: 倾斜，不太斜（支持的少）

font-weight

  • 字体粗细

  • 备选值

    • normal
    • bold
    • bolder
    • lighter

    • 数值

      • 400 –> normal
      • 700 –> bold

font-variant

font-size

  • 字体大小

  • 两种类型

    • 绝对大小

      • 使用 长度单位为绝对尺寸的单位，如：px, in 等
      • 特点：不可改变

    • 相对大小

      • eg: font-size:10vw

  • 备选值

    • medium: 默认值
    • small
    • large
    • x-small
    • xx-small
    • x-large
    • xx-large

    • smaller

      • 比父元素小

    • larger

      • 比父元素大

    • length 长度尺寸

      • 1px
      • 2cm

    • 百分比

      • 相对于父元素尺寸的百分比
      • 2%

快捷定义字体

https://www.w3schools.com/css/css_font_shorthand.asp

  • 使用 font 属性

    • eg: "font: italic small-caps bold 12px/30px Georgia, serif;"

    • 注意：

      • 必须有大小和字体

@font-face

https://www.runoob.com/css3/css3-fonts.html

  • 用于自定义字体

    • 把给定的字体文件，映射命名为自己的字体名称与属性

      1
2
3
4
5
6

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

图标 Icons

https://www.w3schools.com/css/css_icons.asp

插入位置标签

<i> 和 <span>

图标库

Font Awesome Icons

https://fontawesome.com 收费

Bootstrap Icons

  • 在线库

Google Icons

  • 在线库

关键字

initial

inherit

继承

none

没有设定

长度单位

https://www.w3schools.com/cssref/css_units.asp

注意

  • 数值和单位之间，不能有空格
  • 数值为 0，可以没有单位
  • 对于有些属性，长度数值可以为负

两种单位类型

绝对值

  • cm: 厘米
  • mm: 毫米
  • in: inches 英寸 (=96px=2.54cm)

  • px: pixels 像素 (=1/96 in)

    • 注：

  • 对于低分屏

    • 1px 就是一个像素

  • 对于高分屏和打印机

    • 1px 实际是多个像素
  • pt: points 点(=1/72 in)

  • pc: picas (=12pt)

    • 注：
  • 1pc = 12pt > 12px

相对值

  • em: 当前元素字体大小

  • ex: 当前字体中字母“x”的大小

    • 用的少
  • ch: 字符“0”的宽度

  • rem: 根元素 root element 的字体大小

    • root em

  • vw: viewport 的 “1%” 宽度(viewport width)

    • 注：
  • viewport 当前浏览器窗口尺寸
  • vh: viewport 的 “1%” 高度(viewport height)
  • vmin: 1% viewport 小尺寸
  • vmax: 1% viewport 大尺寸

伪类 Pseudo-classes

https://www.w3schools.com/css/css_pseudo_classes.asp

  • 作用

    • 定义元素的一种特殊状态

    • 例如：

      • 当鼠标放置到元素上时
      • 访问过的链接 VS. 没有被访问过的链接
      • 当聚焦到一个元素时（tab 转移到它，点击了输入框等）

语法

元素的伪类

1
2
3

selector:pseudo-class {
  property: value;
}

CSS 类的伪类

1
2
3

selector.class:pseudo-class {
  property: value;
}

类型

锚（anchor, 对于 a 标签）

  • a:link

    • 未方位

  • a:visited

    • 已访问

  • a:hover

    • Mouse over

  • a:active

    • 被选定

  • 注：

    • :hover 不只是用于<a>
    • 也可用于<div>等

元素定位

  • p:first-child
  • p i:first-child

设定语言

  • :lang

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    <html>
<head>
<style>
q:lang(no) {
  quotes: "~" "~";
}
</style>
</head>
<body>

<p>Some text <q lang="no">A quote in a paragraph</q> Some text.</p>

</body>
</html>

伪元素

https://www.w3schools.com/css/css_pseudo_elements.asp

  • 用途

    • 定位元素或内容，相对于当前元素
  • 符号（“:”）

  • 备选值

    • ::first-letter

      • 第一个字母

    • ::first-line

      • 第一行
    • ::selection

    • ::before

      • 用于在元素之前插入内容

    • ::after

      • 用于在元素之后插入内容
    1
2
3

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

颜色 Color

指定颜色

  • 文本颜色

    • color

  • 边框颜色

    • eg: "border:2px solid Violet;"

  • 背景颜色

    • background-color

颜色值

HSL 样式

  • hsl —> hue, saturation, lightness

  • hue –> 0~360

    • 颜色

    • 值的意义

      • 0: red 红色
      • 120: green 绿色
      • 240: blue 蓝色

  • saturation –> 0 ~ 100%

    • 饱和度

    • 值的意义

      • 0%: a shade of gray 灰色
      • 100%: the full color 完全色

  • lightness –> 0 ~ 100%

    • 亮度

    • 值的意义

      • 0%: 黑色
      • 100%: 白色
      • 50%: 看到的正常颜色，不黑不白

HSLA 样式

在 HSL 基础上添加不透明度

  • A –> Alpha: opacity of a color, –> 0 ~ 1

    • 不透明度

    • 值的意义

      • 0: 完全透明
      • 1: 完全不透明

链接

<a> 标签

四种状态

  • a:link

    • 未方位

  • a:visited

    • 已访问

  • a:hover

    • Mouse over

  • a:active

    • 被选定

边框 Border

相关属性

border-style

  • 边框样式

  • 备选值

    • dotted
    • dashed
    • solid: 实线
    • double: 双线
    • groove: 一种 3D 样式
    • ridge: 3D
    • inset: 3D
    • outset: 3D
    • none
    • hidden

  • 设定多个值

    • 分别对应上，右，下，左
  • eg: p.mix {border-style: dotted dashed solid double;}

单独指定一个边框样式

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

  • 系列类型

    • style, color, width 都可以这样分别指定

border-width

  • 边框宽度

  • 备选值

    • thin
    • medium
    • thick
    • 长度尺寸

  • 多个值

    • 两个值
  • 第一个指定上下

  • 第二个指定左右

    • 四个值
  • 分别对应上，右，下，左

border-color

  • 边框颜色

border-radius

  • 添加圆角效应

  • 取值

    • 长度尺寸

专用于表格 <table> 的属性

border-collapse

https://www.w3schools.com/cssref/pr_border-collapse.asp

  • 合并边框

    • 用于表格的边框合并<table>

  • 取值

    • separate: 不合并，默认值
    • collapse: 合并边框
border-spacing
  • 设置边框间距

  • 取值

    • 使用长度尺寸
    • 单个值

  • 上下左右间距

    • 两个值
  • 第一个：左右间距
  • 第二个：上下间距

  • eg:

    1
2
3

    table#myTable {
  border-spacing:0px 50px;
}

外边距 Margins

  • 指定外边距宽度

属性名

  • margin

取值

长度尺寸

百分数

  • 相对固定元素的宽度大小

分别指定属性

允许负值

margin-top

margin-right

margin-bottom

margin-left

负值相当于左移

外边距合并 Margin Collapse

https://www.w3schools.com/css/css_margin_collapse.asp 上下两个元素的 “上”边距 和 “下”边距，会发生合并问题，保留两者中 的最大值

  • 注意：

    • 左右边距不会发生合并的情况

内边距 Paddings

  • 属性名：padding

  • 分别指定

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

  • 取值

    • 长度尺寸

    • 百分数

      • 相对当前元素的宽度

高与宽 height and width

  • 属性名

    • height
    • width

  • 取值

    • auto: 浏览器自动计算
    • 长度尺寸

    • 百分数

      • 相对包含当的 Block 的百分比
    • 如：内部包含的图片
    • initial

最大宽度 max-width

  • 取值

    • none

      • 不设定
    • 长度尺寸

其它属性名

  • max-height
  • min-height
  • max-width
  • min-width

盒模型 Box Model

https://www.w3schools.com/css/css_boxmodel.asp

相关属性

box-shadow

添加一个或多个阴影

  • 取值

    • none: 默认值，没有阴影
    • h-offset: 必须填写，水平偏移

  • 长度尺寸

    • v-offset: 必须填写，垂直偏移

  • 长度尺寸

    • blur: 糢糊半径

  • 长度尺寸

    • spread: 阴影尺寸的增减量

  • 长度尺寸

    • color: 颜色
    • inset: 特殊阴影样式

  • 由边框向内部变化的阴影

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

    /* 偏移 + 糢糊 + spread */
#example1 {
  box-shadow: 10px 10px 8px 2px #888888;
}


#example1 {
  box-shadow: 10px 10px 8px #888888;
}


/* 偏移 + 糢糊 + 颜色 + inset*/
#example2 {
  box-shadow: 10px 10px 8px #888888 inset;
}

#example1 {
  box-shadow: 10px 10px #888888;
}


/* 只有偏移 */
#example1 {
  box-shadow: 10px 10px;
}
    • 多个阴影

  • 使用逗号“,”分割

    1

    box-shadow: 5px 5px 8px blue, 10px 10px 8px red, 15px 15px 8px green;

box-decoration-break

分段处理方式

盒子 box 中，有多个元素，造成的分段问题，处理方式 https://developer.mozilla.org/en-US/docs/Web/CSS/box-decoration-break 有例子解说

https://www.w3schools.com/cssref/css3_pr_box-decoration-break.asp

  • 取值

    • slice: 默认值，直接在断开出切分
    • clone: 每一个分段元素，外观样式都一样

例外处理

box-sizing

尺寸关系重构

把 padding, border, margin 包含到 width、height 中 https://www.w3schools.com/css/css3_box-sizing.asp

  • 取值

    • content-box: 默认值， width, height 只包含 content 部份
    • border-box: 特化，width, height 包含所有部份
  • 即 content, paddings, border, margins

轮廓 Outline

https://www.w3schools.com/css/css_outline.asp 紧挨边款 Border 外面的轮廓线

  • 属性名

    • outline

      • 用于快捷定义

    • eg:

      • p {outline: thick ridge pink;}

    • 注意

      • 必须有 outline-style

相关属性

outline-style

  • 取值

    • 类似 border 属性

outline-color

outline-width

outline-offset

距离 Border 远近程度

  • 取值

    • 长度尺寸

列表样式 list-style

list-style-type

设置列表标记样式 英语 https://www.w3schools.com/cssref/pr_list-style-type.asp 中文 https://www.w3school.com.cn/css/pr_list-style-type.asp

  • 取值

    • disc: 实心圆
    • circle: 空心圆
    • none: 取消列表标记
    • …

list-style-image

列表标记图片

  • eg: list-style-image: url('sqpurple.gif');

list-style-position

  • 取值

    • outside: 列表标记 list marker 在文本框 之外
    • inside

取消列表标记

  • "list-style-type: none"

选择器造成的区别

  • ul {} Vs. ul li {}
  • 前者“ul”包含所有
  • 后者“ul li” 只包含 列表条目的文本框

表格<table>

边框

border

border-collapse

border-spacing

标题

caption-side

  • 取值

    • top: 默认值
    • bottom
    • initial
  • inherit

文本

颜色

color

对齐

text-align 水平方向

可见性

overflow-x

空单元格处理

empty-cell

  • 取值

    • show: 显示
    • hidden: 隐藏
    • initial
    • inherit

布局

table-layout

  • 取值

    • auto: 内容决定布局

  • 根据最大不可分割内容的宽度，决定列宽

    • fixed: 固定布局
  • 根据设定的宽度，表格宽度<table>, col, 或者首行宽度<th>
  • 如果没设定首行宽度，每一列等宽

布局 layout

display

控制展示特性 https://www.w3schools.com/cssref/pr_class_display.asp

  • 取值

    • none: 隐藏，并且不占用空间
    • inline: 使元素变成内联元素 inline
    • block: 使元素变成块元素 block

    • contents: 使当前元素作用失效，其内容变成上一级元素中的普通内容

      • 把元素变成普通内容
    • flex: 变成 block level flex
    • grid: 变成 block level grid
    • …

visibility

控制可见性 https://www.w3schools.com/cssref/pr_class_visibility.asp

  • 取值

    • visible: 默认值，可见
    • hidden: 隐藏，但是仍然占用空间

    • collapse

      • 用来移除<table> 表格的 列或行
      • 兼容性不好

位置问题 position

相关属性

定位位置

top

  • 取值

    • 长度尺寸
    • 百分比
    • auto: 默认值
bottom
left
right

控制定位的处理方式

position

控制定位方法，确定参考点的位置

固定点的位置是由 left, top, right, bottom 确定的

  • 取值

    • static: 默认值，按元素出现的顺序定位
    • absolute

  • 相对已经被定位的祖先元素 ancestor element, 确定固定位置

    • 注意：

      • 这个祖先元素必须是 not static 的，才可以

  • 空间占用

    • 不占用空间，浮于上层
    • fixed
  • 相对浏览器窗口位置

  • 空间占用

    • 不占用空间，浮于上层
    • relative
  • 相对于原来的位置（默认的位置，static 确定的），即当前位置

  • 空间占用

    • 占用空间
    • sticky

  • 根据用户滚动区域自动确定

    • 在 relative(当前位置) 和 fixed(浏览器窗口) 之间切换

引用<q>

引用符号样式

quotes

https://www.w3schools.com/cssref/pr_gen_quotes.asp

  • 取值

    • none: 取消符号显示
    • string string

  • 左引号 引号

    • string string string string
  • 1, 2: 外部左右引号

  • 3, 4: 内部左右引号

    • eg
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

<!DOCTYPE html>
<html>
    <head>
        <style>
         #a {
             quotes: "'" "'";
         }

         #b {
             quotes: "„" "“" "‚" "‘";
         }

         #c {
             quotes: "«" "»" "‹" "›";
         }
        </style>
    </head>
    <body>
        <h1>The quotes Property</h1>

        <p><q id="a">This is a quote.</q></p>

        <p><q id="b">This is a <q>quote</q> inside a quote.</q></p>

        <p><q id="c">This is a <q>quote</q> inside a quote.</q></p>

    </body>
</html>

溢出控制 Overflow

控制当内容超出元素显示能力时，显示方式 https://www.w3schools.com/css/css_overflow.asp

  • 取值

    • visible: 不作处理，直接多（溢）出来，默认值
    • hidden: 隐藏

    • scroll: 滚动显示

      • 一定会有滚动条，不论内容多少

    • auto: 比 scroll 更智能

      • 根据需要显示滚动条

浮动控制

float

浮动区域

控制元素的显示位置和格式，例如：让图片<img>悬浮在文本的左侧 https://www.w3schools.com/css/css_float.asp

  • 取值

    • left
    • right
    • none: 根据出现顺序定位，默认值
    • inherit

  • 注意

    • 浮动元素是，占用空间的

clear

清空区域

指定当前元素的哪些位置，不能有浮动元素 https://www.w3schools.com/css/css_float_clear.asp

  • 取值

    • none: 默认值，随便浮动，不设禁止区域
    • left
    • right
    • both: 左右两侧都不允许
    • inherit

display: inline-block

https://www.w3schools.com/css/css_inline-block.asp

https://www.w3schools.com/css/tryit.asp?filename=trycss_inline-block_span1

  • 特点

    • 相比于 display: inline，可设置属性多

      • 多出可设置属性
    • height/width
    • paddings/margins

    • 与 display: block 区别

      • 不会在结束处，自动换行

  • 用途

    • 设置水平导航栏

      • 不需要设置： style="li {float: left}"

布局

布局模型

块元素

内联元素

用于文本

表格 Table

二维表格数据

定位布局 position 属性

flexbox 模型

问题汇总

对齐问题

https://www.w3schools.com/css/css_align.asp

元素居中

  • margin: auto

    • 多余空间自动分配给两侧 margin

  • 注意：

    • 需要设定 width 属性
    • 否则，自动占满所有水平空间
文本居中

text-algin: center

图片居中

  • 两侧 margin –> auto, 并且 display: block

    1
2
3
4
5
6

    img {
  display: block;
  margin-left: auto;
  margin-right: auto;
  width: 40%;
}
元素左对齐 与 右对齐
使用 postion: absolute
  • 缺点

  • absolute 不占用空间，会导致重叠问题

    • eg
1
2
3
4
5
6
7

.right {
  position: absolute;
  right: 0px;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
使用 float
  • 优点
  • 不会导致重叠
  • 还不用设置左右边距 margins

  • 占用空间

    • eg
1
2
3
4
5
6

.right {
  float: right;
  width: 300px;
  border: 3px solid #73AD21;
  padding: 10px;
}
元素 居中
垂直居中
使用 padding

设置上下 paddings

  • eg:
1
2
3
4

.center {
  padding: 70px 0;
  border: 3px solid green;
}
vertical-align
  • 注意
  • 这种方法不可靠
使用 line-height
  • 单行时，设置 line-height 和 height 相等
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

.center {
  line-height: 200px;
  height: 200px;
  border: 3px solid green;
  text-align: center;
}

/* If the text has multiple lines, add the following: */
.center p {
  line-height: 1.5;
  display: inline-block;
  vertical-align: middle;
}
  • 注意多行时设置方法
使用 position + transform
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

/* 设置边框 */
.center {
    height: 200px;
    position: relative;
    border: 3px solid green;
  }

.center p {
    margin: 0;
    /* 设置固定位置 */
    position: absolute;
    top: 50%;
    left: 50%;

    /* 平移到中间 */
    transform: translate(-50%, -50%);
  }
使用 flexbox
1
2
3
4
5
6
7

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  border: 3px solid green;
}
文本水平居中
text-algin: center

高度不一致

自动高度，不能包含所有问题

不设置高度，自动决定，父元素高度不是由最大高度决定，导致溢出边框

父元素使用 overflow: auto

例子

导航栏

https://www.w3schools.com/css/css_float_examples.asp

https://www.w3schools.com/css/tryit.asp?filename=trycss_float5

https://www.w3schools.com/css/css_navbar.asp 特别详细，各种各样的导航栏

  • 取消 <li> 换行

    1
2
3

    li {
  float: left;
}

  • eg:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

    <!DOCTYPE html>
<html>
<head>
<style>
ul {
  list-style-type: none;
  /* 取消标记 */

  margin: 0;
  padding: 0;
  /* 取消间隔 */

  overflow: hidden;
  background-color: #333;
}

li {
  float: left;
  /* 取消<li> 换行 */
}

li a {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  /* 重设<a> 样式 */
}

li a:hover {
  background-color: #111;
  /* 悬浮变色 */
}

.active {
  background-color: red;
}
</style>
</head>
<body>

<ul>
<li><a href="#home" class="active">Home</a></li>
<li><a href="#news">News</a></li>
<li><a href="#contact">Contact</a></li>
<li><a href="#about">About</a></li>
</ul>

</body>
</html>

flexbox 模型（弹性盒子）

https://www.w3schools.com/css/css3_flexbox.asp

https://css-tricks.com/snippets/css/a-guide-to-flexbox/ 简单易懂

  • 首先要有 flex 容器

    1
2
3
4
5

    <div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

  • 把容器设成 display: flex

    1
2
3

    .flex-container {
  display: flex;
}

  • 快捷定义

    • 使用 flex-flow

      • 同时设定 flex-direction 和 flex-wrap

flex container 容器的属性

flex-direction

内容排布方向 https://www.w3schools.com/cssref/css3_pr_flex-direction.asp

  • 取值

    • row: 默认值

  • 1, 2, 3

    • column
    • row-reverse: 逆序

  • 3, 2, 1

    • column-reverse
    • initial
    • inherit

flex-wrap

自动换行问题 https://www.w3schools.com/cssref/css3_pr_flex-wrap.asp

  • 取值

    • nowrap: 默认值，不自动换行
    • wrap: 自动换行
    • wrap-reverse: 逆序

flex-flow

同时设定 flex-direction 和 flex-wrap

  • eg:

    1
2
3
4

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

justify-content

flex 的排布对齐问题 https://www.w3schools.com/cssref/css3_pr_justify-content.asp

  • 取值

    • flex-start: 默认值，容器开头

  • 从开头开始，紧密排布

    • flex-end

  • 紧密排布

    • center

  • 紧密排布

    • space-between: 空白分割的水平分布

  • 注意：两端没有空白

    • space-around: 空白分割的水平分布
  • 注意：两端有一半的空白

align-items

flex 形状的对齐部位问题 https://www.w3schools.com/cssref/css3_pr_align-items.asp

  • 解说

    • 在给定的地方对齐，其余的不一致的部份，自由伸展

  • 取值

    • stretch: 默认值，拉伸 flex，以适应容器 flex container
    • center: flex 在中间对齐

  • 高度多出的部份，让它随意伸展

    • flex-start: flex 在顶部对齐，其余伸展
    • flex-end
    • baseline

align-content

控制多行 flex 排布情况 https://www.w3schools.com/cssref/css3_pr_align-content.asp

  • 注意

    • 当只有一行时，没有效果
    • 控制有多余空白时，显示效果

  • 取值

    • 和 justify-content 完全一致

完全居中问题

justify-content: center 并且 align-items: center

flex 的属性（flex items）

order

排序 https://www.w3schools.com/cssref/css3_pr_order.asp

  • 取值

    • 必须是数值

  • 排序方法

    • 按给定的数值由小到大排序

  • 注意

    • 置于该元素是 flex item 时，才能有效

flex-grow

决定 flexible item 相对于其它 flex item 大小的增加量 https://www.w3schools.com/cssref/css3_pr_flex-grow.asp

  • 取值

    • 数值
    • 默认值：0，不可增加

flex-shrink

flex-grow 的相反属性

  • 取值

    • 默认值： -1
    • 0: 不可收缩

flex-basis

flex item 的 初始长度

  • 取值

    • 长度尺寸
    • 百分比
    • auto: 默认值

flex 快捷定义属性

快速定义 flex-grow, flex-shrink, flex-basis

1
2
3
4
5
6

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

align-self

控制 flex item 在 flex container 内部的对齐方式

  • 取值

    • auto: 默认值
    • flex-start: 容器顶部
    • flex-end: 容器底部
    • center
    • baseline
    • stretch: 拉伸

下拉按钮 Dropdowns

点击弹出菜单

https://www.w3schools.com/css/css_dropdowns.asp

  • 实现原理

    • 把菜单部份的内容，设置成 display: none

      • 这样可以在没有点击按钮时，隐藏

    • 使用伪类 + 子元素 选择器， 设置 display: block, 显示菜单

      • eg:
    1

    dropdown: hover .content-content {display: block}

    • 注： dropdown 是按钮元素，:hover 当鼠标移动到按钮时的状态

      • 解说
    • 因为是伪类的子元素，当鼠标离开时，这种关系不再存在，设置就无 效了，因此，其原来的状态又自动恢复了

下来菜单样式

固定位置按钮

  • 按钮位置

    • position: absolute
  • absolute –> 相对祖先元素，不占用空间

  • 菜单位置

    • position: relative
  • 相对按钮的位置

浮动按钮 sticky

  • 按钮位置

    • position: sticky

右侧按钮

  • 按钮位置

    • float: right

  • 其它属性

    • 参考固定按钮

图片拼合 Image Sprites

同一个图片多用途分割 把一个图像分割成多个部份，用于不同的用途，如：导航按钮

https://www.runoob.com/css/css-image-sprites.html

  • 拼合名称由来

    • 多个元素中，包含的背景，合在一起，正好是一个背景图片

  • 实现原理

    • 使用背景图片的 background-size 属性实现

      • background-size 长度参数

    • 参数样式

      • width height

    • width

      • 0: 代表使用开始

      • -50px: 代表图片左边的 50px 裁剪掉，不要了

        • 定位图片开始裁剪的位置

          • 注意：

        • 这个偏移长度非常重要

          • 确定需要的图像，开始区域
      • 所属元素的 width

    • 确定裁剪的宽度

      • 感兴趣的图像，长度多少
       1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

      /* https://www.runoob.com/try/try.php?filename=trycss_sprites_nav */
#navlist{position:relative;}
#navlist li{margin:0;padding:0;list-style:none;position:absolute;top:0;}
#navlist li, #navlist a{height:44px;display:block;}

#home{left:0px;width:46px;}
#home{background:url('/images/img_navsprites.gif') 0 0;}

#prev{left:63px;width:43px;}
#prev{background:url('/images/img_navsprites.gif') -47px 0;}

#next{
    left:129px;  /* 元素定位 */
    width:43px;  /* 背景图片裁剪宽度 */
}
#next{
    background:url('/images/img_navsprites.gif') -91px 0;
    /* -91px --> 背景图片左侧91px 不要了, 从91px处，开始取图像 */
}

resize 属性

定义是否用户可以改变元素的尺寸 size, resizable https://www.w3schools.com/cssref/css3_pr_resize.asp

取值

  • none

    • 不可改变

  • both

    • 两个方向
  • horizontal
  • vertical

表单 Forms

<input> 元素， <textarea>, <form> https://www.w3schools.com/css/css_form.asp

表单元素的选择

使用 CSS 属性选择器

  • eg: input[type=text]

聚焦状态

使用 :focus 伪类 定位

搜索按钮

使用 background-image + padding-left 实现

  1. 把背景图片放置的位置

  2. 使用 padding 偏移输入文本部份

    1
2
3
4
5
6
7

    input[type=text] {
  background-color: white;
  background-image: url('searchicon.png');
  background-position: 10px 10px;
  background-repeat: no-repeat;
  padding-left: 40px;
}

动画实现

动画弹出输入框： transition + :focus + width:100%

textarea

使用 resize: none 禁用 resizable

按钮

input, type=button

  • 使用 cursor 属性

    • 修改鼠标样式

计数器 CSS Counters

css 中的变量，根据 css 规则统计使用的次数

相关属性

counter-reset

  1. 创建计数器
  2. 重置计数

counter-increment

增加计数

content

添加产生的内容，到头部

相关函数

counter() and counters()

把计数器中的值，添加到元素中

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

body {
    /* 创建计数器: section */
    counter-reset: section;
}

h2::before {
    /* 增加计数 */
    counter-increment: section;

    /* 向元素头部，插入内容 */
    content: "Section " counter(section) ": ";
}
counter()

  • 调用方法

    • counter(CounterName)

  • eg: counter(section)

    • 接收一个参数： 计数器
    • 返回计数值
counters()
  • 用于多级计数 <li> 元素

  • 调用方法

    • counters(CounterName, "seperator")

  • eg: counters(section, ".")

    • 使用 "." 分割
    • 接收两个参数： 计数器 和 分隔符
    • 返回分割的计数字符串
  • eg: 2.1.2

  • eg:

     1
 2
 3
 4
 5
 6
 7
 8
 9
10

    /* https://www.w3schools.com/css/tryit.asp?filename=trycss_counters3 */
ol {
  counter-reset: section;
  list-style-type: none;
}

li::before {
  counter-increment: section;
  content: counters(section,".") " ";
}

嵌套计数器

  • 原理

    • 使用 counter-reset 设置 计数器的作用域
    • 当有新的作用域元素创建时，自动重置

  • 解说示例

    • 第一级：h1 –> section –> 作用域 body, 统计 h1
    • 第二级：h2 –> subsection –> 作用域 h1, 统计 h2
    • 重置本级计数：h2::
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

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) " ";
}

列表 <li> 多级计数

counters()

content 属性

插入内容 配合 ::before 和 ::after 使用

https://www.w3schools.com/cssref/pr_gen_content.asp

修改内容

p {content: "your value"}

开头插入

p::before {content: "your value"}

结尾插入

p::after {content: "your value"}

media query @media 媒体查询

符合媒体条件时，进行应用的 css

https://developer.mozilla.org/en-US/docs/Web/CSS/@media

https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

  • 一种 @ rule(at 规则）

  • 例子

    1
2
3
4
5

    @media screen and (min-width: 900px) {
  article {
    padding: 1rem 3rem;
  }
}

语法

格式

1

//语法： @media mediatype and | not | only (media feature) { css-code; }

运算符

not, and, only

  • and

    • 连接 mediatype 和 mediafeature
    • 或 连接 meidafeature 和 mediafeature

  • not 和 only

    • 注意
  • 必须跟 mediatype

媒体类型 mediatype

用来测试的参数变量，eg: screen, resolution

  • 取值

    • all: 默认值
    • print: 打印机， printer
    • screen: 电脑，平板，手机等
    • speech: screenreaders，屏幕读取器

媒体特征 mediafeature

  • 取值

    • width: 可视宽度
    • height
    • device-width
    • device-height
    • orientation

  • 取值

    • portrait: 竖屏
    • landscape: 横屏
    • aspect-ration

  • 宽高比：width/height

    • eg: 16/9
    • resolution: 分辨率

  • eg: min-resolution:300dpi

    • color: 色位
  • min-color: 32

导入方式

css 直接导入

使用 @media 规则

1
2
3
4
5

@media screen and (min-width: 900px) {
    article {
    padding: 1rem 3rem;
    }
}

<head> 标签导入

  • media 属性： 定义使用条件
1

<link rel="stylesheet" href="styleB.css" media="screen and (max-width: 800px)">

Media Query Level 4

新型语法样式 https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

对比

  • 传统

    • 使用 min-, max- 变量
    1
2
3
4
5
6

    @media only screen
and (min-width: 320px)
and (max-width: 480px)
and (resolution: 150dpi) {
    body { line-height: 1.4; }
}
    • level 4
  • 使用大于，小于号等
1
2
3
4
5
6
7

@media (height > 600px) {
    body { line-height: 1.4; }
}

@media (400px <= width <= 700px) {
    body { line-height: 1.4; }
}

响应式 Web 设计 Responsive Web Design

用于适应不同尺寸的屏幕 https://www.w3schools.com/css/css_rwd_viewport.asp

视区 Viewport

浏览器标签页，可以看到的部份，可视区域

设置 viewport

用于对于移动设备的优化网页

1

<meta name="viewport" content="width=device-width, initial-scale=1.0">
width

Viewport 宽度

height
initial-scale

加载时，缩放比例

max-scale
min-scale
user-scalable

是否允许用户缩放

响应式网格布局 Responsive Grid View

12 列 网格布局模型 https://www.w3schools.com/css/css_rwd_grid.asp

首先设置 box-sizing 盒模型样式

1
2
3

,* {
    box-sizing: border-box;
}

设置 12 列，宽度类

设置跨多列时的宽度，百分比

  • col-3 代表占 3 列
1
2
3

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}

设置 列样式，左侧悬浮

float: left

1
2
3
4
5

[class*="col-"] {
  float: left;
  padding: 15px;
  border: 1px solid red;
}

把 12 列 分组成行

div 分组， row 类

1
2
3
4

<div class="row">
<div class="col-3">...</div> <!-- 25% -->
<div class="col-9">...</div> <!-- 75% -->
</div>

避免一行后面有悬浮元素

.row::after { clear: both} 禁止悬浮

1
2
3
4
5

.row::after {
  content: "";
  clear: both;
  display: table;
}

媒体查询 Media Queries

使用@media 规则

1
2
3
4
5

@media only screen and (max-width: 500px) {
    body {
    background-color: lightblue;
    }
}

添加断点 Breakpoint

例外情况优化 所谓断点，即设置例外情况，进行特殊优化，如对于小屏幕

  • 小屏优化
1
2
3
4
5
6
7

/* 当宽度小于768px 时, 每一列都是100% */
@media only screen and (max-width: 768px) {
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

  • 多种优化

     1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

    /* Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px) {...}

/* Small devices (portrait tablets and large phones, 600px and up) */
@media only screen and (min-width: 600px) {...}

/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}

/* Large devices (laptops/desktops, 992px and up) */
@media only screen and (min-width: 992px) {...}

/* Extra large devices (large laptops and desktops, 1200px and up) */
@media only screen and (min-width: 1200px) {...}

图片

自动尺寸

  • 使用 width

    • 最大化

width: 100%; height: auto

1
2
3
4

img {
  width: 100%;
  height: auto;
}

  • 使用 max-width: 有限度的最大化

    • 非必要情况，不会缩小
    • 并且不会放大到其原来尺寸
1
2
3
4

img {
  max-width: 100%;
  height: auto;
}

作为背景图片

转换 transform

2D 变幻

https://www.w3schools.com/css/css3_2dtransforms.asp

方法

  • translate
  • rotate

  • scale

    • scale
    • scaleX
    • scaleY

  • skew

    • skew
    • skewX
    • skewY
  • matrix

translate 平移

  • 用于平移

  • 语法

    • translate(X-offset, Y-offset)
    • X, Y 轴平移尺寸

rotate 旋转

  • 语法

    • rotate(20deg)

  • 参数

    • 正数

  • 顺时针旋转

    • 负数
  • 逆时针旋转

scale 放缩

  • 语法

    • scale(X-times, Y-times)
    • X, Y 方向放大倍数
    • scaleX(X-times)
    • scaleY(Y-times)

skew 倾斜

  • 语法

    • skewX(20deg)

  • 围绕 X 轴倾斜角度

    • 正数

      • 上部向里倾斜
      • 从右向左看，顺时针旋转

    • 负数

      • 上部向外倾斜
      • 从右向左看，逆时针旋转
    • skewY(20deg)

  • 围绕 Y 轴倾斜角度

    • 正数

      • 左侧向里倾斜
      • 从上向下看，顺时针旋转

    • 负数

      • 左侧向外倾斜
      • 从上向下看，逆时针旋转
    • skew(X-degrees, Y-degrees)

  • 同时 X,Y 倾斜

    • 注意
  • 参数不带 deg, 那么就是弧度 rad
  • 20deg Vs 0.3
  • 20 度 和 0.3 弧度

matrix 混合变幻

  • 语法

    • matrix(scaleX(),skewY(),skewX(),scaleY(),translateX(),translateY())
    • 参数排序：(X_scale, Y_skew, X_skew, Y_scale), (X_translate, Y_translate)

  • 注意

    • 前四个参数的排序

3D 变幻

  • rotateX
  • rotateY
  • rotateZ

rotateX

从右向左看，顺时针旋转

rotateY

从上向下看，顺时针旋转

rotateZ

从外向里看，顺时针旋转

  • 只旋转 Z 时，和 rotate 2D 旋转效果一样

transform-orgin

  • 指定 transform 变幻操作的中心点位置

    • 因此，如果没有 transform 操作，只有 transform-origin 是没有效果的
  • transform 变幻的默认中心点 是自身中心点

transition 过渡

从一种样式，动画过渡到另一种样式，但是不需要 flash 和 javascript

  • 相关属性

    • transition

      • 用于简写
    • transition-delay
    • transition-duration
    • transition-property
    • transition-timing-function

transition-delay

延迟发生时间 https://www.w3schools.com/CSSref/css3_pr_transition-delay.asp

  • eg: transition-delay: 2s

transition-duration

动画时间长度

  • 取值

    • 0s: 默认值，没有动画效果
    • 时间长度

https://www.w3schools.com/CSSref/css3_pr_transition-duration.asp

  • 2s

transition-property

指定发生动画的属性 https://www.w3schools.com/CSSref/css3_pr_transition-property.asp

1
2
3
4
5
6
7

div {
  transition-property: width;
}

div:hover {
  width: 300px;
}

  • 取值

    • none: 不指定，无效果
    • all: 所有的属性，都可产生动画

    • 属性名

      • eg: width
      • 注：可以是逗号分开的多个属性

transition-timing-function

指定控制动画速度的函数 https://www.w3schools.com/CSSref/css3_pr_transition-timing-function.asp

  • 取值

    • ease: 默认值，慢－快－慢
    • linear: 匀速
    • ease-in: 开始慢
    • ease-out: 结束慢
    • ease-in-out
    • step-start
    • step-end

    • steps

      • steps(interval, start|end)

    • 参数

      • 第一个参数：interval

        • 正整数，指定时间间隔的数量

      • 第二个参数：start|end

        • 使用 start 或者 end, 默认为 end
        • 指定第一个参数，作用的范围
    • cubic-bezier(n, n, n, n)

transition

简写方法，可以定义多个过渡动画属性

  • 设定顺序

    • property, duration, function, delay
    • 语法：transition: property duration timing-function delay|initial|inherit;
1
2
3
4
5
6
7
8

input[type=text] {
  width: 100px;
  transition: width .35s ease-in-out;
}

input[type=text]:focus {
  width: 250px;
}
1
2
3

div {
  transition: width 2s, height 4s;
}

动画

https://www.w3schools.com/css/css3_animations.asp

https://www.runoob.com/css3/css3-animations.html

@keyframes 规则

@keyframes 用于指定 从一种样式 变化到 另一种样式

定义和调用

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

/* 定义动画 */
@keyframes myfirst
{
    from {background: red;}
    to {background: yellow;}
}

/* 使用动画 */
div
{
    animation: myfirst 5s;
    -webkit-animation: myfirst 5s; /* Safari 与 Chrome */
}

定义，使用 @keyframes

调用，使用 animation 属性

指定不同阶段（百分数声明）

  • from 声明

    • 相当于 0%

  • to 声明

    • 相当于 100%
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

/* The animation code */
@keyframes example {
  0%   {background-color: red;}
  25%  {background-color: yellow;}
  50%  {background-color: blue;}
  100% {background-color: green;}
}

/* The element to apply the animation to */
div {
  width: 100px;
  height: 100px;
  background-color: red;
  animation-name: example;
  animation-duration: 4s;
}

animation 系列属性

类似 transition 系列属性， 但是又多了几个属性

animation 属性

简写属性

animation-name

animation-duration

animation-timing-funcion

animation-delay

animation-fill-mode

动画开始前和结束后的状态，受 animation-direction 和 animation-iteration-count 影响

  • 取值

    • forwards

  • 由 keyframes 的 最后一个 样式决定

    • backwards

  • 由 keyframes 的 第一个 样式决定

    • both

animation-iteration-count

播放次数

animation-direction

指定下一次播放动画的方向

  • 取值

    • normal: 还是正向
    • reverse: 倒放
    • alternate
    • alternate-reverse

animation-play-state

用来指定播放状态，暂停还是播放

  • 取值

    • running

  • 播放

    • pause
  • 暂停

多列

创建 column-count

1
2
3

div {
    column-count: 3;
}

列间隙宽度 column-gap

列的宽度 column-width

子元素跨列数 column-span

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

<style>
 .newspaper
 {
     column-count:3;
 }
 h2
 {
     column-span:all;
 }
</style>

<div class="newspaper">
    <h2>英国维斯米斯特教堂碑文</h2>
    当我年轻的时候，我梦想改变这个世界；当我成熟以后，我发现我不能够改变这个世界，我将目光缩短了些，决定只改变我的国家；当我进入暮年以后，我发现我不能够改变我们的国家，我的最后愿望仅仅是改变一下我的家庭，但是，这也不可能。当我现在躺在床上，行将就木时，我突然意识到：如果一开始我仅仅去改变我自己，然后，我可能改变我的家庭；在家人的帮助和鼓励下，我可能为国家做一些事情；然后，谁知道呢?我甚至可能改变这个世界。
</div>

列分割线

column-rule

column-rule-style

column-rule-width

column-rule-color

column-rule

用于简写

提示框 tooltip

https://www.w3schools.com/css/css_tooltip.asp

  • 实现原理

    • 可见性

      • 使用伪类 .tooltip:hover .tooltext{visibility: visible}

    • 位置

      • .tooltip {position: relative}

    • 提供定位原点

      • .tooltip .tooltext {position: absolute}
    • 设置定位位置

生成箭头

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19

.tooltip .tooltiptext::after {
  /* 生成箭头，和控制形状 */
  content: " ";

  /* 箭头位置 */
  position: absolute;  /** 相对于 tooltiptext 来定位 */
  top: 100%;            /* At the bottom of the tooltip */
  left: 50%;            /* 定位到中间 */

  /* 设置箭头大小 */
  margin-left: -5px;
  border-width: 5px;


  border-style: solid;

  /* 设置颜色 */
  border-color: black transparent transparent transparent;
}

键盘按键操控

https://www.runoob.com/css3/css3-user-interface.html

设置 Tab 按键顺序

https://www.runoob.com/cssref/css3-pr-nav-index.html

  • 取值

    • auto

    • 数值

      • 顺序先后
      • 1: 意味着首先

方向键

兼容性差，目前只有 Opera 浏览器支持

nav-left

  • 取值

    • auto: 右浏览器规定
    • id

https://www.runoob.com/try/try.php?filename=trycss3_nav

1
2
3
4
5
6
7

button#b1
{
top:20%;left:25%;
nav-index:1;
nav-right:#b2;nav-left:#b4;
nav-down:#b2;nav-up:#b4;
}
  • target-name
  • inherit

nav-right

nav-up

nv-down

图片样式

https://www.w3schools.com/css/css3_images.asp

形状

  • 使用 border-radius 修改

    1
2
3
4
5
6
7
8
9

    /* 圆 或 椭圆 */
img {
  border-radius: 50%;
}

/* 普通 圆角 */
img {
  border-radius: 8px;
}

响应式 大小

1
2
3
4

img {
  max-width: 100%;
  height: auto;
}

居中

1
2
3
4
5
6

  img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
  }

截图

object-fit

用来 控制 <img> <video> 的图片变化方法，当容器形状发生变化时 https://www.w3schools.com/css/css3_object-fit.asp

https://www.w3schools.com/cssref/css3_pr_object-fit.asp

  • 取值

    • cover: 不改变图片宽高比 apspect ratio, 放缩比例保持不变
    • fill: 改变宽高比，默认值
    • contain: 保持宽高比，发生放缩
    • none: 不变化
    • scale-down
  • 类似 none 和 contain

Grip 网格布局

  • 使用 display: grid 实现， 和 display: inline-grid

https://www.w3schools.com/css/css_grid.asp

概念

grid row

grid column

grid gap

grid-gap

简写属性

  • 语法

    • grid-gap: row-gap, column-gap
grid-column-gap
grid-row-gap
1
2
3
4

  .grid-container {
display: grid;
grid-column-gap: 50px;
  }

grid lines

grid row line
grid column line

Item 放置位置

grid-column-start
grid-column-end
grid-row-start
grid-row-end
1
2
3
4

  .item1 {
grid-row-start: 1;
grid-row-end: 3;
  }
grid-column
grid-row
  • 两种设置方法
 1
 2
 3
 4
 5
 6
 7
 8
 9
10

  /* 指定 起始点 和 终点 */
  .item1 {
  grid-row: 1 / 4;
  }


  /* 指定 起始点 和 跨行数 */
  .item1 {
  grid-row: 1 / span 2;
  }
grid-area
  • 指定 开始位置（行列），结束位置（行列）
1
2
3

  .item8 {
grid-area: 1 / 2 / 5 / 6;
  }

  • 指定开始位置（行列），跨行跨列

    1
2
3

    .item8 {
grid-area: 2 / 1 / span 2 / span 3;
}

创建 Grid

指定行

grid-template-rows
1
2
3
4

.grid-container {
display: grid;
grid-template-rows: 80px 200px;
}

指定列

grid-template-columns
1
2
3
4

.grid-container {
display: grid;
grid-template-columns: 80px 200px auto 40px;
}

  • 语法

    • 逐列指定宽度
    • auto: 自动确定，占位符
    • 参数数量即列数

Item 分布

justify-content

整体对齐

  • start
  • end
  • space-around
  • space-between

align-items

水平对齐

  • start
  • end
  • space-around
  • space-between

命名 Area 网格布局

单行情况

1
2
3
4
5
6
7
8

.item1 {
grid-area: myArea;
}

.grid-container {
display: grid;
grid-template-areas: 'myArea myArea . . .';
}

  • 实现原理

    • 如上面的例子，myArea 出现了两次，说明 myArea 对应的元素 .item1 占两行
    • 名称出现的次数 <—-> 所占的列数

多行情况

  • 使用多个 template, 定义多行
1
2
3

.grid-container {
  grid-template-areas: 'myArea myArea . . .' 'myArea myArea . . .';
}