CSS

一、CSS介绍

1. CSS的介绍

Cascading Style Sheets层叠样式表，它是用来控制网页样式，并允许将样式代码与网页内容分离的标记性语言。
简单地说：CSS的引入就是为了使得HTML语言能够更好的适应页面的美工设计

2. 为什么要使用CSS

网页结构和样式混用让代码变得混乱，代码冗余增加带宽负担，也不利于代码维护

3. CSS的优点

1、节省时间：可以编写一次性的CSS代码，在多个HTML文件中引用
2、页面加载速度更快
3、易于维护
4、多设备兼容

4. 快速使用CSS

5. 使用CSS的优势

• 在head标签中设计span文本样式，减少代码重复
• 后期维护只需修改style标签内的样式即可影响全局代码
• 代码重复少了，网页加载快
  

6. CSS语法

• 注释：/ * 注释内容 * /，快捷键Ctrl+Shift+/
• CSS样式：由选择符和声明构成
• 声明：由属性名和属性值构成
  

二、CSS引入方式

1. 三种引入方式

1. 内联式（行内式）
2. 嵌入式
3. 外部式
   在head标签中加入link标签，连接外部CSS文件
   外部CSS文件选择符和声明：h3{color: orange;}#h3标签下的文字都是橘黄色

2. 三种引入方式的优缺点

• 内联式（行内式）
  缺点：代码重复，维护难，
  优点：不会产生额外的请求
• 嵌入式
  缺点：在不同页面的html文件需要重复编写样式，在head中写的style标签只可以给当前页面使用
  优点：不会产生额外的请求，使样式和内容分离
• 外部式
  优点：方便后期维护，可以供多个页面通过link标签重复使用，完全使结构和样式分离
  缺点：会产生额外的请求下载外部CSS文件

3. 三种引入方式的优先级

内联式（行内式）优先级最高！
嵌入式与外部式优先级需要看代码顺序，位于后者的会将前者覆盖，最终显示出来

三、CSS常用选择器

1. 选择器分类：

• 基础选择器：

1. 标签（元素）选择器
2. 类（class）选择器
3. id选择器

• 高级选择器

4. 后代选择器
5. 子代选择器
6. 组合选择器
7. 交集选择器
8. 伪类选择器

2. 标签选择器

标签选择器选择的是所有共同的标签
p{
color: orange;
} #例如：body中所有的段落p标签内的文字都会变成橘黄色

3. id选择器

• id选择器语法：#+id名称
• id选择器选择的是唯一的id

4. 类（class）选择器

• 类选择器选择的是名字相同的class，可以是不同的标签
• 同一个标签可以拥有两个类，受两个类共同修改样式
• 类选择器语法：.+类名

5. 后代选择器

• div a代表div后代里（包裹）的所有a都被选中，包括子代、孙代等
• div是第一个基本选择器，a是第二个选择器
• div也可以换成标签，类，id，例如：.week a代表week类下的a标签

6. 子代选择器

• div>a代表div标签下的直系子代标签a，如上图孙代标签a不使用样式

7. 组合选择器

• div,p是组合选择器，代表div标签和p标签共同使用后面的样式，中间用逗号隔开
• 避免div和p的样式设置代码写两遍，造成重复代码

8. 交集选择器（使用率较低）

• 针对同时满足标签一和标签二的对象所享有的共同属性进行设置
• 第一个是标签选择器，第二个是类或者id选择器

9. 伪类选择器

指定选择选取的一些特殊的状态来进行设置（例如鼠标划过，点击）

• a:link代表超链接a没有被点击前，a:visited代表a被访问后，a:hover代表鼠标悬浮在a上时，a:active代表鼠标长摁住a时
• link，visited，active只适用于a标签，hover适用于其他所有标签

10. CSS选择器总结

• 语法：
  选择符{属性：值}
• 作用：
  选中页面上的元素（标签），设置对应的样式
