CSS

发表于 更新于 分类于 阅读次数：

…

选择器

id选择器：#div-1

class选择器：.div

1
2
3
4
5
6
7
8
9
a
::before
.link
[type=radio]  // 属性选择器
:hover
#id
[type=checkbox]+label  // 组合选择器
:not(.link)  // 否定选择器
*{}

权重

  • !important
  • 内联样式
  • 相同权重下后写的生效

组合选择

后代选择器(以空格分隔)
子元素选择器(以大于号分隔）
相邻兄弟选择器（以加号分隔）
普通兄弟选择器（以破折号分隔）

分组与嵌套

分组

1
2
3
4
h1,h2,p
{
    color:green;
}

p{ }: 为所有 p 元素指定一个样式。
.marked{ }: 为所有 class=”marked” 的元素指定一个样式。
.marked p{ }: 为所有 class=”marked” 元素内的 p 元素指定一个样式。
p.marked{ }: 为所有 class=”marked” 的 p 元素指定一个样式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
p
{
    color:blue;
    text-align:center;
}
.marked
{
    background-color:red;
}
.marked p
{
    color:white;
}
p.marked{
    text-decoration:underline;
}

伪类

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

:checked：input:checked：选择所有选中的表单元素

:disabled：input:disabled：选择所有禁用的表单元素

:empty：p:empty：选择所有没有子元素的p元素

:enabled：input:enabled：选择所有启用的表单元素

:first-of-type：p:first-of-type：选择的每个 p 元素是其父元素的第一个 p 元素

:in-range：input:in-range：选择元素指定范围内的值

:invalid：input:invalid：选择所有无效的元素

:last-child：p:last-child：选择所有p元素的最后一个子元素

:last-of-type：p:last-of-type：选择每个p元素是其母元素的最后一个p元素

:not(selector)：:not(p)：选择所有p以外的元素

:nth-child(n)：p:nth-child(2)：选择所有 p 元素的父元素的第二个子元素

:nth-last-child(n)：p:nth-last-child(2)：选择所有p元素倒数的第二个子元素

:nth-last-of-type(n)：p:nth-last-of-type(2)：选择所有p元素倒数的第二个为p的子元素

:nth-of-type(n)：p:nth-of-type(2)：选择所有p元素第二个为p的子元素

:only-of-type：p:only-of-type：选择所有仅有一个子元素为p的元素

:only-child：p:only-child：选择所有仅有一个子元素的p元素

:optional：input:optional：选择没有”required”的元素属性

:out-of-range：input:out-of-range：选择指定范围以外的值的元素属性

:read-only：input:read-only：选择只读属性的元素属性

:read-write：input:read-write：选择没有只读属性的元素属性

:required：input:required：选择有”required”属性指定的元素属性

:root：root：选择文档的根元素

:target：#news:target：选择当前活动#news元素(点击URL包含锚的名字)

:valid：input:valid：选择所有有效值的属性

:link：a:link：选择所有未访问链接

:visited：a:visited：选择所有访问过的链接

:active：a:active：选择正在活动链接

:hover：a:hover：把鼠标放在链接上的状态

:focus：input:focus：选择元素输入后具有焦点

:first-letter：p:first-letter：选择每个

元素的第一个字母

:first-line：p:first-line：选择每个

元素的第一行

:first-child：p:first-child：选择器匹配属于任意元素的第一个子元素的

元素

:before：p:before：在每个

元素之前插入内容

:after：p:after：在每个

元素之后插入内容

:lang(language)：p:lang(it)：为

元素的lang属性选择一个开始值

伪元素

::link：a::link：选择所有未访问链接

::visited：a::visited：选择所有访问过的链接

::active：a::active：选择正在活动链接

::hover：a::hover：把鼠标放在链接上的状态

::focus：input::focus：选择元素输入后具有焦点

::first-letter：p::first-letter：选择每个<p> 元素的第一个字母

::first-line：p::first-line：选择每个<p> 元素的第一行

::first-child：p::first-child：选择器匹配属于任意元素的第一个子元素的 <p> 元素

::before：p::before：在每个<p>元素之前插入内容

::after：p::after：在每个<p>元素之后插入内容

::lang(language)：p::lang(it)：为<p>元素的lang属性选择一个开始值

CSS heck

用于兼容 IE

属性

背景

background：简写属性，作用是将背景属性设置在一个声明中。

  • 渐变
    • linear-gradient(left, red, green)
    • linear-gradient(to right, red, green)
    • linear-gradient(180deg, red, green)
  • 多背景叠加
    • linear-gradient(180deg, red 0, green 10%, yello 50%, black 100%), linear-gradient(45deg, red 0, green 10%, yello 50%, black 100%)
  • 背景图片
    • red url(./test.png)
    • red url(data:image/png;base64,…)

background-size: 背景大小，默认是平铺

background-attachment：背景图像是否固定或者随着页面的其余部分滚动。

background-color：设置元素的背景颜色。

background-image：把图像设置为背景。

background-position：设置背景图像的起始位置。

  • center top

background-repeat：设置背景图像是否及如何重复。

  • norepeat
  • repeat-x

文本

文字排版

  • 底线，底线：跟行高没关系
  • 基线：默认按照此线对齐

color：设置文本颜色

background: 背景颜色

  • 尺寸由字体决定，而不是line-box

direction：设置文本方向。

letter-spacing：设置字符间距

line-height：设置行高

  • 行高由line-box决定
  • 文字默认是垂直居中在line-box中

text-align：对齐元素中的文本

text-decoration：向文本添加修饰

text-indent：缩进元素中文本的首行

text-shadow：设置文本阴影

text-transform：控制元素中的字母

unicode-bidi：设置或返回文本是否被重写

vertical-align：设置元素的垂直对齐，依据底线，顶线，默认基于基线

  • middle
  • top
  • 10px

white-space：设置元素中空白的处理方式

word-spacing：设置字间距

字体

字体族：

  • 衬线字体 serif：宋体
  • 非衬线字体 sans-serif：黑体
  • 等宽字体 monospace：monaco
  • 手写体 cursive
  • 花体 fantasy

多字体 Fallback：尝试挨个使用字体

网络字体与自定义字体。

iconfont 字体图标。

属性值

font：在一个声明中设置所有的字体属性

font-family：指定文本的字体系列

  • “字体用引号引起” 字体族不用引号
  • “Microsoft Yahei” serif
  • 一般写不同平台下的字体
  • 如果使用自定义字体，需要手动引入
    1
    2
    3
    4
    5
    6
    7
    8
    /* 定义字体 */
    @font-face {
      font-family: "IF";
      src: url("./font.ttf");
    }
    .custom{
      font-family: IF;
    }

font-size：指定文本的字体大小

font-style：指定文本的字体样式

font-variant：以小型大写字体或者正常字体显示文本。

font-weight：指定字体的粗细。

边框

border：简写属性，用于把针对四个边的属性设置在一个声明。

  • 大小 线形 颜色
  • 边框背景图
  • 边框衔接（三角形）

border-style：用于设置元素所有边框的样式，或者单独地为各边设置边框样式。

  • solid
  • dashed
  • dotted

border-image：边框背景图

  • url(…) 30px round; 角上 30px 保留，其余拉伸（重复）
    • repeat
    • round

border-width：简写属性，用于为元素的所有边框设置宽度，或者单独地为各边边框设置宽度。

border-color：简写属性，设置元素的所有边框中可见部分的颜色，或为 4 个边分别设置颜色。

border-bottom：简写属性，用于把下边框的所有属性设置到一个声明中。

border-bottom-color：设置元素的下边框的颜色。

border-bottom-style：设置元素的下边框的样式。

border-bottom-width：设置元素的下边框的宽度。

滚动与换行

overflow

  • visible - 超出
  • hidden - 超出隐藏
  • scroll - 滚动条显示
  • auto - 默认不显示滚动条

滚动条样式

1
2
3
::-webkit-scrollbar{
  display: none;
}

overflow-wrap：是否换行

  • break-word
  • normal
  • keep-all

word-break：针对多字节文字

white-space：空白处断行

margin

margin：简写属性。在一个声明中设置所有外边距属性。
margin-bottom：设置元素的下外边距。
margin-left：设置元素的左外边距。
margin-right：设置元素的右外边距。
margin-top：设置元素的上外边距。

padding

padding：使用简写属性设置在一个声明中的所有填充属性
padding-bottom：设置元素的底部填充
padding-left：设置元素的左部填充
padding-right：设置元素的右部填充
padding-top：设置元素的顶部填充

尺寸

height：设置元素的高度。
line-height：设置行高。
max-height：设置元素的最大高度。
max-width：设置元素的最大宽度。
min-height：设置元素的最小高度。
min-width：设置元素的最小宽度。
width：设置元素的宽度。

可见与形式

1
2
3
4
h1.hidden {visibility:hidden;}
h1.hidden {display:none;}
li {display:inline;}
span {display:block;}

链接

1
2
3
4
a:link {color:#000000;}      /* 未访问链接*/
a:visited {color:#00FF00;}  /* 已访问链接 */
a:hover {color:#FF00FF;}  /* 鼠标移动到链接上 */
a:active {color:#0000FF;}  /* 鼠标点击时 */

列表

list-style：简写属性。用于把所有用于列表的属性设置于一个声明中
list-style-image：将图象设置为列表项标志。
list-style-position：设置列表中列表项标志的位置。
list-style-type：设置列表项标志的类型。

表格

1
2
3
4
5
6
7
table, th, td
{
    border: 1px solid black;
    border-collapse:collapse;
    width:100%;
    height:50px;
}

定位

bottom：定义了定位元素下外边距边界与其包含块下边界之间的偏移。
auto
length
%
inherit
clip：剪辑一个绝对定位的元素
shape
auto
inherit
cursor：显示光标移动到指定的类型
url
auto
crosshair
default
pointer
move
e-resize
ne-resize
nw-resize
n-resize
se-resize
sw-resize
s-resize
w-resize
text
wait
help
left：定义了定位元素左外边距边界与其包含块左边界之间的偏移。
auto
length
%
inherit
overflow：设置当元素的内容溢出其区域时发生的事情。
auto
hidden
scroll
visible
inherit
overflow-y：指定如何处理顶部/底部边缘的内容溢出元素的内容区域
auto
hidden
scroll
visible
no-display
no-content
overflow-x：指定如何处理右边/左边边缘的内容溢出元素的内容区域
auto
hidden
scroll
visible
no-display
no-content
position：指定元素的定位类型
absolute
fixed
relative
static
inherit
right：定义了定位元素右外边距边界与其包含块右边界之间的偏移。
auto
length
%
inherit
top：定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
auto
length
%
inherit
z-index：设置元素的堆叠顺序：
number
auto
inherit

动画

transition

主要用于属性值的平滑过渡。

1
2
3
4
5
6
7
8
p{
  transition: <property-name> <time> <mode>, <property-name> <time> <mode>, ...;
}
p{
  transition-property: <property-name>;
  transition-duration: <time>;
  transition-function: <mode>;
}

mode

  • ease
  • linear
  • ease-in
  • ease-out
  • ease-in-out

例如

1
2
3
4
5
6
p{
  transition: color 1s;
  &:hover{
    /*  */
  }
}

CSS 3D

1
2
3
4
5
6
7
8
9
10
11
12
// 首先设置场景
.area{
  perspective: 800px;  // 距离物体的距离 像素
  perspective-origin: 50% 50%;  // 视点 屏幕中间
  // 元素 transform3d 移动变换元素: translate, rotate
  p{
    transform: translate3d(-30%, 30%, 0);
    transform: rotate3d(45deg, 0, 0);
    transform-origin: ... // 调整旋转轴
  }
}

animation

主要用关键帧制作动画。

布局

概览

table 布局

float + margin 布局

inline + block 布局

flex 布局

grid 布局

position

  • static 按照文档流布局
    • 不可以使用 z-index
  • relative 偏移本来的位置
  • absolute 相对父元素(也是absolute)的位置
  • fixed 相对屏幕

默认方式，流式布局

  • 块元素会按垂直方向排列
  • 内联元素一般从左向右排列

当使用CSS时，布局就开始离开流式布局了。使用如下方式会离开流式布局：

  • display
  • float
  • position
  • 表格布局
  • 多列布局

Display 属性

默认所有的元素都有display属性。例如div的display属性默认为block，span的display属性默认为inline。这个属性的取值有：

  • block - 块元素
  • inline - 内联元素
  • inline-block - 内联元素，允许元素设置宽度和高度，表现为行内的块。
  • flex - 块元素，其子元素采用flex布局
  • grid - 块元素，其子元素采用grid布局

Position 定位技术

使用position会让元素脱离文档，固定在页面或屏幕的某一个位置。

  • static - default 不脱离文档
  • relative - 相对于原来的位置做微调，会在文档流中占用空间
  • absolute - 相对于页面定位，脱离文档流
  • fixed - 相对于屏幕定位，脱离文档流
  • sticky - 相对于屏幕定位，直到到达它本该出现的位置，就恢复原来的定位

同时需要配合如下属性使用

  • left - 距离左边界
  • top - 距离上边界
  • right - 距离右边界
  • bottom - 距离下边界

浮动布局

浮动会脱离文档流，但是不会脱离文本流。

对自身的影响

  • 形成块
  • 尽可能向上，向左，向右靠

对父级的影响

  • 从布局上消失
  • 造成高度塌陷

清除浮动

1
2
3
4
5
6
7
8
9
10
img
{
    float:right;
}

/* 清除浮动 */
.text_line
{
    clear:both;
}

或者

1
2
3
4
5
6
7
.clear-fix::after{
  content: " ";
  clear: both;
  display: block;
  height: 0;
  visibility: hidden;
}

当元素设置了float属性时，元素会脱离正常布局流，其他内容会环绕在该元素周围。该元素会浮动到父元素的左右两侧。
float

  • left
  • right
  • none - default 不浮动
  • inherit - 继承父元素的float属性

注意，当子元素设置了float属性时，由于子元素脱离了文档流，父元素会无法被子元素撑开。此时，就需要在父元素的最后加入一个元素来撑开父元素。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
使用 clear: both
<div style="width: 50px; background: yellow">
    <div style="float: left">content</div>
    <div style="clear: both"></div>
</div>

使用伪类，在元素内部的最后插入一个伪类元素
<style>
  .container:after{
    clear: both;
    content: " ";
    display: block;
    visibility: hidden;
  }
</style>
<div class="container" style="width: 50px; background: yellow">
    <div style="float: left">content</div>
</div>

使用 overflow
<div style="width: 50px; background: yellow; overflow: hidden">
    <div style="float: left">content</div>
</div>

overflow是当内容溢出时的处理策略，还可以对overflow-x，overflow-y单独设置。

  • visible - default 溢出后的内容出现在父元素框外
  • hidden - 溢出部分被剪裁，父元素尺寸自适应
  • scroll - 显示滚动条，可以通过滚动条查看溢出部分
  • auto - 如果溢出，才显示滚动条
  • inherit - 继承父元素的属性

inline block 布局

不用处理浮动，但是要处理间隙。

方式一，设置字体大小为0

方式二，HTML中去除回车，空格之类的空白字符。

Flex

每个盒子可以伸缩，且是并列的。也可以指定宽度。

1
2
3
4
5
6
7
8
9
10
.container{
  display: flex;
  .item{
    flex: 1; // 占据的比例
  }
  .fix-item{
    flex: none;
    width: 50px;
  }
}

轴向：

  • main 主轴
  • cross 交叉轴

属性

  • flex-direction 主轴方向
    • row
    • column
    • row-reverse
  • flex-wrap 是否可以换行
  • justfy-content 主轴上的对齐方式
    • flex-start
    • flex-end
    • center
    • space-between
    • space-around
  • align-items 交叉轴上的对齐
    • flex-start
    • flex-end
    • center
    • baseline
    • stretch
  • align-content 多个轴的对齐方式

子元素

  • order 顺序
  • flex-grow 放大比例
  • flex-shrink 缩小比例
  • flex-basis 占据比例
  • flex 前三者的缩写
  • align-self 自己的对齐方式

当父元素为display: flex布局时，div子元素将自动按列排序，也就是排成一行。父元素也可以通过设置属性来改变排列方向，以及子元素的高度是否拉伸到一致。

  • flex-direction:
    • row - default 横向排列
    • column
    • row-reverse
    • column-reverse
  • flex-wrap:
    • wrap - 允许换行
    • no-wrap
  • flex-flow:
    • row wrap - 合并写法
  • align-items:
    • stretch - default 拉伸到一致

同样，子元素也可以设置属性。

  • flex:
    • 1 - 元素占的比例，此时行会被填满
    • 200px - 元素宽度，如果是按行排列
    • 1 200px - 设置最小200px的尺寸

Grid 布局

当父元素为display: grid布局时，div子元素将自动按顺序被填充到表格中。

  • grid-template-columns:
    • 250px repeat(3, 1fr) - 第一列 250px，后三列 平分空间
  • grid-template-rows:
    • 100px 100px - 两行，每行100px
  • grid-gap
    • 10px - 行或列的间隔

子元素也可以根据需要跨行或跨列

  • grid-column:
    • 2 - 在第二列显示
    • 2 / 4 - [2, 4) （从一开始）第二列开始，第四列之前结束
  • grid-row:
    • 1 / 3 - [1, 3) （从一开始）第一行开始，第三行之前结束

响应式设计

考虑不同屏幕，鼠标，多点触屏。

设计之前考虑：

  • 哪些内容可以隐藏，点击弹出
  • 何时折行
  • 自适应空间

方法

  • rem
  • viewport
  • media query
1
2
3
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta name="viewport" content="width=320"/>
或使用脚本动态计算
1
2
3
4
5
@media (max-width: 640px) {
  .left{
    display: none;
  }
}

移动设备

在移动设备中，1px不等于设备的物理1像素，而是根据情况有多种取值可能。我们通常定义浏览器默认的尺寸layout viewport来表示一个页面的尺寸。对于移动设备访问PC端的页面，通常layout viewport会大于浏览器的visual viewport尺寸的，也就是会出现横向滚动条。为了解决移动设备上看到的内容（如字号大小）与PC端差不多，又定义了ideal viewport，这个尺寸因设备而异。

1
2
3
4
// layout viewport
document.documentElement.clientWidth
// visual viewport
window.innerWidth

为了让移动设备默认使用ideal viewport而不是layout viewport来显示内容，就需要在页面头部加入如下内

1
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">

为了能够让内容在不同的CSS尺寸下使用不同的布局，CSS还提供了设备查询功能，用于响应式布局。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@media screen and (min-width: 600px) {
    .box-c{
        width: 300px;
        float: left;
        background: yellow;
    }
}
@media screen and (min-width: 300px) and (max-width: 600px){
    .box-c{
        width: 100%;
        float: left;
        background: yellow;
    }
}

依据尺寸动态加载CSS

1
2
<link rel="stylesheet" media="screen and (min-width:900px)" href="big.css" type="text/css"/>
<link rel="stylesheet" media="screen and (max-width:600px)" href="small.css" type="text/css"/>

使用Javascript编辑Media Query CSS

1
2
3
4
5
6
7
8
9
10
11
12
13
// Create a condition that targets viewports at least 768px wide
const mediaQuery = window.matchMedia('(min-width: 768px)')
function handleTabletChange(e) {
  // Check if the media query is true
  if (e.matches) {
    // Then log the following message to the console
    console.log('Media Query Matched!')
  }
}
// Register event listener
mediaQuery.addListener(handleTabletChange)
// Initial check
handleTabletChange(mediaQuery)

单位

绝对单位

  • cm - 厘米
  • mm - 毫米
  • in - 英寸 96px
  • px - 像素
  • pt - 点

相对单位

  • em - 字体大小
  • ch - 相对于 0 的宽度
  • rem - 根元素的字体大小
  • vw - Viewport宽度的 1%
  • vh - Viewport高度的 1%
  • vmin - Viewport较小尺寸的 1%
  • vmax - Viewport较大尺寸的 1%
  • % - 相对于父元素