CSS（下：深入CSS）|青训营笔记这是我参与【第五届青训营】伴学笔记创造活动的第4天三、CSS深入理解 1、选择器的

这是我参与【第五届青训营】伴学笔记创造活动的第4天

三、CSS深入理解

1、选择器的特异度

特异度：选择器特殊的程度，越特殊，优先级越高。

(1) 权重排行（从高到低）:

!important 规则用于增加权重，与优先级无关，但关乎最终结果，在使用时会覆盖其它任何声明。

行内样式

<h1 style="color:blue">行内样式</h1>

ID选择器 #id
class、属性、伪类选择器
```
.class
input[type="text"]
:hover
```
类型和伪元素选择器 div , ::before 权重向量 :

(0,0,0,0)
(行内样式，ID选择器，class/属性/伪类选择器,类型/伪元素)

(2) 如何计算特异性 :

从 0 开始，为 style 属性添加 1000，为每个 ID 添加 100，为每个属性、类或伪类添加 10，为每个元素名称或伪元素添加 1,通配符选择器为0。
兄弟选择器和相邻选择器不属于单个选择器，而是属于选择器组合，特异度也为和（即相加）
出现样式继承时，继承下来的特异度为0，若该元素未被选中，无论父元素特异度多高，子元素都为0

(3) 特异性规则：

两次将同一规则写入外部样式表时，后面的规则将被应用

h1 {background-color: yellow;}
h1 {background-color: red;}     /*应用*/

ID选择器比属性选择器拥有更高的特异性
上下文选择器比单一元素选择器更具体，嵌入式样式表更靠近元素而应用

#content h1 {background-color: red;}  /*外部CSS文件*/

<!-- HTML文件中(应用) -->  

<style>  
#content h1 {
  background-color: yellow;
}
</style>

类选择器会击败任意数量的元素选择器

2、继承

继承是一种规则，它允许样式不仅应用于某个特定HTML元素标签，而且应用于其后代。
继承性的作用：给父元素设置一些属性，子元素也可以使用。
某些属性会自动继承其父元素的计算值，除非显示指定一个值。
inherit 关键字允许显示的声明继承性，它对继承性和非继承性都生效

(1) 常见的继承属性

字体属性中的：
- font、font-family、font-weight、font-size、font-style
文本属性：
- 内联元素：color、line-height、word-spacing、letter-spacing、text-transform
- 块级元素：text-indent、text-align
元素可见性：
- visibility、
表格布局属性：
- caption-side、border-collapse、border-spacing、empty-cells、table-layout
列表布局属性：list-style
生成内容属性：quotes
光标属性：cursor
页面样式属性：
- page、page-break-inside、windows、orphans
声音样式属性：
- speak、speech-rate、volume、voice-family、pitch、stress、elevation;
更多内容，访问：什么是CSS继承

(2) 非继承属性

当元素的一个非继承属性没有指定值时，则取属性的初始值(initial value)

初始值

可以用关键字 initial显示重置为初始值
无继承属性：1、display；2、文本属性；3、盒子模型属性；4、背景属性；5、定位属性；6、生成内容属性；7、轮廓样式属性；8、页面样式属性；9、声音样式属性。

无继承属性

(3) CSS 求值过程

css求值过程.jpg

CSS 求值过程详细讲解

3、布局

(1) 常见的布局技术：

常规流
- 行级、块级、表格布局、FlexBox、Grid布局
绝对定位
浮动
相对定位

(2) 盒子模型：

盒子模型.jpg

width
- 指定content box 宽度
- 取值为长度、百分数、auto
- auto 由浏览器根据其它属性确定
- 百分数相对于容器的centent box 宽度
height
- 指定content box 高度
- 取值为长度、百分数、auto
- auto 由内容计算得来
- 百分数相对于容器的centent box 高度
- 容器有指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
- 四个值时分别为（上、右、下、左）（顺时针）
border
- 指定容器边框样式、粗细和颜色
- 三种属性：
  - border-width
  - border-style
  - border-color
- 四个方向：
  - border-top
  - border-right
  - border-bottom
  - border-left

margin

指定元素四个方向的外边距
取值为长度、百分数、auto
百分数相对于容器宽度

使用margin:auto水平居中

<style>
div {
    width: 200px;
    height: 200px;
    background: coral;
    margin-left: auto;
    margin-right: auto;         <!-- 左右边距相等,水平居中 -->
  }                    
</style>

margin collapse 外边距重叠

块的上边距(margin-top)和下边距(margin-bottom)有时合并折叠为单个边距，其大小为单个边距的最大值（若相等，则取其中一个）。

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

