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

课堂内容

一、什么是CSS

Cascading Style Sheets
用来定义页面元素的样式
- 设置字体和颜色
- 设置位置和大小
- 添加动画效果

二、CSS的基本组成

h1: 选择器Selector,用来选择页面中的元素

color: 选择器Property，属性名

white: 属性值Value

属性+属性值+分号称作一个声明Declaration,多条声明放在一个大括号里组成声明块。

三、使用CSS的三种方式

<!-- 外链 -->
<link rel="stylesheet" type="text/css" href="mystyle.css">

<!-- 嵌入 -->
<style>
body { background-color: linen;}
h1 { color: maroon; margin-left: 40px;} 
</style>

<!-- 内联 -->
<h1 style="color:blue;text-align:center;">This is a heading</h1>

四、CSS是如何工作的？

五、选择器Selector

找出页面中的元素，以便给他们设置样式
使用多种方式选择元素
- 按照标签名、类名或id
- 按照属性
- 按照DOM树中的位置

通配选择器

<h1>This is a heading</h1>
<p>This is a paragraph</p>
<style>
    *{
        color: red;
        font-size: 20px;
     }
</style>

标签选择器

<h1>This is a heading</h1>
<p>This is a paragraph</p>
<style>
h1 { color: orange; } 
p { color: red; }
</style>

3.id选择器

<h1 id="logo">HTML5文档</h1>
<style>
    #logo{
        font-size: 60px;
        font-weight: 200;
    }
</style>

4.类选择器

<h2>Todo List</h2>
<ul>
    <li class="done">Learn HTML</li>
    <li class="done">Learn css</li>
    <li>Learn JavaScript</li>
</ul>
<style>
    .done{
        color: gray;
        text-decoration: line-through;
    }
</style>

5.属性选择器

<label>用户名：</label>
<input value="zhao" disabled />

<label>密码：</label>
<input value="123456" type="password"/>
<style>
    [disabled]{
        background-color: #eee;
        color: #999;
    }
</style>

六、伪类（pseudo-classes）

不基于标签和属性定位元素
几种伪类
- 状态伪类
- 结构性伪类

七、组合

八、一些基本属性

颜色
字体样式
行高
空格
背景
边框
边距
......

九、继承

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

<p>This is a <em>text</em>of <strong>inherit</strong></p>
<style>
    body{
        font-size: 20px;
    }
    p{
        color: red;
    }
    em{
        counter-reset: red;
    }
</style>

十、布局

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

十一、布局相关的技术

常规流
- 行级
- 块级
- 表格布局
- FlexBox
- Grid布局
浮动（图片浮动）
绝对定位

十二、一些关于布局的属性

width
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
height
- 指定content box宽度
- 取值为长度、百分数、auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
- 容器有指定的高度时，百分数才生效
padding
- 指定元素四个方向的内边距
- 百分数相对于容器宽度
border
- 指定容器边框样式，粗细和颜色
- 三种属性：
  - border-width
  - border-style
  - border-color
- 四个方向：
  - border-top
  - border-right
  - border-bottom
  - border-left
margin
- 指定元素四个方向的外边距
- 取值可以是长度、百分数、auto
- 百分数相对于容器宽度

十三、常规流

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

行级排版上下文

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

块级排版上下文

某些容器会创建一个BFC
- 根元素
- 浮动，绝对定位，inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display:flow-root
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠

块级VS行级

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

块级元素	行级元素
生成块级盒子	生成行级盒子，内容分散在多个行盒（line box）中
body、article、div、main。section、h1-6、p、ul、li 等	span、em、strong、cite、code 等
display：block	display：inline

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

Flex Box

一种新的排版上下文
它可以控制子级盒子的：
- 摆放的流向
- 摆放的顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许拆行

Grid布局

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

十四、float（浮动）

为了实现文字环绕的效果，比如文字环绕图片（了解这些即可）

十五、绝对定位

position属性
- static 默认值，非定位元素
- relative 相对自身原本位置偏移，不脱离文档流
- absolute 绝对定位，相对非static祖先元素定位
- fixed 相对于视口绝对定位
position:relative
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top、left、bottom、right设置偏移长度
- 流内其他元素当它没有偏移一样布局
position:absolute
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响

以上就是我总结的第二节课的内容了，内容有疏漏还请见谅，有错误还请指正。这次的内容较多，要整理好笔记，课后慢慢消化，希望我们一起进步，顺利结营！

CSS ｜ 青训营笔记

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