• 基础选择器
  ①标签选择器
  对页面中相同的元素，设置共同的属性
  ②id选择器
  任何元素都可以设置id
  id是唯一的，并且不能重复，表示选中的是有特性的元素
  ③class选择器
  任何元素都可以设置类
  一个元素中可以设置多个类
  一定要有“归类的概念，公共类的想法”，选中的页面元素，设置相同的属性
• 高级选择器
  ①后代选择器（爸爸的儿子，孙子。。。）
  div p{}
  ②子代选择器（亲儿子）
  div>p
  ③组合选择器
  选择器1，选择器2，选择器3{样式}
  ④交集选择器（了解）
  选择器1选择器2{样式}
  ⑤伪类选择器
  a标签：爱恨准则，LoVe HAte
  a:link{}
  a:visited{}
  a:hover{}
  a:active{}
  注意：hover可以应用于任何元素

11. CSS的继承性

css的继承：就是给父级设置一些属性，子级继承了父级的该属性
官方解释，继承是一种规则，它允许样式不仅应用于特定的html标签元素，而且应用于其后代元素

• 不是所有属性都可以继承，在审查元素中不被高亮的属性就不会被继承
  

12. CSS选择器权重

当使用不同选择器选中同一元素并且设置不同的样式，会显示哪种选择器样式？

• 优先级由高到低：
  行内式>内嵌式>ID选择器>类选择器>标签选择器
• 选择器权重计算方法：依次计数选择器：id选择器，类选择器，标签选择器
  例如：
  .b{样式}的权重：id选择器为0个，类选择器为1个，标签选择器为0个，权重为010=10
  html body div{样式}的权重：id选择器为0个，类选择器为0个，标签选择器为3个，权重为003=3
• 继承来的属性权重非常低，几乎为0！
  如果选择器没有选中具体的标签，它只选中了父代标签，那么子代继承属性的权重很低

13. !important强制生效

• 通过在属性：值后加!important可以将权重低的选择器提高生效

四、字体属性

1. font-family

• font-family后面可以跟多个字体种类，中间用逗号隔开，作为备选字体（防止电脑中没有相应的字体包），全部没有时用浏览器默认字体
• 如果设置成inherit，则表示继承父元素的字体。

2. font-size

• 像素单位：px，em，rem
• 默认字体大小：16px

3. color

支持三种颜色值：

• 颜色的名称 如: red
• RGB值 如: RGB(255,0,0)
  RGB三个参数的范围都是0~255，分别对应红，绿，蓝的号码
  **RGBA(255,0,100,0.5)**最后一个参数代表透明度（alpha）范围是0~1之间
• 十六进制值 如: ＃FF2134
  本质上就是将RGB的三个参数换成十六进制的展示形式：
  #FF2134等于
  R：FF=1516+15
  G：21=216+1
  B：34=3*16+4

4. font-style（斜体）

• {font-style：italic}
  normal代表正常状态，italic代表斜体

5. font-weight

值	描述
normal	默认值，标准粗细
bold	粗体
bolder	更粗
lighter	更细
100~900	设置具体粗细，400等于normal，700等于bold
inherit	继承父元素的字体粗细值

五、文本属性

1. text-decoration（划线）

• 模仿淘宝做一个鼠标悬浮显示下划线并变橙色的超链接
  

2. text-indent（文本缩进）

• px是绝对像素单位（不管网页如何变化都不会改变它的值）
• em是相对像素单位（element），2em的意思是缩进2个像素单元，会随着字体大小改变而改变
• rem也是相对单位，主要用于移动端

3. line-height（行高）letter-spacing（字间距）word-spacing（空白间距）

• 通常情况下，行高>字体大小，否则不同行之间的字会溢出重叠

4. text-align（文本对齐）

text-align三种值：

• left：默认值，左对齐
• center：用途最多，居中对齐
• right：右对齐

5. 实现文字过长省略号替代

多应用于购物网站商品描述过长