<style>
  .a {
    background: lightblue;
    height: 100px;
    margin-bottom: 100px;
  }

  .b {
    background: coral;
    height: 100px;
    margin-top: 100px;
  }
</style>

box-sizing:border-box

设置大小时，包含padding

<p class="a">content box</p>
<p class="b">border box</p>

<style>
.a {
  width: 100%;
  padding: 1em;
  border: 3px solid #ccc;
}

.b {
  box-sizing: border-box;
  width: 100%;
  padding: 1em;
  border: 3px solid #ccc;
}
</style>

overflow 设置元素溢出时行为
- overflow属性可以设置水平、垂直方向（即x,y轴）
  - overflow-x、overflow-y
- 属性值：
  - visible 内容可能溢出到外部，不会剪裁。
  - hiddden 溢出时，不提供滚动条，内容剪裁。但可以编程的方式滚动。
  - scroll 无论是否溢出，总是显示滚动条
  - auto 若内容适应边距(padding)盒，则与visible相同，若溢出，则浏览器提供滚动条
  - overlay 与auto 相同，但滚动条绘制在内容上，不额外占据空间

(3) 块级与行级

块级：

不和其它盒子并列摆放
适用所有的盒模型属性
常见块级元素：

body、article、div、main、section、h1~h6、p、ul、li等
display:block

行级：

和其它行级盒子一起放在一行或拆开成多行
盒模型中的width、height不适用
常见的行级元素：

span、em、strong、cite、code等
display:inline

display 属性：

block 块级盒子
inline 行级盒子
inline-block
- 本身是行级，可以放在行盒中；
- 可以设置宽高；
- 作为一个整体不会被拆散成多行
none 排版时完全被忽略

4、常规流 Normal Flow

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

常规流布局：

常规流.jpg

(1) 行级排版上下文

IFC：Inline Formatting Context
只包含行级盒子的容器会创建一个IFC
IFC 内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align 决定一行内盒子的水平对齐
- vertical-align 决定一个盒子在行内的垂直对齐
- 避开浮动(float)元素

(2) 块级排版上下文

BFC: Block Formatting Context
会创建BFC的一些容器
- 根元素
- 浮动、绝对定位、inline-block
- Flex 子项和Grid子项
- overflow 值不是 visible 的块盒
- display:flow-foot；

BFC内的排版规则

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

(3) Flex Box

定义Flex容器

注意： 弹性布局中必须有一个display属性设置为flex的父元素

 <div class="flex-container">
     <div>1</div>
     <div>2</div>
     <div>3</div>
 </div>
 
 <style>
     .flex-container{
         display:flex;
         background-color:Blue;
     }
     
     .flex-container div
     {
         background-color:yellow;
         margin: 10px;
         padding: 20px;
         font-size: 30px;
     }
 </style>

蓝色区域则是flex容器，其中带有三个flex项目。

Flex Box 可以控制子级盒子的：
- 摆放的流向（↓→↑←）
- 摆放顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许折行

`flex-direction`属性

flex-direction属性定义容器要在哪个方向上堆叠flex项目，它有以下值：
- column 从上到下
- column-reverse 从下到上
- row 从左到右
- row-reverse 从右到左

`flex-wrap`属性

flex-wrap 属性规定是否应该对 flex 项目换行。
- wrap值规定flex项目将在必要时进行换行
- nowrap值规定将不对flex项目换行（默认）
- wrap-reverse值规定如有必要，弹性项目将以相反的顺序换行

`flex-flow`属性

flex-flow属性是 flex-direction 和 flex-wrap 属性的简写属性。

`justify-content`属性

justify-content 属性用于对齐 flex 项目
- center 中心对齐
- flex-start 在容器的开头对齐（默认）
- flex-end 在容器的末端对齐
- space-around 行之前、之间和之后带有空格的flex项目
- space-between 行之间带有空格的flex项目
- space-evenly 都沿主轴均匀分布，间距相同

`align-items`属性

align-items 属性用于垂直对齐 flex 项目
- center中间对齐
- flex-start 顶部对齐
- flex-end 底部对齐
- stretch 拉伸填充（默认）
- baseline 基线对齐

`align-content`属性

align-content 属性用于对齐弹性线
- space-between 等间距弹性线
- space-around 弹性线之前、中间、之后带有空格
- stretch 拉伸弹性线填充空间（默认）
- center 容器中间显示弹性线
- flex-start 容器开头显示弹性线
- flex-end 容器末尾弹性线

`align-self`属性

align-self 属性规定弹性容器内所选项目的对齐方式。
align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

`order`属性

order 属性规定flex项目的顺序
值必须为数字，默认值是0

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
    display: flex;
    align-items: stretch;
    background-color: #f1f1f1;
}

