前端之CSS

CSS

CSS基础知识

1. 什么是CSS

   CSS:cascading style sheet，层叠样式表。

   web前端三层：

    	结构层：HTML，从结构角度搭建网页
    	样式层：CSS，从美化角度书写样式
    	行为层：JS，从交互角度描述行为
   

2. 引入CSS

   引入CSS的目的：为了达到结构与样式的分离。
   引入CSS的好处：
     html结构代码书写量大大减少；
     可以提高更加丰富的效果；
     浏览器兼容性更好；
     …

3. CSS语法

   CSS包括：

    选择器：选择哪个标签进行样式设置
    样式规则：给标签添加什么属性。
    	样式规则包含样式名称和样式值。
    	多个样式之间使用分号;给开。
   

   CSS语法：

    选择器{
    	样式:样式值;
    }
   

   CSS作用：给文字添加各种样式，给盒子添加样式用于布局。

4. CSS的引入方式

   CSS和HTML一样，也是一门标记语言，通过浏览器就可以渲染。但CSS语言需要绑定HTML，来渲染结构和内容，不能单独运行。

   1. 行内式
      直接在HTML标签中，使用style属性定义css样式，用法：

       <tag style="样式:样式值;"/>
      

      行内式耦合性较高，没有达到结构与样式的分离，后期维护成本高。

   2. 嵌入式

      在head标签中，使用style标签写入css样式。

      html文档从上往下依次执行，如果嵌入的样式过多，会影响页面的加载速度。

   3. 外链式

      在head标签中，使用link标签引入外部独立的css文件。注：CSS文件不能使用数字开头命名

      结构和样式完全分离，通过link标签引入的css文件，与html文件是并行下载的。

   4. 导入式
      在style标签内，使用 @import url("css路径")引入外部独立的css文件

      这种方式，是在html加载完成后才加载css文件，会影响样式渲染的速度。

      在css文件中也可使用导入式导入另外的css文件。

   5. 优先级

      样式的几种引入方式的优先级：就近原则。

      行内式 ＞内嵌式 ＞链入式 / 导入式

CSS选择器

1. CSS选择器

   CSS选择器用于筛选符合条件的html元素。

   基本选择器：

    通配符（全局）选择器
    	用来对默认的样式进行标准化
    	如：*{样式:样式值;}
    标签选择器
    	匹配文档中所有该类型的元素
    	如：标签名{样式:样式值;}
    类选择器
    	匹配筛选指定类名的元素
    	如：.类名{样式:样式值;}
    ID选择器
    	匹配筛选id值为指定的元素
    	如：#id名{样式:样式值;}
    	id值要求式唯一的
   

2. 通配符选择器 *

   可以选择页面上所有的包括body在内的全部标签，使用它可以快速清除元素的默认样式。

3. 标签选择器

   以标签本身作为选择器选择元素，可以清空默认样式、设置默认样式等等。

4. id选择器

   通过一个html元素的id属性选择这个元素，添加样式。

   id选择器的书写：#开头，后面加id值。一个html页面中id值是唯一的。

   id的属性值命名规则：必须以字母开头（严格区分大小写），可以有数字、下划线和横线，建议驼峰式命名。

   层叠性体现：我们可以通过p标签选择器和id选择器同时选中一个标签元素，给它添加不同的样式，那么这些样式都会在标签上面显示。

5. 类选择器

   通过元素的class属性值，可以选中相同类名的所有标签元素。

   书写方式：.class类名，可以选中一个或多个。

   优势：可以给我们想要的元素添加统一的类型，设置统一的样式。
   特殊应用：使用"原子类"
   添加多个类名：class="cla1 cla2 cla3 ..."
   类名的命名规则：必须以字母开头（严格区分大小写），可以有数字、下划线和横线。
   

6. 高级选择器 — 后代选择器

   通过有嵌套关系的标签选择器或类选择器，确定一个大的范围，在大范围内再次进行选择，可以多次嵌套。

   书写规则：用空格隔开每一层的选择器。

7. 高级选择器 — 交集选择器

   概念：选择两个选择器都拥有的元素。

   书写方式：p.part
   

   可以连续交集，但标签名只能出现一次，并且在最前面。

