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

CSS是什么？

CSS的定义

CSS，英文全称Cascading Style Sheets，中文译为层叠样式表，是用来定义页面元素的样式

CSS的使用

选择器通常是您需要改变样式的 HTML 元素。每条声明由一个属性和一个值组成。属性（property）是您希望设置的样式属性（style attribute）。每个属性有一个值。属性和值被冒号分开

如何插入CSS样式表

插入CSS的方法有三种：

外部样式表(External style sheet)

<head> <link rel="stylesheet" type="text/css" href="mystyle.css"> </head>

内部样式表(Internal style sheet)

<head> <style> hr {color:sienna;} p {margin-left:20px;} body {background-image:url("images/back40.gif");} </style> </head>

内联样式(Inline style)

<p style="color:sienna;margin-left:20px">这是一个段落。</p>

CSS的工作原理

graph TD
加载HTML --> 解析HTML--同时加载CSS --> 创建DOM树--同时解析CSS并添加样式到DOM节点 --> 展示页面

CSS选择器

作用：

找出页面中的元素，以便于为其添加样式
可以使用多种方式选择元素

选择器有很多种类，分为：通配符 * 、标签、类、id、属性、伪类、组合、子代等等。不同的选择器有不同的权重，权重越高的选择器的优先级越高，下面整理了一些常用的选择器权重：

!important > 内联样式(1000) > id(100) > class/伪类/属性(10) > 标签/伪元素(1)

伪类选择器

不基于标签和属性定位元素

继承

某些属性会自动继承其父元素的计算值，除非显示指定一个值
一般利用显示继承对CSS初始化

CSS 盒子模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。
下面的图片说明了盒子模型(Box Model)：

未标题-1.jpg

不同部分的说明：

Margin(外边距) - 清除边框外的区域，外边距是透明的。
Border(边框) - 围绕在内边距和内容外的边框。
Padding(内边距) - 清除内容周围的区域，内边距是透明的。
Content(内容) - 盒子的内容，显示文本和图像。

布局(Layout)是什么

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

布局相关技术

常规流
- 行级
  - Inline Formatting Context(IFC)
  - 只包含行级盒子的容器，会创建一个IFC
  - 排版规则：
    - 内部的盒子会在水平方向，一个接一个地放置。
    - 这些盒子垂直方向的起点从包含块盒子的顶部开始。
    - 摆放这些盒子的时候，它们在水平方向上的 padding、border、margin 所占用的空间都会被考虑在内。
    - 在垂直方向上，这些框可能会以不同形式来对齐（vertical-align）：它们可能会使用底部或顶部对齐，也可能通过其内部的文本基线（baseline）对齐。
    - 还有许多规则没有整理到位，欢迎补充~
- 块级
  - Block Formatting Contexts (块级格式化上下文)
  - 如何创建BFC
    - 浮动元素：float 除 none 以外的值
    - 绝对定位元素：position (absolute、fixed)
    - display 为 inline-block、table-cells、flex
    - overflow 除了 visible 以外的值 (hidden、auto、scroll)
  - 排版规则：
    - 内部的Box会在垂直方向，一个接一个地放置。
    - Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠。
    - 每个盒子（块盒与行盒）的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
    - BFC的区域不会与float box重叠。
    - BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。
    - 计算BFC的高度时，浮动元素也参与计算。
- 表格布局
- FlexBox
- Grid布局
浮动
定位

理解CSS | 青训营笔记