.flex-container>div {
    background-color: Blue;
    color: white;
    width: 100px;
    margin: 10px;
    text-align: center;
    line-height: 75px;
    font-size: 30px;
}
</style>
</head>
<body>
<h1>order 属性</h1>

<p>使用 order 属性可以根据需要对 flex 项目进行排序：</p>

<div class="flex-container">
    <div style="order: 4">1</div>
    <div style="order: 3">2</div>
    <div style="order: 2">3</div> 
    <div style="order: 1">4</div>
</div>
</body>
</html>

`align-grow` 属性

flex-grow属性规定某个flex项目相对于其余flex项目将增长多少倍
该值必须是数字，默认值是0

`align-shrink`属性

align-shrink属性规定某个flex项目相对于其余flex项目将收缩多少
该值必须是数字，默认值是0

`align-basis`属性

flex-basis 属性规定flex 项目的初始长度

<div style="flex-basis:200px">flex-basis<div>

`flex`属性

flex属性是flex-grow、flex-shrink、flex-basis属性的简写属性

(4)Grid 布局

display:grid或display:inline-grid使元素生成一个块级或行级的Grid容器
grid-template相关属性将容器划分为网格
设置每个子项占哪些行/列

划分网格

grid-template-columns 属性定义每一列的列宽
grid-template-rows 属性定义每一行的行高
在上述属性里，还可以使用方括号，指定每一根网格线的名字

.GridBox{
    display:grid;
    grid-template-columns:[c1] 200px [c2] 100px [c3] 200px;
    grid-template-rows:[r1] 50px [r2] 40px;
}

repeat() 函数

可以简化重复的值。接收两个参数，第一个是重复次数，第二个是所要重复的值，当设置的几个子格子行/高一样时，可以使用此函数。

    display:grid;
    grid-template-columns:repeat(3,200px);
    grid-template-rows:repeat(2,50px);

auto-fill 关键字

自动填充，让行/列中尽可能地容纳更多的单元格

.GridBox{
    display:grid;
    grid-template-columns:repeat(auto-fill,200px); /*固定列宽，不固定数量，根据行空间大小自动填充*/
    grid-template-rows:50px;
}

fr 关键字

长度单位，代表网格容器中可用空间的一等份。

.GridBox{
    display:grid;
    grid-template-columns:200px 1fr 2fr; /*表示第一个列宽为200px,后面剩余宽度分为两部分，分别为剩余宽度的1/3,2/3
    grid-template-rows:50px; 
}

minmax()函数

产生一个长度范围，范围之中的长度都可用于网格中。
两个参数，最大和最小值

.GridBox{
    display:grid;
    grid-template-columns:200px minmax(100px,300px)
    grid-template-rows:50px;
}

auto 关键字

由浏览器决定长度

.GridBox{
    display:grid;
    grid-template-columns:200px auto 200px; 
    grid-template-rows:50px;
}

间距属性

grid-row-gap属性
- 设置行间距
grid-column-gap属性
- 设置列间距
grid-gap 前两者简写

grid-template-areas 属性

定义区域，一个区域由一个或多个单元格组成

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  grid-template-areas: 'a b'
                       'c d';
                       
  /* 划分四个单元格，并定义a b c d 四个区域
}

区域中间不需用到的地方可用.设定。

grid-area 属性指定项目放在哪个区域

.box1{
    grid-area:a;
}

选定网格

grid-area属性

自定义区域后可以直接指定，如：

.container {
  display: grid;
  grid-template-columns: 100px 100px;
  grid-template-rows: 100px 100px;
  grid-template-areas: 'a b'
                       'c d';
}

.box1{
    grid-area:a;
}

通过网格线

有四个属性

grid-row-start  开始行
grid-column-start 开始列
grid-row-end 结尾行
grid-column-end 结尾列

可简写为

grid-area: grid-row-start/grid-column-start/grid-row-end/grid-column-end;

更多详细内容可以查看阮一峰老师的文章教程： CSS Grid 网格布局教程

5、浮动与 position

(1) 浮动

现在主要用于图文环绕设置
其它功能效果更多使用 flex box、grid box
float有以下值：
- left 浮动在容器左侧
- right 容器右侧
- none 不进行浮动
- inline-start 块容器开始的一侧
- inline-end 块容器结束的一侧

(2) position属性

static 默认值，非定位元素
relative 相对自身原本位置偏移，不脱离文档流
- 在常规流里面布局
- 流内其它元素当它没有偏移一样布局
- 使用 top、left、bottom、right设置偏移长度
absolute 绝对定位，相对非static 祖先元素定位
- 脱离常规流
- 不会对流内元素布局造成影响
fixed 相对于视口（浏览器窗口）绝对定位

CSS（下：深入CSS）|青训营笔记