CSS语法

什么是CSS

CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示 HTML 元素
样式通常存储在样式表中
把样式添加到 HTML 4.0 中，是为了解决内容与表现分离的问题
外部样式表可以极大提高工作效率
外部样式表通常存储在 CSS 文件中
多个样式定义可层叠为一个

CSS语法

CSS 语法由三部分构成：选择器、属性和值

selector {property: value}选择器 (selector) 通常是你希望定义的 HTML 元素或标签，属性 (property) 是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明（declaration）：body {color: blue}上面这行代码的作用是将 body 元素内的文字颜色定义为蓝色。

CSS实例

css规则有两个主要的部分构成：选择器，以及一条或多条声明：

屏幕截图 2023-07-31 163438.png

选择器通常是需要改变样式的HTML元素

每条声明由一个属性和一个值组成

属性是你希望设置的样式属性，每个属性有一个值，属性和值被冒号分开

css声明总是以分号；结束，声明总以大括号{}括起来

p{color:red;text-align:center;}

为了使css可读性更强，你可以每行只描述一个属性：

p
{
  color:red;
  text-align:center;
}

css注释

注释是用来解释你的代码，并且可以随意编辑它，浏览器会忽略它

css注释是以/*开始，以*/结束的

/*这是个注释*/
p{
  text-align:center;
  /*这是另一个注释*/
  color:black;
  font-family:arial;
}

CSS选择器的特异度

css里可以写多个选择器，那么多个选择器执行后最终显示哪个呢？：看特异度

** · **越特殊的选择器优先级越高，优先级越高就显示哪个

怎么看选择器的特异度

举例	#	·	E
	id	（伪）类	标签
#nav .list li a:link	1	2	2
.hd ul .links a	0	2	2

id的优先级最高

通过优先级高低覆盖

CSS继承

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

一般来说在CSS里，与文字相关的属性都是可以继承的，与盒模型相关的不可以继承

eg：宽度，不可继承；颜色，可继承

那么如果是不可继承的我们也非让他继承呢？该怎么办？

这就要提到

显示继承

使用inherit关键字，可以使其显示的从父级继承（继承的是计算值）

*{
  box-sizing:inherit;
}

html {
  box-sizing:border-box;
}

.some-widget{
  box-sizing:content-box;
}

初始值

当一个元素是不可继承的，然后也没给它设置属性，那么此时用到初始值；

或者当一个元素是可继承的，但是你往上一层一层的没找到它的父级，那么此时也会用到初始值

CSS中，每个属性都有一个初始值

· background-color的初始值为transparent

· margin-left的初始值为0

*可以使用initial关键字显示重置为初始值

background-color：initial 等价于 background-color：transparent

CSS求值过程解析

屏幕截图 2023-07-29 101320.png 屏幕截图 2023-07-29 101951.png 屏幕截图 2023-07-29 102114.png 首先，浏览器拿到css时会将其解析为DOM树，还有一些样式规则

每一个元素在寻找属性时都需要经过以上流程

important样式优先级高于非important

CSS布局方式及相关技术

布局（Layout）是什么捏？

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

· 依据元素、容器、兄弟节点和内容等信息来计算

屏幕截图 2023-07-29 102658.png

布局相关技术

· 常规流

· 浮动

· 绝对定位

屏幕截图 2023-07-29 102830.png

盒模型

所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。

CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。

盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。

屏幕截图 2023-07-29 102928.png

margin（外边距）：清除边框外的区域，外边是透明的
border（边框）：围绕在内边距和内容外的边框
parrdding（内边距）：清楚内容周围的区域，内边距是透明的
content（内容）：盒子的内容，显示文本和图像

width

· 指定content box宽度

· 取值为长度、百分数、auto

· auto由浏览器根据其他属性确定

· 百分数相对于容器的content box宽度

总元素的宽度=宽度+左填充+右填充+左边框+右边框+左边距+右边距

height

· 指定content box高度

· 取值为长度、百分数、auto

· auto取值由内容计算而来

· 百分数相对于容器的content box高度

· 容器有指定高度时，百分数才生效

总元素的高度=高度+顶部填充+底部填充+上边框+下边框+上边距+下边距

屏幕截图 2023-07-29 103558.png

padding

· 指定元素四个方向的内边距

· 百分数相对于容器宽度

屏幕截图 2023-07-29 103755.png

