这是我参与「第四届青训营」笔记创作活动的第4天

CSS

CSS：Cascading Style Sheets（层叠样式表）

用来定义页面元素的样式，包括元素的字体和颜色，元素的位置和大小，动画效果等。

使用方式

内联样式（不推荐）

<p style="color: red">我是一个段落</p>

外链样式

<link rel='stylesheet' href="./css/style.css">

嵌入样式，HTML中使用style标签

<style>
    p {
        color: red;
    }
</style>

浏览器工作过程

选择器

选择出页面中的元素，以便给它们设置样式。

通配选择器

<h1>我是标题</h1>
<p>我是段落</p>

<style>
    * {
        color: red;
    }
</style>

id选择器

类选择器

属性选择器

通过元素有什么属性或属性值是什么来选择元素：

<label>用户名：</label>
<input type="text" disabled/>

<style>
    /*拥有属性*/
    [disabled] {
        background-color: red;
    }
    /*特定属性值*/
    input[type="text"] {
        border-color: red;
    }
</style>

/*以#开头*/
a[href^="#"] {
    ...
}
/*以.jpg结尾*/
a[href$=".jpg"] {
    
}

伪类选择器

当元素处于某种状态或某种结果的时候被选中，因此也分为状态伪类选择器和结构伪类选择器。

状态伪类选择器

/*a标签的状态*/
a:link {
    
}
a:visited {
    
}
a:hover {
    
}
a:active {
    
}
/*a和input都有focus状态*/
:focus {
    
}

结构伪类选择器

根据DOM节点在DOM树中出现的位置来选择。

/*父节点（这里是li）的第一个子节点*/
li:first-child {
    
}
/*最后一个*/
li:last-child {
    
}

选择器的组合

存在A选择器和B选择器

直接组合：AB（满足A同时满足B）

<input class="test" ... />

<style>
    /*标签选择器和伪类选择器同时满足*/
    input:focus {
        
    }
    /*标签选择器和类选择器同时满足*/
    input.test {
        
    }
</style>

后代组合：A B （选中B，如果B是A的后代元素）

<nav>
    <a></a>
</nav>

<style>
    nav a {
        
    }
</style

亲子组合：A > B （选中B，如果B是A的直接子元素）

兄弟组合：A ~ B （选中B，B和A同级且在A后面）

相邻组合：A + B （选中B，AB同级且B紧跟在A后面）

选择器组

选择器之间用逗号隔开：

h1,.test,#title,a:horver,h2 p {
    
}

颜色

RGB表示颜色

Red：0～255 Green：0～255 Blue：0～255

十进制写法：rgb(0,0,0)

h1 {
    color: rgb(36,28,154);
}

十六进制写法：#bb36dd

h1 {
    color: #bf26sd;
}

HSL表示颜色

Hue：色相 0～360 Saturation：饱和度 0～100% Lightness：亮度 0～100%

    hsl(18, 91%, 84%)

alpha透明度

值：0～1，放在颜色后面：

    rgba(12,23,34,0.5)
    
    #bbffaaff
    
    hsla(18,76%,79%,1)

字体

body {
    font-family: Helvetica, Optima, sans-serif;
}

先找有没有第一个字体文件，没有再找第二个，依此类推，而最后一个不是专门的一个字体，而是通用的字体族，当其他都没有找到的时候，浏览器再从已安装字体中找一个该字体族的字体进行展示。

使用Web Fonts

把字体文件放在服务器上，指定字体名字和所在的URL，浏览器就会从服务器上下载字体。

@font-face {
    font-family: "xxx";
    src: url("http://ip:port/xxx.woff2") format("woff2");
}

font-size

指定方法：

长度：px、em
关键字：small、medium、large
百分数：相对于父元素的大小

font-style

正常：normal 斜体：italic

font-weight

字重（粗细），用100-900的数字来表示，需要字体本身设计的时候设计了那么多字重。

line-height

行高，第一行底部与第二行底部之间的距离，或者说两行文字的基准线之间的距离。

font简写

font: style weight size/height family;

排版对齐

text-aligin

charact-spacing

word-spacing

text-decoration

text-indent

空白符

html对于多个连续的空格和换行都会合并成一个，可以通过css的white-space属性控制。

<p class="text">北    冥有鱼，其名为鲲。          鲲很大。
</p>

<style>
    .text {
        /*默认，合并多个空格*/
        white-space: normal; 
        /*不换行*/
        white-space: nowrap; 
        /*保留所以空格和换行*/
        white-space: pre;
        /*保留空格*/
        white-space: pre-wrap;
        /*保留换行*/
        white-space: pre-line;
    }
</style>

选择器优先级

<h1 class="title">我是什么颜色？</h1>

<style>
    .title {
        color: red;
    }
    h1 {
        color: green;
    }
</style>

当一个元素被多个选择器选中的时候，哪个样式生效？取决于选择器的特异度（Specificity）。上图中第一个选择器组的特异度可以理解为是122，第二个的是022，所以第一个生效。

<button class="btn">普通按钮</button>
<button class="btn primary">主要按钮</button>

<style>
    .btn {
        margin-right: 20px;
        background: #bfa;
    }
    /*AB组合选择器，同时满足*/
    .btn.primary{
        background: skyblue;
    }
</style>

在这里，第二个样式的特异度大于第一个样式，所以对于background属性，第二个样式会覆盖第一个样式，而其他熟悉第一个样式依然有效。

样式继承

某些属性会自动继承其父元素的计算值，除非显式指定一个值。

css中与文字相关的属性都可以继承，与盒模型相关的熟悉都不可自动继承。

对于不可自动从父级继承的属性，可以显式指定从其父级继承，可以使用inherit关键字。

