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

一、本堂课重点内容

CSS 基本知识
CSS 盒模型
CSS 布局方式及相关技术

二、详细知识点介绍

（一）CSS基本知识

1.代码构成

CSS由一条条样式规则构成:选择器 { 声明1; 声明2;......}，其中声明部分由属性和属性值组成。

2.使用方法

分为三类：外链，嵌入和内联。

其中外链是最常用的方法,便于实现内容和样式分离。

三种样式展示的优先级：内联>嵌入>外链。

<!--外链-->
<link rel="stylesheet" href="style.css ">
<!--嵌入-->
<style>
li { margin:0 ; list-style: none; }
p { margin:1em 0; }
</style>
<!--内联-->
<p style="margin:1em 0; color:red;"}>balabala</p>

3.选择器

常用选择器 根据用途，可把CSS选择器分为标签选择器、类选择器、全局选择器、id选择器和伪类选择器等。

标签选择器：标签名{ property:value }

p { margin:1em 0; color:red;}

类选择器：.类名{ property:value }

<style>
.aa{margin:1em 0; color:red;}
</style>
<body>
<p class="aa">balabala</p>
</body>

全局选择器：* { property:value }

*{margin:0; padding:0;}

id选择器：#id名{ property:value }

注意：页面中id值唯一。

<style>
# bb {margin:1em 0; color:red;}
</style>
<body>
<p id="bb">balabala</p>

伪类选择器：不基于标签和属性定位元素,分为状态伪类和结构性伪类。

状态伪类：

<a href="http://example.com">example.com</a>

<style>
a:link {color: black;}    /*未访问的链接*/
a:visited {color: gray;}  /*已访问的链接*/
a:hover {color: orange;}  /*鼠标悬浮链接上*/
a:active {color: red;}    /*选定的链接*/
</style>

结构性伪类：

<ol>
  <li>阿凡达</li>
  <li>泰坦尼克号</li>
  <li>星球大战：原力觉醒</li>
  <li>复仇者联盟 3</li>
</ol>

<style>
li {
  list-style-position: inside;
  border-bottom: 1px solid;
  padding: 0.5em
}
li:first-child {color: coral}
li:last-child { border-bottom: none;}
</style>

选择器优先级 CSS选择器的特异度越大，优先级越高，比如下例中，第一个选择器相较于第二个含有id选择器，所以优先级较大：

4.文本渲染

（1）alpha表示透明度，值为1→完全不透明，值为0→完全透明。

（2）美化文字

文本设置	属性名	属性值
字体类型	font-family	Georgia, Sans-Serif（通用字体族）等
字体大小	font-size	关键字（small、medium、large）；长度（px、em）；百分数（相对于父元素字体大小）
字体样式	font-style	italic（斜体）、normal、inherit（继承父元素）
字体粗细	font-weight	bold、bolder、lighter、normal
文字对齐	text-align	left、center、right、justify
首行缩进	text-indent	长度（px、em、mm）；百分数
文本行高	line-height	长度（px、em、mm）；百分数
空白处理	text-decoration	normal、nowrap（不换行）、pre（留空白）、pre-wrap（留空白+换行）、pre-line（合并空白）
文本修饰	text-decoration	none、underline等

5.CSS基本概念补充

CSS基本概念 CSS相关文章

（二）CSS 盒模型

常用属性	属性含义
width	指定content box宽度（长度、百分数、auto）
height	指定content box高度（长度、百分数、auto）
padding	指定元素四个方向的内边距
border	指定容器边框样式、粗细和颜色
margin	指定元素四个方向的内边距（长度、百分数、auto水平居中）
overflow	设置溢出文字显示样式（visible、hidden、scroll）
box-sizing	设置border-box（包含border和padding在内）计算宽、高

（三）CSS 布局方式及相关技术

1.布局

指确定内容的大小和位置的算法，一般依据元素、容器、兄弟节点和内容等信息来计算如何合理布局。

2.布局相关技术

常规流

行级排版上下文（IFC）——从左向右

不和其它盒子并列摆放，适用所有的盒模型属性，排版规则：

（1）盒子在一行内水平摆放

（2）一行放不下时，换行显示

（3）text-align决定一行内盒子的水平对齐

（4）vertical-align决定一个盒子在行内的垂直对齐

（5）避开浮动(float)元素*

块级排版上下文（BFC）——自上而下

某些容器可创建BFC: 根元素；浮动、绝对定位；inline-block；Flex子项和Grid子项；overflow值不是visible的块盒；display: flow-root等。

BFC内排版规则：

（1）盒子从上到下摆放

（2）垂直margin合并

（3）BFC内盒子的margin不会与外面的合并

（4）BFC不会和浮动元素重叠

表格布局
Flex布局（弹性布局）

.container {display: flex;}

Grid布局

.container {display: grid;}

display: grid使元素生成一个块级的Grid容器，然后可以使用grid-template相关属性将容器划分为网格，并对每一个子项占哪些行/列进行设置。

浮动（float）——设置图文环绕方式

定位（position）

static (静态定位) 默认值，非定位元素。
relative (相对定位) 在常规流里面布局，相对于自己本应该在的位置进行偏移，使用top、left、bottom、right设置偏移长度，流内其它元素当它没有偏移一样布局。
absolute (绝对定位) 脱离常规流，相对于最近的非static祖先定位，不会对流内元素布局造成影响。
fixed (固定定位) 脱离常规流，通过指定元素相对于屏幕视口（viewport）进行定位，屏幕滚动时元素位置不变。fixed 属性会创建新的层叠上下文。

CSS学习 | 青训营笔记