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

1.选择器的特异度

#	.	E
id	(伪）类	标签

例如：

  <div>
    <button id="app" class="b1">button1</button>
  </div>
  <style>
    /* id 类 标签
       0   1  1 */
    div .b2{
      background-color: red;
    }
    /* id  类 标签
       1    0   0 */
    #app{
      background-color:blue;
    }
    /* 结果为蓝色 */
  </style>

一般用于属性覆盖，提高代码的利用率

2.继承

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

一般文字、字体相关属性都可以继承，盒模型宽度、高度、边距都不能继承

2.1 显示继承

若属性不能被继承，可使用Inherit关键字让它能从父级继承

例子：

<style>
    /* box-sizing属性不可继承，可使用关键字inherit使其从父级继承 */
    * {
      box-sizing: inherit;
    }
    /* 若不单独设置box-sizing属性，那么所有的元素都继承html的box-sizing属性 */
    html {
      box-sizing: border-box;
    }
  </style>

2.2 初始值

在CSS中，每个属性都有一个初始值,例如：

background-color初始值为transparant

margin-left初始值为0

可使用关键字initial显示重置为初始值： background-color:initial则是把背景色变为透明。

2.3 CSS求值过程

3.布局Layout

布局分为三个板块

常规流：行级、块级、表格布局、FlexBox、Grid布局

浮动float

定位position

一个盒子的基本构造：

width

指定content box宽度

取值为长度，百分数，auto

auto由浏览器根据其它属性确定, 百分数相对于容器的content box宽度

height

指定content box高度

取值为长度，百分数，auto

auto取值由内容计算得来, 百分数相对于容器的content box高度，容器有指定高度时，百分数才生效

padding

指定元素四个方向的内边距，百分数相对于容器宽度

值的取值可以为一个(四变都相同)，两个(上下，左右)，三个(未指定的内边距与对边相同)，四个

border

指定容器的边框样式，粗细，颜色（border-width,border-style,border-color)，也有四个方向

一般简写为：1px solid blue 但当四条边框颜色不同时：

margin

指定元素四个方向的外边距

取值可以为长度，百分数，auto

百分数相对于容器宽度

运用：

使用margin:0 auto让盒子水平居中
margin collapse外边距重叠问题:

当同时设置margin-top和margin-bottom属性时，实际会取较大值来作为两者之间间距 所以遇到上下两个并排块，最好只设置其中一个的margin就行

box-sizing:border-box

设置该属性后，width就变成content-width+padding+border

overflow

取值：visible(默认),hidden,scroll

3.1 行级和块级

display属性

3.2 常规流 Normal Flow

1、根元素、浮动、绝对定位的元素会脱离常规流

2、其它元素都在常规流之内(in-flow)

3、常规流中的盒子，在某种排版上下文中参与布局

3.2.1 行级排版上下文IFC

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

IFC内的排版规则：

何在一行内水平摆放

一行放不下时，换行显示

text-align 决定一行内盒子的水平对其

vertical-align 决定一个盒子在行内的垂直对齐

避开浮动元素*

3.2.2 块级排版上下文BFC

某些容器会创建一个BFC

根元素

浮动、绝对定位、inline-block

Flex子项和Grid子项

overflow不是visible的块盒

display:flow-root;

BFC内的排版规则：

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

3.2.3 display:table

几乎与table系的元素相对应

属性	说明
table	（类似 <table>）此元素会作为块级表格来显示，表格前后带有换行符。
inline-table	（类似 <table>）此元素会作为内联表格来显示，表格前后没有换行符。
table-row-group	（类似 <tbody>）此元素会作为一个或多个行的分组来显示。
table-header-group	（类似 <thead>）此元素会作为一个或多个行的分组来显示。
table-footer-group	（类似 <tfoot>）此元素会作为一个或多个行的分组来显示。
table-row	（类似 <tr>）此元素会作为一个表格行显示。
table-column-group	（类似 <colgroup>）此元素会作为一个或多个列的分组来显示。
table-column	（类似 <col>）此元素会作为一个单元格列显示。
table-cell	（类似 <td> 和 <th>）此元素会作为一个表格单元格显示。
table-caption	（类似 <caption>）此元素会作为一个表格标题显示。