border

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

三种属性：

border-width
border-style
border-color

四个方向

border-top
boder-right
border-bottom
border-left

当四条边框颜色不同时

屏幕截图 2023-07-29 104324.png

margin

· 指定元素四个方向的外边距

· 取值可以是长度、百分数、auto

· 百分数相对于容器宽度

使用margin：auto水平居中

<div></div>
<style>
  div{
    width:200px;
    height:200px;
    background:coral;
    margin-left:auto;
    margin-right:auto;
  }
</style>

box-sizing: border-box

屏幕截图 2023-07-29 105224.png

overflow

当制定了宽度和高度时，有一部分内容可能会超越宽高，通过overflow来控制溢出的部分

visible：超出的部分也显示出来

屏幕截图 2023-07-29 105628.png

hidden：截掉超出的部分

屏幕截图 2023-07-29 105726.png

scroll：使边框里的内容呈现滚动形式

CSS盒模型

块级VS行级

块级	行级
Block Level Box	lnline 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	排版时完全被忽略

常规流Normal Flow

· 根元素、浮动和绝对定位的元素会脱离常规流

· 其他元素都在常规流之内（in-flow）

· 常规流中的盒子，在某种排版上下文中参与布局

屏幕截图 2023-07-29 174755.png

行级排版上下文

· lnline Formatting Context(IFC)

· 只包含行级盒子的容器会创建一个IFC

· IFC内的排版规则

盒子在一行内水平摆放
一行放不下时，换行显示
text-align决定一行内盒子的水平对齐
vertical-align决定一个盒子在行内的垂直对齐
避开浮动（floa）元素

块级排版上下文

· Block Formatting Context(BFC)

· 某些容器会创建一个BFFC

根元素
浮动、绝对定位、inline-block
Flex子项和Grid子项
overflow值不是visible的块盒
display：flow-root;

BFC内的排版规则

· 盒子从上到下摆放

· 垂直margin合并

· BFC内盒子的margin不会与外面的合并

· BFC不会和浮动元素重叠

Flex Box

· 一种新的排版上下文

· 它可以控制子级盒子的：

摆放流向
摆放顺序
盒子宽度和高度
水平垂直方向的对齐
是否允许折行

主轴和侧轴

屏幕截图 2023-07-31 101725.png

主轴：justify-content

flex-start

屏幕截图 2023-07-31 102019.png

flex-end

屏幕截图 2023-07-31 102032.png

center

屏幕截图 2023-07-31 102045.png

space-between

屏幕截图 2023-07-31 102103.png

space-around

屏幕截图 2023-07-31 102119.png

space-evenly

屏幕截图 2023-07-31 102133.png

Flexibility

· 可以设置子项的弹性：当容器有剩余空间时，会伸展；容器空间不够时，会收缩。

· flex-grow有剩余空间时的伸展能力

· flex-shrink容器空间不足时收缩的能力

· flex-basis没有伸展或收缩时的基础长度

flex-grow

屏幕截图 2023-07-31 103044.png

当A、B、C既不伸展也不压缩的时候，每块占比100，当总空间减去3*100时还剩的有的空间再以2：1分配给A和B

flex的属性

flex-direction：设置主轴方向

· row默认值从左到右

· row-reverse从左到右

· column从上到下

· column-reverse从上到下
justify-content：设置主轴上的子元素排列方式

注意：使用这个属性之前一定要确定好主轴是哪个

· flex-start默认值，从头部开始（如果主轴是x轴，则从左到右）

· flex-end从尾部开始排列

· center在主轴居中对齐

· space-around平分剩余空间

· space-between先两边贴边，再平分剩余空间
flex-wrap：设置子元素是否换行

默认情况下，项目都排在一条线（“轴线”）上。flex-wrap属性定义，flex布局中默认是不换行的*

· nowrap默认值不换行

· wrap换行
align-content：设置侧轴上的所有子元素排列方式
align-items：设置侧轴上子元素自己的排列方式

flex-start 默认值，从上到下

flex-end 从下到上

center 挤在一起居中（垂直居中）

stretch 拉伸
flex-flow：flex-direction 和 flex-wrap 属性的复合属性

属性值说明

flex：子项目占的份数

align-self：控制子项在自己侧轴的排列方式

order：属性定义子项的排列顺序（前后顺序）

Grid布局

屏幕截图 2023-07-31 104939.png

