这是我参与「第四届青训营」笔记创作活动的的第2天，今天是《理解CSS》。

CSS是什么

在页面中负责样式

基础代码

 h1 {
        color: white;
        font-size: 14px;
    }

选择器:用来选中页面中某一些元素，给这些元素定义样式--h1
属性：样式相关的--color
属性值：--white
color：while；--声明

使用CSS的三种方法

外链

CSS样式单独放在一个文件中，通过link引入。

<link rel="stylesheet" href="/assets/style.css">

嵌入

<style type="css">
    h1 {
        color: white;
        font-size: 14px;
    }
</style>

内联

<p style="color: red">hi</p>

CSS是如何工作的

HTML和CSS单独进行解析

选择器

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

通配符选择器

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

标签符选择器

<h1>heading</h1>
<p>paragraph</p>

<style>
    h1{
        color: orange;
    }
    p{
        color: red;
    }
</style>

id选择器

id是唯一的

<h1 id="logo">heading</h1>
<style>
    #logo{
        font-size: 60px;
    }
</style>

类选择器

<ul>
    <li class="done">lean html</li>
    <li class="done">lean css</li>
    <li>lean javascript</li>
</ul>
<style>
    .done{
        color: aqua;
        text-decoration: line-through;
    }
</style>

属性选择器

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

伪类选择器

不基于属性和标签定位元素
几种伪类 -状态伪类（链接的鼠标移动、输入框） -结构性伪类

继承

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

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

布局

-确定内容的大小和位置的算法

依据元素，容器，兄弟节点和内容等信息来计算
布局的相关技术：
- 常规流（行级，块级，表格布局，FlexBox,Grid布局）
- 浮动（图片浮动）
- 绝对定位
常规流（Normal Flow）
- 根元素，浮动和绝对定位的元素会脱离常规流
- 其他元素都在常规流之内（in-flow）
- 常规流中的盒子，在某种排版上下文中参与布局
行级排版上下文
- 只包含行级盒子的容器会创建一个IFC
- IFC内的排版规则
- 盒子在一行内水平摆放
- 一行放不下时，换行显示
- text-align决定一行内盒子的水平对齐
- vertical-align决定一个盒子在行内的垂直对齐
- 避开浮动（float）元素
块级排版上下文
- 某些容器会创建一个BFC
- 根元素
- 浮动，绝对定位，inline-block
- Flex子项和Grid子项
- overflow值不是visible的块盒
- display:flow-root
BFC内的排版规则
- 盒子从上到下摆放
- 垂直margin合并
- BFC内盒子的margin不会与外面的合并
- BFC不会和浮动元素重叠
Flex Box
- 一种新的排版上下文
- 它可以控制子级盒子的：
- 摆放的流向
- 摆放的顺序
- 盒子宽度和高度
- 水平和垂直方向的对齐
- 是否允许拆行
Flexibility
- 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩
- flex-grow有剩余空间时的伸展能力
- flex-shrink容器空间不足时收缩的能力
- flex-basis没有伸展或收缩时的基础长度
display:grid
- display:grid使元素生成一个块级的Grid容器
- 使用grid-template相关属性将容器划分为网格
- 设置每一个子项占那些行/列
position属性
- static 默认值，非定位元素
- relative 相对自身原本位置偏移，不脱离文档流
- absolute 绝对定位，相对非static祖先元素定位
- fixed 相对于视口绝对定位
position:relative
- 在常规流里面布局
- 相对于自己本应该在的位置进行偏移
- 使用top,left,bottom,right设置偏移长度
- 流内其他元素当它没有偏移一样布局
position:absolute
- 脱离常规流
- 相对于最近的非static祖先定位
- 不会对流内元素布局造成影响
width
- 指定content box宽度
- 取值为长度，百分数，auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
height
- 指定content box宽度
- 取值为长度，百分数，auto
- auto由浏览器根据其他属性确定
- 百分数相对于容器的content box宽度
- 容器有指定的高度时，百分数才生效
border
- 指定容器边框样式，粗细和颜色
- 三种属性：border-width(宽度),border-style（实线或者虚线）,border-color（颜色）
- 四个方向：border-top,border-right,border-bottom,border-left
margin
- 指定元素四个方向的外边距
- 取值可以是长度，百分数，auto
- 百分数相对于容器宽度
- margin:auto水平居中
- margin:collapse
box-sizing:border-box
- padding和border的值不会在影响元素的宽高，相当于把padding和border的值都算在content里 #CSS属性
alpha透明度
- #ff0000ff
- rgba（255,0,0,1）
- hsla(0,100%,59%,1)
font-family字体
line-height文字间距
font-size字体大小
- 关键字 small,medium,large
- 长度 px,em
- 百分数相对于父元素字体大小
text-align文本对齐方式
text-indent文本缩进
text-decoration 属性规定添加到文本的修饰，下划线、上划线、删除线
overflow:visible(默认超出的也显示),hidden(超出的隐藏),scroll(超出以滚动条呈现)

总结

充分利用MDN和W3C CSS规范
保持好奇心，善用浏览器开发工具
持续学习，新性能不断出现

【青训营】理解CSS

CSS是什么

使用CSS的三种方法

CSS是如何工作的

选择器

通配符选择器

标签符选择器

id选择器

类选择器

属性选择器

伪类选择器

继承

布局

总结