最近学到JS了，有点卡壳，回过来整理下CSS，换换脑子。仅整理下本人学到过的知识点，如果觉得有遗漏或者有不对的地方，还请大佬指正。

一、CSS语法和选择器

1.CSS语法

CSS的书写位置分为内嵌式和外链式

内嵌式：CSS语句写在<script></script>标签中，位置放在<head>标签里。

外链式：可以将 CSS 单独存为.css 文件，然后使用<link>标签引入它 <link rel="stylesheet" href="css/css.css" />

CSS语法结构主要是由选择器和属性名，属性值构成。

选择器{
	属性名1: 属性值1; 
	属性名2: 属性值2;
	...;
}

陈冠希 {
	姓名: 陈冠希;
	身高: 176;
	爱好: 拍照;
}

2.CSS选择器

CSS选择器就是让CSS表达式找到准确的元素添加样式。 CSS选择器包含标签选择器，id选择器，class选择器，原子类选择器，通配符选择器，复合选择器，伪类，元素关系选择器，序号选择器。

标签选择器也称元素选择器、类型选择器，它直接使用元素的标签名当做选择器，将选择页面上所有该种标签。标签选择器覆盖面大，通常用于标签的初始化。

CSS 中id选择器可以使用井号#前缀，选择指定 id 的标签

class选择器使用点.前缀选择指定 class 的标签

id 和 class 的区别

id 是唯一的, 相当于身份证号；

class 不是惟一的, 多个标签可以有相同类名, class 相当于分组；

一个标签只能有一个 id, 一个 id 的名字只能在页面中出现一次；

多个标签可以使用同一个 class 名字；

同一个标签可以同时属于多个类，类名用空格隔开；

原子类：在做网页项目前，可以将所有的常用字号、文字颜色、行高、外边距、内边距等都设置为单独的类

通配符选择器

* {
    属性: 属性值;
}

找到页面上所有的元素

复合选择器分为后代选择器，交集选择器，并集选择器。

后代选择器：使用空格表示后代（即使隔开好几代，后代选择器也会将里面的p标签全部选中）。

交集选择器：选择有.spec 类的 h3 标签, 此时应该使用交集选择器

并集选择器：并集选择器也叫作分组选择器, 逗号表示分组

复合选择器也可搭配使用，看具体场景设置。

伪类是添加到选择器的描述性词语, 指定要选择的元素的特殊状态, 超级链接拥有 4 个特殊状态

伪类 | 意义 | | ----------- | ------------------------ | | a:link | 没有被访问的超级链接 | | a:visited | 已经被访问过的超级链接 | | a:hover | 正被鼠标悬停的超级链接 | | a:active | 正被激活的超级链接（按下按键但是还没有松开按键）

元素关系选择器包含子选择器，相邻兄弟选择器，通用兄弟选择器。

名称	举例	意义
子选择器	`div>p`	div 的子标签 p
相邻兄弟选择器	`img+p`	图片后面紧跟着的段落将被选中
通用兄弟选择器	`p~span`	p 元素之后的所有同层级 span 元素

序号选择器

（1）:first-child 表示"选择第一个子元素"

（2）:last-child 表示"选择最后一个子元素"

（3）:first-of-type 当前同一类标签中的第一个

（4）:last-of-type 当前同一类标签中的最后一个

（5）:only-child, 选择的元素是其父级的唯一子元素

（6）:only-of-type, 选择的元素是同类标签中的唯一一个

（7）:nth-child(), 可以选择任意序号的子元素

（8）:nth-of-type()将选择同种标签指定序号的子元素

（9）:nth-last-child() 是倒数选择, 表示子集中的最后一个

（10）:nth-last-of-type() 也是倒数选择, 表示该类型的最后一个

CSS3新增伪类

伪类	含义
`:empty`	选择空标签
`:focus`	选择当前获得焦点的表单元素
`:enabled`	选择当前有效的表单元素
`:disabled`	选择当前无效的表单元素
`:checked`	选择当前已经勾选的单选按钮或者复选框
`:root`	选择根元素, 即`<html>`标签

伪元素

::before 创建一个伪元素, 其将成为匹配选中的元素的第一个子元素, 必须设置 content 属性表示其中的内容

::after 创建一个伪元素, 其将成为匹配选中的元素的最后一个子元素, 必须设置 content 属性表示其中的内容

::selection CSS 伪元素应用于文档中被用户高亮的部分（使用鼠标圈选的部分）

::first-letter 会选中某元素中（必须是块级元素）第一行的第一个字母

::first-line 会选中某元素中（必须是块级元素）第一行全部文字

二、CSS三大特性

1.继承性

继承性是指有些属性, 如果已经在父元素中设置, 子元素中无需重新设置，例如：

color font-style font-weight font-size font-family

text-indent text-align

line-height

继承性的使用可以节省代码，不过继承性的优先级没有浏览器的默认样式高。

2.层叠性

层叠性：多个选择器可以同时作用于同一个标签, 效果叠加。给同一个标签设置不同的样式, 样式会叠加;