• overflow：hidden——超出盒子部分隐藏不显示
• white-space：nowrap——不允许换行
• text-overflow：ellipsis——文字超出部分省略号

6. 综合属性简写

• font:20px/3"微软雅黑"
  代表着字体大小20px，行高3倍就是60px，字体微软雅黑
  等同于三句代码：font-size:20px; line-height:60px; font-family:“微软雅黑”

六、transform属性（转换）

1. translate——位移

需要传2个参数：（水平位移，垂直位移）

2. rotate——旋转

需要传1个参数：旋转角度，默认顺时针旋转

3. scale——缩放

需要传1个参数：放大几倍

4. skew——倾斜

需要传1个参数：倾斜度，单位也是deg（度）

七、CSS中元素分类

1. 块状元素display:block;

< div> < p> < h1>~< h6> < ol> < ul> < table>< form> < li>

• 特点：
  1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
  2、元素的高度、宽度、行高以及顶和底边距都可设置。
  3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
  
• 独占一行
• 可以使用height，width设置宽高

2. 行内元素display:inline;

< a> < span> < br> < i> < em> < strong> < label>

• 特点：
  1、和其他元素都在一行上；
  2、元素的高度、宽度及顶部和底部边距不可设置；
  3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
  

3. 行内块元素display:inline-block;

< img> < input>

• 特点：
  1、和其他元素都在一行上；
  2、元素的高度、宽度、行高以及顶和底边距都可设置
  

八、display属性

1. display有三种属性

• inline：行内显示
• block：块状显示
• none：不显示在浏览器上
• inline-block：将行内元素转换成行内块元素设置宽高

2. 块状元素转行内元素

• div标签编程一行显示，不可以设置宽高
• 通常不建议改块状为行内，如果需要行内应该直接用行内标签span

3. 块状元素运用none实现隐藏（重要）

运用display属性值在none和block切换，可以实现页面内容的隐藏-出现效果，类似购物网站的导航栏鼠标悬浮显示出来，需要与JavaScript结合

4. 行内元素转行内块元素

• line-height=height可以让文本垂直居中

5. 模仿小米商城顶部栏

九、盒模型

1. 什么是盒模型

• CSS model这一术语是用来设计和布局时使用
• 所用HTML元素都可以看做盒子
• 它包括：外边距，边框，内填充和实际内容
• 块级元素都具备盒子模型的特征
  
• border：solid是实线的意思
• padding的内边距可以设置单向：
  padding-top——上
  padding-left——左
  padding-right——右
  padding-bottom——下
• 审查元素查看
  

2. padding属性（内边距）

• 利用padding调整内容位置：
  
  也可以用padding-left等单独调整一个方向位置，但这样整块区域大小为100+50=150，原本内容大小只有100，要想维护原来大小需要手动修改内容的宽高为50
• padding多参数（中间用空格隔开）：
  两个参数时——padding：20px 30px分别对应：上下（20），左右（30）
  三个参数时——padding：20px 30px 40px分别对应：上20，左右30，下40
  四个参数时——padding：20px 30px 40px 50px分别对应：上20，右30，下40，左50（顺时针）

3. border属性（边框）

①综合编写

border：3px solid red

②按照三要素写

• border-width：粗细
• border-style：样式
  solid实线、dotted点状线、double双实线、dashed虚线

③按照方向写

• border-top-width: 4px;
• border-top-color: red;
• border-top-style: solid;
• 也可以写一个方向上的综合属性：border-top-width: 4px red solid

④去除input自带边框线（默认样式）

input：{border：0，outline：none}
outline是选中input框后自带的蓝色外线

⑤制作圆角

• border-radius: 20px；表示半径为20的圆角，
• 两个参数：border-radius: 30px 60px 表示横向半径30，纵向半径60的椭圆
• 也可以填写为百分比（以父元素的宽高计算）border-radius: 30%;
• 设置单个角的圆角：border-top-right-radius: 100px;

