这是我参与「第五届青训营 」伴学笔记创作活动的第2天

说明:今天重温CSS，主要写一下之前没有理解的点。

一、主要要点

• CSS基础
• 深入CSS

二、CSS基础

1.CSS是如何工作的

在页面渲染上，浏览器会先加载HTML结构，在解析HTML时，才加载CSS，解析完CSS之后，会将节点的样式添加到DOM树上，最后完成的页面的渲染。

2.CSS选择器组、文本渲染

2.1 CSS的选择器组

之前只是对后代组合使用的较多，其他的组合也是模棱两可，这次现在明白了，对于亲自组合也有了一定的认识，其中，亲子组合、兄弟选择器、相邻选择器都是选择的后面的元素。

2.2 颜色（RGB、HSL）

1. RGB

rgb里面的值，分别代表红色、绿色、蓝色的多少，来显示颜色所呈现的值，下面图片左边呈现的是十六进制，00-ff，右边范围0-255。

2. HSL

相对于RGB，HSL所表示的值更加的通俗易懂，其中H表示的是色相，就是颜色，比如红黄蓝绿等等，S表示的是饱和度，指的是色彩的鲜艳程度，L表示的是亮度，颜色的明暗变化；根据上面三种的描述，在知道S、L是就可以知道颜色大体鲜艳以及明暗程度。

例如在知道第一个值的时候，想要调颜色，就可以根据其他两个值直接调节。

2.3 字体font-family

font-family是一个属性值，里面要跟多个字体家族，其中最后一个要写通用字体家族，因为当前面字体浏览器不具有时，可以以最后一个字体家族为标准，来渲染文本。

通用字体家族

2.4 em标签

em是一个相对字体大小单位，相对于父级元素 例如：

<section>
  <h2>A web font example</h2>
</section>

<style>
  section {
    font-size: 20px;
  }

  section h2{
    font-size: 2em;
  }

</style>

上述代码，父级元素section设置了文本大小为20px，当它的孩子h2设置字体大小为2em，那么此时h2标签的字体大小就为 20*2=40px。

2.5 空白符

在编译器中写代码时，多个空格会在浏览器上显示不出来，会将多个空百符解析为一个来渲染。 white-space属性可以解决这个问题；

这是它的属性值，normal和nowrap会不显示空白符，pre和pre-wrap会显示空白符也会换行，pre-line不会留空白符，还会换行。

三、 深入CSS

1. CSS样式优先级

这里我没有看懂视频中的特异度，还是用之前的办法，权重的方法。

• 第一等级：代表内联样式，如style=""，权值为 1000
• 第二等级：代表id选择器，如#content，权值为100
• 第三等级：代表类，伪类和属性选择器，如.content，权值为10
• 第四等级：代表标签选择器和伪元素选择器，如div p，权值为1
• 注意：通用选择器（*），子选择器（>），和相邻同胞选择器（+）并不在这个等级中，所以他们的权值为0。

相加等级，谁大谁的优先级就高。

2. 继承

• 注意：一般和文本相关的是可以继承的，和模型相关的是不可以继承的

一、无继承性的属性

1、display：规定元素应该生成的框的类型

2、文本属性：

vertical-align：垂直文本对齐

text-decoration：规定添加到文本的装饰

text-shadow：文本阴影效果

white-space：空白符的处理

unicode-bidi：设置文本的方向

3、盒子模型的属性：width、height、margin 、margin-top、margin-right、margin-bottom、margin-left、border、border-style、border-top-style、border-right-style、border-bottom-style、border-left-style、border-width、border-top-width、border-right-right、border-bottom-width、border-left-width、border-color、border-top-color、border-right-color、border-bottom-color、border-left-color、border-top、border-right、border-bottom、border-left、padding、padding-top、padding-right、padding-bottom、padding-left

4、背景属性：background、background-color、background-image、background-repeat、background-position、background-attachment

5、定位属性：float、clear、position、top、right、bottom、left、min-width、min-height、max-width、max-height、overflow、clip、z-index

