CSS 基本使用

作者: dawsonenjoy | 来源:发表于2019-07-19 16:36 被阅读0次

引用CSS方式

内部引用

html文件中写一个<style>标签，并将样式写入到里面，举例：

<style type="text/css">
 p {
 background: blue;
 font-size: large;
 }
</style>

外部引用

通过<link>标签实现，里面有rel表示关系，href表示css文件地址，举例：

<link rel="stylesheet" type="text/css" href="a.css">

CSS文件内部引入其他CSS文件

@import url(xxx);
// 举例：@import url("1.css");

注1：
引用可以同时用，样式也可以覆盖样式，所以最终样式根据设置样式的优先级决定（一般范围越精确优先级越高），如果优先级相同就按最后设置的确定，比如先内部设置背景是蓝色，在后面再引用外部样式把背景弄成绿色，那么最终就是绿色。但是有个例外的就是，如果某个样式十分重要，不希望被覆盖，就可以在那个的值后面加：!important，这样就能保证样式固定，举例：

p {
 color: green !important;
 }
<p style="color: gray">AAA</p>

结果就会发现本该是灰色的字因为green的时候加了!important，最终显示的还是绿色

注2：
link标签不止可以引入CSS，还可以引入网页图标等，举例：

<link rel="stylesheet" type="text/css" href="https://xxx.css">
<!-- 引入CSS -->
<link rel="icon" type="image/x-icon" href="http://xxx.com/favicon.ico">
<!-- 引入网页图标（支持ico和png格式）-->
<!-- 其中type属性可以省略，但是rel属性不能省略（用于指定文档和链接资源的关系），rel设置了，对应的type默认也会被确定 -->

媒体类型

页面的在对应媒体类型的展示样式，主要是screen和print两种，分别决定了屏幕和打印时的界面样式，也可以设置all（默认），代表全部设备都兼容的样式，举例：

<style media="screen">
  body {
    background: blue;
  }
</style>
<style media="print">
  body {
    background: green;
  }
</style>

link标签导入

<link rel="stylesheet" href="xxx.css" media="screen">

css内部导入

@import url(xxx.css) print;

媒体流响应式设置常用关键词

screen
print
all
and
or
not
only  浏览器支持的样式才能正常显示，否则全部忽略

举例：

@media not print and (min-width: 100px) or ... {
  ...
}

响应式布局

如果希望界面样式能够随着窗口大小的改变而改变，即实现响应式布局，首先需要设置如下标签：

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

媒体查询

link标签下的media属性，可以设置css文件使用条件，因此常用来判断是在PC端还是移动端，举例：

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<!-- 响应式布局必须设置的标签 -->
<link media="(min-width: 500px)" rel="stylesheet" href="pc.css" />
<!-- 当窗口宽度大于500时使用pc.css -->
<link media="(min-width: 400px) and (max-width: 500px)" rel="stylesheet" href="mobile.css" />
<!-- 当窗口宽度大于400且小于500时使用mobile.css -->

更多关于媒体查询可以参考：
https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries

设置样式条件

CSS文件中也可以通过语句来根据条件来决定是否使用该样式，举例：

@media(条件) {
  样式1:xxx;
  ...
}

例如根据屏幕宽度改变样式：

input {  /* 默认样式 */
    width: 14.893617021276595%;
    *width: 14.840425531914894%;  /* *表示兼容IE浏览器 */
}
@media (min-width: 768px) and (max-width: 979px) {  /* 窗口大小在768~979之间 */
    input {
        width: 14.3646408839779%;
        *width: 14.311449394616199%;
    }
}

选择器

参考我的另一篇：CSS选择器

继承

继承概念：如果一个元素没有设置某个属性，那么其就会跟随于父元素的该属性值

属性继承

CSS中一些属性是可以继承的，如：color、font-size，而对于不可继承的属性，可以通过对该属性设值为inherit来实现强制继承

继承值

继承的是计算值（computed里的），而不是设置的值，例如父元素中设置font-size为50%，实际计算出来的结果是10px，那么子元素继承的就是10px而不是50%

元素区分

基于显示类型

主要分为：块级元素/行内元素

块级元素

独占一行，即使宽没有占满一行，这一行也不让别的元素使用，并且有宽高可以设置，如：div/p/ul/...

行内元素

多个行内元素能够在父元素的同一行内显示，没有宽高（inline-block属于块级和行内级的结合），如：span/a/img/iframe/canvas/video/audio等
注：：
行内元素注意：因为行内元素没有宽高（其宽高就是内容本身大小），因此无法设置width/height/margin-top/margin-bottom属性，但是可以设置margin-left/margin-right

基于内容类型

替换元素

元素本身无内容，而是根据其类型和属性来决定显示的内容，如：img/input/video/...
注：
可以看到如img虽然是行内元素，但其可以设置宽高（行内级替换元素可以设置宽高）

非替换元素

元素本身有内容，而无需本身的类型和属性来决定显示的内容，如：div/...

常用样式

通用属性

initial  使用默认值
inherit  继承于父类
unset  不设置（可以理解为如果可继承的样式，则继承，否则使用默认值）

参考：https://www.cnblogs.com/coco1s/p/6733022.html

