目录
1、CSS的基本结构
以下是CSS的一个声明，由一个属性和一个值组成：
color:black;包含在大括号内的一组声明被称作一个声明块。声明块前有一个选择器。选择器和声明块一起构成一个规则集。
下面是一个规则集：
.my-img{
width: 100vw;
height: auto;
}2、样式表的来源以及优先级
浏览器默认的样式是用户代理样式表；作者样式表是我们开发者自己写的样式表，如果有相同的声明，则作者样式表将覆盖用户代理样式表中的声明。
标记了!important的声明会被当做更高优先级的来源，很难被覆盖掉，应该尽量少使用。
color:black !important;行内样式将直接覆盖任何样式表或来自<style>标签的样式。
3、选择器的优先级
id选择器 > 类选择器 > 标签选择器。
若 id 选择器数量最多，则该规则集胜出；
若 id 选择器数量一致，则类选择器多的规则集胜出；
若 id 选择器和类选择器的数量一致，则标签选择器多的规则集胜出；
4、源码顺序
如果两个声明的来源和优先级相同，则出现在样式表较晚或者位于页面较晚引入的样式表中，那么该声明将胜出。
5、px、em、rem单位
px：像素，相对长度单位，为相对于显示屏分表率而言的；
em：相对长度单位，相当于当前对象内文本的字体尺寸，可以会继承父级元素的字体大小；
rem：相对Html根元素的字体大小；
可以通过改变 html 根元素的字体大小来改变使用了rem的元素的大小(:root 就是 html 元素)：
:root{
font-size: 10px;
}浏览器的默认字体尺寸是 16px。
6、视口相对单位
视口即浏览器窗口网页可见部分的边框区域（不包括状态栏、工具栏、地址栏）。
vh：视口高度的1/100；
vw：视口宽度的1/100；
vmax：视口高、宽中最大一方的1/100；
vmin：视口宽、高中最小一方的1/100；
7、使用 calc() 来定义属性值
可以进行不同单位之间的四则运算：
font-size: calc(10px + 1.2em);注意：+、- 符号前后必须要有空格；
8、一些无单位的属性
1）line-height
2）z-index
3）font-weight
4）opacity
5）flex-grow && flex-shrink
9、自定义属性
自定义属性规则：变量名之前必须有两个连字符（--），变量名必须在一个声明块中声明，当要使用该变量时，调用函数var(自定义的变量)。
如果一个自定义属性是在一个属于某个标签的规则集中定义的，那么他的后代都能够使用该自定义属性。（在 :root 选择器中声明，那么该变量可以在整个网页中使用）。
:root{
--my-font-size: 20px;
}
div{
font-size: var(--my-font-size);
}10、使用 JavaScript 来动态修改自定义属性
let rootEle = document.documentElement; // 获取根元素
let styles = getComputedStyle(rootEle); // getComputedStyle() 获取一个元素的style对象
let myFontSize = styles.getPropertyValue('--my-font-size');
console.log(String(myFontSize).trim()); // 将输出 20px
var size = parseInt(myFontSize);
rootElement.style.setProperty('--my-font-size', size + 2 + 'px'); // 将--my-font-size 设置为22px
11、overflow 属性
控制溢出内容的行为，支持四个值：auto、scroll、hidden、visible；
1）auto：当内容溢出才展示滚动条；
2）scroll：在一些操作系统上可能展示水平和垂直滚动条，即使不溢出，此时滚动条置灰；
3）overflowX、overflowY设置单一方向上的溢出，支持以上四个值。
12、子元素定位于父元素中央常用实现方法
<div class="parent">
<div class="child"></div>
</div>12-1）绝对定位方式
.parent{
position: relative;
}
.child{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
}12-2）flex 布局
.parent{
display: flex;
justify-content: center;
align-items: center;
}12-3）grid布局
.parent{
display: grid;
justify-content: center;
align-content: center;
}13、猫头鹰选择器
基本形式：.className * + *{...}
表示选择指定元素下的所有子元素中的非首元素。
<div class="outer">
<div class="inner">
<ul>
<li>a</li>
<li>b</li>
<li>b</li>
</ul>
</div>
<div class="inner">
<ul>
<li>a</li>
<li>b</li>
<li>b</li>
</ul>
</div>
<div class="inner">
<ul>
<li>a</li>
<li>b</li>
<li>b</li>
</ul>
</div>
</div>
li{
margin: 6px 0;
}
.inner * + *{
background-color: brown;
}.inner 下的元素是 ul ，在这里将选中所有 li 下的第二个到第三个元素，将背景设为红色。
附：选择指定元素下的所有子元素中的首元素
.inner * :first-child{
background-color: pink;
}14、让文本居中显示
<div class="text">文字内容</div>1）使用 line-height 和 text-align
.text{
width: 100px;
height: 50px;
background-color: antiquewhite;
text-align: center;
line-height: 50px;
}2）使用flex
.text{
width: 100px;
height: 50px;
background-color: antiquewhite;
display: flex;
justify-content: center;
align-items: center;
}15、FlexBox弹性容器布局
1、设置display: flex; 或 display: inline-flex; 将元素设置为弹性容器，其直接子元素为弹性子元素。
弹性子元素默认从左到右按顺序排列。
弹性容器像块元素一样能填满宽度，但是弹性子元素不一定能填满弹性容器的宽度。
弹性子元素的高度相等（flex-direction:row; 时，即默认方向排列），该高度由他们的内容决定。
2、子元素默认按照主轴线排序，主轴方向自左到右，副轴方向垂直与主轴，方向从上到下。
3、弹性盒子内直接子元素的auto外边距会自动填满所有可用空间，即离外侧范围达到最大。
4、flex
4-1、flex属性：控制弹性子元素在主轴方向的大小（默认情况下flex-direction:row; 在弹性子元素中设置flex控制元素的宽度。flex-direction:column；时，在弹性子元素中设置flex控制的是元素的高度）。
4-2、flex是一个简写属性，包括flex-grow、flex-shrink、flex-basis。
4-2-1、flex-grow是增长因子，多出来的留白将按照每个弹性子容器的增长因子进行分配。如果一个弹性子容器的增长因子为0，那么他的宽度（或高度）不会超过其flex-basis的值。如果一个弹性容器的增长因子不为0，那么他会增长到所有剩余空间被分配完。flex-grow的值越大，其权重越高。一个增长因子为2的弹性子元素的大小是一个增长因子为1的弹性子元素的大小的两倍。
4-2-2、flex-shrink代表每个弹性子元素在弹性元素溢出时收缩的权重。当弹性元素内容溢出，某个弹性子元素的flex-shrink为0，则该元素不收缩；当flex-shrink不为0时，将进行收缩，权值越大，收缩的比重越多。
4-2-3、flex-basis定义元素大小的基准值，即一个初始的“主尺寸”。初始值为auto，此时浏览器会检查该元素是否有设置width属性，如果有，则使用width作为flex-basis的值；如果没有，则根据内容来确定。如果flex-basis的值不是auto，那么元素的width属性将被忽略。
4-3、flex简写属性的默认值为 1 1 0%；分别对应flex-grow，flex-shrink，flex-basis。在设置flex时，如果某个子属性的值被省略，那么简写属性会给出默认值。如果没有使用flex简写属性，那么没有设置的子属性值不会有默认值。
4-4、flex-direction 能够切换主副轴的方向，取值有四个：row、column、row-reverse、column-reverse。
4-5、当flex-direction的方向为column或column-reverse，主轴将发生旋转。对于内部弹性子元素，flex-grow、flex-shrink、flex-basis作用域元素的高度而不是宽度。
弹性容器的高度由弹性子元素决定，他们会正好填满容器。在主轴是垂直方向的弹性盒子里，子元素的flex-grow和flex-shrink不会起作用，除非有外力的影响强行改变盒子的高度，即可以是弹性盒子自定义的高度。
5、弹性容器的属性：
（1）flex-direction：设置主轴的方向
（2）flex-wrap：nowrap (初始值) | wrap | wrap-reverse
指定弹性子元素是否会在弹性容器中折行/列显示（放不下就折行/列）
（3）flex-flow：<flex-direction> <flex-wrap>的简写
（4）justify-content：flex-start （初始值） | flex-end | center | space-around | space-between
控制元素在主轴上的位置
（5）align-items：flex-start | flex-end | center | stretch | baseline （根据第一行文字的基线对齐）
控制元素在副轴上的位置
（6）align-content：flex-start | flex-end |center | stretch | space-around | space-between
如果开启了flex-wrap，align-content会控制弹性子元素在副轴上的间距。如果没有换行，则会忽略align-content属性。
6、弹性子元素的属性：
（1）flex-grow：
（2）flex-shrink：
（3）flex-basis：
（4）flex：flex 属性就是 flex-basis flex-grow flex-shrink 的合并简写；
（5）align-self：auto | flex-start | flex-end | center | stretch | baseline
控制子元素在副轴上的对齐方式，将覆盖掉容器上的align-items属性的值。如果子元素副轴方向上的外边距为0，则会忽略该属性。
16、gird 网格布局
1、设置属性display:grid；将容器设为网格容器，容器内的直接元素为网格元素。
容器表现为块级元素。
也可以使用inline-grid；元素将表现为行内元素，宽度只能够包含内容大小。
2、grid-template-rows：定义网格每行的大小；
grid-template-columns：定义网格每列的大小；
使用一个新的单位 fr ，为分数单位，grid-template-columns：1fr 1fr 1fr；即构造等宽的三列。
不一定非要使用分数单位。grid-template-columns：1fr 300px；设置两列，第二列宽300px，第一列占满全部剩余的位置。2fr的宽度是1fr的宽度的两倍。
grid-gap：定义网格之间的间距。grid-gap：0.5em 1em；定义垂直方向距离0.5em，水平方向距离1em。
3、网格中的四个重要的概念：网格线、网格轨道、网格单元、网格区域。
4、在定义多个重复的网格轨道时可以使用简写函数repeat()：
如grid-template-columns：repeat(4,auto)；即定义了四个宽度为auto的列。
另外，repeat(3,1fr 2fr)；定义六个轨道，等价于这样书写1fr 2fr 1fr 2fr 1fr 2fr。
还可以这样书写：grid-template-rows：1fr repeat(2,2fr 4fr) 1fr；则等价于1fr 2fr 4fr 2fr 4fr 1fr。
5、网格线的默认编号：
列从左往右，1 2 3 4 5...；
行从上往下，1 2 3 4 5...；
可以在 grid-colum 或 grid-row 属性中用网格线的编号指定网格元素的位置：如想要一个网格元素在垂直方向上跨越1号网格到3号网格，则可以给网格元素设置grid-column：1 / 3 ； 中间的斜线仅用来区分两个值，前后的空格没有要求。
grid-column和grid-row都是简写属性，如grid-row是grid-row-start和grid-row-end的简写。
同时，可以用 span 关键字来指定一个网格轨道长度。如grid-row：span 2；则告诉浏览器元素需要在垂直方向上横跨两个网格轨道（即占两行）。
6、命名网格线：
可以给网格线命名，在布局的时候用网格线名称代替其默认的编号。
如：grid-template-columns：[start] 1fr [center] 2fr [end]；该声明定义了两条网格轨道，分别为1fr 和 2fr ，三条网格线，名称分别为 start、center 、end。然后在定义网格元素在网格中的位置时，可以使用名称来声明，如grid-column：start / end；
还可以给一条网格线提供多个名称，如：grid-template-rows：[top-start] 1fr [top-end,bottom-start] 1fr [bottom-end]；则在这条声明里，水平2号网格线具有两个名称。
这里需要注意，将网格线命名为 top-start 和 top-end，就定义了一个区域，这个区域覆盖两个网格线之间的空间，-start 和 -end后缀作为关键字，定义两者之间的区域，如果给网格元素设置grid-row：top；则他会跨越从top-start到top-end的区域。
注意，当使用如repeat(3 , [top-start] 1fr 1fr)；来生成网格时，等价写法如下：[top-start] 1fr 1fr [top-start] 1fr 1fr [top-start] 1fr 1fr ;
7、命名网格区域：
容器中：grid-template-areas 属性 设置网格区域；
元素中：grid-area 属性 设置放置的区域
<div class="container">
<div class="header"></div>
<div class="content"></div>
</div> .container {
display: grid;
width: 500px;
height: 500px;
grid-template-columns: 1fr 3fr;
grid-template-rows: 100px 1fr 80px;
grid-template-areas:
"header header"
"sidebar content"
"footer footer";
}
.header {
grid-area: header;
background-color: #5fe929;
}
.content {
grid-area: content;
background-color: #c22121;
}
grid-template-areas中有多个字符串，每一个字符串都代表网格区域的一行，字符串内用空格分开列。
注意：每个区域都要设置为矩形，不能设置为其他特殊的图形；
可以使用 . 作为占位名称，这样能空出一个网格单元
8、显式和隐式网格
隐式网格轨道默认为auto，他们会扩张到能容纳网格元素的内容。可以给网格容器设置grid-auto-columns 和grid-auto-rows，为隐式网格轨道定义一个大小。如grid-auto-rows：1fr；
使用minmax()函数分别指定最大尺寸和最小尺寸，浏览器会确保轨道的大小介于这两者之间。
使用方式如：grid-template-rows：repeat ( auto-fill, minmax(200px , 1fr ) ) ;则将最小行高设置为200px；
repeat 函数中的 auto-fill 关键字为一个特殊值，设置了该值以后，只要网格放得下，浏览器就会尽可能多的生成轨道，并且不会跟指定的minmax()大小产生冲突。
auto-fill 和 minmax() 加在一起就能让网格在可用空间内尽可能的多产生轨道。如果元素不够填充所有的网格轨道，auto-fill就会导致一些空的网格轨道。如果不希望出现空的网格轨道，可以使用 auto-fit 关键字来替代 auto-fill。他会让非空的网格轨道扩展，并填满可用空间。
默认情况下，当一个元素无法再某一行容纳，布局算法会自动将他移动到下一行，在下一行的位置寻找足够大的空间来容纳他。使用 grid-auto-flow 可以控制布局的算法行为。其初始值为row，先前描述的就是这个值的行为。如果值为 column，它将会将元素优先放在网格列中，只有当一列填满了，才会移动到下一行。
还可以额外添加一个关键字 dense，如grid-auto-flow：column dense；它让算法紧密地填满网格里的空白，尽管这会改变某些元素的顺序。使用这个值，小的元素就会回填大的元素造成的空白区域。
默认情况下，每个网格元素都会扩展并填满整个网格区域，但是网格元素的子元素不会填满网格元素。使用img标签展示图片时，img有一个特殊的属性能控制图片的缩放拉伸：object-fit。取值可以为 cover、contain、fill 等。默认值为fill，整个图片将缩放，以填满img元素。使用cover将扩展图片，让他填满盒子（图片的一部分将被裁减）；使用contain将缩放图片，让他完整地填充盒子（导致盒子中可能出现空白）。
17、如果有文本溢出提前用省略号代替
主要使用的属性为：text-overflow
有五个属性：clip（将溢出的内容裁剪掉）；ellipsis（用省略号代替）；string（用给定的字符串替代省略的文本）；initial（默认值）；inherit（继承）
注意，如果需要使用省略号来处理溢出内容，需要在块级元素中使用，并且要搭配 white-space：nowrap；（单行时） 和 text-overflow：hidden； 来使用。
如果要设置文本的溢出用省略号代替，一般要设置文本元素的高度、宽度以及文本的行高。如要设置文本内容显示两行，且该元素的宽度为 x，则一般设置文本的行高为一半的元素高度，防止换行展示。
1、单行文本的省略号处理：
<div class="container">
如果要设置文本的溢出用省略号代替，一般要设置文本元素的高度、宽度以及文本的行高。
如要设置文本内容显示两行，且该元素的宽度为 x，则一般设置文本的行高为一半的元素高度，防止换行展示。
</div> .container {
background-color: antiquewhite;
width: 200px;
height: 50px;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
2、多行文本的省略号处理：
多行文本要换行，所以不需要 white-space ：nowrap；
使用 display:-webkit-box；弹性盒子布局。
.container {
background-color: antiquewhite;
width: 200px;
height: 50px;
text-overflow: ellipsis;
padding: 0 16px;
box-sizing: border-box;
/* white-space: nowrap; 如果是一行以上的就要开启换行 */
line-height: 25px; /* 设置行高 */
overflow: hidden;
display:-webkit-box;
-webkit-box-orient: vertical; /* 设置对齐方式 */
-webkit-line-clamp: 2; /* 第二行文本后面加省略号 */
}
3、如果是多行文本但是没有控制好高度和行高：
.container {
background-color: antiquewhite;
width: 200px;
height: 50px;
text-overflow: ellipsis;
padding: 0 16px;
box-sizing: border-box;
/* white-space: nowrap; 如果是一行以上的就要开启换行 */
/* line-height: 25px; 不控制行高 */
overflow: hidden;
display: -webkit-box;
-webkit-box-orient: vertical; /* 设置对齐方式 */
-webkit-line-clamp: 2; /* 第二行文本后面加省略号 */
}
18、 使用伪元素来绘制CSS三角形
当元素没有内容，但边框的大小不为零，则会形成下图的样式，四个三角形构成一个正方形，每一个三角形对应一个边。可以只让一条边有可视的颜色，其余边设置透明的颜色（transparent），那么可以作出一个三角形。
可以直接使用元素来做，也可以使用元素的伪类来完成（::after 、::before）
div{
content:''; /* 如需正常显示，则需要content */
border: 30px solid;
border-color: transparent black transparent transparent; /* 将边框右边的三角形填充为黑色，其余的都是透明的边 */
position:absolute;
/* 使用定位将元素定位到需要的位置上 */
}
19、input 元素自带的两个可能想覆盖的样式
outline、border-style