# CSS

**Repository Path**: sun-lan/css

## Basic Information

- **Project Name**: CSS
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-02-25
- **Last Updated**: 2021-04-06

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# css基础

## 书写位置

```
<!-- CSS通常称为CSS样式表或层叠样式表（级联样式表），主要用于设置HTML页面中的文本内容（字体、大小、对齐方式等）、图片的外形（宽高、边框样式、边距等）以及版面的布局等外观显示样式。

CSS以HTML为基础，提供了丰富的功能，如字体、颜色、背景的控制及整体排版等，而且还可以针对不同的浏览器设置不同的样式。
 -->

<!-- - 内联样式表 -->
      <div style="width:200px;height:100px;background-color:red;color:blue;"></div>
<!-- - 内部样式表
  - 在head标签里面，生成一个style的双标签
  - 在style的标签里面写对应的css样式 -->
        <style>
          div {
              width: 200px;
              height: 200px;
              background-color: pink;
          }
      </style>
<!-- - 外部样式表
  - 新建一个css文件夹
  - 在css文件夹的下面新建一个.css后缀的文件
  - 在html文件的head标签里面生成一个link单标签  -->
        <link rel="stylesheet" href="css/外部样式表.css" type="text/css">
      <!--   rel: 当前关联的文件类型 stylesheet：样式表
        href：css文件的路径
        type：文件类型 默认就是css文件类型 -->
<!-- - css语法
  选择器{
    属性:属性值;（声明）
    属性:属性值;（声明）
    属性:属性值;（声明）
    ……
  } 
  - 选择器和声明组成
  - 每条声明以分号结尾
  - 最后一条声明可以省略分号 
- 样式表的权重(优先级) 
  - 内联>内部 
  - 内联>外部
  - 内部和外部,根据就近原则，离得近的优先显示
- 样式表的选择
  - 内联样式表：css属性较少的时候，还需要考虑优先级的问题
  - 内部样式表：写小案例
  - 外部样式表：整页开发，结构样式分离 -->

```

## css3新语法

```
 引入外部样式表
 @import url() 
    <style>
      @import url(路径);
    </style>
  * 区别
    + @import只能引入css文件，link不只可以引入css文件
    + @import的css文件会在结构加载完成之后，才开始加载，link是结构和样式同时加载 
    + @import只能在ie5以上支持，link都支持  
```



#  选择器

##  标签选择器       权重为1

```
  p{color:red;}
```