8. 高级选择器 — 并集选择器

   选中多个元素，每个元素选择器之间用逗号隔开，表示“或”。

   书写方式：p,h3,div
   

代码规范

1. CSS代码规范

    1. 使用4个空格作为一个缩进层级
    2. 选择器与{之间必须包含空格
    3. 属性名与之后的:之间不允许包括空格，:与属性值之间必须包括空格
    4. 列表项属性值书写在单行时，","后必须跟一个空格
    5. 当一组样式包含多组选择器时，每组选择器声明必须独占一行
    6. >、+、~选择器的两边各保留一个空格
    7. 属性选择器中的值必须用双引号包围，文本内容必须用双引号包围
    8. 属性定义必须另起一行，属性定义后必须以分号结尾。
   

继承与层叠

1. 继承性

   在CSS中，有一些属性如果给父级元素设置了，那么它的后代元素都将继承这个属性。

   只有文字的属性能够继承，盒子的属性不能继承。

    文字属性：color、font-系列、line-系列、text-系列
    盒子属性：background-系列、width、height、border-系列、浮动、定位等
   

   CSS的继承性是一个很好的语言特性，可以简化css代码，有的属性可以设置给body，body内部的标签都会继承这个属性。

   CSS的继承性也体现了它的层叠性。

2. 选择器的权值

   权重：选择器的针对性越强，权重越高。

   权重排序：!important ＞行内样式 ＞id ＞类|伪类|属性 ＞标签 ＞通配符

   权值如下：

    继承					0.1
    标签选择器				1
    类选择器				10
    id选择器				100
    行内使用style属性		1000
    !important重要性		无穷大
   

3. !important

   特殊关键词：!important。

    直接写在css样式后面来提高权重（权重最大）
    如果选中了元素，它的权重最高。
    如果没有选中元素，它不会影响就近原则
    如果在多个选择器中使用，会受到选择器权重的影响。
   
    important值针对的是单个的css属性，而不是选择器
   

4. 层叠性

   层叠性：

    如果选中了这个元素，计算选择器的权重。
    如果没有选中元素，看继承性→就近原则→继承。
   

   如果是并集选择器的话，需要拆开来看

文字与排版

1. 颜色表示法

   十六进制：#000000、#FF0000

   rgb()表示法：rgb(0,0,0)、rgb(255,0,0)

   单词表示法：black、red

2. 文字样式

   color：文字颜色，颜色表示法。

   font-size：字体大小，单位px、em、rem。

   font-family：文字字体，多个字体之间用逗号隔开。

   font-style：字体风格的属性样式，属性值可以是italic、nomal

   font-weight：字体加粗效果，属性值可以是bolder、lighter、normal

   line-height：行高

   font：复合属性，统一设置字体相关的属性。
     设置顺序：-style -variant(可选) -weight -size / line-height -family

3. 文本样式

   text-decoration：文本修饰相关属性，属性值可以是underline、overline、line-through、none

   text-indent：首行缩进。如：text-indent:2em

   text-align：文本的水平对齐方式，属性值可以是left、right、center、justify

   letter-spacing：字符间距

   word-spacing：字与字之间的间距

   vertical-align：同一行内行内级元素的垂直对齐方式，属性值可以是middle、top、bottom，还可以是像素值。

   white-space：怎么处理元素内的空白，属性值可以是normal忽略空白、pre保留空白、nowrap文本不换行、pre-wrap保留空白正常换行、pre-line合并空白保留换行符

   text-overflow：当文本溢出包含元素时发生的事情。属性值可以是clip修剪文本、ellipsis显示省略符号

4. 列表样式

   list-style-type：设置列表项目符号类型

   list-style-image：url(图片路径)设置列表项目符号为图片

   list-style-position：inside|outside(默认)设置列表项目符号的位置

   list-style：以上几种属性的简写方式

盒模型

1. 盒模型

   盒模型的组成：

    content内容：height\width
    padding内边距
    border边框
    margin外边距
   

   盒模型分类：标准盒模型和IE盒模型

   CSS3中定义盒子模型类型的属性:

    box-sizing:content-box | border-box
    
    content-box内容盒
    	设置的width、height属性为内容的宽高
    	元素的宽高：width\height + border + padding + margin
    border-box边框盒
    	设置的width、height属性为边框以内相关盒子的宽高
    	元素的宽高：width\ height + margin
   

2. margin

   magin：同级元素之间的距离，或者距离父元素之间的距离。

   margin设置分类：

    	单值：10px，上下左右的外边距
    	二值：10px 20px，上下  左右的外边距
    	三值：10px 20px 30px，上  左右  下的外边距
    	四值：10px 20px 30px 40px，上  右  下  左的外边距
   

   按照方向划分：

    margin-top
    margin-right
    margin-bottom
    margin-left
   

3. margin塌陷

   同级元素分别设置了上下外边距，两个盒子之间的上下外边距会产生合并（塌陷），之间的距离以设置的margin-bottom或margin-top的值较大的那个为准。

   存在嵌套关系的元素，父盒子在不设置padding、border、overflow等属性的情况下，会出现外边距合并（塌陷）问题，嵌套关系的元素如果同时设置了上下外边距以最大的那个为准。

4. border

   border：用来设置盒子的边框

    border-top\border-right\border-bottom\border-left
    
    border-style：边框的线型，solid\dashed\dotted\double
    border-width：边框的厚度，px\thick\thin\medium
    border-color：边框的颜色
    简写：border:style width color;
   

5. 绘制各类性质

   基本样式：

   .box {
           width: 0px;
           height: 0px;
           margin: 100px;
           background: green;
           border-top: 100px solid red;
           border-right: 100px solid blue;
           border-bottom: 100px solid blueviolet;
           border-left: 100px solid brown;
       }
   

6. padding

   padding：内容距离边框之间的填充部分（内边框）

   用法与margin基本相同。

   margin和padding使用百分比表示时，不管是哪个方向都是参照父元素的宽度设置的。

文档流

1. 标准文档流

   标准文档流：从上到下制作。

   标准文档流的特征：

    1. 文本类的内容有空白折叠现象
    2. 文本类的内容：高矮不齐，底边对齐
    3. 文本类的内容如果超过了盒子宽度会自动换行
   

2. 标签分类

   标准文档流将所有的标签区分为两种：块级和行内级。

    块级：所有的容器级标签都是块级元素。p标签也是块级元素。
    行内级：除p标签之外的所有文本级标签都是行内元素。
   

   html中标签分类：容器级和文本级。
   标准文档流中标签分类：块级和行内级。

   块级元素的性质：

    可以设置宽高，具有换行符；
    容器默认独立占有一行；
    如果非块级元素，想要设置为块级元素display:block;
   

   行内元素的性质：

    不可以设置宽高，与其他在同一行内从左到右依次排列；
    容器默认包裹内容，宽度由内容撑开；
    行内元素设置的margin、padding上下不生效（不占位置，但背景色能呈现）、左右生效；
    如果非行内元素，想要设置为行内元素display:inline;
   

   行内块元素的性质：

    可以设置宽高，与其他行内级元素在同一行内从左到右依次排列；
    容器默认包裹内容；
    如果设置了宽高，那么容器范围为设置宽高的大小；
    如果非行内块元素，想要设置为行内块元素display:inline-block;
   

   块级元素和行内元素可以相互转换：

    CSS属性：display
    属性值：block(块级)、inline(行内)、inline-block(行内块)
   

3. 隐藏元素

   设置元素不可见的方式：

    display:none;设置元素消失不占位
    visibility:hidden;设置元素消失占位
    opacity:0;设置元素的不透明度为0，元素消失占位
   

4. 居中

   单行文本在盒子里垂直居中。

    line-height:calc(height);
   

   多行文本在盒子里垂直居中。盒子不给高度，使用上下padding。

    padding:90px 0;
   

   文本方向水平居中。

    text-align:center;
   

   盒子在父盒子内水平居中。

    margin:0 auto;
   

   盒子在父盒子内垂直居中。

    已知高度
    盒子margin: calc((parent_height-son_height)/2);
    
    未知高度：
    父盒子padding:100px;
   

浮动

1. 浮动

   浮动模型：不同于标准流，元素按照元素的类型进行排列；

   浮动的元素都脱离了标准文档流，不再占有原来的位置。

   浮动出现的初衷是为了解决文字环绕效果（内容让出浮动部分，但元素没有让出）；

   属性float可以设置元素的浮动效果，浮动效果有：

    left：左浮动
    right：右浮动
    none：默认的不浮动（标准文档流）
   

2. 浮动元素的特征：

    1. 浮动可以使元素从左到右紧密排列；
    2. 浮动的元素具有块级元素的特点（可以设置宽高、margin、padding，但没有换行符）；
    3. 浮动的元素宽度不再占满容器，而是变成包裹内容的宽度。
    4. 浮动后的元素不存在上下外边距合并问题
    5. 浮动后的元素脱离了文档流，不再占有原来的位置；
    6. 一个元素设置浮动后，为了不影响后面元素的渲染顺序，要将其他同级的元素都要设置浮动；
    7. 子元素设置浮动后，父元素如果没有设置高度，会呈现出塌陷效果；
    8. 元素设置浮动后，会影响后面元素的布局，所以设置浮动后一定要及时清除；
    9. 清除浮动的属性：clear:left \ right \ both
   

3. 浮动元素的塌陷问题，解决方案：

    1. 给父元素设置高度；
    2. 外墙法，在父元素的后面，设置父元素的一个同级空元素(div)，设置清除浮动；
    3. 内墙法，在父元素内部后面，添加一个空的子元素(div)，设置清除浮动；
    
    4. 父元素设置为浮动，后面元素清除浮动；会触发很多问题
    5. 父元素设置为行内块元素：display:inline-block;达不到想要的布局效果
    6. 父元素设置为overflow属性，属性值可以是hidden、auto、scroll；在内容溢出盒子时，可能会影响内容的显示效果
   

4. 伪元素

   伪元素用于创建一些不在文档树中的元素，并为其添加样式。

   常用伪元素：

    :before	在元素前面插入文本
    :after		在元素后面插入文本
    伪元素必须设置content样式，否则伪元素不会生效。
   

5. 伪元素清除浮动
   清除浮动的方法（续）：

    7. 通过伪元素来清除浮动，将伪元素插入到容器元素的最后面，代替内墙法中插入的元素，并未伪元素清除浮动；
    8. clearfix类：将清除浮动的功能封装在一个clearfix类中，这样为容器元素设置该类，就可以清除浮动
   

6. 伪类

   伪类用于当已有元素处于某个状态时，为其添加对应的样式，这个状态是根据用户行为而动态变化的。

7. 伪元素与伪类

   伪元素与伪类的特点：

    1. 伪元素和伪类都不会出现在源文档或文档树中；
    2. 伪类允许出现在选择器的任何位置，而一个伪元素只能跟在选择器的最后一个简单选择器后面；
    3. 伪元素名和伪类名都是大小写不敏感的；
    4. 有些伪类是互斥的，而其它的可以同时用在一个元素上。
    区别：
    5. 伪类的操作对象是文档树中已有的元素，而伪元素则创建了一个文档树外的元素；
    6. 伪类是类，伪元素是元素，因此它们的权值是不同的。
   

8. a标签的伪类

   a标签可以定义四个伪类：

    :link--初始状态，必须是第一次访问或者清除历史记录的访问；
    :visited--访问后的状态
    :hover--鼠标悬停，鼠标滑过效果
    :active--激活状态
    上面四个的使用顺序：l-v-h-a
   

9. 浮动元素依次贴边

   默认盒子会按照序列排序，如果盒子前面有兄弟元素，盒子将紧贴它的兄弟元素；如果没有，盒子将贴边父元素。 一行容不下时，盒子会另起一行。

10. 浮动与行内块元素

    浮动：

    使元素脱离文档流，按照指定的方向移动，遇到父级的边界或者相邻的浮动元素就会停下来。
    
    行内块：
    它具有行内元素和块元素两者的特点，可以实现对元素的有序排序。
    
    两者的区别：
    1. 两者主要区别在于当标签的高度不一致时，体现出的差异。如果高度不一致时，浮动元素会改变序列的顺序（贴边），行内块元素会按照顺序排列，行内块元素不会贴边，会另起一行。
    
    2. 浮动元素脱离文档流，不会抢占空间，而行内元素会抢占空间。

11. margin对元素宽度的影响

    如果块元素没有设置宽度，默认宽度就是父容器的宽度。

    在没有设置盒子宽度的情况下，修改margin会影响盒子的宽度：

    margin-left或margin-right设置正值，盒子宽度减小；
    margin-left或margin-right设置负值，盒子宽度增加。
    

    如果设置了宽度，不论如何更改margin的值，盒子宽度都不会变化，但是位置会改变，且margin-left改变位置的优先级要高于margin-right(可以通过父容器的html属性align来更改优先级)。

12. margin对浮动元素的影响

    如果让盒子浮动，此时对盒子设置边距会影响后面的元素，前面元素位置不受影响（浮动元素贴边的特性）。

    1. 如果浮动的盒子通过margin移动，是受前面元素影响的，那么盒子移动的距离就是前面所有盒子移动的距离；
    2. 如果将盒子2移动到盒子1前面，移动的距离与盒子1移动的距离无关，与盒子1及盒子2的宽度有关：盒子1的宽度+盒子2的宽度；
    3. 当盒子2移动到盒子1前面，盒子3盒子1贴边了，这时盒子3移动的真实距离是：盒子1移动的距离+盒子2的宽度+盒子3移动的距离；
    

背景与精灵图

1. 背景属性

   背景属性：

    background-color：背景颜色，覆盖区域：width+padding+border
    background-image：背景图片，url(图片地址)，覆盖区域：width+padding
    background-repeat：设置背景平铺，
    	no-repeat	不重复平铺
    	repeat		重复平铺（默认）
    	repeat-x	水平方向平铺
    	repeat-y	垂直方向平铺
    	
    background-position：背景定位，属性值分别表示：x方向坐标 y方向坐标 
    	属性值可以使用：top\bottom\right\left
    	分开设置：...-x ...-y
    background-attachment：用来固定背景
    	scroll：滚动页面，位置不变，相对窗口位置变化（默认）
    	fixed：滚动页面，位置变化，相对窗口位置不变
    	
    	background：背景复合属性
    		设置顺序：-color -img -repeat - position - attachment
   

2. 背景与SEO

   伪类提高网站权重，我们通常将重要的信息写在h1中，有时候这些重要的信息是一些图片。但是搜索引擎不认识图片。
   通常的做法是，将文字书写在h1标签中，为h1标签设置背景图片。

    1. 通过text-indent让文字溢出
    2. 通过line-height让文字从盒子中出去，通过overflow:hidden;溢出隐藏
   

3. 精灵图技术

   精灵图技术：将很多小的碎图片整合在一个图中，这样就会只发起一次http请求，提高网页的加载速度。

   通过盒子的宽高来限制精灵图，使用background-position来得到具体要使用的小图片。

定位

1. 定位

   脱离文档流常用的三种方式：浮动、绝对定位、固定定位。

   定位可以通过position属性设置：

    relative：相对定位
    absolute：绝对定位
    fixed：固定定位
    static：静态定位（默认）
   

2. 相对定位

   relative：相对定位
   相对定位就是相对元素原有位置的定位。

   相对定位没有脱离文档流，不会影响其他兄弟元素，原位置占位。

   使用以下属性定位：

    top\left\right\bottom
   

   属性值：偏移量

    水平方向：向右为正，向左为负
    垂直方向：向下为正，向上为负
    
    优先级：left＞right、top＞bottom
   

3. 绝对定位

   absolute：绝对定位
   绝对定位是相对于body元素定位的，会影响后面的兄弟元素。

    	top：根据body的顶边定位
    	bottom：根据屏幕的底边定位
    	left和right：相对于body的左右边定位
   

   绝对定位影响宽高：在未设置盒子的宽高是，可以通过绝对定位的偏移量(top、bottom、left、right)来设置宽高，相对定位不可以。

4. 就近原则

   嵌套盒子设置了绝对定位，它就会寻找离它最近的设置了定位的祖先元素（绝对定位、相对定位、固定定位），来以此确定定位的偏移量，不再以body定位。

   定位顶点：绝对定位是相对于父元素的padding顶点进行定位设置的。

   元素设置了绝对定位后，display属性消失，无论是什么元素，都可以直接设置宽高。

   绝对定位可能会在页面上出现压盖现象。

   绝对定位居中：

   .box {
           width: 200px;
           height: 200px;
           background: cadetblue;
           /* 居中 */
           position: absolute;
           top: 50%;
           left: 50%;
           margin: -100px -100px;
       }
   

5. 固定定位

   fixed：固定定位
   固定定位也是脱离文档流的定位，固定定位是相对于浏览器窗口的定位，与父元素的定位无关，会影响兄弟元素（后面的兄弟元素会顶上来）。

   无论是什么元素，都可以设置盒子的宽高，也可以通过偏移量设置。

6. 遮盖

   一旦盒子设置了定位，就会产生遮盖的现象，即一个盒子盖住另一个盒子，默认遮盖的顺遵循：

    1. 设置定位的盒子，会遮盖住没有定位的盒子（包括浮动的盒子）
    2. 如果盒子都设置了定位，后面的盒子会遮盖住前面的盒子
   

7. z-index

   z-index：属性值是一个数字（无单位），设置盒子遮盖的顺序，属性值大的盒子在上层。

   z-index属性的特点：

    1. 只有设置了定位的盒子才激活z-index属性
    2. z-index属性的默认值是0
    3. z-index值越大，就会渲染在越前面
    4. 如果盒子设置了相同的z-index，后面创建的盒子渲染在最前面
    5. 盒子的遮盖顺序不仅仅与自己的z-index属性值相关，还与设置了定位的父盒子相关。
   

其他

1. CSS单位

   CSS单位：

    %：百分比单位
    px：像素单位
    em：相对字体的大小
    rem：相对根元素字体的大小
    ex：相当于x字母的高度
    vw：1vw = 1%视口宽度
    vh：1vh = 1%视口高度
    vmin：选取vw和vh中最小的那个
    vmax：选取vw和vh中最大的那个
    in：英寸单位	1in = 2.54cm
    cm：厘米单位
    mm：毫米单位
    pt：磅单位
    pc：包含12个点活字
   

2. FC

   FC：Formatting Contexts，格式化上下文。它是页面中的一块渲染区域，并且有一套渲染规则，决定了其子元素将如何定位，以及和其他元素的关系和相互作用。

   常见的FC有：

    BFC：块级格式化上下文
    IFC：内联格式化上下文
    GFC：网格布局格式化上下文
    FFC：自适应格式化上下文
   

3. BFC

   BFC的布局规则：

    1. 内部的盒子会在垂直方向，一个个地放置
    2. 盒子垂直方向距离由margin决定，属于同一个BFC地相邻盒子会呈现margin塌陷
    3. 每个盒子的左边与包含盒子地左边相接触，即使存在浮动也是如此
    4. BFC区域不会与float重叠
    5. BFC就是页面上的一个隔离的独立容器，里面地子元素不会影响到外面地元素，反之也是如此
    6. 计算BFC的高度时，浮动元素也参与计算
   

   产生BFC的情况：

    1. 根元素；
    2. float属性不为none；
    3. position为absolute或fixed；
    4. display为inline-block\table-cell\table-caption\flex;
    5. overflow不为visible;
   

4. IFC

   IFX的线框高度由其包含行内元素中最高的实际高度计算而来。

   每个IFC对外表现为块级元素，与div垂直排列。
   IFC的作用：

    水平居中：设置display:inline-block会在外层产生IFC，通过text-align则可以使其水平居中。
    垂直居中：创建一个IFC，用其中一个元素撑开父元素的高度，然后设置vertical-align:middle，其他行内元素则可以在此父元素下垂直居中。