xxx {
    /*xxx继承父级*/
    xxx: inherit;
}

初始值

CSS中，每个属性都有一个初始值，没有设置熟悉，或者没有继承到，就会用到初始值。

可以将一个元素的属性值设置为初始值：

xxx {
    xxx: initial;
}

Layout布局

布局：确定内容的大小和位置的算法，依据元素、容器、兄弟节点和内容等信息来计算。

布局相关技术：

常规流（Nomal Flow）
浮动
绝对定位

盒子模型

在布局的时候把一个个元素看成一个个盒子，盒子具有如下属性：

margin collapse

<div class="a"></div>
<div class="b"></div>

<style>
    .a {
        height: 100px;
        width: 100px;
        margin-bottom: 100px;
    }
    .b {
        height: 100px;
        width: 100px;
        margin-top: 100px;
    }
</style>

a和b两个盒子中间的距离是100px，而不是200px，margin在垂直方向会取最大的值而不是想加。可以通过一些办法解决。

盒子宽高计算

默认情况下的盒子计算方式：

box-sizing: content-box;

盒子宽 = width + padding-left + padding-right + border-left + border-right + margin-left + margin-right

盒子的高同理。这个时候设置width、height属性只是改变内容区的宽度和高度。

将计算方式指定为：

box-sizing: border-box;

这个时候设置width、height则是指定整个盒子的宽度和高度。

内容溢出的处理

指定了盒子的宽度和高度的话，内容区中的内容有可能会溢出盒子，通过overflow属性可以控制溢出内容的处理方式：

overflow: visible;  /*默认，仍然溢出盒子展示*/
overflow: hidden;   /*隐藏*/
overflow: scoll;   /*滚动条*/

块元素和行内元素的盒模型规则

块元素不和其他盒子并排摆放，适用所有盒模型属性；行内元素和其他盒子一起放在一行，width、height属性不适用（由内容决定）。

css可以设置元素为块/行内/块-行内：

display: block;
display: inline;
/*本身行级，但可以设置宽高*/
display: inline-block;
/*让页面没有这个元素（不是隐藏，就是消失）*/
display: none;

常规流 Nomal Flow

根元素、浮动和绝对定位元素会脱离常规流
其他元素都在常规流之内
常规流中的盒子，在某种排版上下文中参与布局

行级排版上下文

inline formatting context（IFC）

只包含行内盒子的容器会创建一个IFC

IFC内的排版规则：

盒子在一行内水平摆放
一行放不下时换行显示
text-align决定盒子内元素的水平对齐
vertical-aligin决定盒子内元素的垂直对齐
避开浮动元素

块级排版上下文

block formatting context（BFC）

某些容器会创建一个BFC：

根元素
浮动、绝对定位、inline-box
flex子项和gird子项
overflow值不是visible的块盒
display：flow-root

规则：

盒子从上到下摆放
垂直margin合并
BFC内盒子的margin不会与外面的合并
BFC不会和浮动元素重叠

Flex Box

一种新的排版上下文

可以控制子级盒子：

摆放的流向（左到右，右到左，上到下，下到上）
摆放顺序
盒子宽度和高度
水平和垂直方向的对齐
是否允许折行

<div class="container">
    <div></div>
    <div></div>
    <div></div>
</div>

<style>
    .container {
        display: flex;  /* 使用flex布局规则 */
        /*适用flex布局后，原来块元素和行内元素的布局规则就不再适用，而是flex的流向，默认是从左到右*/
    }
</style>

布局属性

flex-direction：

flex布局的两个轴：

justify-content：

aligin-items：

align-self：作用于容器中的单个盒子，改变垂直方向的布局：

<style>
        .container {
            display: flex;
            /* flex-direction: row-reverse; */
            /* justify-content: space-evenly; */
            justify-content: flex-start;
            align-items: center;    /*中间对齐*/
        }
        .box1 {
            /* 指定为border-box，盒子宽高就是100 100 */
            box-sizing: border-box;
            width: 100px;
            height: 100px;
            border: 5px solid black;
            background-color: #bfa;
            /* margin-bottom: 50px; */
            text-align: center;
        }
        .box2 {
            /* 盒子宽度：border-left + border-right + width = 210 */
            /* margin-top: 10px; */
            width: 200px;
            height: 200px;
            border: 5px solid blue;
            background-color: antiquewhite;
        }
        .box3 {
            box-sizing: border-box;
            width: 200px;
            height: 150px;
            background-color: skyblue;
            border: 5px solid black;
            align-self: flex-end;   /*单独向下结尾*/
        }
    </style>
    
    <div class="container">
        <div class="box1">
            <p>你好！</p>
        </div>
        <div class="box2"></div>
        <div class="box3"></div>
    </div>

flex-grow：

flex-wrap：决定元素在一行放不下的时候是否换行。

flex-wrap: no-wrap;         /*默认值，不换行*/
flex-wrap: wrap;            /*换行，第一行在上方*/
flex-wrap: wrap-reserve;    /*换行，第一行在下方*/

Gird布局

display: gird;

划分网格

gird-template-columns: 100px 200px 200px;
gird-template-rows: 100px 300px;

将元素制定在网格

gird line 网格线：

结合网格线指定：

gird-row-start: 1;
gird-column-start: 1;
gird-row-end: 3;
gird-column-end: 3;

/*或者*/
gird-area: 1/1/3/3;

float布局

主要实现图文混排。

float: left;
float: right;

position

/*默认值，非定位元素*/
position: static;
/*相对自身原位置偏移，不脱离文档流*/
position: relative;
/*绝对定位，相对非static祖先元素定位*/
position: absolove;
/*相对于视口绝对定位，例如滚动的时候位置不变*/
position: fixed;

CSS ｜ 青训营笔记

CSS