CSS笔记整理-选择器与布局 | 青训营笔记这是我参与「第四届青训营」笔记创作活动的第1天~ 整理了一下CSS的学习笔

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

整理了一下CSS的学习笔记，结合青训营的课程和一些文档，梳理了一下选择器和布局的一些知识点。

CSS基本语法：

选择器{
    样式;
}

一、选择器

（一）基础选择器

标签/元素选择器

语法：标签名

类选择器

语法：.类名，重复样式写为类以减少代码重复

不同的类可以叠加，多个类名间用空格隔开

.red{
    color: red;
}
.big{
    font-weight: bold;
}
...
<li class="red big">Text</li>

id选择器

语法：#id名

与类选择器相近，但id具有唯一性

伪类选择器

语法：:伪类名

可以用来选定处于某种状态的部分，比如始终选取文章段落的第一段、最后一段等，在html中增添或删减段落就不再需要添加类名了

链接伪类：

a:link         //未被访问
a:visited      //已被访问
a:hover        //鼠标悬浮其上时
a:active       //鼠标按下但仍未弹起时

focus伪类：

input:focus     //选中文本框、输入框时

通配符选择器

以*代指文档中所有内容

（二）复合选择器

后代选择器

ancestor descendant {
    
}

以空格隔开，选中前者中的所有项

子选择器

dad > son{

}
...
    <div></div>    // 选中
    <div>          // 选中
        <a></a>    // 未选中
    </div>

以 > 隔开，只选择距离前者的最近一级子元素，不选择次级及之后的子元素

（例：只选择第一个div和第二个div，不选择第二个div里的a）

并集选择器

bro1, 
bro2 {
    color: red;
}

以 , 隔开，只选择同级的兄弟

邻接兄弟选择器

h1 + p{
    
}
...
    <h1>Headline</h1>  // 选中
    <p>NewRoman</p>    // 选中
    <p>France</p>      // 未选中

只会选择紧跟前者其后的一个同级标签

通用兄弟选择器

h1 ~ p{
    
}
...
    <h1>Headline</h1>  // 选中
    <p>NewRoman</p>    // 选中
         ...
    <p>France</p>      // 选中

选中前者后的所有同级标签

（三）选择器优先级

内联（声明在style的属性） > ID选择器 > 类选择器 > 属性/伪类选择器 > 元素/伪元素选择器

!important 无视优先级顺序：不论优先级高低，均使用该属性

【注】通用选择器 (*)，组合符 (+, >, ~, ' ')，和否定伪类 (:not) 不会影响优先级。

二、继承

默认情况下，一些CSS属性会继承当前元素的父元素的属性，有些则不继承。

一般width,margin,padding,border属性不会被继承

控制继承

`inherit`	`initial`	`unset`
继承父元素样式	设置为浏览器默认样式	设置属性为自然值
	若默认样式该属性未设置，则设置为`inherit`	若属性为自然继承，即`inherit`，否则等同`initial`

三、布局

（一）盒模型

文档内容（即content）有属性width和height；

与盒模型边界线border的距离称为内边距padding；

border和页面边缘的距离称为margin

width & height

`width`	`height`
指定`content box`宽度	指定`content box`高度
取值为长度、百分数、auto	同左
auto由浏览器根据其他属性决定	auto由内容确定
	容器有指定高度时，百分数才生效

padding

可以分别指定元素四个方向的内边距，百分数根据容器宽度确定

border

指定容器边框样式、粗细和颜色

margin

指定元素外边距，取值可为长度、百分数（相对容器宽度）、auto

html中document是最大的一个盒子，body是document下的一个子盒子，默认margin为 8

（二）块级元素&行级元素

	块级元素	行级元素
特点	生成块级盒子（单占一行），适用所有盒模型属性	生成行级盒子（内容可以分散在一行），和模型中的width、height不适用
语法	`display: block`	`display: inline`
标签	`body\article\div\main\section\h1~6\p\ui\ol\li`等	`span\em\strong\cite\code` 等

可以通过 display 更改元素块级/行级属性

（三）IFC与BFC

IFC：行级排版上下文

IFC（Inline Formatting Context），只包含行级盒子的容器会创建一个IFC

IFC排版规则：

BFC：块级排版上下文

BFC（Block Formatting Context），一些容器会创建一个BFC：

BFC排版规则：

（四）Flex

Flex（Flexible Box），即弹性盒子，可以实现各种页面布局，在页面需要使用不同屏幕大小及设备类型时非常适用

整个布局遵循从左往右、从上往下的原则，每个子元素也会自动成为一个flex item。

可以将元素的 display 属性设置为 flex（生成块级 flex 容器）或 inline-flex（生成类似 inline-block 的行内块级 flex 容器）

当一个元素设置了 Flex 布局以后，其子元素的 float、clear 和 vertical-align 等属性将失效。

摘自CSS flex布局（弹性布局/弹性盒子） (biancheng.net)

主轴对齐：justify-content

该属性用于设置flex item在主轴（横轴）方向上的对齐方式

侧轴对齐：align-items

该属性用来设置flex box中元素在侧轴（纵轴）方向上的对齐方式

特殊对齐：align-self

该属性允许将某个item设为不同于其他item的对齐方式，其值可以覆盖alight-items属性值

item弹性设置

grow\shrink\basis 三个属性可以合并为flex 一个属性，

语法：flex: flex-grow flex-shrink flex-basis

参数说明如下：

flex-grow：（必填参数）一个数字，用来设置项目相对于其他项目的增长量，默认值为 0；

flex-shrink：（选填参数）一个数字，用来设置项目相对于其他项目的收缩量，默认值为 1；

flex-basis：（选填参数）项目的长度，合法值为 auto（默认值，表示自动）、inherit（表示从父元素继承该属性的值）或者以具体的值加 "%"、"px"、"em" 等单位的形式。

另外，flex 属性还有两个快捷值，分别为 auto（1 1 auto）和 none（0 0 auto）

摘自CSS flex布局（弹性布局/弹性盒子） (biancheng.net)

（五）Grid

Grid网格布局可以将网页划分成一个个网格，组合不同的网格以做出不同的布局

步骤：

display: grid 使元素生成一个块级grid容器
设置grid-template-columns/rows 相关属性将容器划分为网格
- 网格尺寸可用百分比、px、auto
设置每个子项占哪些行
- grid-row/column-start/end: number (指定开始（或结束）行（或列）线)
- grid-row: start / end (从start线开始到end线前结束)
- grid-column: start / span number （从start线开始，跨越number列结束）
- grid-area: row-start / column-start / row-end / column-end （从row-start和column-start开始，到row-end和column-end结束）
- grid-area: row-start / column-start / row-span1 / column-span2 （从row-start和column-start开始，跨越row-span1行、column-span2列结束）

注：行线和列线均从1开始编号

小总结：flex更像是一维的直线布局，只能在一个方向上进行元素的调整，而grid则是二维的网格布局，可以随心所欲实现网页元素的摆放