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

CSS初解

CSS （Cascading Style Sheets，层叠样式表）是用来控制网页在浏览器中的显示外观的声明式语言。

CSS写在style标签中，style标签一般写在head标签里，title标签下面
选择器：{属性名：属性值; }
选择器：查找标签

<style>
    p{
        color:red;
        font-size:30px;
    }
</style>

构建CSS

CSS的引用方式

外部样式表
内部样式表：内部样式表是指不使用外部 CSS 文件，而是将 CSS 放在 HTML 文件里的标签之中。
内联样式:写在标签的style属性中，只能影响一个元素

选择器

标签选择器：标签名{css属性名：属性值；}
类选择器： .类名{css属性名：属性值；}
id选择器： #id属性值{css属性名：属性值；}
通配符选择器： *{css属性名：属性值；}

@规则

一个at-rule是一个CSS语句，以@开头，后跟一个标识符，包括到下一个分号的内容或是下一个CSS块。

@charset, 定义样式表使用的字符集。

@import, 告诉 CSS 引擎引入一个外部样式表。

@namespace, 告诉 CSS 引擎必须考虑 XML 命名空间。

嵌套 @规则，是嵌套语句的子集，不仅可以作为样式表里的一个语句，也可以用在条件规则组里：

@media, 如果满足媒介查询的条件则条件规则组里的规则生效。

@page, 描述打印文档时布局的变化。

@font-face, 描述将下载的外部的字体。 Experimental

@keyframes, 描述 CSS 动画的中间步骤 . Experimental

@supports, 如果满足给定条件则条件规则组里的规则生效。 Experimental

@document, 如果文档样式表满足给定条件则条件规则组里的规则生效。 (推延至 CSS Level 4 规范)

速记属性

允许在一行中设置多个属性值称为速记属性，如 font, background, padding, border, margin等。

CSS进阶

选择器进阶

后代选择器：空格

作用：根据HTML标签的嵌套关系，选择父元素后代中满足条件的元素
选择器语法：选择器1 选择器2{ CSS }
注意点：
1. 后代包括：儿子、孙子、重孙子
2. 后代选择器中，选择器与选择器之间通过空格隔开

子代选择器：>

作用：根据HTML标签的嵌套关系，选择父元素子代中满足条件的元素
选择器语法：选择器1>选择器2{ CSS }

并集选择器：，

作用：同时选择多组标签，设置相同的样式
选择器语法：选择器1，选择器2{ CSS }
结果：找到选择器1和选择器2选中的标签，设置样式
注意点：
1. 并集选择器中每组选择器通过，隔开
2. 并集选择器中每组选择器可以是基础选择器或者复合选择器
3. 并集选择器中每组选择器通常一行写一个，提高代码的可读性

交集选择器：紧挨着

作用：选中页面中同时满足多个选择器的标签
选择器语法:选择器1选择器2{ CSS }
结果：找到页面中既能被选择器1选中，又能被选择器2选中的标签，设置样式
注意点：
1. 交集选择器中的选择器之间是紧挨着的，没有东西分隔
2. 交集选择器中如果有标签选择器，标签选择器必须写在最前面

hover伪类选择器

作用：选中鼠标悬停在元素上的状态，设置样式
选择器语法：选择器：hover{ CSS }
注意点：
1. 伪类选择器选中的元素的某种状态

作用：通过简写语法，快速生成代码
语法：
- 类似于刚刚学习的选择器写法
记忆示例效果
标签名 div
类选择器 .red
id选择器 #one
交集选择器 p.red#one
子代选择器
ul>li
内部文本
ul>li{li的内容}
我是li的内容
创建多个
ul>li*3

记忆	示例	效果
标签名	div
类选择器	.red
id选择器	#one
交集选择器	p.red#one
子代选择器	ul>li
内部文本	ul>li{li的内容}	我是li的内容
创建多个	ul>li*3

背景相关属性

背景颜色

属性名：background-color（bgc）
属性值：

颜色取值：关键字、rgb表示法、rgba表示法、十六进制……
注意点：
- 背景颜色默认值是透明：rgba（0,0,0,0）、transparent
- 背景颜色不会影响盒子大小，并且还能看清盒子的大小和位置

背景图片

属性名：background-image（bgi）
属性值：background-image：url（'图片的路径'）；
注意点：
- 背景图片中url中可以省略引号
- 背景图片默认是在水平和垂直方向平铺的
- 背景图片仅仅是指给盒子起到装饰效果，类似于背景颜色

背景平铺