给同一个标签设置相同的样式, 写在最后的会生效(优先级一样);

当样式发生冲突的时候, 看优先级, 优先级高的显示, 如果优先级一样, 参见上一条。

3.优先级

通过权重来判断优先级

不同的选择器拥有不同的权重

继承 < 通配符 < 标签 < 类 < id < 行内 < !important 权重的比较参照下图

三、CSS常用属性

1.color

color用于设置文本内容的颜色，常用的表示法有以下几种：英文单词表示法，比如color：green;

rgb表示法，color: rgb(255, 0, 0);

rgba()表示法，最后一个参数表示透明度，介于 0 到 1 之间，0 表示纯透明，1 表示纯实心

color: rgba(255, 0, 0, 0.65);

十六进制表示法：所有设计软件中都通用的颜色表示法。

color: #ff0000; /* 相当于 rgb(255,0,0) */

2.font-

font-size 属性用来设置字号，单位通常为 px

font-weight 是字重的意思,表现出来就是同一款字体, 有的粗, 有的细

font-style 属性设置字体的倾斜

font-family 属性用于设置字体

3.text-

text-indent 属性定义首行文本内容之前的缩进量,取值: 数字+单位, 单位可以是 px, 也可以是 em,1em = 当前标签的 font-size 大小, 推荐使用 em。

text-decoration 属性用于设置文本的修饰线外观的（下划线、删除线）

text-align 属性, 确定文字的水平对齐方式，也可使图片水平居中。

4.line-

line-height 属性用于定义行高,单位可以是以px为单位的数值，不带单位表示为字号的倍数，同样也可以用百分数来表示字号的倍数。

5.背景属性

背景色：background-color:颜色值;

背景色：background-image: url("图片的地址");

背景大小：background-size: 100px 200px;

背景位置：background-position: x y;

四、盒模型

所有 HTML 标签都可以看成矩形盒子，由width、height、padding、border构成，称为“盒模型”

1. width、height 不是盒子总宽高

盒子的总宽度 = width + 左右padding+ 左右border

盒子的总高度 = height + 上下padding + 上下border

2.内边距

padding 是盒子的内边距，即盒子边框内壁到文字的距离.

四个方向的 padding，可以分别用小属性进行设置,四个方向属性连写时，方向为顺时针方向，分别是上右下左。

小属性	含义
padding-top	上 padding
padding-right	右 padding
padding-bottom	下 padding
padding-left	左 padding

3.外边距

margin 是盒子的外边距，即盒子和其他盒子之间的距离小属性 | 含义 | | ------------- | -------------- | | margin-top | 上 margin | | margin-right | 右 margin | | margin-bottom | 下 margin | | margin-left | 左 margin

五、布局（PC端）

1.普通流、标准流

标准流：

又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素

常见标准流排版规则：

块级元素：从上往下，垂直布局，独占一行

行内元素或行内块元素(统称内联元素)：从左往右，水平布局，空间不够自动折行

标准流的布局方式常结合display属性使用。 display 设置元素的展现方式, block, inline, inline-block

block 可以设置宽高, 独占一行 div

inline 一行可以有很多个, 但是不能设置宽高 span a

inline-block 一行可以有很多个, 同时可以设置宽高 img input

2.浮动

css选择器 {
	float: 属性值;
}

3.定位

定位：将盒子定在某一个位置

定位 = 定位模式(如何定位) + 边偏移 (定位在哪里)

定位模式用于指定一个元素在文档中的定位方式。

边偏移则决定了该元素的最终位置值 | 语义 | | ---------- | ---- | | static | 静态定位 | | relative ☆ | 相对定位 | | absolute ☆ | 绝对定位 | | fixed ☆ | 固定定位 | | sticky | 粘性定位

边偏移属性	示例	描述
`top`	`top: 80px`	顶端偏移量，定义元素相对于其父元素上边线的距离。
`bottom`	`bottom: 80px`	底部偏移量，定义元素相对于其父元素下边线的距离。
`left`	`left: 80px`	左侧偏移量，定义元素相对于其父元素左边线的距离。
`right`	`right: 80px`	右侧偏移量，定义元素相对于其父元素右边线的距离

相对定位是元素在移动位置的时候，是相对于它原来在标准流中的位置来说的

css选择器 {
    position: relative;
}

相对定位的特点：

它是相对于自己原来的位置来移动的（移动位置的时候参照点是自己原来的位置）

原来在标准流的位置继续占有，后面的盒子仍然以标准流的方式对待它。

因此，相对定位并没有脱标。

它最典型的应用是给绝对定位当爹...

绝对定位 absolute

语法结构如下

css选择器 {
    position: absolute;
}

绝对定位是元素在移动位置的时候，是相对于它祖先元素来说的

位置取决于最近的, 有定位的祖先元素

如果没有祖先元素或者祖先元素没有定位，则以body标签定位

子级是绝对定位的话，父级要用相对定位

因为父级需要占有位置，因此是相对定位，子盒子不需要占有位置，则是绝对定位

固定定位

固定定位是元素固定于浏览器可视区的位置。