固定样式不被覆盖

!important  /* 在样式的值后面加这个就能保证不被覆盖 */

基本单位

px  绝对单位，具体的像素大小
em  相对单位，相对于当前对象font-size的比例（如果没设置font-size会继承父类的），可以设置几个字的间距
rem  相对单位，相对于html的font-size比例
vh  相对于视图窗口的高度比例
vw  相对于视图窗口的宽度比例
vmin  vw和vh中较小的一个值
vmax  vw和vh中较大的一个值
fr  按比例分配

如果当前标签使用了em单位，但没有font-size，就找父元素的font-size，所以body是整体的默认font-size，其他的应该根据body的用em按比例设置font-size（而子元素则根据父元素的比例设置font-size），否则直接写死的话，将来维护将会特别麻烦
还有如rem/vw/vh等单位，可以参考：https://blog.csdn.net/u013594477/article/details/80232495

颜色相关

color

设置标签的前景色（除了背景色以外的，例如文字、边框、外轮廓等颜色，而不单只是文字颜色），举例：

color: red;

opacity

透明度，举例：

opacity:0.4;  /* 透明度百分比 */

transparent

完全透明，相当于rgba(0,0,0,0)，举例：

background-color: transparent;

linear-gradient

线性渐变，举例：

background: linear-gradient(to left, red, green, blue);
/* 从右往左依次红绿蓝渐变 */
background: linear-gradient(to right top, red, blue);  /* 从左下角到右上角，红色到蓝色渐变 */
background: linear-gradient(60deg, red, blue, green, yellow, pink, white);
/* 旋转60度，从左到右按上面传递颜色渐变 */

radial-gradient

径向渐变，举例：

background: radial-gradient(100px 100px, red, green, blue);
/* 红绿蓝分别以半径50px从圆心向外扩散 */
background: radial-gradient(red, blue, green, yellow, pink, white);
/* 从里到外按上面传递颜色渐变 */
background: radial-gradient(circle at 10px 10px, red, blue, green 50%, yellow, pink, white);
/* 从(10, 10)开始，以圆形往外按上面传递颜色渐变，并且绿色的范围只占原来的一半 */
background: radial-gradient(300px 100px ellipse, red, green, yellow, white);
/* 横向300px，纵向100px的椭圆往外按上面传递颜色渐变 */

repeating-linear-gradient

重复线性渐变，我们可以用其实现一些条纹样式，举例：

background: repeating-linear-gradient(45deg, blue 0px, blue 30px, white 30px, white 60px);
/* 倾斜45度，0~30px部分为蓝色，30~60px部分为白色，循环线性渐变的蓝白条纹 */

repeating-radial-gradient

重复径向渐变，举例：

repeating-radial-gradient(circle, blue 10px, white 20px)
/* 圆形，0~10px部分为蓝色，10~30px部分为白色，循环径向渐变的蓝白条纹 */

盒子模型相关

margin

外边距，举例：

margin: 0px 0px 0px 0px;  /* 四个分别表示上右下左的外边距，也有对应的margin-top等 */

padding

内边距，举例：

padding: 0px 0px 0px 0px;  /* 四个分别表示上右下左的内边距 */

border

边框，举例：

border: 1px solid green; /* 边框粗细、边框类型、边框颜色 */

通过border实现三角形

div {
  height: 0px;
  width: 0px;
  border-left: 100px solid yellow;
  border-bottom: 100px solid transparent;
  transform: rotate(45deg)
}

两个border连在一起，中间会有条斜线隔开，把元素长宽改成0，并且其中一个border设成透明，就是三角形了，然后可以通过transform调整方向

border-collapse

合并边框，举例：

table {
  border-collapse: collapse;
}

border-radius

边框角度，举例：

border-radius: 10px;  /* 代表4个角都变成半径为10px的圆角，可以传四个数值，一次为左上->右上->右下->坐下 */
border-radius: 50%;  /* 直接拿尺寸的一半变成半径，相当于直接变成椭圆/圆了 */

box-shadow

盒子阴影，属性取值：

水平偏移(px)  垂直偏移(px)  模糊半径(px)  延伸距离(px)  阴影颜色(color)  内框阴影(inset，默认外框)

举例：

box-shadow: 10px 10px 5px 10px green inset;
/* x轴往右偏移10px（负的就代表向左偏移），y轴往下偏移10px，
模糊范围宽度为5px，阴影尺寸为10px，颜色为绿色，向内展示阴影 */

box-sizing

设置盒子模型类型，主要分为两种：
标准盒子模型：实际宽高width/height为内容（content）的宽高，也是默认常用的
IE盒子模型：元素实际宽高width/height中把padding和border也算在内（content+padding+border），适合经常调整padding，但不希望宽高发生变化的时候（固定width/height，那么调整padding时，只会改变content。但要注意其不会改变border，因此当content缩小到0时，padding+border还是超出了宽高限制时，那么宽高以超出的结果为准，例如：height为100px，padding为50px，border为10px，那么最终的content为0，height为0+50*2+10*2=120）
取值如下：

content-box  标准盒子模型，默认（width/height = content）
border-box  IE盒子模型（width/height = content + padding + border）

height/width自适应属性