display：grid

· display：grid使元素生成一个块级的Grid容器

· 使用grid-template相关属性将容器器划分为网格

· 设置每一个子项占哪些行/列

划分网格

将容器display：grid之后

通过grid-template-columns和grid-template-rows将其划分为网格

grid-template-columns: 100px 100px 200px
grid-template-rows: 100px 100px

结果展示：

屏幕截图 2023-07-31 165253.png

grid-template-columns: 30% 30% auto;
grid-template-rows: 100px auto

结果展示：

屏幕截图 2023-07-31 165523.png

grid-template-columns: 100px 1fr 1fr;
grid-template-rows: 100px 1fr

结果展示：

屏幕截图 2023-07-31 165712.png

grid line网格线

构成网格结构的分界线。它们既可以是垂直的（“列网格线(column grid lines)”），也可以是水平的（“行网格线(row grid lines)”），并位于行或列的任一侧。例如，这里的黄线就是一条列网格线。

屏幕截图 2023-07-31 165814.png

采用网格布局的区域，称为"容器"（container）。容器内部采用网格定位的子元素，称为"项目"（item）。

grid cell网格单元格

两个相邻的行和两个相邻的列网格线之间的空间。这是 Grid(网格) 系统的一个“单元”。下图是第1至第2条行网格线和第2至第3条列网格线交汇构成的网格单元格(Grid Cell)。

屏幕截图 2023-07-31 171635.png

grid area网格区域

屏幕截图 2023-07-31 171228.png 4条网格线包围的总空间。一个网格区域(Grid Area) 可以由任意数量的网格单元格(Grid Cell) 组成。上图是行网格线1和3，以及列网格线1和3 之间的网格区域。

columns（列）；rows（行）

/*指定列数：
写入了 3 个值，这样我们就会得到 3 列。*/
grid-template-columns:100px 100px 100px;

/*指定行数：
写入了 3 个值，这样我们就会得到 3行 。*/
grid-template-rows:50px 50px;

/*这些值决定了我们希望我们的列有多宽（ 100px ），
以及我们希望行数是多高（ 50px ）。*/

float浮动

float浮动会使元素向左或向右移动，其周围的元素也会重新排列

float往往是用于图像，但是它在布局时一样非常有用

元素怎样浮动呢

元素的水平方向浮动意味着元素只能左右移动而不能上下移动。

一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。

浮动元素之后的元素将围绕它。

浮动元素之前的元素将不会受到影响。

position（定位）

position 属性指定了元素的定位类型。

position 属性的五个值：

属性值	说明
static	默认值，非定位元素
relative	相对自身原本位置偏移，不脱离文档流
absolute	绝对定位，相对非static祖先元素定位
fixed	相对于视口绝对定位

元素可以使用的顶部，底部，左侧和右侧属性定位。然而，这些属性无法工作，除非是先设定position属性。他们也有不同的工作方式，这取决于定位方法。

position：relative

在常规流里面
相对于自己本应该在的位置进行偏移
使用top、left、bottom、right设置偏移长度
流内其他元素当它没有偏移一样布局

position：absolute

脱离常规流
相对于最近的非static祖先定位
不会对流内元素布局造成影响

深入CSS学习笔记|青训营

CSS语法

什么是CSS

CSS语法

CSS实例

css规则有两个主要的部分构成：选择器，以及一条或多条声明：

css声明总是以分号；结束，声明总以大括号{}括起来

css注释

CSS选择器的特异度

怎么看选择器的特异度

CSS继承

显示继承

初始值

CSS求值过程解析

CSS布局方式及相关技术

布局（Layout）是什么捏？

布局相关技术

盒模型

width

height

padding

border

三种属性：

四个方向

当四条边框颜色不同时

margin

使用margin：auto水平居中

box-sizing: border-box

overflow

visible：超出的部分也显示出来

hidden：截掉超出的部分

scroll：使边框里的内容呈现滚动形式

CSS盒模型

块级VS行级

display属性

常规流Normal Flow

行级排版上下文

块级排版上下文

BFC内的排版规则

Flex Box

主轴和侧轴

主轴：justify-content

Flexibility

flex-grow

flex的属性

Grid布局

display：grid

划分网格

grid line网格线

grid cell网格单元格

grid area网格区域

float浮动

元素怎样浮动呢

position（定位）

position：relative

position：absolute