CSS

什么是 CSS

CSS 是层叠样式表 (Cascading Style Sheets 的缩写），是一种样式表语言，用来描述 HTML 或 XML（包括如 SVG、MathML、XHTML 之类的 XML 分支语言）文档的呈现。 CSS 描述了在屏幕、纸质、音频等其它媒体上的元素应该如何被渲染的问题。

冲突的声明通过层叠进行排序，由此确定最终的文档表示。

样式表的组成

CSS 的定义是由三个部分构成：选择符（selector），属性（properties）和属性的取值（value）

规则：选择器 + 声明块其中声明又由：CSS 合法的属性名+属性值组成

CSS 的三种引入方式

内联式：直接写在标签里面

嵌入式：在 head 里面使用 style 放在里面
外部式：创建一个 CSS 文件设置代码，head 里面使用 link 标签

浏览器渲染样式表的顺序

从右往左（简单理解就是由后往前）

选择器

标签选择器: div、span、p
类选择器：给标签取 class 名，以点（.）加 class 名开头，选择所有该 class 名的元素 .wrap{...}
id 选择器: 给标签取 id 名，以#加 id 名开头，具有唯一性，选择"id = 'wrap'"的元素 #wrap{...}
子选择器：以>隔开父子级元素，(模块名>模块名，修饰>前模块内的子模块) div>p{...}
包含选择器: 以空格隔开包含关系的元素，(模块名模块名，修饰空格前模块内所有该模块) div p{...}
兄弟选择器: 以~隔开兄弟关系的元素(模块名~模块名修饰~前模块往下的所有兄弟模块) .first~p{...}
相邻选择器: 以+隔开相邻关系的元素(模块名+模块名修饰加号前模块往下的相邻的模块只一个) .first+p{...}
全局选择器(通配符)：以 * 开头(星号标在大括号前，修饰了包含 body 所有的标签) *{...}
群选择器: 以，分隔(逗号分隔开需要修饰的模块名) .first, .second{...}
属性选择器: [type=text]{...}
伪类与伪类选择器

链接伪类: :link :visited :target(css 实现选项卡)

动态伪类: :hover :active(lvha)

表单伪类: :disabled :enabled :checked(自定义单选按钮) :focus

结构性伪类:
(1) li:first-child{} (修饰第一个 li)
(2) li:last-child{} (修饰最后一个 li)
(3) li:nth-child{} (修饰第()个 li)
(4) li:not(){} (不修饰第()个 li,括号里面可以填以上的选择器) > 伪元素 > ::after > ::before
(5) li:nth-child(index)：该选择器选取父元素的第 N 个子元素，与类型无关
(5) li:nth-of-child(index)：选择器匹配属于父元素的特定类型的第 N 个子元素的每个元素
nth-child 与 nth-of-type 区别：

nth-child 找到第 index 个子元素这个子元素必须满足 li 的规则
nth-of-type 找到第 index 个 li 子元素 2. nth-of-type 以元素为中心

注意：
1. index 可以是变量 n（只能是 n 0 到正无穷）
2. odd：奇数
3. even：偶数
4. 例子：指定每个 p 元素匹配同类型中的第 2 个同级兄弟元素的背景色：
```
p:nth-of-type(2) {
  background: #ff0000;
}
```
5. 例子：指定每个 p 元素匹配的父元素中第 2 个子元素的背景色：
```
p:nth-child(2) {
  background: #ff0000;
}
```

CSS3 常用

自定义字体

@font-face

文本新增样式

怎么溢出显示省略号

/*包裹区域必须不能让子元素撑开*/
div {
  white-space: no-wrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

单位

为了更好的丈量和表示页面的长度，CSS 规定了绝对长度单位、字体相关的长度单位、视口相关的长度单位

绝对长度单位绝对长度单位代表一个物理测量，包括像素 px(pixels)、英寸 in(inches)、英寸 in(inches)、英寸 in(inches)、英寸 in(inches)、1/4 毫米 q(quarter-millimeters)、点 pt(points)、派卡 pc(picas) 在 web 上，像素 px 是典型的度量单位，很多其他长度单位直接映射成像素。最终，他们被按照像素处理
字体相关的长度单位:包括 em、ex、ch、rem
- em 表示元素的 font-size 属性的计算值，如果用于 font-size 属性本身，相对于父元素的 font-size；若用于其他属性，相对于本身元素的 font-size
- rem 是相对于根元素 html 的 font-size 属性的计算值
- ex 是指所用字体中小写 x 的高度。但不同字体 x 的高度可能不同。实际上，很多浏览器取 em 值一半作为 ex 值
- ch 与 ex 类似，被定义为数字 0 的宽度。当无法确定数字 0 宽度时，取 em 值的一半作为 ch 值
视口相关的长度单位视口相关的长度值相对于初始包含块的大小。当初始包含块的宽高变化时，他们都会相应地缩放。然而，当根元素的 overflow 值为 auto 时，任何滚动条会假定不存在关于视口相关的单位有 vh、vw、vmin、vmax4 个单位
- vh:布局视口高度的 1/100
- vw:布局视口宽度的 1/100
- vmin:布局视口高度和宽度之间的最小值的 1/100
- vmax:布局视口高度和宽度之间的最大值的 1/100

盒模型

什么是盒子模型盒模型是使用 css 对网页元素进行控制时的一个概念，浏览器把网页中的每一个元素都看作一个盒模型，每个盒模型都由以下几个属性决定： display、position、float、width、height、margin、padding、border 等。不同类型的盒模型会产生不同的布局。
盒模型分类

盒模型分为两类: IE 盒模型和标准盒模型。两者的区别在于:
- IE 盒模型的 width/height = content + border + padding
- 标准盒模型的 width/height = content

IE 盒模型( 怪异模式) : 在 IE 盒子模型中，width 表示 content+padding+border 这三个部分的宽度
标准盒模型: 在标准的盒子模型中，width 指 content 部分的宽度

改变盒子模型 CSS3 支持改变盒子模型。 box-sizing 用来改变计算盒子高度/宽度的默认盒子模型。可以使用此属性来模拟不正确支持 CSS 盒子模型规范的浏览器的行为。 box-sizing 属性定义了应该如何计算一个元素的总宽度和总高度。
- content-box(默认值): 标准盒模型。 width 和 height 只包括内容的宽高;不会包含 border, padding。
- border-box：IE 盒模型( 怪异模式)。 width 和 height 包括内容、内边距和边框。 width/height = border + padding + 内容的宽度/高度
- padding-box: 已经弃用
- inherit: 规定应从父元素继承 box-sizing 属性的值

为什么要使用 border-box content-box 缺点:

  当你想让两个子容器 float: left，宽度各 50%，然后给一点 padding，最后让子容器并排充满父容器，一切想的挺美好，
  然而你发现结果并不是这么美好，因为子容器的盒子宽度已经超出了父容器的一半，导致了折行，
  于是，width 就不能 50%了，只能是 50%再减去 padding 的像素值;

border-box 的优势:

border-box 的诞生，主要就是解决 content-box 的最大缺点。border-box 意味着子容器的 padding 和 border 的厚度都算在 50%之内，
这样，你可以随意的修改 padding 和 border 的厚度值，根本不用担心父容器被撑爆。

overflow overflow 定义当一个元素的内容太大而无法适应块级格式化上下文时候该做什么。

css3 媒体查询

css3 媒体查询是响应式方案核心

媒体类型

type	discribtion
all	所有媒体（默认值）
screen	电脑屏幕
print	打印预览
tv	电视
braille	盲文触觉设备
embossed	盲文打印机
speech	"听觉"类似的媒体设备
tty	不适用像素的设备

媒体属性

操作符，关键字 (only,and,(，or),not)

only：防止老旧的浏览器不支持带媒体属性的查询而应用到给定的样式.

@media only screen and (min-width: 800px) {
  body {
  }
}
@media screen and (min-width: 800px) {
  body {
  }
}

在老款的浏览器下 @media only ---> 因为没有 only 这种设备规则被忽略 @media screen ---> 因为有 screen 这种设备而且老浏览器会忽略带媒体属性的查询

建议在每次抒写 media query 的时候带上 only

and: 连接媒体属性、连接媒体类型对于所有的连接选项都要匹配成功才能应用规则
or(,) : 和 and 相似对于所有的连接选项只要匹配成功一个就能应用规则
not:取反

实例

如果浏览器窗口小于 500px, 背景将变为浅蓝色：

@media only screen and (max-width: 500px) {
  body {
    background-color: lightblue;
  }
}

添加断点:当屏幕 (浏览器窗口) 小于 768px, 每一列的宽度是 100%:

/* 为移动端设计: */
[class*="col-"] {
  width: 100%;
}
@media only screen and (min-width: 768px) {
  /* For desktop: */
  .col-1 {
    width: 8.33%;
  }
  .col-6 {
    width: 50%;
  }
  .col-12 {
    width: 100%;
  }
}

CSS(3)梳理

CSS