fill-available  自动撑满可用空间
fit-content  内容多大就多大
max-content
min-content

参考：https://www.cnblogs.com/xiaohuochai/p/7210540.html

布局相关

display

设置元素的显示类型，常用值如下：

block  块级元素
inline  行内级元素
inline-block  同时具备块级、行内级元素特征：跟多个行内级元素可以同一行显示，并且可以设置宽高（默认由内容决定）
none  不占空间（隐藏）

注：
块级元素和inline-block元素一般内部可以包含块级、inline-block、行内级元素，但是p标签作为块级元素，不能包含块级元素；行内级元素一般内部只能包含行内级元素

display其他属性

table  table标签
inline-table  inline的table标签
table-row  tr标签，表格中的一行
table-cell  td/th标签，一个单元格
table-row-group  tbody标签，表格内容
table-header-group  thead标签，表格头
table-footer-group  tfoot标签，表格尾部
table-caption  caption标签，表格的标题
list-item  li标签
grid  栅格布局

栅格布局

将元素拆分为xx行和yy列进行展示，类似于表格的布局，但对于各行各列的宽高占比，可以很方便的进行分配，举例：

<head>
<style>
    .grid {
        background-color: white;
        display: grid;
        /* 栅格布局 */
        grid-template-rows: auto;
        /* 多行高度平均分配 */
        grid-template-columns: 1fr 2fr 3fr 2fr 1fr;
        /* 每行分5列，宽度比为：1:2:3:2:1 */
        height: 300px;
        width: 600px;
        grid-gap: 2px;
    }
    .grid>div{
        background-color: cadetblue;
    }
</style>
</head>

<body>
    <div class="grid">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
        <div>9</div>
        <div>10</div>
        <div>11</div>
        <div>12</div>
        <div>13</div>
        <div>14</div>
        <div>15</div>
    </div>
</body>

栅格布局相关属性

类似栅格系统一样可以给内容分列显示

分列数：column-count

column-count: 3; /* 分3列 */

分列间隔：column-gap

column-gap: 10px; /* 分列间隔为10px */

分列边框样式：column-rule

column-rule: 2px solid yellow; /* 分列边框2px，黄色 */

flex

弹性布局，在移动端开发中很常用，其中设置display: flex;或display: inline-flex;的元素被称为flex container，而其的直接子元素（子元素的子元素不算）则被称为flex items

常用属性

flex-direction

规定主轴的方向，常用值如下：

row  主轴从左到右，交叉轴从上到下
row-reverse  主轴从右到左，交叉轴从上到下
column  主轴从上到下，交叉轴从左到右
column-reverse  主轴从下到上，交叉轴从左到右

justify-content

规定flex items在主轴上的对齐方式，常用值如下：

flex-start  与主轴头对齐（例如`row`下就是向左对齐）
flex-end  与主轴尾对齐
center  居中对齐
space-between  两端对齐，并且`flex items`之间距离相等
space-evenly  在两端以及`flex items`之间距离相等
space-around  在两端的距离是`flex items`之间距离的一半

align-items

规定flex items在交叉轴的对齐方式，常用值如下：

flex-start  与交叉轴头对齐
flex-end  与交叉轴尾对齐
center  居中对齐
baseline  与基线对齐
strech  如果flex items在交叉轴方向的size为auto时，将填充占满交叉轴

flex-wrap

规定flex container是单行还是多行

nowrap  单行，默认
wrap  多行
wrap-reverse  多行，但是交叉轴是反过来的

flex-flow

flex-direction和flex-wrap的简写，举例：

flex-flow: cloumn wrap;

align-content

规定多行flex items在交叉轴的对齐方式，常用值如下：

flex-start  与交叉轴头对齐
flex-end  与交叉轴尾对齐
center  居中对齐
stretch  如果多行flex items在交叉轴方向的size为auto时，将填充占满交叉轴
space-between  交叉轴两端对齐，并且`flex items`之间距离相等
space-evenly  交叉轴两端以及`flex items`之间距离相等
space-around  交叉轴两端的距离是`flex items`之间距离的一半

order

规定flex items的排列顺序，可以设置任何整数（默认为0），值越小越靠前

align-self

flex items通过该属性可以覆盖flex container中设置的align-items属性，属性值参考align-items

flex-grow

规定flex items的扩展行为，可以设置任意正数或者0（默认为0）
注：
该属性只有flex container在主轴方向有剩余空间时才有效

flex-shrink

规定flex items的收缩行为，，可以设置任意正数或者0（默认为1）
注：
该属性只有flex items在主轴方向超过了flex container的尺寸时才有效

flex-basis

规定flex items在主轴上的尺寸，常用值如下：

auto  默认
content  根据内容size决定

flex

flex-grow、flex-shrink和flex-basis的简写，举例：

flex: 0 0 auto;

定位相关

position

指定元素的定位方式，常用值如下：

static  静态定位，默认
relative  相对定位
absolute  绝对定位
fixed  固定定位
sticky  粘性定位

静态定位

标准流布局下的默认定位方式
注：
标准流：元素默认从上到下，从左到右的排序方式

相对定位

在标准流布局下，可以通过left/right/top/bottom属性，参照原来的位置进行定位偏移