![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

##  id选择器          权重为100

给标签添加id的属性，值为id名

```
 <div id="box">Lorem ipsum dolo</div>
```

![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

id名 选择元素

```
  #box {
      background-color: pink;
  }
```

![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

1. id名不能重复
2. id只能有一个

##   class(类)选择器       权重为10

- **.class名选择元素**

  ```
    .box {
        color: red;
    } 
    .box1 {
        background-color: royalblue;
    }
  ```

  ![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

  1. class名可以重复
  2. 一个标签可以有多个class名,多个之间用空格隔开

- 给标签添加class的属性，值为class名

  ```
  <div class="box box1">Lorem ipsum </div>
  ```

  ![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

## 通用选择器

```
  *{
    margin:0; 外边距
    padding:0; 内填充
  }
```

![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

## 伪类选择器(状态)      权重为10

1. **超链接:link{} 链接未点击之前**
2. **超链接:visited{} 链接访问之后**
3. **任何元素:hover{} 鼠标划过该元素**
4. **超链接:active{} 鼠标按下的状态**

## 后代选择器             继承权重为0

​            **选择器 选择器{}      （空格隔开）**

​              可以是多个选择器 选择器之间可以跨级，但是必须存在后代关系

## 群组选择器（并集选择器） 

​        **选择器,选择器{}         （逗号隔开）**

## 交集选择器

交集选择器由两个选择器构成，其中第一个为标签选择器，第二个为class选择器，两个选择器之间不能有空格，如h3.special。

交集选择器 是 并且的意思。 即...又...的意思

比如：   **p.one**   选择的是： 类名为 **.one** 的 **段落标签**。

## 子元素选择器

子元素选择器只能选择作为某元素子元素的元素。其写法就是把父级标签写在前面，子级标签写在后面，中间跟一个 **>**  进行连接，注意，符号左右两侧各保留一个空格。

白话： 这里的子 指的是 亲儿子 不包含孙子 重孙子之类

 比如： .demo **>** h3 {color: red;}   说明 h3 一定是demo 亲儿子。 demo 元素包含着h3。

##  !important         权重无穷大

```
div{/*权重:0001*/
			color: hotpink!important;/*无穷大*/
		}
```

#  CSS3新增选择器        

## 目标伪类选择器(CSS3)

:target目标伪类选择器 :选择器可用于选取当前活动的目标元素

```
:target {
		color: red;
		font-size: 30px;
}
```

## 属性选择器

选取标签带有某些特殊属性的选择器 我们成为属性选择器

```
/* 获取到 拥有 该属性的元素 */
div[class^=font] { /*  class^=font 表示 font 开始位置就行了 */
			color: pink;
		}
div[class$=footer] { /*  class$=footer 表示 footer 结束位置就行了 */
			color: skyblue;
		}
div[class*=tao] { /* class*=tao  *=  表示tao 在任意位置都可以 */
			color: green;
		}
```

```
    <div class="font12">属性选择器</div>
    <div class="font12">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="font24">属性选择器</div>
    <div class="24font">属性选择器123</div>
    <div class="sub-footer">属性选择器footer</div>
    <div class="jd-footer">属性选择器footer</div>
    <div class="news-tao-nav">属性选择器</div>
    <div class="news-tao-header">属性选择器</div>
    <div class="tao-header">属性选择器</div>
```

## 伪元素选择器（CSS3)

1. E::first-letter文本的第一个单词或字（如中文、日文、韩文等）
2. E::first-line 文本第一行；
3. E::selection 可改变选中文本的样式
4. E::before和E::after

```
p::first-letter {
  font-size: 20px;
  color: hotpink;
}

/* 首行特殊样式 */
p::first-line {
  color: skyblue;
}

p::selection {
  /* font-size: 50px; */
  color: orange;
}
```

![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

​       E::before和E::after     在E元素内部的开始位置和结束位创建一个元素，该元素为行内元素，且必须要结合content属性使用。

```
div::befor {
  content:"开始";
}
div::after {
  content:"结束";
}
```

![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)

​        E:after、E:before 在旧版本里是伪元素，CSS3的规范里“:”用来表示伪类，“::”用来表示伪元素，但是在高版本浏览器下E:after、E:before会被自动识别为E::after、E::before，这样做的目的是用来做兼容处理。

​        **":" 与 "::"** 区别在于区分**伪类**和**伪元素**

之所以被称为伪元素，是因为他们不是真正的页面元素，html没有对应的元素，但是其所有用法和表现行为与真正的页面元素一样，可以对其使用诸如页面元素一样的css样式，表面上看上去貌似是页面的某些元素来展现，实际上是css样式展现的行为，因此被称为伪元素。是伪元素在html代码机构中的展现，可以看出无法伪元素的结构无法审查

​              伪元素:before和:after添加的内容默认是inline元素**；这个两个伪元素的`content`属性，表示伪元素的内容,设置:before和:after时必须设置其`content`属性，否则伪元素就不起作用。

##  结构(位置)伪类选择器（CSS3)

- :first-child :选取属于其父元素的首个子元素的指定选择器

- :last-child :选取属于其父元素的最后一个子元素的指定选择器

- :nth-child(n) ： 匹配属于其父元素的第 N 个子元素，不论元素的类型

- :nth-last-child(n) ：选择器匹配属于其元素的第 N 个子元素的每个元素，不论元素的类型，从最后一个子元素开始计数。n 可以是数字、关键词或公式

  ```
  li:first-child { /*  选择第一个孩子 */
          		color: pink; 
          	}
  li:last-child {   /* 最后一个孩子 */
          		color: purple;
          	}
  li:nth-child(4) {   /* 选择第4个孩子  n  代表 第几个的意思 */ 
  				color: skyblue;
          	}![点击并拖拽以移动](data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==)
  ```

# 选择器的权重

内联样式 1000

id选择器 100

class选择器/伪类选择器 10

标签选择器 1

继承样式 0

## 选择器权重特点

权重值越高，优先显示该样式

后代选择器的权重由每个选择器的权重值相加

群组选择器的权重值为选择器本身的权重值

权重值相同的，就近原则

继承样式的权重值是最低的

## 命名

英文单词并且语义化 <div class="nav"></div>

驼峰命名 <div class="bigBox"></div>

短线连接 <div class="big-box"></div>

下划线连接 <div class="big_box"></div>

# 字体属性

## 字体大小（em，rem，px区别）

- font-size 一般情况是偶数，并且一般不低于10px
- 数值+px
- 数值+em 默认值1em=16px 父元素有字体大小，参考的是父元素的字体大小
- 数值+rem 默认值 1rem=16px 根元素(html)有字体大小时，参考根元素的字体大小(移动端)

## 字体加粗 font-weight

- bold 加粗
- normal 去掉加粗样式

## 字体倾斜 font-style

- italic 倾斜
- normal 去掉倾斜样式

## 字体类型 font-family

- 中文，加引号
- 英文，一个单词不用引号，多个单词要加引号引起来
- 多个字体类型用逗号隔开，浏览器会依次检索，有该字体直接显示，找到最后都没有该字体时，显示默认字体

## 复合写法 font

- font: 字体加粗 字体倾斜 字体大小/行高 字体类型

```
选择器{font: font-style  font-weight  font-size/line-height  font-family;}
```

- 字体加粗 字体倾斜为可选
- 字体大小/行高 字体类型 必选，并且必须是该格式

# 文本属性

## 颜色 color

- 颜色单词
- 十六进制 #f1f1f1
- rgb(0-255,0-255,0-255) rgb(241, 241, 241);

## 文本水平对齐方式 text-align

- left 左对齐 默认值
- center 居中
- right 居右
- justify 两端对齐 内容向两边，加大中间的间距

## 行高 line-height

- 数字：字体大小的倍数
- 数值+px
- 应用
  - 多行文本：加行高可以增大行和行之间的距离
  - 单行文本：将行高和元素的高度设置成一样，实现垂直居中

## 文本修饰 text-decoration

- underline 下划线
- overline 上划线
- line-through 删除线
- none 去掉下划线t:

## 文本缩进 text-indent

- 数值+px 只对独占一行的元素才生效
- 可以设置负数
- 缩进两个词：设置text-indent:2em; 参考当前元素的字体大小

## 字符间距 letter-spacing

- 数值+px
- 中文：加大字和字之间的距离 英文：加大字母之间的距离

## 单词之间的距离 word-spacing

- 数值+px
- 只对英文生效，加大单词和单词之间的距离

## 大小写转换 text-transform

- 首字母全部大写 capitalize
- 全部小写 lowercase
- 全部大写 uppercase
- 默认值 none

# 背景属性

## 背景颜色 background-color

## 背景图 background-image:url()

## 背景图是否重复 background-repeat

- repeat 重复
- repeat-x 在x轴重复
- repeat-y 在y轴重复
- no-repeat 不重复

## 背景图的位置 background-position: x轴 y轴; 

数值+px 向右和向下为正数,反之,可以设置负数 

关键字 

1. 水平方向:left/center/right
2. 垂直方向:top/center/bottom
3. 只设置一个值的情况下,第二个值默认为居中 

## 背景附着background-attachment

- 参数：
- scroll : 　背景图像是随对象内容滚动
- fixed : 　背景图像固定
- 说明：
- 设置或检索背景图像是随对象内容滚动还是固定的。

## 背景透明(CSS3)background: rgba(0,0,0,0.3)

- 最后一个参数是alpha 透明度 取值范围 0~1之间
- 注意： 背景半透明是指盒子背景半透明， 盒子里面的内容不收影响。

## 复合写法 background

   背景颜色 背景图 背景图是否重复 背景图的位置; 顺序不固定

   展开的写法写到复合写法的后面,不然会被复合写法覆盖掉

## 背景缩放(背景尺寸)

通过background-size设置背景图片的尺寸，就像我们设置img的尺寸一样，在移动Web开发中做屏幕适配应用非常广泛。

其参数设置如下：

a) 可以设置长度单位(px)或百分比（设置百分比时，参照盒子的宽高）

b) 设置为cover时，会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏。我们平时用的cover 最多

c) 设置为contain会自动调整缩放比例，保证图片始终完整显示在背景区域。

## 多背景(CSS3)

以逗号分隔可以设置多背景，可用于自适应布局  做法就是 用逗号隔开就好了。

- 一个元素可以设置多重背景图像。 
- 每组属性间使用逗号分隔。 
- 如果设置的多重背景图之间存在着交集（即存在着重叠关系），前面的背景图会覆盖在后面的背景图之上。
- 为了避免背景色将图像盖住，背景色通常都定义在最后一组上，

```css
background:url(test1.jpg) no-repeat scroll 10px 20px/50px 60px  ,
	   url(test1.jpg) no-repeat scroll 10px 20px/70px 90px ,
	   url(test1.jpg) no-repeat scroll 10px 20px/110px 130px c #aaa;
```



# 列表属性 

列表符号 list-style-type 

- disc 实心圆
- squre 方块
- circle 空心圆
- **none 去掉列表符号**

# 浮动

## 什么是浮动？

- 元素的浮动是指设置了浮动属性的元素会脱离标准普通流的控制，移动到其父元素中指定位置的过程。在CSS中，通过float属性来定义浮动

##  float属性取值

- none 默认值
- left 左浮动
- right 右浮动

## 浮动的特点

- 从父元素的边缘开始挨个排列
- 浮动元素会脱离文档流,浮动元素会遮挡后面的兄弟元素,但是不会遮挡文字
- 浮动元素的宽度如果超出父元素的宽,后面的元素会掉到浮动设置的位置
- 浮动元素会影响后面的兄弟,但是不会影响到前面的兄弟

- 浮动脱离标准流，不占位置，会影响标准流。浮动只有左右浮动。
- 浮动首先创建包含块的概念（包裹）。就是说， 浮动的元素总是找理它最近的父级元素对齐。但是不会超出内边距的范围。
- 浮动的元素排列位置，跟上一个元素（块级）有关系。如果上一个元素有浮动，则A元素顶部会和上一个元素的顶部对齐
- 如果上一个元素是标准流，则A元素的顶部会和上一个元素的底部对齐。 
- 特别注意，首先浮动的盒子需要和标准流的父级搭配使用， 其次 特别的注意浮动可以使元素显示模式体现为行内块特性。

##  清除浮动

### 为什么要清除浮动

由于浮动元素不再占用原文档流的位置，所以它会对后面的元素排版产生影响，为了解决这些问题，此时就需要在该元素中清除浮动。

准确地说，并不是清除浮动，而是**清除浮动后造成的影响**

如果浮动一开始就是一个美丽的错误，那么请用正确的方法挽救它。

### 清除浮动本质

清除浮动主要为了解决父级元素因为子级浮动引起内部高度为0 的问题。 其实本质叫做闭合浮动更好一些, 记住，清除浮动就是把浮动的盒子圈到里面，让父盒子闭合出口和入口不让他们出来影响其他元素。

### clear属性用于清除浮动

```
选择器{clear:属性值;}
```

| 属性值 | 描述                                       |
| ------ | ------------------------------------------ |
| left   | 不允许左侧有浮动元素（清除左侧浮动的影响） |
| right  | 不允许右侧有浮动元素（清除右侧浮动的影响） |
| both   | 同时清除左右两侧浮动的影响                 |

### 额外标签法

是W3C推荐的做法是通过在浮动元素末尾添加一个空的标签例如 <div style=”clear:both”></div>，或则其他标签br等亦可。

优点： 通俗易懂，书写方便

缺点： 添加许多无意义的标签，结构化较差。 我只能说，w3c你推荐的方法我不接受，你不值得拥有。。。

### 父级添加overflow属性方法

```
可以给父级添加： overflow为 hidden|auto|scroll  都可以实现。
```

优点： 代码简洁

缺点： 内容增多时候容易造成不会自动换行导致内容被隐藏掉，无法显示需要溢出的元素。4

### 使用after伪元素清除浮动

**:after 方式为空元素的升级版，好处是不用单独加标签了**

使用方法：

```
 .clearfix:after {  content: "."; display: block; height: 0; clear: both; visibility: hidden;  } 
 .clearfix {*zoom: 1;}   /* IE6、7 专有 */
```

优点： 符合闭合浮动思想 结构语义化正确

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

注意： content:"." 里面尽量跟一个小点，或者其他，尽量不要为空，否则再firefox 7.0前的版本会有生成空格。

### 使用before和after双伪元素清除浮动

```
.clearfix:before,.clearfix:after { 
  content:"";
  display:table;  /* 这句话可以出发BFC BFC可以清除浮动,BFC我们后面讲 *
}

.clearfix:after {
 clear:both;
}

.clearfix {
  *zoom:1;
}
```

优点： 代码更简洁

缺点： 由于IE6-7不支持:after，使用 zoom:1触发 hasLayout。

# 盒子模型

##  什么是盒模型

 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子，也就是一个盛装内容的容器。每个矩形都由元素的    内容、内边距（padding）、边框（border）和外边距（margin）组成。

##  内容区(content)

  显示文字/图片/视频等的区域，宽高确定内容区

## 盒子边框（border）

### 边框大小 border-width

​    数值+px

### 边框样式 border-style

实线 solid

虚线 dashed

点状线 dotted

双实线 double

### 边框颜色 border-color

默认情况下，边框颜色和字体颜色一样

颜色单词/rgb()/十六进制

 **边框的复合写法 border: 边框大小 边框样式 边框颜色;顺序不固定**

 单方向边框 **border-方向(top/right/bottom/left/none(去掉边框)):边框大小 边框样式 边框颜色;**

### 表格的细线边框 border-collapse:collapse

table{ border-collapse:collapse; } collapse 单词是合并的意思

border-collapse:collapse; 表示边框合并在一起。            

###  圆角边框(CSS3)

```
border-radius: 左上角  右上角  右下角  左下角;
```

## 内边距/内填充（padding）     

###  padding值的设置

​       一个值 padding:10px 四周

​       两个值 padding:10px 20px; 上下 左右

​       三个值 padding: 10px 20px 30px; 上 左右 下

​      四个值 padding: 10px 20px 30px 40px; 上 右 下 左

​       单方向 padding-方向(left/right/top/bottom): 数值+px;

###  padding值的特点

​      会撑大盒子,如果不想被撑大的话，要在原来宽高的基础上，减去对应方向的padding值  

​      padding值不能设置负数

​       背景图/色可以在padding区域显示

​      可以用来调整内容区到盒子边缘的位置

## 外边距（margin）   

### margin取值

margin-top:上外边距

margin-right:右外边距

margin-bottom:下外边距

margin-left:上外边距

margin:上外边距 右外边距 下外边距 左外边

取值顺序跟内边距相同。

### margin值的特点

margin值不会撑大盒子，但是会影响到旁边的元素

margin可以设置负数

背景图和背景色不在margin区域显示

调整自己和别的元素之间的距离

### 外边距实现盒子居中

可以让一个盒子实现水平居中，需要满足一下两个条件：

1. 必须是块级元素。
2. 盒子必须指定了宽度（width）

然后就给左右的外边距都设置为auto，就可使块级元素水平居中 ，margin:auto; auto: 浏览器会根据当前窗口的宽，减去元素的宽，将剩余的空间进行一个自动的平均分配，实现左右的居中，垂直是不生效的

### margin的bug

#### margin的传递

​       给元素的**第一个子元素**添加**上边距**的时候，边距会错误加在父元素的身上

​        1. 使用padding

​        2. 给父元素添加边框

​        3. 给父元素或者是该元素添加浮动 

​        4. 给父元素添加overflow:hidden(溢出隐藏) 

#### margin的重叠/外边距合并

给上面的元素设置下边距，给下面的元素设置了上边距，边距会产生重叠，并且以两个值的最大值显示，左右的间距是不会出现重叠的  

​        1. 只给一个盒子添加外边距**/**避免掉

## 盒子阴影

```
box-shadow:水平阴影 垂直阴影 模糊距离 阴影尺寸 阴影颜色  内/外阴影；
```

![img](https://img-blog.csdnimg.cn/20201008150603550.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTQ1MjQ3Ng==,size_16,color_FFFFFF,t_70)

1. 前两个属性是必须写的。其余的可以省略。
2. 外阴影 (outset) 但是不能写 默认 想要内阴影 inset

​       内联元素(inline) span b strong i em a sub sup img

​    宽高不生效，由内容决定

​    在同一行显示

​    盒模型属性padding的左右生效，上下显示不准确;margin的左右显示准确，上下不准确

# css3盒子模型

CSS3中可以通过box-sizing 来指定盒模型，即可指定为content-box、border-box，这样我们计算盒子大小的方式就发生了改变。

可以分成两种情况：

1、box-sizing: content-box  盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode

2、box-sizing: border-box  盒子大小为 width    就是说  padding 和 border 是包含到width里面的

```css
div:first-child {
			width: 200px;
			height: 200px;
			background-color: pink; 
			box-sizing: content-box;  /*  就是以前的标准盒模型  w3c */
			padding: 10px;
			border: 15px solid red;
			/* 盒子大小为 width + padding + border   content-box:此值为其默认值，其让元素维持W3C的标准Box Mode */
		}
		div:last-child {
			width: 200px;
			height: 200px;
			background-color: purple;
			padding: 10px;
			box-sizing: border-box;   /* padding border  不撑开盒子 */
			border: 15px solid red;
			/* margin: 10px; */
			/* 盒子大小为 width    就是说  padding 和 border 是包含到width里面的 */
}
```

# 定位

## 定位元素的层级要比普通元素的层级要高

## 静态定位(static)

静态定位是所有元素的默认定位方式，当position属性的取值为static时，可以将元素定位于静态位置。 所谓静态位置就是各个元素在HTML文档流中默认的位置。

## 相对定位relative(自恋型)

参考物：自己本身

移动距离：left/right/bottom/top:数值+px

相对定位是将元素相对于它在标准流中的位置进行定位，当position属性的取值为relative时，可以将元素定位于相对位置。

对元素设置相对定位后，可以通过边偏移属性改变元素的位置，但是它在文档流中的位置仍然保留。   

## 绝对定位absolute (拼爹型)

参考物(包含块)：有定位属性(除static属性之外)的祖先元素,设置绝对定位的元素，会一层一层向上找有定位属性的祖先元素，谁有定位属性，就参考谁去移动，如果找到body也没有找到有定位属性的祖先元素的话，就参考body，也就相当于浏览器的窗口

移动距离：left/right/bottom/top:数值+px

特点:

脱离文档流，会遮挡后面元素的文字

给元素设置绝对定位后，margin:auto会失效

给内联元素添加定位后，内联元素会变成块级元素

给元素不设置宽，自适应宽度的时候，加了绝对定位，自适应会失效，需要重置元素的宽width:100%

## 固定定位fixed(认死理型)

固定定位是绝对定位的一种特殊形式，类似于 正方形是一个特殊的 矩形。它以浏览器窗口作为参照物来定义网页元素。当position属性的取值为fixed时，即可将元素的定位模式设置为固定定位。

当对元素设置固定定位后，它将脱离标准文档流的控制，始终依据浏览器窗口来定义自己的显示位置。不管浏览器滚动条如何滚动也不管浏览器窗口的大小如何变化，该元素都会始终显示在浏览器窗口的固定位置。

固定定位有两点：

1. 固定定位的元素跟父亲没有任何关系，只认浏览器。
2. 固定定位完全脱标，不占有位置，不随着滚动条滚动。

## 粘性定位 position:sticky

参考物 浏览器窗口

移动距离 top

特点

未达到top值之前，普通元素，达到top值之后类似于固定定位 

## 定位模式转换

跟 浮动一样， 元素添加了 绝对定位和固定定位之后， 元素模式也会发生转换， 都转换为 行内块模式，

因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后，可以不用转换模式，直接给高度和宽度就可以了。

## 叠放次序（z-index）

当对多个元素同时设置定位时，定位元素之间有可能会发生重叠。

在CSS中，要想调整重叠定位元素的堆叠顺序，可以对定位元素应用z-index层叠等级属性，其取值可为正整数、负整数和0。

比如： z-index: 2;

注意：

1. z-index的默认属性值是0，取值越大，定位元素在层叠元素中越居上。
2. 如果取值相同，则根据书写顺序，后来居上。
3. 后面数字一定不能加单位。
4. 只有相对定位，绝对定位，固定定位有此属性，其余标准流，浮动，静态定位都无此属性，亦不可指定此属性。

# 宽高自适应

## 宽度自适应,参考父元素

- 宽度不设置
- 设置百分比
- 最大宽度(max-width)和最小宽度(min-width)

## 高度自适应

- auto 自动 根据内容撑开
- 高度不设置 根据内容撑开
- 百分比 参考父元素
- 最小高度(min-height)和最大高度(max-height)
- 一屏页面(盒子的宽高和当前浏览器的宽高一样)的实现方式

## 一页满屏

```
 ```css
        html,body{
          height:100%;
        }
        div{
          height:100%;
          width:100%; (可设，可不设)
        }
      ```
```

# 高度塌陷

## 产生条件

父元素不设置高度，想要子元素撑开

子元素浮动

## 解决方法 

### 给高度塌陷的父元素添加overflow:hidden;(触发BFC)   

弊端：会把溢出父元素的内容隐藏掉

### 给浮动元素的下方添加一个块级元素(一般添加的是div),给块级元素设置clear属性

### clear:left/right/both; 清除浮动元素对后面的元素带来的影响  

clear只对块级元素生效

 弊端：代码中会出现很多空的标签，造成代码冗余

万能清除法，给高度塌陷的父元素，通过伪元素选择器的方法添加元素  

```css
        高度塌陷的父元素::after{
          content:"";
          clear:both;
          display:block;
        }
```

# 伪元素

给父元素添加最后一个孩子,内联元素

​    元素::after{

​      content: "";必须

​    }

 给父元素添加第一个孩子  内联元素

​    元素::before{

​      content:"";必须

​    }

选中第一个字符

​    元素::first-letter{

​      css属性：css属性值;

​    }  

 选中第一行  

​    元素::first-line{

​      css属性：css属性值;

​    }  

# BFC

块级格式化上下文(独立渲染的区域)

BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之也如此。包括浮动，和外边距合并等等，因此，有了这个特性，我们布局的时候就不会出现意外情况了。

## 触发条件

float的值为left/right

position的值为absolute/fixed

display的值inline-block/table-caption/table-cell/flex(弹性盒)/inline-flex

overflow的值为hidden/scroll/auto

## BFC元素所具有的特性

BFC布局规则特性：

1.在BFC中，盒子从顶端开始垂直地一个接一个地排列.

2.盒子垂直方向的距离由margin决定。属于同一个BFC的两个相邻盒子的margin会发生重叠

3.在BFC中，每一个盒子的左外边缘（margin-left）会触碰到容器的左边缘(border-left)（对于从右到左的格式来说，则触碰到右边缘）。

1. BFC的区域不会与浮动盒子产生交集，而是紧贴浮动边缘。
2. 计算BFC的高度时，自然也会检测浮动或者定位的盒子高度。

它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

4 在BFC的区域，浮动元素的高度也会计算在内（解决高度塌陷）

5 BFC的区域不会与浮动盒子重叠 （两栏布局）

# 计算属性

width: calc(100% - 300px) 计算符号两边一定要有空格 

# 元素类型

## 内联元素(inline) 

span b strong i em a sub sup img

​    宽高不生效，由内容决定

​    在同一行显示

​    盒模型属性padding的左右生效，上下显示不准确;margin的左右显示准确，上下不准确

## 块级元素(block) 

 h1-h6 div p ul li dl dt dd ol form table

​    宽高生效

​    独占一行

​    盒模型属性都生效

​    一般作为容器去包裹其他元素,p标签一般不包裹块级元素，也不包裹自己

##  行内块元素(inline-block) input (img)

​    在同一行显示 

​    宽高生效 

​    盒模型属性都生效

## 块级元素和行内元素区别

块级元素的特点：
（1）总是从新行开始
（2）高度，行高、外边距以及内边距都可以控制。
（3）宽度默认是容器的100%
（4）可以容纳内联元素和其他块元素。

行内元素的特点：
（1）和相邻行内元素在一行上。
（2）高、宽无效，但水平方向的padding和margin可以设置，垂直方向的无效。
（3）默认宽度就是它本身内容的宽度。
（4）行内元素只能容纳文本或则其他行内元素。

## 元素类型转换 display  

block 块

inline 内联

inline-block 内联块

none 隐藏 隐藏之后不占位

**visibility: hidden; 隐藏元素 隐藏之后会占位**

## 解决横向排列的元素之间的空格

1 **将标签代码写到同一行**

**2 添加浮动**

给元素添加一个父元素，设置font-size:0;然后单独设置该元素的字体大小

内联元素添加浮动之后，会转换成块级元素

# css三大特性

## 层叠性

  所谓层叠性是指多种CSS样式的叠加。通过不同的选择器选择同一个标签的时候，设置了相同的属性，但是设置了不同的属性值，根据选择器的权重值，权重值高的优先显示，权重相同就近原则显示 

## 优先级

 定义CSS样式时，经常出现两个或更多规则应用在同一元素上，这时就会出现优先级的问题。

​         继承样式的权重为0。即在嵌套结构中，不管父元素样式的权重多大，被子元素继承时，他的权重都为0，也就是说子元素定义的样式会覆盖继承来的样式。

行内样式优先。应用style属性的元素，其行内样式的权重非常高，可以理解为远大于100。总之，他拥有比上面提高的选择器都大的优先级。

权重相同时，CSS遵循就近原则。也就是说靠近元素的样式具有最大的优先级，或者说排在最后的样式优先级最大。

CSS定义了一个!important命令，该命令被赋予最大的优先级。也就是说不管权重如何以及样式位置的远近，!important都具有最大优先级。

## 继承性

给元素设置样式之后，该元素的后代都会具有该样式

### 可以继承

字体类：**font-size**(字体大小)，**font-weight**(字体加粗)， **font-style**(字体倾斜)，**font-family**(字体类型)

文本类：**color**(文本颜色)， **text-indent**(缩进)， **line-height**(行高) ，**letter-spacing**(字符间距)， **word-spacing**(单词之间的距离) ，**text-align**(文本对齐方式)

列表属性：list-style

### 不可继承

text-decoration(文本修饰) ，width ，height， float， padding， margin ，border

# 元素的显示与隐藏

在CSS中有三个显示和隐藏的单词比较常见，我们要区分开，他们分别是 display visibility 和 overflow。

他们的主要目的是让一个元素在页面中消失，但是不在文档源码中删除。 最常见的是网站广告，当我们点击类似关闭不见了，但是我们重新刷新页面，它们又会出现和你玩躲猫猫！！

## display 显示

display 设置或检索对象是否及如何显示。

display : none 隐藏对象 与它相反的是 display:block 除了转换为块级元素之外，同时还有显示元素的意思。

特点： 隐藏之后，不再保留位置。

## visibility 可见性

设置或检索是否显示对象。

visible : 　对象可视

hidden : 　对象隐藏

特点： 隐藏之后，继续保留原有位置。（停职留薪）

## overflow 溢出

检索或设置当对象的内容超过其指定高度及宽度时如何管理内容。

visible : 　不剪切内容也不添加滚动条。

auto : 　 超出自动显示滚动条，不超出不显示滚动条

hidden : 　不显示超过对象尺寸的内容，超出的部分隐藏掉

scroll : 　不管超出内容否，总是显示滚动条

# CSS用户界面样式

 所谓的界面样式， 就是更改一些用户操作样式， 比如 更改用户的鼠标样式， 表单轮廓等。但是比如滚动条的样式改动受到了很多浏览器的抵制，因此我们就放弃了。 防止表单域拖拽

## 鼠标样式cursor

 设置或检索在对象上移动的鼠标指针采用何种系统预定义的光标形状。 

```html
cursor :  default  小白 | pointer  小手  | move  移动  |  text  文本
```

 鼠标放我身上查看效果哦：

```html
<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移动</li>
  <li style="cursor:text">我是文本</li>
</ul>
```

 尽量不要用hand  因为 火狐不支持     pointer ie6以上都支持的尽量用

## 轮廓 outline

 是绘制于元素周围的一条线，位于边框边缘的外围，可起到突出元素的作用。

```css
 outline : outline-color ||outline-style || outline-width 
```

但是我们都不关心可以设置多少，我们平时都是去掉的。

最直接的写法是 ：  outline: 0;   或者  outline: none;

```html
 <input  type="text"  style="outline: 0;"/>
```

## 防止拖拽文本域resize

resize：none    这个单词可以防止 火狐 谷歌等浏览器随意的拖动 文本域。

右下角可以拖拽： 

```
<textarea></textarea>
```

右下角不可以拖拽： 

```html
<textarea  style="resize: none;"></textarea>
```

## vertical-align 垂直对齐

以前我们讲过让带有宽度的块级元素居中对齐，是margin: 0 auto;

以前我们还讲过让文字居中对齐，是 text-align: center;

但是我们从来没有讲过有垂直居中的属性， 我们的妈妈一直很担心我们的垂直居中怎么做。

vertical-align 垂直对齐， 这个看上去很美好的一个属性， 实际有着不可捉摸的脾气，否则我们也不会这么晚来讲解。

<img src="F:/%E6%96%B0%E5%BB%BA%E6%96%87%E4%BB%B6%E5%A4%B9/%E8%AF%BE%E4%BB%B6/20191129%EF%BC%8C%E9%9C%80%E8%A6%81%E5%A4%8D%E4%B9%A0/1129/css%E7%AC%94%E8%AE%B0/media/xian.jpg" />

```css
vertical-align : baseline |top |middle |bottom 
```

设置或检索对象内容的垂直对其方式。 

vertical-align 不影响块级元素中的内容对齐，它只针对于 行内元素或者行内块元素，特别是行内块元素， **通常用来控制图片/表单与文字的对齐**。

### 图片、表单和文字对齐

所以我们知道，我们可以通过vertical-align 控制图片和文字的垂直关系了。 默认的图片会和文字基线对齐。

### 去除图片底侧空白缝隙

有个很重要特性你要记住： 图片或者表单等行内块元素，他的底线会和父级盒子的基线对齐。这样会造成一个问题，就是图片底侧会有一个空白缝隙。

解决的方法就是：  

给img vertical-align:middle | top等等。  让图片不要和基线对齐。

# 溢出的文字隐藏

## word-break:自动换行

normal   使用浏览器默认的换行规则。

break-all   允许在单词内换行。

keep-all    只能在半角空格或连字符处换行。

主要处理英文单词

## white-space

white-space设置或检索对象内文本显示方式。通常我们使用于强制一行显示内容 

normal : 　默认处理方式
nowrap : 　强制在同一行内显示所有文本，直到文本结束或者遭遇br标签对象才换行。

可以处理中文

## text-overflow 文字溢出

text-overflow : clip | ellipsis

设置或检索是否使用一个省略标记（...）标示对象内文本的溢出

clip : 　不显示省略标记（...），而是简单的裁切 

ellipsis : 　当对象内文本溢出时显示省略标记（...）

注意一定要首先强制一行内显示，再次和overflow属性  搭配使用

# 溢出属性 

## overflow(overflow-x/overflow-y)

visible 默认值 显示

hidden 溢出隐藏

scroll 显示滚动条

auto 内容没有溢出正常显示，溢出显示滚动条

## 单行文本溢出显示省略号

设置宽度

设置不换行 white-space:nowrap

设置溢出隐藏 overflow:hidden

设置文本溢出显示省略号 text-overflow:ellipsis

# img自带的3px的底部留白

## vertical-align:垂直方向对齐方式 (只对图片生效)

baseline 基线 默认值

bottom 底线 可以解决bug

middle 中线 可以解决bug

top 顶线 可以解决bug

## 应用

解决图片底部三像素的留白

调整小图标和文字对齐的方式

# 过渡

需要过渡的属性：transition-property：需要过度的css属性

过渡持续时间：transition-duration：数值+s/数值+ms 1s=1000ms

过渡延迟时间：transition-delay:数值+s/数值+ms 1s=1000ms

过渡执行效果：transition-timing-function：linear(匀速)

复合写法：

transition:需要过渡的属性 过渡持续时间 过渡延迟时间 过渡执行效果;（顺序不固定，出现一个时间或者两个时间的话，默认第一个时间为执行时间）

 transition: all 1s; 过渡所有的属性，过渡时间为1s

## 浏览器内核(浏览器的解析代码机制)

- ie浏览器 Trident内核 -ms-
- 火狐浏览器 Gecko内核 -moz-
- 欧鹏浏览器 Blank内核 -o-
- 谷歌浏览器 Webkit内核 -webkit-

## 过渡的兼容写法

```css
  /* 标准写法 */
      transition: all 1s;
      /* 火狐*/
      -moz-transition: all 1s;
      -webkit-transition: all 1s;
```

# 渐变

## 线性渐变

background-image/background:linear-gradient(渐变方向,颜色1,颜色2……)

- 方向 **设置方向一定要加 to**

  - to bottom; 向下

    ```html
      background-image: linear-gradient(to bottom, red, yellow, blue, green);
    ```

  - to top; 向上

  - to left 向左

  - to right 向右

  - to right top 右上角

  - to right bottom 右下角

  - to left top 左上角

  - to left bottom 左下角

  - 数值+deg

  ```html
    background-image: linear-gradient(45deg, red, yellow, blue, green);
  ```

## 重复性的线性渐变

 background-image/background: repeating-linear-gradient(渐变方向,颜色1,颜色2……)  

```css
 .box2 {
       /* 0-10px 红色纯色 10px-50px 红色到蓝色的过渡 50px之后是蓝色纯色*/
        background-image: repeating-linear-gradient(red 10px, blue 50px);
        font-size: 50px;
        line-height: 50px;
    }
```

## 径向渐变  

background-image/background:radial-gradient(方向,颜色值1,颜色值2……)

- 方向：**和背景图的位置取值一样，设置方向一定要加浏览器前缀，否则不生效**

```css
  background-image: -webkit-radial-gradient(left top, red, yellow);
```

## 重复性的径向渐变 

background-image: repeating-radial-gradient(方向, 颜色值1,颜色值2……);

```css
  background-image: -webkit-repeating-radial-gradient(blue, red 20px);
```

# 2d变形 

- transform:translateX(数值+px) 向右和向下为正数

- transform:translateY(数值+px) 向右和向下为正数

- 两个方向同时位移

  ```css
  transform: translateX(100px) translateY(-100px);
  transform: translate(100px,-100px); 
  ```

- 写一个值代表的是x轴的位移

  ```css
   transform: translate(100px); 
  ```

- 移动之后，原来的位置依旧存在  

- 利用位移实现水平垂直居中 

  - 优点：不论大盒子和小盒子的宽高如何变化，都能够识别到宽高的百分比

  ```css
    .box{
      position:absolute;
      left:50%;
      top:50%;
      transform:translate(-50%,-50%); 百分数参考的是当前盒子的宽高        
    }
  ```

## 旋转

- x轴的旋转 transform:rotateX(数值+deg)

- y轴的旋转 transform:rotateY(数值+deg)

- **z轴的旋转  transform:rotateZ(数值+deg)** 顺时针是正数，逆时针是负数

- 只写一个值：
  transform: rotate(-600deg); 代表的是z轴的旋转

- 位移和旋转同时存在

  ```css
   表示先位移后旋转
   transform: translateX(300px) rotateZ(90deg);
   先旋转，坐标轴会跟着变化，位移会根据新的坐标轴去移动
   transform: rotateZ(90deg) translateX(300px);
  ```

## 缩放 

- x轴的缩放 transform:scaleX(数值) 1：正常 0-1之间是缩小 >1是放大
- y轴的缩放 transform:scaleY(数值) 1：正常 0-1之间是缩小 >1是放大
- 两个方向都有

```css
  div{
    transform: scaleX(0.4) scaleY(2);
    transform: scale(0.4, 2);
    transform: scale(2);
  }

```

## 倾斜 

- x轴的倾斜 transform:skewX(数值deg)

- y轴的倾斜 transform:skewY(数值deg)

- xy轴的倾斜

  ```css
  div{
     transform: skew(40deg, 50deg);
  }
  ```

- 一个值代表的只是x轴的倾斜  

- 变形原点：transform-origin:水平 垂直
  - 水平：left/center/right 垂直：top/center/bottom
  - 数值+px
  - 百分比

## 利用外部样式表写过渡属性存在的问题及解决

- 问题：利用外部样式表写过渡属性可能会在页面初始的时候就有过渡效果
- 解决：给整个结构也就是html的标签下面添加 <script>;</script>

## 过渡属性对 display:none到display:block是不生效的

写过渡属性可能会在页面初始的时候就有过渡效果

- 解决：给整个结构也就是html的标签下面添加 <script>;</script>

## 过渡属性对 display:none到display:block是不生效的

# 动画 

- 定义动画

  ```css
    @keyframes 动画名{
      关键帧 划分时间
      from{} 0%
      to{} 100%
    }
    5s
    @keyframes 动画名{
      0%{} 0
      20%{} 1s
      40%{} 2s
      60%{} 3s
      80%{}
      100%{}
    }
    兼容写法
     @-moz-keyframes longer{}
     @-webkit-keyframes longer{}
  ```

- 使用动画

  - animation-name: 动画名

  - animation-duration: 动画执行的时间 s/ms

  - animation-delay: 动画的延迟时间 s/ms

  - animation-iteration-count: 动画执行的次数 数值/infinite（无限循环）

  - animation-timing-funcition: 动画的执行效果 linear(匀速)

  - **复合写法 animation: 动画名 动画执行的时间 动画的延迟时间 动画执行的次数 动画的执行效果; animation: longer 1s infinite linear;**

    - 兼容写法 -webkit-animation

  - animation-direction: 动画的播放方向；noraml(正向)/reverse(反向)/alternate(交替运行)

  - animation-fill-mode:动画停止的关键帧(要限制次数才可以停止)；backwards(第一帧)/forwords(最后一帧)如果设置了动画执行的方向为反向，关键帧起始和结尾也会变

  - animation-play-state:动画是否停止播放 running(播放)/paused(暂停)

    ```css
      div:hover {
         animation-play-state: paused;
      }
    ```

# 3d变形 

## 位移

- z轴的位移 transform:translateZ(数值+px)
- 三个轴都位移 transform:translate3d(x轴,y轴,z轴)

## 旋转

- x轴的旋转 transform:rotateX(数值+deg)
- y轴的旋转 transform:rotateY(数值+deg)
- 三个轴都旋转 transform:rotate3d(a,b,c,数值+deg) 0或者1 0表示不旋转 1表示旋转

## 缩放

- z轴缩放 transform:scaleZ(数值) 0不显示 1正常 0-1缩小 >1放大
- 三个轴都缩放 transform:scale3d(x轴,y轴,z轴缩放)

- 景深：persepctive:数值+px 近大远小
- 形成3d空间 transform-style:flat(2d平面)/preserve-3d(3d空间)属性加在变形元素的父元素身上
- 背部隐藏：backface-visibility: hidden;

# 透明度

使用透明度可以实现元素从无到有的过程

## 第一种 rgba() 

```css
  div {
        width: 200px;
        height: 200px;
        background-color: rgba(165, 42, 42, 1); 透明度从1
        transition: all 1s;
    }   
  div:hover {
      background-color: rgba(165, 42, 42, 0);过渡到0
  }
```

## 第二种 opacity

```css
 div {
    width: 200px;
    height: 200px;
    background-color: brown;
    opacity: 1; 透明度从1
    transition: all 1s;
  }    
  div:hover {
     opacity: 0;  过渡到0 
  }
```

- 区别：rbga不会模糊到里面的文字，opacity会影响里面的文字
  opacity: 0;  过渡到0 

```
  }
​```
```

- 区别：rbga不会模糊到里面的文字，opacity会影响里面的文字

# css3新增的选择器

## 属性选择器 

权重和class选择器一样 为10 方括号前面可以加标签名，限制元素

- [属性名]{} 属性名可以是自定义属性
- [属性名="属性值"] 属性名和属性值匹配
- [属性名^="值"] 属性值以某个值开头
- [属性名$="值"] 属性值以某个值结尾
- [属性名*="值"] 属性名中包含某个值 

## 伪类选择器 

权重值和class选择器一样 为10 0010

### 结构性的伪类

- child系列
  1. 父元素 子元素:first-child{} 父元素中的第一个孩子必须和该子元素匹配
  2. 父元素 子元素:last-child{} 父元素中的最后一个孩子必须和该子元素匹配 
  3. 父元素 子元素:nth-child(n){} 父元素中的第几个孩子必须和该子元素匹配 n可以替换成even(偶数)odd(奇数) 也可以是表达式 2n等 n是自然是从0开始
  4. 父元素 子元素:only-child{} 父元素中只能有该子元素一个孩子
- type系列  
  1. 父元素 子元素:first-of-type{} 这么多子元素中的第一个
  2. 父元素 子元素:last-of-type{} 这么多子元素中的最后一个
  3. 父元素 子元素:nth-of-type(n){} 这么多子元素的第几个子元素
  4. 父元素 子元素:nth-last-of-type(n){} 这么多子元素中倒数第几个元素 



### 目标伪类

 元素:target{} 点击跳转到该板块之后样式才生效

```html
  <a href="#box">点击跳到HTML板块</a>
  <div id="box">HTML板块</div>
```

```css
 #box:target {
    background-color: brown;
    color: chartreuse;
    font-size: 40px;
  }
```

### 状态伪类

- 可编辑 表单元素:enabled{} eg: input:enabled{}
- 不可编辑 表单元素:disabled{} eg: input:disabled{}
- 获取焦点 表单元素:focus{}  eg: input:focus{}
- 选中 单选/多选::checked{} eg: input:checked+span{}
- 高亮状态 元素::selection{}  eg: div::selection{background-color:blue;color:red}  

- 动态伪类(link/visited/hover/active) 

## 层级选择器

- 后代选择器 选择器 选择器{}
- 子代选择器 选择器>选择器 只能选择的孩子
- 相邻的后面兄弟 选择器+选择器{} 
- 相邻的后面的兄弟们 选择器~选择器{}  

# H5新增的语法及标签 

## 新增标签 特点：语义化

- main 主要内容区域 

- mark 标记 内联

- time 时间标签 内联

- header：定义文档的页眉 头部

- nav：定义导航链接的部分

- footer：定义文档或节的页脚 底部

- article：定义文章。

- section：定义文档中的节（section、区段）

- aside：定义其所处内容之外的内容 侧边

- fieldset 元素可将表单内的相关元素分组，打包      legend 搭配使用

  ```html
  <fieldset>
      		<legend>用户登录</legend>  标题
      		用户名: <input type="text"><br /><br />
      		密　码: <input type="password">
  </fieldset>
  ```

- datalist   标签定义选项列表。与 input 元素配合使用该元素

  ```
  <input type="text" value="输入明星" list="star"/> <!--  input里面用 list -->
  <datalist id="star">   <!-- datalist 里面用 id  来实现和 input 链接 -->  
      		<option>刘德华</option>
      		<option>刘若英</option>
      		<option>刘晓庆</option>
      		<option>郭富城</option>
      		<option>张学友</option>
      		<option>郭郭</option>
  </datalist>
  ```

  

- 有图文 figure ficaption

  ```html
    <figure>
        <img src="">
        <figcaption>图片说明</figcaption>
    </figure>
  ```

## 新增的input type属性值

| **类型******     | **使用示例******        | **含义******         |
| ---------------- | ----------------------- | -------------------- |
| **email******    | <input type="email">    | 输入邮箱格式         |
| **tel******      | <input type="tel">      | 输入手机号码格式     |
| **url******      | <input type="url">      | 输入url格式          |
| **number******   | <input type="number">   | 输入数字格式         |
| **search******   | <input type="search">   | 搜索框（体现语义化） |
| **range******    | <input type="range">    | 自由拖动滑块         |
| **time******     | <input type="time">     | 小时分钟             |
| **date******     | <input type="date">     | 年月日               |
| **datetime****** | <input type="datetime"> | 时间                 |
| **month******    | <input type="month">    | 月年                 |
| **week******     | <input type="week">     | 星期 年              |

## 常用新属性

| **属性******         | **用法******                                   | **含义******                                                 |
| -------------------- | ---------------------------------------------- | ------------------------------------------------------------ |
| **placeholder******  | <input type="text" placeholder="请输入用户名"> | 占位符  当用户输入的时候 里面的文字消失  删除所有文字，自动返回 |
| **autofocus******    | <input type="text" autofocus>                  | 规定当页面加载时 input 元素应该自动获得焦点                  |
| **multiple******     | <input type="file" multiple>                   | 多文件上传                                                   |
| **autocomplete****** | <input type="text" autocomplete="off">         | 规定表单是否应该启用自动完成功能  有2个值，一个是on 一个是off      on 代表记录已经输入的值  1.autocomplete 首先需要提交按钮 <br/>2.这个表单您必须给他名字 |
| **required******     | <input type="text" required>                   | 必填项  内容不能为空                                         |
| **accesskey******    | <input type="text" accesskey="s">              | 规定激活（使元素获得焦点）元素的快捷键   采用 alt + s的形式  |



## 新增的语法

- 文档声明DOCTYPE可以小写
- 单标签不写结尾标签
- 可以省略的结尾标签 li、dt、dd、p、option、colgroup、thead、tbody、tfoot、tr、td、th
- 可以省略的标签 html、head、body、colgroup、tbody

## 多媒体标签

### 音频 

```html
 <audio src="zy/梦然-少年.mp3" controls autoplay muted loop></audio>
 兼容写法 浏览器从上到下解析支持那种格式就播放哪个
<video width="800" height="">
    <source src="myvideo.mp4" type="video/mp4"></source>
    <source src="myvideo.ogg" type="video/ogg"></source>
    <source src="myvideo.webm" type="video/webm">
    </source>
</video>
 controls: 控件
 autoplay: 自动播放 谷歌和火狐不支持
 muted: 静音 静音之后火狐支持自动播放
 loop: 循环
```

### 视频

```html
   <video src="zy/zyx.mp4" controls autoplay loop poster="zy/7.jpg"></video>
   属性同音频
   autoplay: 静音之后谷歌和火狐都支持自动播放
   poster: 视频没有播放之前显示的图片 
   width 设置播放窗口宽度
   height 设置播放窗口的高度
   兼容写法  浏览器从上到下解析支持那种格式就播放哪个
  <audio controls>
    <source src="horse.ogg" type="audio/ogg">
    <source src="horse.mp3" type="audio/mpeg">
  </audio> 
```



# 怪异盒模型

- 标准盒模型：box-sizing:content-box
  - 盒子宽度 = 内容区的width+padding的左右+border的左右+margin的左右 
- 怪异盒模型：box-sizing:border-box ie8以下不支持
  - 盒子宽度 = 内容区的width + margin的左右 

# 弹性盒布局(flex)

## 父元素-形成弹性盒 display:flex;

### 主轴对齐方式  justify-content

- flex-start 默认值 主轴起点 
- flex-end 主轴终点
- center 主轴中心
- space-between 两端对齐
- space-around 中间空隙是两边的2倍
- space-evenly 平均分配

### 交叉轴 align-items

- stretch 默认值拉伸 (主轴是横向的话，看到该效果需要去掉子元素的高度，子元素的高会拉伸到和父元素一样高，主轴是纵向的话，看到该效果需要去掉子元素的度，子元素的宽会拉伸到和父元素一样宽)
- flex-start 交叉轴的起点
- flex-end 交叉轴的终点
- center 交叉轴的中心  

### 主轴的方向 flex-direction

- row 默认值 横向从左向右
- row-reverse 横向从右向左
- column 纵向从上到下
- column-reverse 纵向从下到上

### 换行 flex-wrap

- nowrap 默认值 不换行
- wrap 换行

### 多行之间的对齐方式 align-content

- stretch 拉伸 
- flex-start 整个盒子的起始
- flex-end 整个盒子的终点
- center 主轴中心
- space-between 多行内容两端对齐
- space-around 多行内容中间空隙是两边的2倍
- space-evenly 多行内容平均分配 

## 子元素

### 子项在交叉轴的对齐方式 align-self 

- stretch 拉伸 
- flex-start 交叉轴的起点
- flex-end 交叉轴的终点
- center 交叉轴的中心

### 排列顺序 order

- 数值 值越大，越在后面排，可以为负数 

### 放大比例 flex-grow

- 0 不放大
- 数值

### 压缩 flex-shrink 

- 1 默认值 压缩
- 0 不压缩  
- **滚动导航的实现**
  1. 设置子项不压缩 flex-shrink:0;
  2. 给父元素设置溢出显示滚动条 overflow-x:auto;

### 子项的宽度 flex-basic:数值+px

### 复合属性 

flex:flex-grow(0) flex-shrink(1) flex-basic(auto);**

- **flex:1;** 子项占满整个剩余控件

#### 利用弹性盒对盒子进行水平垂直居中

```css
    父元素{
      display:flex;
      justify-content:center;
      align-items:center;
    }
```

# css3新增的属性

## 部分属性

- 盒子阴影 box-shadow: x轴偏移 y轴偏移 阴影模糊大小 阴影大小 阴影颜色 阴影位置
  - eg: box-shadow: 10px 10px 20px 10px green inset;   
- 文字阴影 text-shadow:x轴偏移 y轴偏移 阴影模糊大小 阴影颜色 
  - eg: text-shadow: 10px 10px 10px blue;
- 圆角 border-radius:
  - 一个值 四周
  - 两个值 对角
  - 三个值 左上 对角 右下
  - 四个值 顺时针
- 背景图的大小 background-size: 宽度 高度
  - 百分比 可能会变形
  - 像素
  - 关键字
    1. cover 背景图会不断放大 直到充满整个盒子，可能会出现裁切的情况
    2. contain  背景图会不断的放大 碰到边缘后就停止放大，可能会出现留白

## 元素类型

- 置换元素：浏览器会根据标签以及标签内的属性值来显示不同的内容
  input的type类型
  img的src 
  textarea的内容在变
  select中的option内容会变
- 非置换元素:除了置换元素  
- 为啥img或者input有的标签可以设置宽高？？因为标签属于置换元素

## 字体图标的使用(淘宝)

- 普通字体图标的使用

  - 搜索对应的图片，点击加入购物车

  - 完成后点击 添加至项目

  - 下载项目到本地站点，解压文件，不要删除任何文件

  - 在使用图标的文件地方 用link引入iconfont.css文件

    ```html
      <link rel="stylesheet" href="download/font_2135748_v7l4jintarp/iconfont.css">
    ```

  - 使用，必须加 iconfont的名字，其次添加所需图片的class名

    ```html
      <span class="iconfont icon-jipiao">哈哈哈</span>    
    ```

- 彩色图标的使用

  - 引入js文件

    ```html
      <script src="download/font_2135748_v7l4jintarp/iconfont.js"></script>
    ```

  - 添加通用样式

    ```css
      .icon {
        width: 1em;
        height: 1em;
        vertical-align: -0.15em;
        fill: currentColor;
        overflow: hidden;
      }
    ```

  - 使用 只需要改id名就行

    ```html
     <svg class="icon" aria-hidden="true">
      <use xlink:href="#icon-tubiaov-daochushangchuan-"></use>
     </svg>
    ```

# 响应式布局

- 概念：根据不同的分辨率，显示不同的样式
- 主要修改的样式
  - 元素的隐藏与显示
  - 宽度
  - 浮动排列
  - 文本对齐方式
  - 字体大小
- 优点：适配性好
- 缺点：
  - 增大工作量 
  - 出现大量的隐藏元素，导致代码量冗余
  - 一般用在小网站 

# 媒体查询

```html
    @media 设备类型 and (媒体特性){}
```

- 设备类型
  - all 所有的设备
  - screen 显示器/笔记本/移动端设备
  - print 打印机
- 媒体特性 
  - min-width(比最小值大)/max-width(比最大值小) 
  - **媒体特性的值后面不要加分号**
  - **多个媒体特性之间用and连接**
  - **and两侧必须有空格**

```css
      <style>
        /* @media 设备类型 and 媒体特性{} */
        /* 设备宽度>1000 body显示红色 */ 
        @media screen and (min-width:1000px) {
            body {
                background-color: red;
            }
        }
        /* 设备宽度500-1000 body显示蓝色 */
        
        @media screen and (min-width:500px) and (max-width:999px) {
            body {
                background-color: blue;
            }
        }
        /* 设备宽度<500 body显示粉色 */
        
        @media screen and (max-width: 499px) {
            body {
                background-color: pink;
            }
        }
    </style>
```

# 移动端布局

## meta标签

```html
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no">
```

```
+ 视口 viewport
  - 布局视口：css所作用的区域，默认是980px;
  - 可视视口：所看到的区域
  - 完美视口/理想视口：将布局视口的宽和可视视口的宽设置为一样 width=device-width
+ 参数
  - width = device-width：宽度等于当前设备的宽度
    - initial-scale： 初始的缩放比例（默认设置为1.0）
    - minimum-scale：允许用户缩放到的最小比例（默认设置为1.0）
    - maximum-scale：允许用户缩放到的最大比例（默认设置为1.0）
    - user-scalable：用户是否可以手动缩放（默认设置为no，因为我们不希望用户放大缩小页面）
```

## 设备参数

- 屏幕尺寸：对角线的长度
- 分辨率：宽度或者高度容纳像素的个数
- PPI: 每英寸显示的像素点的个数
- 物理像素: ps量取的值
- 逻辑像素：css设置的值
- **逻辑像素比(dpr) = 物理像素/逻辑像素** 
  **pc端ps量取多少值就设置多少的值，移动端，因为iphone4的出现，出现了视网膜高清屏，1个css像素对应的就不是1个物理像素，物理像素和逻辑像素就产生了不对等的情况**
  - 320设计图 dpr=1   
  - 750/640设计图 dpr=2 
  - 1080/>750 dpr=3

## 单位

- 百分比
- em/rem
  - em: 字体大小参考父元素的字体大小
  - rem: 参考根元素(html)的字体大小   
    1. 一般将根元素的字体大小设置为100px html{font-size:100px}
- vw(设备宽度)/vh(设备高度)     
  1vw = 设备宽度的1%  vh等同
  10vw = 设备宽度的10%  vh等同
  100vw = 设备宽度的100%  vh等同

## 根元素单位转换

- **设计图宽度750/设备宽度 375px**
  1rem = 100px
  100vw = 375px
  1rem = ??vw  **1rem = 26.667vw**
- **设计图宽度640/设备宽度 320px**
  1rem = 100px
  100vw = 320px
  1rem = ?? vw  **1rem = 31.25vw**

## 移动端布局

- 百分比布局(流式布局)
- rem布局(等比缩放布局)
  - 观察设计图大小，确定dpr,在ps图像-》图像大小，修改图像所对应的宽度(根据量取的值/dpr)  
  - 设置HTML标签的font-size:26.667vw或者24.154vw。
    - 100vw = 设备分辨率 ( 设计图 / dpr ) 414
    - 1vw = 414px / 100 = 4.14px
    - 1rem = 100px
    - 100px = 100/1vw(4.14px) = 24.154vw
  - 在设计图里正常测量，测量出来的结果是以px单位结尾的，我们写代码的时候要把这个px换算成rem，此时px和rem的比例就是1rem:100px

```
height:0.9rem;
```

- 混合布局(百分比+rem)   

```
height:0.9rem;
```

- 混合布局(百分比+rem)