主要使用场景： 可以在浏览器页面滚动时元素的位置不会改变

选择器 {
	position: fixed;
}

定位叠放次序 z-index

在使用定位布局时，可能会出现盒子重叠的情况。

可以使用 z-index 来控制盒子的前后次序 (z 轴)

数值可以是正整数、负整数或 0, 默认是 auto，数值越大，盒子越靠上

选择器 {
	z-index: 1;
}

六、其他知识点

1.渐变

盒子的 background-image 属性可以用 radial-gradient()形式创建径向渐变背景

radial => 径向

gradient => 渐变

background-image: radial-gradient(50% 50%, red, blue);

2.变形

transform => 变形

rotate => 旋转

选择器 {
    transform: rotate(旋转角度);
}

如果角度是正的, 顺时针旋转

如果角度是负的, 逆时针旋转

围绕中心点旋转

3.过渡

transition => 过渡

可以为一个元素在不同样式之间变化, 自动添加补间动画

选择器 {
	/* 要过渡的属性 动画时长 变化的速度曲线 延迟时间 */
	transition: width 1s linear 0s;
}

4.动画的定义和调用

keyframes => 关键帧

动画比过渡的优势, 不需要 hover 之类的触发, 可以自动执行

动画定义: 可以使用@keyframes来定义动画, keyframes 表示关键帧

@keyframes 动画名称 {
    from {
        transform: rotate(0);
    }
    to {
        transform: rotate(360deg);
    }
}

动画调用: 可以使用animation属性调用动画

/* 如果想一直执行, 可以把执行次数设置成 infinite */
animation: 动画名称 动画时长 速度曲线 延迟时间 执行次数;

必会知识点

一、外边距塌陷解决方案

相嵌套的块级元素，设置子级元素的margin属性时，父子元素紧贴的 margin-top 会合并, 作用在父元素上，导致外边距塌陷。

解决方法

1.给父级边框 transparent(透明)

.father {
    ...
    border: 1px solid transparent;
}

2: 不用 margin-top, 改用父级的内边距, 删除儿子的 margin-top, 必要时需要配合 box-sizing: border-box;

.father{
    ...
    padding-top: 50px;
}

.son{
    ...
    /* margin-top: 50px; */
}

儿子的 margin-top 保留, 给父级一个内边距, 1px

.father {
    ...
    padding: 1px;
}

给父元素设置 overflow:hidden, (触发 bfc)

.father {
    ...
    overflow: hidden;
}

转换成行内块元素

.son{
    ...
    display: inline-block;
}

有浮动, 固定定位, 绝对定位的盒子, 不存在塌陷问题, 所以也可以通过设置浮动, 定位来解决(触发 bfc)

.father {
   	...
    position: absolute;
}

二、清除浮动

三、BFC

BFC指的是块级格式化上下文

可以理解成是元素的一种属性, 可以触发元素的 bfc 属性

简单的说拥有 BFC 属性的元素是一个完全独立的空间, 这个空间里子元素的渲染不会影响到外面的布局

触发 bfc 的条件, 两是两不是

display 是 flex/inline-block/table-cell/flow-root 等
position 是 absolute或者fixed
overflow 不是 visible
float 不是 none

BFC的应用 1.触发父元素的bfc，可以清除浮动。

.bfc {
	overflow: hidden;
}

2.解决垂直方向外边距合并的问题。包一层 div, 给 div 加 overflow:hidden

3.解决父级外边距塌陷给父元素设置 overflow:hidden, (触发 bfc) 4.两栏自适应布局, 阻止元素被浮动元素覆盖

两栏布局, 左侧定宽, 右侧自适应

通常是左侧浮动, 右侧因为是 block 元素, 默认父元素宽度 100%, 所以会自适应

但是如果文字变多, 会出现环绕效果, 这本来也是浮动的初衷, 可以使用触发 bfc 来解决

四、居中效果设置

1.文本行内块元素居中

text-align:center, 写在父元素上

只能对图片，按钮，文字等行内元素(display 为 inline 或 inline-block 等)进行水平居中

单行文本, 垂直居中

把文字的 line-height 设为文字父容器的高度，适用于只有一行文字的情况。

2.块级元素居中

margin 可以实现块级元素的水平居中

条件是必须有宽度, 左右margin设置成auto

此方法只能进行水平的居中，且对浮动元素, 绝对定位元素, 固定定位元素无效。

也可把块级元素修改为 inline-block 设置居中

把块级元素变成行内块元素

父级添加text-align:center

3.绝对定位的盒子居中

加了绝对定位的盒子不能通过 margin:0 auto 水平居中，但是可以通过以下计算方法实现水平和垂直居中

left: 50%;：让盒子的左侧移动到父级元素的水平中心位置。

margin-left: 自身宽度的一半;：让盒子向左移动自身宽度的一半。

也可以配合margin属性和transform属性设置居中。

通过display:table-cell 来把它模拟成一个表格单元格，这样就可以利用表格那很方便的居中特性了

前端开发|小白日记（CSS篇）