绝对定位

元素脱离标准流，通过left/right/top/bottom属性，参照父元素中最近的一个定位元素（非静态定位的元素）进行定位

固定定位

元素脱离标准流，通过left/right/top/bottom属性，参照浏览器窗口的位置进行固定定位

粘性定位

类似于相对定位+固定定位，当内容没到父元素边界时，按相对定位行为正常展示；当到达父元素边界时，则会固定在指定位置上，适用于那种阅读文章时，固定当前章节的标题在顶部的场景，举例：

<head>
    <style>
    .main {
        width: 200px;
        height: 200px;
        overflow: auto;
    }
    .head {
        position: sticky;
        width: 200px;
        height: 30px;
        top: 0px;
        background-color: red;
    }
    .content {
        height: 200px;
        background-color: burlywood;
    }
    </style>
</head>

<body>
    <div class="main">
        <div class="head">111</div>
        <div class="content">xxxxxxx</div>
        <div class="head">222</div>
        <div class="content">yyyyyyy</div>
        <div class="head">333</div>
        <div class="content">zzzzzzz</div>
    </div>
</body>

更多参考：https://www.cnblogs.com/coco1s/p/6402723.html

注：
绝对定位元素（绝对、固定）都会脱标，并且不再区分inline和block，宽高默认是自己的内容大小，但是可以设置宽高（类似inline-block，但不是，此时设置display属性已经对其没有效果）

子绝父相

由于绝对定位的参照是父元素中最近的定位元素（非静态定位的元素），如果此时不希望父元素脱标，一般会讲父元素设置为相对定位，也就是所谓的"子绝父相"

z-index

用于设置定位元素（非静态定位的元素）的层叠关系

元素重叠问题

非定位元素（static）一般不会重叠，但可以使用margin之类的属性实现重叠，此时一般后面的元素会盖在前面的上面
定位元素一定是盖在非定位元素上
定位元素之间可以通过z-index来确定层叠关系

z-index对比原则

同一个祖先元素下对比（兄弟关系，直接当前元素比较）：

z-index大的盖在上面（没设置默认是0）；
z-index相等，那么后面的盖在上面；

非同祖先元素对比（各自找出祖先元素中离自己最近的定位元素比较，标准和上面一样，跟当前元素的z-index无关），例如：

<head>
    <style>
        .a1, .a2 {
            height: 100px;
            width: 100px;
            position: relative;
        }
        .a1-1, .a2-1 {
            height: 100%;
            width: 100%;
        }
    </style>
</head>
<body>
    <div class="a1" style="z-index: 10;">
        <div class="a1-1" style="background: blue; z-index: 10;">div1</div>
    </div>
    <div class="a2" style="z-index: 1; top: -30px; left: 10px;">
        <div class="a2-1" style="background: green; z-index: 1000;">div2</div>
    </div>
</body>

这里因为div1的祖先元素大于div2的祖先元素，因此无论div2的z-index设置多大，都不可能盖住div1，只能通过将其祖先元素.a2的z-index调大才能实现

float

浮动样式，常用值如下：

none  不浮动，默认
left  向左浮动
right  向右浮动

float层叠关系

对于非定位元素，float元素一定盖在其上方
对于定位元素，一定盖在float元素上方

float规则

一旦设置了float属性不为none，则脱离标准流，直接往左/右边的父元素边界或者其他浮动元素上靠
float元素不能和行内级内容重叠（如span标签的行内元素、inline-block，包括块级内容里面的文字也是），其会将这些内容挤出去，因此可以用该特性实现文字环绕（图片作为浮动元素，将内部的文字挤开，从而实现效果）
float之间也不能重叠，而是紧贴上去。如果水平方向上空间不够时，则会沿垂直方向移动一些，直到有充足的空间可以装下该元素

clear

控制自身元素和浮动对象的位置关系，常用值如下：

none  无特殊要求，默认
left  要求元素顶部低于之前所有左浮动元素的底部（左侧不能有浮动元素）
right  ...右浮动...
both  ...左/右浮动...

背景相关

background-color

背景颜色，举例：

background-color: rgba(0, 0, 0, 0.3);  /* rgba前三个参数是三原色，最后一个是透明度百分比 */

background-image

背景图片，其会盖在background-color上，并且可以设置多张图片，举例：

background-image: url("xxx.jpg"), url("yyy.jpg"), ...;

设置多张图片时，第一张展示在最上面，其他的依次往下叠（所以是叠在一起展示的）
注1：
使用image-set设置多个背景图片时，还可以设置尺寸，此时浏览器会自动识别当前屏幕分辨率，并选择适配的背景图，举例：

background-image: image-set(url("xxx.jpg") 1x, url("yyy.jpg") 2x, ...);

注2：
设置的背景图片，需要元素有具体的宽高才能够展示出来

background-repeat

设置背景图片的展示是否平铺，常用值如下：

no-repeat  不平铺
repeat  平铺
repeat-x  水平平铺
repeat-y  垂直平铺

background-size

设置图片尺寸，举例：

background-size: 100px 50px;
/* 指定宽100px，高50px */
background-size: auto 50px;
/* 指定宽维持图片原本宽高比，高50px */
background-size: 100px auto;
/* 指定宽100px，高维持图片原本宽高比 */
background-size: 100px;
/* 指定宽100px，高维持图片原本宽高比（第二个不写，默认auto） */

