理解CSS ｜青训营笔记这是我参与「第五届青训营」笔记创作活动的第2天。什么是CSS？ Cascading Sty

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

什么是CSS？

Cascading Style Sheets 层叠样式表
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果
基本样式规则：选择器：{声明1；声明2} 声明：属性：属性值；
CSS引入方法：外链，嵌入，内联（推荐外链）
CSS如何工作的？

选择器

作用：找出页面中的元素，以便给他们设置样式

选择方法

按照标签名、类名或id

选择器	作用	用法
通配选择器	选择所有的标签	`* {color: red;}`
标签选择器	选出所有相同的标签	`p {color: red;}`
id选择器	一次选择一个标签	`.logo {color: red;}`
类选择器	选出1个或者多个标签	`#logo {color: red;}`

   注意：一般id名字唯一，只能调用一次，class名字可相同，调用多次。

2. 按照属性：

属性选择器：通过元素的属性或属性值选中
例如：对设置了disabled的input选中:[disabled] {color:red}; 对设置了disabled的类型为password的input选中：input[type="disabled"] {color:red}
也可以对属性值进行匹配选择，例如a[href^="#"]{color: red;}表示对以若a标签的href值以#开头则会被匹配上；a[href$=".jpg"]{color: red;}表示对以若a标签的href值以.jpg结尾则会被匹配上；

伪类选择器：
- 伪类选择器：不基于标签和属性定位元素
- 伪类种类：
- 状态伪类：元素处于某种特定状态被选中，例如a:link{}:默认状态下的链接;a:visited{}:访问过的链接 ;a:hover{}:鼠标移到链接后；a:active{}:鼠标按下去后链接；:focus{}:聚焦
- 结构伪类：根据DOM结点在DOM树中出现的位置选中。例如：父级：first-child{} 父级:last-child{} --选中父级的第一个/最后一个孩子。
组合选择器：
| 选择器 | 语法 |说明 |用法 | | --- | --- |--- | --- | | 直接组合 | AB |满足A同时满足B | input:focus | | 后代组合 | A B |选中A的子孙B | nav a| | 亲子组合 | A>B |选中A的子元素B |section>p | | 兄弟选择器 | A-B |选中B，如果它在A后且和A同级 | h2-p | | 相邻选择器 | A+B |选中B，如果它紧跟在A后面 | h2+p |

5.选择器组：
对多个选择器设置相同样式时：选择器1，选择器2，...,{}，逗号隔开

属性

颜色：预定义的颜色值：red,black,gray等；十六进制表示：#FF0000，#FF6600（每两位对应：#红R绿G蓝B）；RGB代码/HSL代码：rgb(255, 0, 0) 或 rgb(100%, 0%, 0%)；
透明度：alpha
字体:font-family ;在最后加上通用字体族（5种）；建议中文字体一般放在英文字体后面
字体大小：font-size ；单位：px/em；属性值可为关键字（small/medium/large）、百分比
字体粗细：font-weight ；属性值可为数字，也可为normal(=400)/bold(=700)
行高：line-height,控制文字行与行之间的距离。
文本对齐：text-align，设定文本水平对齐
空格：spacing;letter-spacing:控制字符之间间距；worde-spacing:控制空格间距；white-space:控制元素内的空白字符，属性值包括normal,pre,nowrap,pre-wrap,pre-line;
缩进：text-indent,首行缩进3个字距离，text-indent: 2em;
下划线：text-decoration，添加/取消下划线：underline/none

CSS选择器优先级(

总的来说，老师这里讲的CSS的层叠性、继承性、优先级

层叠性：同一个选择器设置相同样式，后者生效
继承：某些属性会自动继承其父元素的计算值，除非显示指定一个值
- 子元素继承父元素：color font- line text-等
- 显示继承：添加属性值inherit;
特异性:
- 优先级：行内样式 > ID选择器 > 类、属性、伪类 > 元素、伪元素选择器
- 权重：以0 0 0 0四位数作为样式权重总和，优先级从低到高的不同选择器数量对应从最低位到最高位的四位数权重总和，比较时先比较位级别，位级别若相同则比较位大小。
初始值:
- CSS中，每个属性都有一个初始值，使用initial关键字显示重置为初始值

CSS布局

布局:

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

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

盒子模型

内容content:

width：指定content box宽度；取值为长度、百分数、auto；auto由浏览器根据其他属性确定，百分数相对于容器的content box宽度)

height：指定content box高度；取值为长度、百分数、auto；auto取值由内容计算得来，百分数相对于容器的content box高度；**容器有指定的高度时，百分数才生效**)

内边距padding：

```
padding-left -right -top -bottom
```

可以由1-4个属性值，取值为数字+单位或者百分数，百分数相对于容器宽度

边框border：

包含三部分：边框样式`border-style`、粗细`border-width`、颜色`border-color`(没有顺序)

可以由1-4个属性值，取值为数字+单位或者百分数，百分数相对于容器宽度

三种属性四种可任意组合（颜色不同时，边界为斜线）

外边距margin：

```
控制盒子与盒子之间的距离
```
```
可以有1-4个属性值
```

使用margin:auto使盒子水平居中：盒子指定了宽度且盒子左右外边距设置auto<br>

  `
  <div></div>
   <style>
    div {
      width: 200px;
      height: 200px;
      background: coral;
      margin-left: auto;
      margin-right: auto;
    }
  </style>`

margin collapse:上下相邻块元素的垂直外边距并非相加，而是取两个值的较大值。

overflow：设置元素溢出时的行为，属性值：visible 可见； hidden 溢出隐藏； scroll:滚动

块级 VS. 行级

Bolock Level Box Inline Level Box
不和其他盒子并列摆放和其他行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性盒模型中的width、height不适用