属性名：background-repeat（bgr）
属性值:

取值效果
repeat （默认值）水平和垂直方向都平铺
no-repeat 不平铺
repeat-x 沿着水平方向（x轴）平铺
repeat-y 沿着垂直方向（y轴）平铺

取值	效果
repeat	（默认值）水平和垂直方向都平铺
no-repeat	不平铺
repeat-x	沿着水平方向（x轴）平铺
repeat-y	沿着垂直方向（y轴）平铺

背景位置

属性名：background-position（bdp）
属性值：background-position：水平方向位置垂直方向位置；
注意点：方位名词取值和坐标取值可以混用，第一个取值表示水平，第二个表示垂直

背景相关属性连写

属性名：background（bg）
书写顺序：（推荐）background：color image repeat position
注意点：

如果需要设置单独的样式和连写
1. 要么把单独的样式写在连写的下面
2. 要么把单独的样式写在连写的里面

元素显示模式

块级元素

显示特点
1. 独占一行
2. 宽度默认是父元素的宽度，高度默认由内容撑开
3. 可以设置宽高
代表标签 div、p、h系列、ul、di、dt、dd、form、header、nav、footer……

行内元素

显示特点
1. 一行可以显示多个
2. 宽度和高度默认由内容撑开
3. 不可以设置宽高
代表标签 a、span、b、u、i、s、strong、ins、em、del……

行内块元素

显示特点
1. 一行可以显示多个
2. 可以设置宽高
代表标签 input、textarea、button、select……
特殊情况：img标签有行内块元素特点，但是Chrome调试工具中显示结果是inline

显示模式转换

语法

属性效果使用频率
display：block 转换成块级元素较多
display：inline-block 转换成行内块较多
display：inline 转换成行内元素极少

属性	效果	使用频率
display：block	转换成块级元素	较多
display：inline-block	转换成行内块	较多
display：inline	转换成行内元素	极少

CSS特性

继承性

特性：子元素有默认继承父元素样式的特点
可以继承的常见属性（文字控制属性都可以继承）
1. color
2. font-style、font-weight、font-size、font-family
3. text-indent、text-align
4. line-height
5. ……
注意点：可以通过调试工具判断样式是否可以继承
继承失效的特殊情况

如果元素有浏览器默认样式，此时继承性仍然存在，但是
1. a标签的color会继承失效
2. h系列标签的font-size会继承失效

层叠性

特性：
1. 给同一个标签设置不同的样式——样式叠加
2. 给同一个标签设置相同的样式——样式覆盖
注意点：当样式冲突时，只有当选择器优先级相同时，才能通过层叠性判断后果

CSS盒子模型

盒子模型——布局
盒子概念：
1. 每一个标签可以可以看做一个“盒子”
2. 浏览器在渲染网页时，会将网页中的元素看做一个个矩形区域，我们也称之为盒子
盒子模型
- CSS中规定每个盒子由：内容区域（content）、内边距区域（padding）、边框区域（border）、外边距区域（margin）

内容的宽度和高度

作用：利用width和height属性默认设置盒子内容区域的大小
属性：width/height
常见取值：数字+px

边框（border）-连写形式

属性名：border-方位名词（粗细、线条样式、颜色不分先后顺序）
属性值：单个值的连写，取值之间可以空格隔开
快捷键：bd+tab
solid：实线 dashed：虚线 dotted：点线

内边距（padding）

常见取值：数字+px

padding属性可以当做复合属性使用

padding:10px 20px 30px 40px
/* padding最多添加4个值：上 右 下 左 */
padding:10px 20px
/* 上下 左右 */
padding:10px 20px 30px
/* 上 左右 下 */

padding多值写法：从上开始顺时针赋值，不够看对面

内减模式

手动内减
自动内减

操作：给盒子设置属性box-sizing：border-box即可

外边距（margin）

用法同padding
常见取值：数字+px

margin属性可以当做复合属性使用

margin:10px 20px 30px 40px
/* margin最多添加4个值：上 右 下 左 */
margin:10px 20px
/* 上下 左右 */
margin:10px 20px 30px
/* 上 左右 下 */

清除默认样式

方法1：

*{
    margin:0;
    padding:0;
}

方法2：

选择器1，选择器2{

margin:0;

padding:0; }

版心居中

版心：网页中的有效内容

margin:0 auto;

去掉列表符号

list-style: none;

外边距折叠现象