4. margin属性（外边距）

• margin：20px代表四周都是20外边距
• 四个方向编写
  margin-top
  margin-bottom
  margin-left:
  margin-right
• 需要注意的是：
  水平方向上的外边距是左右两个对象的外边距相加
  垂直方向上的外边距取上下两个对象外边距的较大值（叫外边距塌陷）

5. 清除HTML默认样式

HTML默认样式经常有边框，边距的默认设置，我们写网站时通常需要按照自己的需求编写，此时可以导入reset.css来清除默认样式
reset.css参考：https://meyerweb.com/eric/tools/css/reset/

6. 盒子居中显示

• 当页面中有很多居中div时，可以统一命名class=container
• .container{height:100%}代表继承父标签的高度
• margin-left：auto时向右推靠右，margin-right:auto时向左推靠左
  都设置时相互作用居中
• 可以简化为margin：0 auto代表外边距上下0，左右auto
• 使用margin: 0 auto;水平居中盒子必须有width，要有明确width
  只有标准流下的盒子 才能使用margin:0 auto;
  当一个盒子浮动了，固定定位，绝对定位(后面会讲)，margin:0 auto; 不能用了

7. 盒子阴影（box-shadow）

阴影向内设置可以加第五个参数：insert

十、浮动

1. 浮动介绍

①背景

最初的浮动是文本环绕图片，后来利用浮动实现网页多列排版布局

②属性

• none：不浮动，默认情况
• left：左浮动，盒子向左靠拢
• right：右浮动，盒子向右靠拢
• inherit：继承

③现象

• 左右盒子分别向左右靠拢
• 共享一行

2. 利用float文字环绕现象

3. 浮动元素的特性

标准文档流——web网页的制作，是个“流”，从左到右，从上而下

①脱标

float会将元素悬浮，脱离标准文档流（简称脱标），意味着这个元素不在当前标准文档流上面了

• 效果：红色盒子压盖住了黄色的盒子，一个行内的span标签竟然能够设置宽高了。
• 原因1：小红设置了浮动，小黄没有设置浮动，小红脱离了标准文档流，其实就是它不在页面中占位置了，此时浏览器认为小黄是标准文档流中的第一个盒子。所以就渲染到了页面中的第一个位置上
• 原因2：所有的标签一旦设置浮动，就能够并排，并且都不区分行内、块状元素，都能够设置宽高
• float的元素只会遮挡后面的块级元素，对于行内块和行内元素不会遮挡，它们会在右边排开

②互相贴靠

③文字环绕

④宽度收缩

浮动元素的宽度收缩为内容的宽度（在不设置宽度的情况下）

4. 浮动元素的破坏性（父元素高度塌陷）

5. 清除浮动的方式

①方法一：固定高度

缺点：后期需要更改高度时，需要手动更改，不方便
应用：不经常修改高度的导航栏

②方法二：内墙法（了解）

1. 浮动元素最后面加一个空的div 并且该元素不浮动 ，然后设置clear:both 清除别人对我的浮动影响
2. 缺点：代码结构冗余
3. clear：有三个值：
   left：当前元素左边不允许有浮动元素
   right：当前元素右边不允许有浮动元素
   both：当前元素左右两边不允许有浮动元素

③ 方法三：伪元素清除法（重点）

先介绍一下伪元素选择器：

可以看出，伪元素创建后是在上一个块级元素p同一行后添加，是一个行内元素
再看伪元素清除法

④ 方法四：overflow（重点）

• 介绍下overflow属性：
  
  overflow属性值：
  visible——默认值，显示出来但是超过盒子边框
  hidden——隐藏
  scroll——滚动，如上图
  auto——自动根据浏览器设置，一般与scroll效果相同
• 再看overflow清除法
  
  BFC（block formatting context）块级格式化上下文

1. BFC区域一条规则：计算BFC（块级盒子）的高度时，浮动元素也参与计算
2. 形成BFC的条件：除了overflow：visible以外的其他属性：hidden，scroll等