块级元素行级元素
生成块级盒子生成行级盒子；内容分散在多个行盒中
body,article,div,main,section,h1-6,p,ul,li span,em,strong,cite,code等
display:block display:inline
```
注释：display:inline-block 本身是行级，可放在行盒中’可设置宽高；作为一个整体不会被拆散成多行
```

Bolock Level Box	Inline Level Box
不和其他盒子并列摆放	和其他行级盒子一起放在一行或拆开成多行
适用所有的盒模型属性	盒模型中的width、height不适用

块级元素	行级元素
生成块级盒子	生成行级盒子；内容分散在多个行盒中
body,article,div,main,section,h1-6,p,ul,li	span,em,strong,cite,code等
display:block	display:inline

排版上下文

行级排版上下文IFC：

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

排版规则
  *盒子在一行内水平摆放
  *一行放不下时，换行显示
  *text-align 决定一行内盒子的水平对其
  *vertical-align决定一个盒子在行内的垂直方式
  *避开float元素
  `<div>
    This is a paragraph of text with long word Honorificabilitudinitatibus. Here is an image
    <img src="https://assets.codepen.io/59477/cat.png" alt="cat">
    And <em>Inline Block</em>
  </div>

  <style>
    div {
      width: 10em;
      //overflow-wrap: break-word;
      background: #411;
    }

    em {
      display: inline-block;
      width: 3em;
      background: #33c;
    }
  </style>`

块级排版上下文BFC：

某些容器（根元素；浮动、绝对定位、inline-block；Flex子项和Grid子项；overflow值不是visible的块盒；display:flow-root）会建立一个IFC

排版规则
  *盒子从上到下摆放
  *垂直margin合并
  *BFC内盒子的margin不会与外面的合并
  *BFC不会和浮动元素重叠
  ` 
    <span>
    This is a text and
    <div>block</div>
    and other text.
  </span>

  <style>
    span {
      line-height: 3;
      border: 2px solid red;
      background: coral;
    }

    div {
      line-height: 1.5;
      background: lime;
    }
  </style>`

Flex Box
- Flex Box可控制自己盒子的摆放流向、顺序，盒子宽度和高度，水平和垂直方向的对齐，是否允许折行
- flex-deriection 规定弹性项目的方向。值：row(默认)、row-reversr、column、column-reverse
- 弹性容器主轴对齐：justify-content
- 弹性容器侧轴对齐：align-item
- 定义felx子项单独在侧轴方向上对齐方式：align-self
- 设置felx子项出现的顺序：order 默认值0
- flexibility:
  - ```
  flex-grow：容器有剩余空间时，设置子项伸展能力
```
- ```
flex-shrink：容器空间不足时，设置子项收缩能力
```
  - ```
  flex-basis: 没有伸展或收缩时的基础长度
```
Grid Box
- Grid Box将网页划分为一个个网格，达到各种布局，可看作二维布局。
- Grid Box包含行row和列column,行列交叉区域称为单元格cell；网格线grid line划分网格区域grid area
  - 例如：
    .a { grid-row-start: 1; grid-column-start: 1; grid-row-end: 3; grid-column-end: 3; } .a { grid-area: 2/2/4/4; } .b { grid-area: 1/1/3/3; }
- 容器属性：
  - display:grid 使元素生成一个块级的Grid容器
  - grid-template 相关属性将容器划分为网格
  - 例如：
    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

浮动 float - 布局常使用定位，float多用于图文环绕

绝对定位 - position属性

偏移属性值:top bottom left right
static 默认值，非定位元素
relative 相对自身原本位置偏移，不脱离文档流（相对定位）;相对于自己原来的位置移动，原来的位置继续占有
absolute 绝对定位，相对非static祖先元素定位（祖先元素有有不是static定位，则以最近的有定位祖先元素为参考点移动位置）；不再占有原来的位置（记住子绝'父'相）

fixed 相对于视口绝对定位（固定定位）

<nav>
  <a href="#">首页</a>
  <a href="#">导航1</a>
  <a href="#">导航2</a>
</nav>
<main>
  <section>1</section>
  <section>2</section>
  <section>3</section>
  <section>4</section>
  <section>5</section>
</main>
<a href="#" class="go-top">返回顶部</a>

<style>
  nav {
    position: fixed;
    line-height: 3;
    background: rgba(0, 0, 0, 0.3);
    width: 100%;
  }

  .go-top {
    position: fixed;
    right: 1em;
    bottom: 1em;
    color: #fff;
  }

  nav a {
    padding: 0 1em;
    color: rgba(255, 255, 255, 0.7);
  }

  nav a:hover {
    color: #fff;
  }

  body {
    margin: 0;
    font-size: 14px;
  }

  a {
    color: #fff;
    text-decoration: none;
  }

  section {
    height: 100vh;
    color: #fff;
    text-align: center;
    font-size: 5em;
    line-height: 100vh;
  }

  section:nth-child(1) {
    background: #F44336;
  }

  section:nth-child(2) {
    background: #3F51B5;
  }

  section:nth-child(3) {
    background: #FFC107;
  }

  section:nth-child(4) {
    background: #607D8B;
  }

  section:nth-child(5) {
    background: #4CAF50;
  }
</style>

总结

关于CSS的学习笔记基本完成，由于水平有限，没有进行过多扩展，若存在错误，还请指正，老师关于CSS的学习建议是有效的，个人认为CSS相关知识，特别是定位方面需要多进行代码实践，另外，相关知识可看阮一峰的博客，会更加清晰。

理解CSS ｜ 青训营笔记

什么是CSS？

选择器

属性

CSS选择器优先级(

CSS布局

总结

理解CSS ｜青训营笔记