合并现象
- 场景：垂直布局的块级元素，上级的margin会合并
- 结果：最终两者距离为margin的最大值
- 解决方法：只给其中一个设置margin
塌陷现象
- 场景：互相嵌套的块级元素，子元素的margin-top会作用在父元素上
- 结果：导致父元素一起往下移动
- 解决方法：
  1. 给父元素设置border-top或者padding-top (分隔父子元素的margin-top)
  2. 给父元素设置overflow: hidden
  3. 转换成行内块元素
  4. 设置浮动

行内元素垂直内外边距

如果想要通过margin padding改变行内标签的垂直位置，无法生效
行内标签的margin-top和bottom不生效
解决方法：设置行高 line-height

CSS浮动

结构伪类选择器

根据元素在HTML中的结构关系查找元素
优势：减少对于HTML的类的依赖，有利于保持代码整洁
常用于查找某父级选择器中的子元素

选择器	说明
E:first-child{}	匹配父元素中第一个子元素，并且是E元素
E:last-child{}	匹配父元素中最后一个子元素，并且是E元素
E:nth-child(n){}	匹配父元素中第n个子元素，并且是E元素
E:nth-last-child(n){}	匹配父元素中倒数第n个子元素，并且是E元素

n的注意点
1. n为0、1、2、……
2. 通过n可以组成常见公式

功能	公式
偶数	2n、even
奇数	2n+1、2n-1、odd
找到前5个	-n+5
找到从第5个往后	n+5

伪元素

伪元素：一般页面中的非主体内容可以使用伪元素

区别：
1. 元素：HTML设置的标签
2. 伪元素:由CSS模拟出的标签效果
种类：

伪元素	作用
::before	在父元素内容的最前添加一个伪元素
::after	在父元素内容的最后添加一个伪元素

注意点：
1. 必须设置content属性才能生效
2. 伪元素默认是行内元素

.father::before{
    content: '老鼠';
    }
.father::after{
    content: '大米';
    }

标准流

标准流：又称文档流，是浏览器在渲染显示网页内容时默认采用的一套排版规则，规定了应该以何种方式排列元素
常见标准流排版规则：
1. 块级元素：从上往下，垂直布局，独占一行
2. 行内元素/行内块元素：从左往右，水平布局，空间不够自动折行

浮动

作用：使块级标签完美排列在一行（行内块换行会产生空格）
特点：
1. 浮动元素会脱离标准流（脱标），在标准流中不占位置
2. 浮动元素比标准流高半个级别，可以覆盖标准流中的元素
3. 浮动找浮动，下一个浮动元素会在上一个浮动元素后面左右浮动
4. 浮动元素显示效果
  - 一行可以显示多个
  - 可以设置宽高浮动元素不可以通过text-align：center/margin: 0 auto实现居中效果
父级宽度不够子级会自动换行无法实现浮动

CSS书写顺序

浮动/display
盒子模型：margin padding border 宽高背景色
文字样式

清除浮动

清除浮动：清除浮动给别的标签带来的影响
- 影响：如果子元素浮动了，此时子元素不能撑开标准流的块级元素
原因：子元素浮动后脱标后不占位置
目的：需要父元素有高度，从而不影响其他网页元素的布局

方法：

直接设置父元素高度
额外标签法
- 操作：在父元素内容最后添加一个块级元素；给添加的块级元素设置clear：both
```
<div class="clear-fix">   </div>
```
- 缺点：会在页面中添加额外的标签，会让页面的HTML结构变得复杂

单伪元素清除法

用伪元素代替了额外标签，两方法原理相同

基本写法：

.clearfix::after{
    content:'';
    display:block;
    clear:both;
}
<div class="lei clearfix"></div>
/* 单伪元素必须加content */
/* 伪元素添加的标签是行内，要display为块 */

补充写法：

   .clearfix::after{
    content:'';
    display:block;
    clear:both;
/* 补充代码，在网页中看不到伪元素(为了兼容性) */
    height:0;
visibility:hidden;
   }
   <div class="lei clearfix"></div>

优点：项目中使用，直接给标签加类即可清除浮动

双伪元素清除法：

   /*.clearfix::before 作用：解决外边距塌陷问题 */
   /* 外边距塌陷：父子标签，都是块级，子级加margin会影响父级的位置 */
   .clearfix::before,
   .clearfix::after{
    content:'';
    display:table;
   }
   /* 真正清除浮动的标签 */ 
   .clearfix::after{
    clear:both;
   }

优点：项目中使用，直接给标签加类即可清除浮动
1. 给父元素设置overflow：hidden
- 操作：直接给父元素设置overflow：hidden
- 优点：方便

CSS初解 | 青训营笔记