⑤BFC详解

Box和Formatting Context

• Box即盒子，页面的基本构成元素，分为inline、block、inline-block三种类型的盒子
• FC分为Block Formatting Context（块级格式化上下文）和Inline Formatting Context（行内格式化上下文）
• BFC定义：是一个独立的渲染区域，只要块级盒子参与，它规定了内部的块级盒子如何布局，并且独立地与区域外部毫不相干

BFC布局规则：

1. 内部的Box会在垂直方向，一个接一个地放置
2. Box垂直方向的距离由margin决定，属于同一个父元素BFC的两个相邻Box的margin会发送重叠（margin塌陷）
3. 每个BFC下的子元素左边与父元素靠拢
4. BFC的区域不会与float重叠
5. BFC就是页面上的一个隔离的独立容器，容器里面的子元素与外面的元素互不干扰
6. 计算父元素BFC区域的高度时，浮动子元素也参与计算

哪些元素会生成BFC

1. 根元素html
2. float属性不为none
3. position为absolute或fixed
4. display为inline-block
5. overflow不为visible，是visible、scroll等

十一、定位

1. 定位的介绍（position）

定位主要依靠position属性进行设置

• position：static，默认静态
• 相对定位：position：relative
• 绝对定位：position：absolute
• 固定定位（类似小广告总在页面侧边）：position：fixed

2. 相对定位

• 单独仅仅设置position：relative时，不设置top/left/right/bottom属性时，与标准文档流布局没有区别
• 不脱离标准文档流，可以调整元素
• 参考点——以盒子原来的位置作为参考点
• 后设置定位的盒子会遮盖住前面设置定位的盒子
  

2. 绝对定位

①特点

• 脱离标准文档流，不在页面占位
  与float类似，但不同在于float下盒子内的文字会环绕展示，而绝对定位不会被挤出盒子
  
• 层级提高，会对其他盒子产生压盖现象
  

②参考点

• 相对于最近的非static祖先元素定位
• 如果没有非static祖先元素，那么以页面根元素HTML元素左上角进行定位
  

③实战应用——子绝父相

一般我们会将父元素设置为相对定位，子元素设置为绝对定位

• 优点一：父元素相对定位不会脱离标准文档流，避免高度塌陷与下文重叠
• 优点二：子元素在计算上下左右距离时测量父元素比测量页面左上角html要方便得多

3. 固定定位

①特点

• 固定定位于绝对定位相似，只是参考点不一样
• 脱离标准文档流
• 一旦设置固定定位，在页面中滚动网页，被固定的元素位置不变

②参考点

参考点是浏览器的左上角，就是HTML标签的左上角

十二、z-index

1. z-index讲解

• z-index 值表示谁压着谁，数值大的压盖住数值小的
• 只有定位了的元素，才能有z-index，不管相对定位，绝对定位，固定定位，都可以使用z-index，而浮动元素不能使用z-index
• z-index值没有单位，就是一个正整数，默认的z-index值为0（auto）如果大家都没有z-index值，或者z-index值一样，那么谁写在HTML后面，谁在上面压着别人，定位的元素，永远压住没有定位的元素。
  
• B盒子的z-index设置为1，而A和C的是z-index：auto等于0，所以B压住了A和C

2. 从父现象：父亲怂了，儿子再牛逼也没用

• z-index值：A的父亲15，A为1；B的父亲10，B为3，虽然B>A，但A的父亲大于B的父亲
  从父现象：谁的父亲等级高，谁就盖住谁

十三、背景属性（background）

1. background-color：red

transparent是透明的属性值

2. background-image：url（“Nike.jpg”）

插入背景图片，url后面的括号填写图片链接

3. background-repeat：

设置平铺方式
no-repeat——不平铺，只展示一张
repeat——横向纵向都平铺（默认值）
repeat-x——只横向平铺
repeat-y——只纵向平铺、

