1、CSS的基本结构

2、样式表的来源以及优先级

3、选择器的优先级

4、源码顺序

5、px、em、rem单位

6、视口相对单位

7、使用 calc() 来定义属性值

8、一些无单位的属性

9、自定义属性

10、使用 JavaScript 来动态修改自定义属性

11、overflow 属性

12、子元素定位于父元素中央常用实现方法

12-1）绝对定位方式

12-2）flex 布局

12-3）grid布局

13、猫头鹰选择器

14、让文本居中显示

1）使用 line-height 和 text-align

2）使用flex

15、FlexBox弹性容器布局

16、gird 网格布局

17、如果有文本溢出提前用省略号代替

1、单行文本的省略号处理：

2、多行文本的省略号处理：

3、如果是多行文本但是没有控制好高度和行高：

18、使用伪元素来绘制CSS三角形

19、input 元素自带的两个可能想覆盖的样式

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 （根据第一行文字的基线对齐）

控制元素在副轴上的位置

如果开启了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 的合并简写；

控制子元素在副轴上的对齐方式，将覆盖掉容器上的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;
    /* 使用定位将元素定位到需要的位置上 */
}