3.2.4 FlexBox

它可以控制子级盒子的：

摆放的流向

摆放顺序

盒子宽度和高度

水平和垂直方向的对齐

是否允许折行

步骤：

首先设置一个flex容器，然后将父元素(容器)设置display:flex;
设置父元素(容器)属性：

设置属性flex-direction：定义容器要在哪个方向上堆叠 flex 项目。

设置属性flex-wrap:规定是否应该对 flex 项目换行.
- nowrap:不换行(默认)
- wrap:必要时进行换行(切换浏览器窗口大小可观察)
- wrap-reverse:规定弹性项目将以相反的顺序换行（如有必要）

设置flex-flow属性：简写上述两个属性，例如flex-flow:row wrap;

设置justify-content属性:用于对齐 flex 项目.

默认为flex-start

设置属性align-items:用于垂直对齐 flex 项目。

应用：完美居中

.flex-container {
  display: flex;
  height: 300px;
  justify-content: center;
  align-items: center;
}

设置子元素（项目）属性：flex 容器的直接子元素会自动成为弹性（flex）项目。

order属性：规定flex项目顺序,必须是数字，默认为0. 例如：

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

结果为：

flex-grow 属性规定某个 flex 项目相对于其余 flex 项目将增长多少。

注：该数值必须为数字，默认是0

例如：

<div class="flex-container">
  <div style="flex-grow: 1">1</div>
  <div style="flex-grow: 1">2</div>
  <div style="flex-grow: 8">3</div> 
</div>

结果：

flex-shrink 属性规定某个 flex 项目相对于其余 flex 项目将收缩多少。

例如：

<div class="flex-container">
 <div>1</div>
 <div>2</div>
 <div style="flex-shrink: 0">3</div>
 <div>4</div>
 <div>5</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>
 <div>9</div>
 <div>10</div>
</div>

结果：

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

例如：

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div style="flex-basis: 200px">3</div>
  <div>4</div>
</div>

结果：

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

align-self 属性规定弹性容器内所选项目的对齐方式。

align-self 属性将覆盖容器的 align-items 属性所设置的默认对齐方式。

例如：

<div class="flex-container">
  <div>1</div>
  <div style="align-self: flex-start">2</div>
  <div style="align-self: flex-end">3</div>
  <div>4</div>
</div>

结果：

3.3 Grid布局

display:grid 使元素生成一个块级的Grid容器

使用gird-template相关属性将容器划分成网格

设置每一个子项占哪些行/列

3.3.1 网格布局模块

grid columns:网格项的垂直线

grid rows:网格项的水平线

grid gaps:每列/行之间的间隔

grid-row-gap:调节行之间缝隙

grid-column-gap:调节列之间缝隙

grir-gap:grid-row-gap 和 grid-column-gap 属性的简写属性,若为一个值表示同时设置为此值

例如：

.grid-container {
  display: grid;
  grid-column-gap: 50px;
  grid-template-columns: auto auto auto;
  background-color: #2196F3;
  padding: 10px;
}

.grid-item {
  background-color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(0, 0, 0, 0.8);
  padding: 20px;
  font-size: 30px;
  text-align: center;
}

结果：

gird lines:列之间的线称为列线（column lines）,行之间的线称为行线（row lines）

实例：把网格项目放在列线 1，并在列线 3 结束它：

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

.item1 {
  grid-column-start: 1;
  grid-column-end: 3;
}

结果：

3.3.2 网格容器

网格容器由放置在列和行内的网格项目组成。

grid-template-columns 属性定义网格布局中的列数，并可定义每列的宽度。

如果所有列都应当有相同的宽度，则设置为 "auto"

例如:生成包含4列的网格