4. background-size:（图片缩放）

5. background-position：

设置背景定位
background-position-x: 100px;——横向偏移100
background-position-y: 100px;——纵向偏移100
综合属性表示定位：

• background-position: 50px 100px——定位在左边50，上边100
• top、left、right、bottom、center关键字表示法：（如果只设置了一个值，那么第二个值就是center）
  background-position:top left;——代表左上方
  background-position:center center——代表正中间
• 百分比表示法
  background-position:30% 50%;——代表水平靠左30%，垂直居中
  百分比的计算方法：
  偏移的像素值 = （容器的像素值-背景图片的像素值）*百分比
  例如：盒子宽1000，照片宽200,百分比30%等于(1000-200)*30%=240px
• 综合表示法
  background:url(美女.jpg) no-repeat center top;
  注意是background，属性值的位置可以互换（center top必须连在一起）

十四、Sprite雪碧图技术

1. 雪碧图技术介绍

它是一种图像拼合技术
将多个小图标和背景图像合并到一张图片上
利用CSS的背景定位来显示需要显示的图片部分

• 优点
  它可以避免网站多次请求加载图片，有效减少HTTP请求数量
  加速内容显示
• 使用场景：
  静态图片，不随用户信息变化而变化（一般是万年不变的图片）
  小图片，图片比较小（2~3kb），一些大图不建议使用雪碧图
  加载量比较大时
• 原理：
  通过CSS的背景属性background-position来控制雪碧图的显示

2. 实现原理

原图：

• 在div盒子中插入的都是上面这张背景图
• 控制背景图的定位，将需要的小图标高度控制在盒子内
• 超出盒子的背景图部分不显示

十五、网页中常见问题

1. CSS的命名规范

http://www.divcss5.com/jiqiao/j4.shtml#no2

2. 项目目录规范

• css:样式
• fonts:存放字体，阿里巴巴矢量图标库
• images:照片
• js:js脚本
• index.html：网站主代码

3. 确定错误发生的位置

由于网站包含很多div嵌套，想要确定某些塌陷等问题是在哪个div上可以去注释或者删除部分div，查看错误位置

十六、水平垂直居中问题

1. 行内元素水平垂直居中

方法一：

• text-align: center——文本居中
• line-height: 300px——垂直居中，行高设置等于盒子高度
• 也可以通过vertical-align：middle实现垂直居中
• 注意：line-height垂直居中法只对行内元素有效，对img行内块元素只会图片下沿居中，对块级元素无效，如图：
  

方法二：

table-cell+text-align方法

• display: table-cell;——将盒子显示方式改为单元格
• vertical-align: middle;——单元格垂直方向居中

2. 块级元素水平垂直居中

方法一：

position+margin方法

• 子绝父相：设定儿子绝对定位
• left、right、top、bottom上下左右定位全部为0，由margin：auto自动填充

方法二：

table-cell+text-align（只针对行内元素，需要将内盒子设置为行内块）

• text-align只对行内元素生效，所以子元素既需要宽高，又需要行内居中，设置为inline-block

方法三：纯计算（应用最广泛）

• 绝对定位的50%是父元素宽度的一般，也就是300*50%=150
• 先用绝对定位的50%将子元素的左上角移到正中间
• 再自己进行margin调整自己宽高的一般50px将盒子整体移动到正中间

十七、iconfont的引用

阿里巴巴矢量图标库：https://www.iconfont.cn/

• 第一步：下载选中的图标（下载文件是压缩包）
  
• 第二步：将文件解压至项目目录里的fonts文件夹
  
• 第三步：将官网的css设置复制进font.css文件内，并注意修改url连接的地址（它们连接的都是刚才解压到fonts里的文件）
  
• 第四步：在html主文件中link刚才的fonts.css样式文件，使用时标签一定要定义class为iconfont（引用fontt.css中针对iconfont类设置的样式），输入图标的代码即可显示