background-position

背景图片在水平/垂直方向的具体位置，第一个是水平方向，第二个是垂直方向，举例：

background-position: 10px 20px;
/* 往右移动10px，往下移动20px */

其他设值：

水平：left|center|right
垂直：top|center|bottom

如果只设置一个，另一个默认是center
注：
该属性常结合雪碧图使用

background-attachment

设置背景图片的显示行为，常用值如下：

scroll  背景图片随元素一起滚动，默认
local  背景图片跟随元素及元素内容一起滚动
fixed  背景图片相对于浏览器窗口固定

注：
该属性经常用于希望整体页面背景不随着页面一起滚动的时候

background

是前面几个属性的简写属性，举例：

background: url("xxx.jpg") right bottom no-repeat fixed red;
/* 属性可省略，顺序也可以任意，但background-size必须紧跟在background-position后面 */

background-clip

背景覆盖到哪，常用值如下：

content-box  只覆盖内容
padding-box  只到padding里
border-box  只到边框，默认

字体相关

font-size

字体大小，举例：

font-size: 30px;

font-weight

字体粗细，举例：

font-weight: 100;

font-family

设置字体，可以设置多个，用逗号隔开
注1：当设置多个字体时，每个字（不是整个标签，而是以字符为单位）都会从第一个字体开始匹配，如果该字体能用，就不看后面的:
字体除非是有空格或者中文名，否则可以不加引号，举例：

font-family: "微软雅黑", Consolas, "Microsoft ..."

注2：因为中文字体一般兼容英文，这样英文字体可能就无法应用到英文上，所以英文字体应该放前面

@font-face

加载自定义字体，举例：

@font-face {
  /* 加载一个字体 */
  src: url("font/xxx.ttf");
  font-family: "我的字体";
  /* 给字体命名 */
}

.test {
  font-family: "我的字体";
  /* 使用前面加载的字体 */
}

font-style

字体样式，常用值如下：

normal  正常
italic  斜体
oblique  倾斜

注：如果字体不支持斜体那么italic则没有效果，而oblique则是不管支不支持斜体，都会将内容倾斜表示

文本相关

text-align

文字水平对齐，常用值如下：

left  左对齐
right  右对齐
center  居中
justify  两端对齐

vertical-align

设置行内级元素在垂直方向的位置，常用值如下：

baseline  与基线对齐，默认
sub  将元素基线下降
super  将元素基线上升
middle  元素中心点与父元素基线加上字母x一半高的线对齐
text-top  元素顶部和父元素内容的顶部对齐
text-bottom  元素底部和父元素内容的底部对齐
top  元素顶部和行顶部对齐
bottom  元素底边和行底边对齐
百分比  将元素基线上升/下降一定距离（相对于行高计算）
具体像素  将元素基线上升/下降一定距离

使用场景：如一些数学公式的上标和下标就可能用到sub/super

line-height

行高，定义：两行文字baseline之间的间距
baseline：小写字母x底部的对齐线
设置值：

数字+px  具体像素值
数字  相对于font-size的比例
百分比  相对于font-size的比例
normal  浏览器自动调整

注：
line-height设置的仅是最小行高，而不是最终行高，具体的行高可能会因为其他元素的影响而改变，例如下面这个例子：

div {
  line-height: 20px;
}

<div>aaa<img src="xxx.jpg"></div>

如果图片的高度大于20px，那么最终也会发现div的行高不止20px

letter-spacing/word-spacing

设置字符/单词的间距

text-transform

设置字母大小写转换，有以下可选值：

capitalize  每个单词的首字母大写
uppercase  每个单词全部转大写
lowercase  每个单词全部转小写
none  不进行转换处理，默认

white-space

设置空白处理和换行规则，常用值如下：

normal  合并所有连续的空白，水平内容超出时自动换行
nowrap  合并所有连续空白，不允许自动换行
pre  不合并所有连续空白，不允许自动给换行
pre-wrap  不合并所有空白，允许自动换行
pre-line  合并所有连续空白（除了换行），允许自动换行

注：
可以看出<pre>标签就是通过设置white-space: pre;实现的

text-overflow

控制文字溢出时的行为，常用值如下：

clip  溢出部分剪掉
ellipsis  溢出部分用省略号表示

注：
使用text-overflow的前提是overflow部分不允许可视，例如：overflow: hidden;，我们可以结合该属性实现多余内容用省略号展示，举例：

white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

text-decoration

文本样式，举例：

text-decoration: none; /* 去除下划线 */

text-shadow

文本阴影，和盒子阴影用法差不多

text-stroke

字体边框，举例：

color: transparent;
-webkit-text-stroke: 2px green;
-moz-text-stroke: 2px green;
/* 字体透明，边框绿色的镂空文字，该属性需要设置兼容性 */

变形相关

transform

可以设置各种变形样式，其中有很多的属性，可以多个组合使用，下面会介绍这些属性

translateX/translateY/translateZ/translate/translate3d

沿x轴/y轴/z轴/x+y轴/x+y+z轴移动一定距离，举例：