.grid-container {
  display: grid;
  grid-template-columns: auto auto auto auto;
  grid-gap: 10px;
  background-color: #2196F3;
  padding: 10px;
}

.grid-container > div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

结果：

grid-template-rows 属性定义每列的高度例如：

.grid-container {
  display: grid;
  grid-template-rows: 80px 200px;
}

结果：

justify-content 属性用于在容器内对齐整个网格。

注意：网格的总宽度必须小于容器的宽度，这样 justify-content 属性才能生效。

取值与flex中的几乎相同，只是顶部对齐为start,底部对齐为end

align-content 属性用于垂直对齐容器内的整个网格。

注意：网格的总高度必须小于容器的高度，这样 align-content 属性才能生效。

取值与justify-content相同

3.2.3 网格项目

子元素（项目）:网格容器包含网格项目

grid-column 属性定义将项目放置在哪一列上,可以定义项目的开始位置以及结束位置。

如需放置某个项目，可以引用行号"/"，或使用关键字 "span" 来定义该项目将跨越多少列。

实例1: 使 "item1" 从第 1 列开始并在第 5 列之前结束：

.item1 {
  grid-column: 1 / 5;
}

结果：

实例2：使 "item2" 从第 2 列开始，并跨越 3 列：

.item2 {
  grid-column: 2 / span 3;
}

结果：

grid-row 属性定义了将项目放置在哪一行,可以定义项目的开始位置以及结束位置。

与grid-column使用相同

grid-area 属性可以用作 grid-row-start、grid-column-start、grid-row-end 和 grid-column-end 属性的简写属性

例如：

.item8 {
  grid-area: 1 / 2 / 5 / 6;
}

结果：

命名网格项:可以通过网格容器的 grid-template-areas 属性来引用命名的网格项目。

每行由撇号（' '）定义。

每行中的列都在撇号内定义，并以空格分隔。

句号表示没有名称的网格项目。

实例1：item1 的名称是 "myArea"，并跨越五列网格布局中的所有五列：

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea myArea myArea myArea';
}

结果：

实例2：让 "myArea" 跨越五列网格布局中的两列（句号代表没有名称的项目）：

.item1 {
  grid-area: myArea;
}
.grid-container {
  grid-template-areas: 'myArea myArea . . .';
}

结果：

实例3：命名所有项目，并制作一张随时可用的网页模板：

.item1 { grid-area: header; }
.item2 { grid-area: menu; }
.item3 { grid-area: main; }
.item4 { grid-area: right; }
.item5 { grid-area: footer; }

.grid-container {
  grid-template-areas:
    'header header header header header header'
    'menu main main main right right'
    'menu footer footer footer footer footer';
}

结果：

4. float浮动

float 属性可实现（报纸上）文字包围图片的效果。

实例：文章环绕图片

<style>
img {
  float: left;
}
</style>
<body>
<p><img src="/i/logo/w3logo-3.png" alt="W3School" style="width:170px;height:170px;margin-right:15px;">
领先的 Web 技术教程 - 全部免费。在 W3School，你可以找到你所需要的所有的网站建设教程。从基础的 HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。
我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
在 W3School，我们提供上千个实例。通过使用我们的在线编辑器，你可以编辑这些例子，并对代码进行实验
HTML 到 CSS，乃至进阶的 XML、SQL、JS、PHP。
我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。L、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。的 XML、SQL、JS、PHP。
我们的参考手册涵盖了网站技术的方方面面。其中包括W3C标准技术：HTML、CSS、XML 。以及其他技术，诸如 JavaScript、PHP、SQL 等。
在 W3School，我们提供上千个实例</p>
</body>

结果：

5.position定位

positon:static:默认值，非定位元素
position:relative:相对于自身原本位置偏移，不脱离文档流

position:absolute:绝对定位，相对最近非static元素定位，脱离了常规流，不影响流内布局
position:fixed:相对于视口绝对定位
position:fixed:一直固定

CSS深入 | 青训营笔记