6、生成内容属性：content、counter-reset、counter-increment

7、轮廓样式属性：outline-style、outline-width、outline-color、outline

8、页面样式属性：size、page-break-before、page-break-after

9、声音样式属性：pause-before、pause-after、pause、cue-before、cue-after、cue、play-during

 

二、有继承性的属性

1、字体系列属性

font：组合字体

font-family：规定元素的字体系列

font-weight：设置字体的粗细

font-size：设置字体的尺寸

font-style：定义字体的风格

font-variant：设置小型大写字母的字体显示文本，这意味着所有的小写字母均会被转换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。

font-stretch：对当前的 font-family 进行伸缩变形。所有主流浏览器都不支持。

font-size-adjust：为某个元素规定一个 aspect 值，这样就可以保持首选字体的 x-height。

2、文本系列属性

text-indent：文本缩进

text-align：文本水平对齐

line-height：行高

word-spacing：增加或减少单词间的空白（即字间隔）

letter-spacing：增加或减少字符间的空白（字符间距）

text-transform：控制文本大小写

direction：规定文本的书写方向

color：文本颜色

3、元素可见性：visibility

4、表格布局属性：caption-side、border-collapse、border-spacing、empty-cells、table-layout

5、列表布局属性：list-style-type、list-style-image、list-style-position、list-style

6、生成内容属性：quotes

7、光标属性：cursor

8、页面样式属性：page、page-break-inside、windows、orphans

9、声音样式属性：speak、speak-punctuation、speak-numeral、speak-header、speech-rate、volume、voice-family、pitch、pitch-range、stress、richness、、azimuth、elevation

 

三、所有元素可以继承的属性

1、元素可见性：visibility

2、光标属性：cursor

 

四、内联元素可以继承的属性

1、字体系列属性

2、除text-indent、text-align之外的文本系列属性

 

五、块级元素可以继承的属性

1、text-indent、text-align

2.1 显示继承

加inherit属性值就可以让属性进行显示继承 例如：

运用通配符选择器，让box-sizing属性可以进行继承，因为html设置的属性值是border-box，那么在html里面的元素都会继承box-sizing：border-box，这种方式来计算盒子。

下面.some-widget容器里面的元素就会以content-box来计算盒子。

2.2 初始值

在没有继承时，有些值会有初始值.

3. 布局

• 注意的点：给高度height设置百分数高度时，它的父级容器必须有指定高度

3.1 布局相关技术

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

3.2 常规流 Normal Flow

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

行级排版上下文

块级排版上下文

Flex Box

对于flex布局又有了新的认识，图解非常清晰

要给容器设置 display:flex

• 容器属性

  • 设置主轴方向属性

    

  • 设置水平位置

    

  • 设置垂直位置

• 项目属性

  • align-self属性表示当前项目可以和其他项目拥有不一样的对齐方式。

    

  • order属性设置项目排序的位置，默认值为0，数值越小越靠前

    

  • flex-grow 属性

    flex-group属性用来控制当前项目是否放大显示。默认值为0，表示即使容器有剩余空间也不放大显示。如果设置为1，则平均分摊后放大显示。

  • flex-shrink 属性

    flex-shrink属性表示元素的缩小比例。默认值为1，如果空间不够用时所有的项目同比缩小。如果一个项目的该属性设置为0，则空间不足时该项目也不缩小。

• Flex缩写用法

Grid布局

display：grid

划分网格

grid-template-columns: 100px 100px 200px;
grid-template-rows: 100px 100px

grid-template-columns: 30% 30% auto;
grid-template-rows: 100px auto

grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 1fr

将内容填充进去

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

或者写成

.a {
  grid-area: 1/1/3/3;
}

3.3 float 浮动

float:left;//常用

3.4 position属性

1.relative相对定位

2.absolute绝对定位

四、参考文章以及博客

参考文章（CSS优先级）：blog.csdn.net/qq_43000315…

参考博客（CSS继承）：www.cnblogs.com/thislbq/p/5…