transform: translate(20%, 100px);

rotateX/rotateY/rotateZ/rotate/rotate3d

沿x轴/y轴/z轴/x+y轴/x+y+z轴旋转，举例：

transform: rotate(45deg);

perspective

透视，一般和旋转组合使用，举例：

transform: perspective(300px) rotateY(45deg);

scaleX/scaleY/scaleZ/scale/scale3d

沿x轴/y轴/z轴/x+y轴/x+y+z轴缩放，举例：

transform: scale(2);

skewX/skewY/skewZ/skew/skew3d

沿x轴/y轴/z轴/x+y轴/x+y+z轴倾斜，举例：

transform: skew(45deg);

transform-origin

设置变形参考点（以哪个点为基准进行运动，默认是中心点），举例：

transform-origin: 0% 100%;
/* 以左下角为参考点 */
transform: rotate(45deg);

注：
设置3d参考点，则直接加第三个参数即可，但必须用固定的像素值（因为z轴没有可参考的比例，只有0~∞），举例：

transform-origin: left top -500px;

transform-style

设置变形呈现的样式，常用值如下：

flat  平面展示
preserve-3d  3d展示

backface-visibility

元素背面是否可视，常用值如下：

visible  可视，此时将以镜像方式展示元素正面的内容
hidden  隐藏，背面直接变成透明

过渡动画相关

transition

从一种样式到另一种样式的过渡时间，最好不要放在hover之类的伪类里，那样一离开对应状态就没有过渡时间了，直接放在元素本身里，这样比较好，举例：

<head>
    <style>
        .a1 {
            height: 100px;
            width: 100px;
            position: relative;
            background: blue;
            transform: perspective(500px) rotatey(45deg);
        }
        .a1-1 {
            height: 100%;
            width: 100%;
            background: green;
            transition: 2s;
            /* 不要放在hover里 */
        }
        .a1-1:hover {
            transform: rotateY(180deg);
        }
    </style>
</head>

<body>
    <div class="a1">
        <div class="a1-1">div</div>
    </div>
</body>

transition-property

指定参与过渡的属性（默认是全部属性），举例：

transition-property: width, height;

transition-duration

设置各个属性的过渡时间：

transition-property: width, height;
transition-duration: 1s, 2s;
/* 宽度变化进行1秒，高度变化进行2秒 */

注：
当设置的时间和属性数量不匹配时，会循环赋值，例如有4个参与过渡的属性，设置了3个过渡时间，那么第四个属性的过渡时间就参照第一个的

transition-timing-funciton

设置过渡的运动轨迹（例如先变很快然后再慢、匀速等），举例：

transition-timing-funciton: linear;
/* 匀速变化 */
transition-timing-funciton: steps(3, start);
/* 分3步变化，从初始样式开始，适合时钟那样按帧数变化的场景 */

transition-delay

延迟触发，举例：

transition-delay: 1s;

适合场景：例如某些样式不希望鼠标一到上面就触发，可能只是鼠标不小心划过，如果想要触发，就需要鼠标停在上面一会儿

帧动画相关

使用步骤

通过@keyframes 动画名{}定义动画，可以通过from和to定义初始和结束状态，也可以通过xx%百分比来定义不同时段的状态
通过animation属性来使用动画，传入的值依次为：动画名动画时间延迟执行时间执行次数变化效果是否循环

举例：

@keyframes change-color {
    0%, 50% {
        background: black;
    }
    25% {
        background: green;
    }
    100% {
        background: white;
    }
}
div {
    height: 100px;
    width: 100px;
    animation: change-color 4s 1s infinite linear alternate;
    /*使用change-color动画，执行4s，延迟1s才开始，无限循环，线性变换，
    动画一次周期结束后逆向播放（即变换样式是：1->2->3->4->3->2->1->2->...）*/
}

animation-name

指定定义的帧动画名，可以指定多个

animation-duration

一次帧动画执行的时间

animation-iteration-count

帧动画循环执行多少次，对多个动画可以分别指定次数，无限循环则设置infinite

animation-direction

帧动画执行方向

animation-fill-mode

帧动画填充模式

animation-timing-function

分步执行帧动画，举例：

animation-timing-function: steps(3, start);

animation

前面样式的组合写法，举例：

animation: changeColor forwards 2s;

其他样式

cursor

鼠标光标在元素上的显示样式，常用值如下：

auto  浏览器根据上下文自己决定
default  默认是一个小箭头
pointer  一个手指
text  编辑样式
none  没有鼠标光标显示

注：
cursor还可以设置图片，以及在图片上的偏移位置，举例：

cursor: url("xxx.png") 0 0, pointer;
/* 使用图片来代替光标，其中在图片上水平和垂直方向向上偏移为0，当图片不存在时使用pointer代替 */

list-style

li标签样式，举例：

list-style: none;  /* 不显示前面的符号 */

outline

设置元素的外轮廓，主要用于设置a/input元素focus时的轮廓效果，其不占用空间，默认显示在border外部，相关属性：

outline-width  宽度
outline-style  样式，如：solid/dotted
outline-color
ouline  上面3个的简写，和border用法差不多
outline-offset  outline和border的间距

例如focus效果去除，举例：

:focus {
  outline: none;
}

visibility

控制元素是否可视，常用值如下：

visible  显示元素
hidden  隐藏元素

注：
visibility: hidden/display: none区别：前者虽然隐藏了，但元素的宽高位置还是会占着，可以理解为"透明"了；后者则不但隐藏了，连宽高都没了，可以理解为"完全消失"了

overflow

控制内容溢出时的行为，常用值如下：

visible  溢出照样可见
hidden  溢出隐藏
scroll  溢出可通过滚动条查看，但不论是否溢出都会显示滚动条
auto  当内容溢出时则显示滚动条

注：
还有overflow-x/overflow-y属性分别用于设置水平和垂直方向的溢出行为

filter

设置元素显示样式，举例：

filter: blur(10px);
/* 图片模糊展示 */

user-select

控制元素是否可被选中，常用值如下：

text  可以选中，也就是变蓝色（默认）
none  文本不可被选中
all  当双击子元素或者上下文时，最顶层也同时被选中
contain  只能在当前元素内部选择

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/user-select

object-fit

指定替换元素的宽高适配方式，常用值如下：

fill  填充并拉伸
contain  保持宽高比缩放
cover  保持宽高比填充
none  保持原来尺寸
scale-down  选择none和contain中更小的尺寸

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/object-fit

object-position

指定替换元素在内容框中的位置，举例：

object-position: 50% 50%;
object-position: left top;
object-position: 50px 100px;

居中方案

水平居中

行内元素

对于块级元素中的行内元素如果希望居中，可以直接设置text-align: center;实现

块级元素

如果是没有脱标的块级元素，可以使用如下方案：

对块级元素本身通过设置margin: 0 auto;实现（如果没成功，最好看看块级元素的宽度是否本身占满一行）
对父元素使用弹性布局设置：

display: flex; 
justify-content: center;

如果是绝对定位元素，可以定位如下：

position: absolute; 
width: 宽度; 
left: 50%; 
margin-left: -宽度的一半;

即：左边移动到中间，然后再左移宽度的一半，这样就能实现居中的效果
在不知道高度的情况下，绝对定位元素水平居中还可以实现如下：

position: absolute; 
left: 50%;
transform: translateX(-50%);

即：往右移动一半，在通过transform往左移动当前位置的一半

垂直居中

行内元素

对于块级元素中的行内元素如果希望居中，可以直接设置line-height: 父元素高度;实现

块级元素

如果是没有脱标的块级元素，可以对父元素使用弹性布局设置：

display: flex; 
flex-direction: column; 
justify-content: center;

如果是绝对定位元素，可以定位如下：

position: absolute; 
height: 宽度; 
top: 50%; 
margin-top: -高度的一半;

即：上边移动到中间，然后再往上移高度的一半，这样就能实现居中的效果
在不知道高度的情况下，绝对定位元素垂直居中还可以实现如下：

position: absolute; 
top: 50%;
transform: translateY(-50%);

注：
绝对定位元素整体居中可以直接合并成下面这样：

position: absolute; 
margin: auto;
left: 0;
right: 0;
top: 0;
bottom: 0;

原理：由于元素width = margin-left + left + 内容width + right +margin-right，所以将left/right置0以后，再设置margin: auto使得margin-left/margin-right平分元素width减去内容width的部分，就实现居中了

样式参考

页面呈灰白

html {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);
    filter: grayscale(100%);
    filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1);
}

滚动条样式

参考：https://www.cnblogs.com/sherryweb/p/11023311.html

简单遮罩效果

首先设计一个display样式将需要遮罩的部分覆盖，并将其设为不可见（none），当需要遮罩时，再将其设置为block块覆盖显示，代码示例如下：

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .cover {
            position: fixed;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-color: rgba(0, 0, 0, 0.1);
            display: none;
            z-index: 1000;
        }
    </style>
</head>
<body>
    <button id="coverAll">点击开启遮罩</button>
<div class="cover">
    <div align="center" style="height: 100%; width: 100%; line-height: 500px; ">遮罩效果</div>
</div>
</body>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script type="text/javascript">
    $("#coverAll").click(function () {
        $(".cover").css("display", "block");
        setTimeout(function () {
            $(".cover").css("display", "none");
        }, 5000)
    })
</script>
</html>

注意点

元素空格间隔问题

对于行内级、inline-block的元素，如果代码间有空格，则会导致元素间存在空格，因此有以下解决方式：

代码之间不要留空格
用注释来填中间的空格，例如：<span>aaa</span><span>bbb</span>
设置font-size为0（内部的元素可以再设置自己的font-size），但该方式在safari浏览器中无效
注：
img标签底下存在4px空隙问题：也是因为空格引起，此时可以设置display: block;，或者设置font-size为0来解决问题

margin传递问题

margin-top传递：如果块级元素的顶部线与其块级父元素的顶部线重叠，那么这个块级元素的margin-top会传递给父元素
margin-bottom传递：如果块级元素的底部线与其块级父元素的底部线重叠，那么这个块级元素的margin-bottom会传递给父元素
解决方式：

给父元素设置padding-top/padding-bottom
给父元素设置border
给父元素或者子元素设置display: inline-block
建议：
margin一般是用来设置兄弟元素间的间距
padding一般是用来设置父子元素间的间距

margin折叠问题

垂直方向相邻的两个margin（margin-top/margin-bottom）可能会合并成一个margin，而水平方向上的margin则没有这种问题
折叠后的最终结果：
如果都是正数或者都是负数，都是取绝对值最大的那个；如果有正有负，那么取最大正数和最小负数相加
解决方式：

只设置其中一个元素的margin
使用padding替代margin

float元素高度坍塌问题

因为float元素脱离了标准流，所以假如父元素当中有float元素，那么会导致父元素认为float元素没有高度，从而造成高度坍塌问题（父元素当中不存在高度）
解决方式：可以通过伪类after添加高度，举例：

div::after {
  content: "";
  display: "block"l
  clear: both;
  /* height: 0; */
  /* visibility: hidden; */
  /* 兼容低版本浏览器 */
}

边框重叠变粗问题

参考：https://blog.csdn.net/YWB88888888/article/details/102944435

JS操作伪类样式问题

由于伪类是无法直接通过JS进行操作的，但我们可以通过操作伪类对应的标签样式，从而实现伪类样式的操作，例如下面的代码：

<html>
  <head>
    <meta charset="utf-8" />
    <title>test</title>
    <style>
      .test {
        position: relative;
        width: 100px;
        height: 100px;
        background: red;
        visibility: hidden; /* 设置标签不可见 */
      }
      .test::before {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: inherit;
        height: inherit;
        background: inherit;
        visibility: visible;  /* 设置伪类可见 */
      }
    </style>
  </head>
  <body>
    <div class="test"></div>
  </body>
  <script>
    document.querySelector(".test").addEventListener("click", (e) => {
      // 伪类继承标签元素样式，通过修改标签元素样式来修改伪类样式
      e.target.style.background = "#" + parseInt(Math.random() * (10 ** 6));
    });
  </script>
</html>

我们通过将原本的标签隐藏，只让伪类显示，而伪类的样式则继承于标签，当改变标签样式时，伪类样式也会一同改变，从而实现动态改变伪类样式的效果

注：
这里通过visibility: hidden;样式设置标签隐藏，但不能用display: none;来设置，否则该标签实际上就相当于不存在，而对应的伪类也就无法显示了

img标签和background-image对比

img标签：html元素；占用具体空间；右键能查看图片链接；能被搜索引擎收录；优先加载
background-image：css样式；不占用空间；支持雪碧图；等html加载完以后才开始加载

选择

网页中重要部分使用img标签
影响不大的图片使用background-image

浏览器兼容

由于在不同的浏览器内核里规定的标准不同，所以相同的代码可能在不同的浏览器里显示也就不同，因此往往需要设置对应的兼容性，这里介绍几个常见的内核以及对应添加兼容的前缀：

Webkit：safari、chrome、搜狗、360等浏览器的内核，前缀为：-webkit-
Gecko：firefox的内核，前缀为：-moz-
Trident：ie的内核，前缀为：-ms-
Presto：opera的内核，前缀为：-o-

因此要设置样式兼容性的话，一般在该样式前面加上对应浏览器内核的前缀即可

其他

浏览器私有前缀

-o/-xv-  opera
-ms-/mso-  IE
-moz-  firefox
-webkit-  safari/chrome

浏览器重置样式

由于标签往往有默认样式，并且在不同的浏览器当中可能展示的不同，所以为了避免样式差异以及去除一些不喜欢的默认样式，可以重置一些标签的初始样式，例如body去除边框、a去除下划线、li去除前面的修饰符

参考：css reset

编码规范

绝对值小于1的小数可以去掉前面的0，举例：.5
样式编写顺序建议：定位、盒子模型、...

查看CSS浏览器兼容情况

caniuse.com

雪碧图

将各种小图片合到一张图里，然后利用background-position来定位到对应的图片进行展示

优势

减少请求数量（只需请求一张图，而无需对每个小图都进行请求），减轻服务器压力
减小图片总的大小
无需为每个图片单独命名
雪碧图生成网站：https://www.toptal.com/developers/css/sprite-generator/

官方文档阅读

MDN：https://developer.mozilla.org/zh-CN/docs/Web/CSS

文档字段

name  属性名
value  属性可选值
initial  默认值
applies to  适用于元素（all elements-所有元素；block-level elements-块级元素）
inherited  是否可继承
percentages  是否可用百分比
media  媒体组
computed value  如何计算值
animatable  是否可动画

属性取值参考

并列（多个值用空格隔开）：每个值都必须按顺序写
|：只能有一个
||：可以有一个或多个，且任意顺序
&&：每个都必须出现，且任意顺序
[]：分组，代表是一个整体

CSS绘图参考

简单图形：https://www.jianshu.com/p/1a920aa066ad
实际案例：https://segmentfault.com/u/lancer07

CSS预编译语言

SCSS

是一种兼容CSS3，同时又有更加高级语法操作的语言，目前在前端开发中逐渐被广泛应用
参考：https://www.jianshu.com/p/a99764ff3c41

Sass、SCSS和CSS区别

参考：https://blog.csdn.net/lsy__lsy/article/details/80305593