前端=>小脑虎

前端开发--CSS基础

快速生成css样式

采用简写的方式即可 w200 tab键 width：200px；lh200 tab键line-height：200px；

## web服务器

免费的远程服务，免费空间 http://free.3v.do/



## css的书写顺序

* 布局定位属性：display/position/float/clear/visibility/overflow（dispaly第一个写）
* 自身相关的属性：width/height/margin/padding/border/background
* 文本属性：color/font/text-decoration/text-aglin/vertical-align/white-space/break-word
* css3其他属性：content/coursor/border-radius/box-shadow/text-shadow/background-linear-gradient...



## css

### 标签属性，有些标签是自带属性的

<标签名 属性名1='属性值'  属性名2='属性值'>标签体标签名>

* 标签的通用属性，即每个标签都会有的属性，通用属性是写在标签里的

  id class style title

* 注意，有些自带属性是不能写在css样式中的，比如a链接的href属性，img的url属性，通用属性等...

* 有些标签会自带一些样式属性，不推荐使用，标签的样式要写在css样式中，这样才能实现结构与样式相分离



### css作用：美化html，给网页布局

	1:选择标签

  2:给标签设置样式



### css引入方式

1：行内样式  标签添加style属性，属性值必须用双引号包围，只作用在当前标签

```<p style="coler:red;font-size:18px;">p>```

2:内嵌样式（内部样式表） head标签内写style标签，作用于整个html页面

3:外链样式 （外部样式表）head标签内写link标签，推荐使用，结构与样式

 将css样式编写在一个外部的css文件中，并通过link便签引入外部样式表

将样式表编写在css样式表中可以使用到浏览器的缓存机制，从而加快网页的加载速度，提高用户体验

在外部样式表中直接书写css样式即可

使用外链样式表的优点是：实现了结构于样式相分离，可作用于多个页面，

总结：行内样式：书写方便，权重高，不符合结构于样式相分离，只能控制一个标签，不推荐使用

			内嵌样式：部分结构与样式相分离，多用于练习时，控制一个页面

			外链样式：需要引入外部样式文件，实现了结构于样式相分离，可作用于多个页面，推荐使用



### css语法格式 

css的主要构成，由选择器以及一条或多条样式声明

```css
选择器{
 属性：属性值；
}

选择器是用来选择页面中指定的元素
花括号内是对该选中元素设置的样式声明
样式声明是一个名值对的结构

格式：样式名:样式值；

样式名和样式值之间以英文：分割
多个样式声明之间以英文；分割

选择器的分类

基础选择器

1：标签选择器，标签名作为选择器，把页面中某一类标签全部选择出来统一设置样式

2: 类选择器，以.类名作为选择器

.类名 {
	属性：属性值
}
<标签名 class='类名'>标签体

哪个标签想要调用类选择器定义的样式需要给标签加上clss属性，属性值是类名，类名是我们自己任意起的
可以一个标签或多个标签设置相同的类名，调用相同的样式
类名的设置
- 使用英文字母设置，不要使用纯数字及中文来定义类名,类名的要以英文字母开头
- 长名称或词组可以使用中横线来设置类名
- 常见的命名规则：。。。
- 标签可以通过class属性设置多个类名，多个类名之间以空格隔开
```
<标签名 class='类名1 类名2'>
```
  多类名的优点是：给标签设置公共样式，独有样式，节省代码且便于统一管理
3：id选择器

给某一个标签设置id属性，属性值就是id名，css中id选择器通过#id名 来定义
```
#id名{
 属性名：属性值 
}
```
id值就像人的身份证一样，id值不能重复

类名像人的姓名一样，人可以重名

4: 通配符选择器，使用*表示，表示页面中所有的标签（元素）
```
*{
属性名：属性值
}
```

元素的关系

父元素：直接包含子元素的元素就是父元素

子元素：直接被父元素包含的就是子元素（亲儿子）

祖先元素：直接或间接包含后代元素的就是祖先元素

一个元素的父元素也是它的祖先元素

后代元素：直接或间接被祖先元素包含的元素就后代元素

子元素也是后代元素

兄弟元素：拥有相同父元素的元素就是兄弟元素

复合选择器的案例格式


    
        我是div标签
        
            我是div中的p元素，我是div的亲儿子
            我div>p标签中的span，我是div的孙子
        
        我div中span标签，我是div的亲儿子

复合选择器

复合选择器就是将两个或多个基础选择器进行一些组合形成的选择器，其优点是可以更高效准确的选择出目标元素

复合选择器的分类

后代选择器（常见）

语法：

元素1 元素2{
	样式声明
}

语义是：将元素1的后代元素，元素2选择出来，给元素2添加样式。

注意：

元素2只要是元素1的后代即可，无如是儿子，孙子，重孙子
元素1，元素2可以是任意的基础选择器

子选择器

作用：选择父元素中直接子元素

语法：

元素1>元素2{
	样式声明
}

语义：将某元素内(最近一级)的子元素选择来，添加样式。（将元素1的亲儿子元素2选择出来）

交集选择器

格式：选择器1选择器2选择器3{

}

div.class-name{
 color:red;
}

作用：选中同时符合多个条件的元素

交集选择器中如果有元素选择器，要以元素选择器开头

并集选择器（常见）

所用：并集选择器是将多组符合条件的标签都选择出来，给他们添加共同样式集体声明

语法：

元素1,元素2{
	样式声明
}
语义：给元素1和元素2添加样式，,相当于和的意思
  
例子：
p,
div,
ul li{
	color:red;
}

注意：并集选择器要竖着写，选择器之间使用英文逗号,分隔，且最后一个选择器后没有,

属性选择器

属性选择器格式

[属性名]{}   选择含有指定属性的元素，不论属性值是什么
[属性名="属性值"]{}  选择含有指定属性和属性值的元素，属性名和属性值必须都符合
[属性名^="属性值"]{} 选择含有指定属性并且属性值要以指定的值开头 的元素
[属性名$="属性值"]{} 选择含有指定属性并且属性值要以指定的值结尾 的元素 
[属性名*="属性值"]{} 选择含有指定属性并且属性值中只要包含指定的值即可 的元素

伪类选择器（常见）

伪类（不存在的类，特殊的类），伪类用来描述一个元素的特殊状态，比如：第一个字元素，被点击的元素，鼠标移入的元素…
伪类的写法最大特点是用冒号（:）表示

伪类的分类https://www.imooc.com/article/2799 https://www.cnblogs.com/1463069300limingzhi/p/11361709.html

1:ui伪类：作用是给某些标签的不同状态添加特殊效果

ui伪类又分为了：静态伪类和动态伪类
- 静态伪类，这两种伪类只能用于超链接
  - ：link a:link选择被没有访问的超链接（正常的链接）
- ：visited a a:visited选择被访问之后超链接
  
  为了保护用户隐私。一般超链接的：visited伪类一般只修改字体颜色
动态伪类，针对所有标签都是可用的
- ：hover a:hover鼠标放在标签上悬停
- ：active a:active激活的意思，选择标签被鼠标正在点击但是未弹起的状态
- ：focus input:focus这个选择器主要用于获得焦点的表单元素。
  
  焦点就是光标 input:focus
**注意点：**a链接有4种伪类即又加作链接伪类：link :visited :hover :active ,这4种伪类必须按照lvha的顺序写，否则会失效，即love hate爱恨原则，先爱后恨

因为a链接有默认样式，所以在工作中我经常给链接指定样式

2：结构化伪类

:first-child 伪类与指定的元素匹配：

选取父元素中的第一个子元素，被选出来的元素是一组兄弟元素中的第一个
： last-child
选取父元素中的最后一个子元素，即被选出来的元素是一组兄弟元素的最后一个元素
:nth-child(n)

选中第n个子元素

特殊值：n 第n个 n的范围是0到正无穷

2n 或even 选中偶数位的元素

2n+1 或 odd 选择奇数位的元素

3n的倍数

-n+3 前3个元素，从第一个到3元素

n+3 从3开始到后面的元素

是根据所有的子元素进行排序
- :first-of-type
- :last-of-type
- :nth-of-type
  
  这个伪类和nth-child组的伪类作用相似，只不过是它是在同类型的元素中进行排序
- :not() 否定伪类
  
  将符合条件的元素从选择器中去除

（结构化伪类先不讲，可以等css3再讲）

等其他选择器

css的三大特性

继承性

后代元素可以继承祖先元素的一些样式

可继承的样式一般是和文字有关的样式：text-开头的样式 font-开头的样式 line-开头的样式以及color

不可以继承的样式：背景相关的，布局相关的样式 …

优点：我们可以一些标签都有的样式统一设置到它们共同的祖先元素上，这样只需要设置一次就可以让所有的后代元素具有该共同的样式

常见的使用方式：在body标签设置页面整体的字体样式等

**注意：**行高的继承性

行高可以跟单位也可以不写单位
如果子元素没有写行高则会继承父元素行高，如果继承来的行高没有单位（1.5）则行高是相对于当前子元素字体大小*行高
行高不写单位的写法的优点是子元素可以更具自身的字体大小计算行高

			我脑子不好使
	样式：body{	font:14px/1.5 "微软雅黑"；}p{	font-size:16px;}div和p都会继承body的字体大小和行高，但是p字体又重新赋值了，所以div最后的font-size是14px p的字体大小是16px ；div的行高是14*1.5；p的行高是16*1.5

优先级

当作用在一个元素上的样式发生冲突时应用哪个样式，由选择器的权重（优先级）决定

选择器的优先级：
- 继承的样式：没有优先级
- 通配符选择器权重：0,0,0,0
- 标签选择器权重：0,0,0,1
- 类和伪类选择器权重是：0,0,1,0
- id选择器权重是：0,1,0,0
- 行内样式权重是：1,0,0,0
- ！important权重：无穷大
  
  在一个样式后面添加!important ,此时此时该样式会获得最高的优先级，但是要慎用，因为后期不好修改，通过js也不好修改
复合选择器在比较优先级时，需要将选择器的优先级相加，谁的优先级高就显示谁声明的样式

例如： .classname p选择器的权重是10+1=11
并集选择器（分组选择器）的权重是单独计算的 div,.class-name,#aa{}
选择器的累加不会超过其最大数量级，比如。再多的类选择器累加其权重也不会超过一个id选择器
选择器权重相同按就近原则，权重不同按权重高的样式

案例可以讲一下继承的样式和通配符权重

层叠性

样式的冲突：当我们通过不同的选择器，选中相同的元素，并且为相同的样式设置了不同的样式值
- 给一个元素通过相同的选择器（优先级相同）设置了相同的样式造成样式冲突，后面设置的样式会覆盖前的样式（遵循就近原则）
- 由选择器的优先级决定起作用样式，优先级高的起作用
- 选择器的权重(优先级)相同，遵循就近原则，后面设置的样式会覆盖前面设置的样式（css层叠）
样式没有冲突，则都会作用在元素上

css中的长度单位

像素

像素其实就是屏幕上一个个小的方形的发光点，这次小方格的位置和颜色就决定了屏幕中显示的图像的样子

像素是是整个图像中最小的单位，单位是px

屏幕分辨率是指在屏幕横向和纵向的像素个数，分辨率1920*1080，就是指在水平方向像素是1920个，垂直方向像素个数是1080个
对相同尺寸的屏幕而言，屏幕分辨率越低时（640*480），在屏幕上的像素就越少，单个像素的尺寸就越大，屏幕分辨率高时（1600 * 1200），在屏幕上的像素点就越多，屏幕显示的效果就越清晰，单个像素的尺寸就越小，所以同样的200px在不同的设备上显示的图像尺寸是不一样。（所以有些高清设备会对像显示的像素做一些加倍的处理。）

移动端时讲

像素：

屏幕是由一个个的发光小点构成，这一个个的小点就是像素

在前段开发中像素分为两种情况讨论，css像素和物理像素

物理像素就是屏幕上的小发光点，是真实存在的，是厂商的出场设备的时候就设置好的比如iphone6/7/8的是750*1334

css像素，就是我们css中写的多少像素 10px

浏览器在显示网页时是将css像素转换为物理像素然后再呈现的的

一个css像素最终由几个物理像素显示，由浏览器决定，默认情况下pc端的一个css像素对应一个物理像素，但是移动端设备就不尽相同了，1px的css像素和其能显示的物理像素的个数的比值，称为物理像素比或者屏幕像素比

视口：

视口就是屏幕中用来显示网页的区域，就是浏览器的窗口，视口的大小随着浏览器的拖拽可以改变，我们的网页就是在视口显示的

可以通过查看视口的大小，来观察css像素和物理像素的比值。（方法是：将浏览器全屏显示，没有滚动条的情况下，html标签在盒模型中widht就是视口的大小）看视口一般只看宽度不看高度，因为网页的高度是不固定的

在默认情况下（浏览器没有进行缩放的情况下）：

视口宽度 1920px（css像素）1920（物理像素）此时css像素和物理像素的比例是1:1

就浏览器放大两倍的情况下放大的原理是将以前的一个css像素变为2个css像素

视口的宽度 960（css像素）1920（物理像素，即屏幕上的小发光点的个数是不会改变的）此时css和物理像素的比是1:2

我们可以通过改变视口的大小，来改变css像素和物理像素的比值

在不同的屏幕下，单位像素的大小是不同的，像素越小屏幕越清晰

智能手机的像素点远远小于计算机的像素点

问题：一个宽度为900px的网页在

默认情况下，移动端的网页都会将视口设置为980像素（css像素）以确保pc端的网页可以在移动端正常访问，但是如过网页宽度超过了980px

移动端的浏览器会自动对网页缩放以完整显示网页

移动端默认的视口大小为980px（css像素）

默认情况下，移动端的像素比就是 980/移动端的宽度

编写移动端页面的时候，必须要确保一个比较合理的像素比

1css像素对应 2个物理像素 1css像素对应 3个物理像素

每一款移动设备设计时，都会有一个最佳的像素比，一般我们只需要将像素比设置为最佳像素比，就可以得到一个最佳的效果，将像素比设置为最佳像素比的视口大小我们称其为完美视口

百分比

将样式的属性值设置为相对于父元素属性的百分比

有点是：子元素可以随着父元素的改变而改变

em

em是相对于元素自身的字体大小（font-size）来计算的

元素自身没有设置font-size的话，会继承父元素的font-size

1em=1font-size

em会随着字体的大小改变而改变

div{
font-size:30px;
width:10em;  //300px
height:20em; //600px
}

rem

rem是相对于跟元素的字体大小来计算的

根元素是html标签

fonts字体属性

font-family属性

作用：推荐文本使用的字体系列(字体的格式)

语法：

body{
	font-family:"微软雅黑"；
}
p{
	font-family:Arialy,'Micosoft yahei','微软雅黑'；
}

注意点：

可以设置多个字体，多字体之间要使用英文逗号分隔开，浏览器会依此查找推荐的字体在用户的电脑中有没有，有就优先使用，没有就查找下一个，最后一个字体是保底的
尽量使用系统默认的字体，以确保用户的浏览器都可以正常显示
如果字体是由有空格隔开的多个单词的组成的字体，字体要加引号

在windows系统中字体文件夹: C:/Windows/Fonts

font-face可以将服务器中的字体直接提供给用户去使用，用户会将字体下载到自己的电脑中

@font-face {
   指定字体的名字
  font-family: "字体名字";
   字体文件包含在您的服务器上的某个地方，
  src: url(字体文件包在服务器上的地址);
    如果字体文件是在不同的位置，请使用完整的URL：
  src: url('http://www.w3cschool.css/css3/Sansation_Light.ttf')  
}

src定义字体下载的网址
这种自定义字体的方式的问题
下载速度的问题，第一次没有加载出来，会先显示默认字体然后再变为指定的字体
版权的问题，因为在font-family中声明的字体是推荐用户使用，如果用户电脑上有就用，没有就不用，但是这种方式是给直接提供了字体，所以可能会涉及版权的问题

font-size

作用：定义字体的大小

字体框就是字体所在的框子，设置font-size实际就是设置字体框的大小
px（像素）是网页常用的单位
每个浏览器的默认字体大小是不一致的，我们尽量明确指定字体大小值，chrome浏览器默认文字的大小是16px
可以在body标签中指定页面文字的统一字体大小，但是h系标签需要单独指定字体大小

font-weight

作用：字重，设置字体的粗细效果
font-weight取值：

normal：默认值，正常字体不加粗，相当于400

blod：粗体，相当于数字700

bloder：特粗体

lighter：细体

数字：100至900（没什么用）

font-weight其实就是看用户的电脑中，有没有相对应的字体组的粗细版本，比如说，100字重的微软雅黑，200字重的微软雅黑，300字重的微软雅黑…一般用户的电脑上不会有这么多的字重版本，所以，有时设置font-weight没有效果

font-style

作用：设置文本的风格，倾斜

取值：normal 常用来给em，i标签改为不倾斜

italic：设置为斜体

font组合属性

设置字体相关的所有属性

font:font-style font-weight font-size/line-height font-family; 各属性之间使用空格分开
font属性是组合属性，是有严格的顺序的，不能颠倒顺序。font-size和font-family不能省略且必须是后两位，且必须同时出现，其他的属性省略的话有采用默认的样式，默认属性值会覆盖之前的设置的属性值，比如说行高如果不写会采用其默认值

body{
	font:font-style font-weight font-size/line-height font-family
}

文本属性

用来定义文本的外观，比如文本的颜色，对齐方式，装饰文本，文本缩进，行间距等

(color，text-diraction，text-align，line-height)

color：文本的颜色

网页中常见的颜色取值方式：预定义颜色（颜色的名称），16进制（#fff），rgb（255,255,255）

rgb是根据三种颜色的不同浓度调配出来的颜色

格式：rgb(red,green,blue)

red green blue 这个是光的三原色，绘画的三原色是红黄蓝

red 代表颜色中红色成分取值范围0-255或者（0%-100%）

green 代表颜色中绿色成分取值范围0-255或者（0%-100%）

blue 代表颜色中蓝色成分取值范围0-255或者（0%-100%）

注意：当三种颜色值都为0时是黑色，当三种颜色值都是255或100%时是白色

rgba(red, green,blue,alpha)
rgba(red,green,blue,alpha) 就是在rgb的基础上增加了通明度

alpha表示不透明度，取值是0(完全透明)-1(完全不透明) 0.5半透明
十六进制的rgb值
- 十六进制是计算机中常用的计数方式。他的规则是逢十六进一
  
  123456789ABCDEF 用英文字母A到F表示10进制中的10到15
  
  如果计数到15时需要再加1，就进位
  
  js中十六进制数的表示方式为0x开头
- 在css中使用十六进制的rgb值
  
  语法：#红色绿色蓝色
  
  颜色的浓度通过 00-ff。比如：#ff0000
  
  如果颜色两位重复可以只写一个 #f00

HSL值 HSLA值（可以不讲）
- H 色相（0-360）工业设计中常用色相
- S 饱和度，颜色的浓度 0%–100%
- L亮度，颜色的亮度 0%-100%

text-align

作用：设置元素内文本的水平对齐方式

取值：left/right/center/justify （两端对齐）

父元素添加text-align：center，可以使内部的行内元素和行内块元素水平居中

text-decoration 装饰文本

作用：给文本添加上划线，下划线，删除线

取值：none 默认，没有装饰线 ,给a链接删除默认的下划线

underline 下划线

overline 上划线（几乎不用）

line-through 删除线

text-decoration:underline red dotted;  //后面的值可以指定装饰线的颜色和装饰线的样式，但是有浏览器的兼容问题，chrom浏览器支持，ie浏览器不支持

text-indent 文本首行缩进属性

作用：指定文本的第一行的缩进一个给定的长度，这个长度也可以设置负值。（通常是段落首行缩进。）

p{
	text-index:2em;//缩进两个字体大小
	或
	text-index:20px;
}

em是一个相对单位，是相对于当前需缩进文字的字体大小而言的（字体大小是通过font-size设置的），如果当前文字没有设置大小，则相对于父元素的文字大小进行缩进

line-height 行高属性

行高是文字在页面中占有的实际高度，通过line-height属性来控制行高即而控制了文字行与行之间的间距。
行高组成：文字本身的高度加上上空隙和下空隙，文字的行间距=行高-字体大小
行高可以直接指定一个带单位大小，如果 10px 10em rem 长度单位在此之前讲

也可以为行高设置一个数值（不带单位），行高会是字体大小的指定倍数

line-height省略不写的话会采用默认值 1.3333333…

行高等于高度可以控制单行文字行内元素行内块元素垂直方向居中，多行文字则不行

单行文字垂直居中的原理：设置行高等于盒子的height，行高的上空隙和下空系把文字挤到中间，如果行高小于盒子高度文字会偏上，如果行高大于盒子高度文字会偏下

white-space

作用：设置网页如何处理空白（如何换行）

取值：normal 正常显示

nowrap 不换行

pre 保留，在默认情况下网页会把多个空格和换行解析成一个空格，pre会以预处理的格式会保留所有的空白（空格和换行），代码写成什么样就显示什么样

常有的方式是对溢出的内容显示省略号

div{
		width:300px;   定宽
		white-space:nowrap;   不换行
		over-flow:hidden;  溢出的显示隐藏
		text-overflow:ellipsls;  溢出的文字显示省略号	
}

单行显示省略号，这几个属性缺一不可

多行显示省略号：

设置宽度
text-overflow: ellipsis;
display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
-webkit-line-clamp: 3; /** 显示的行数 **/
overflow: hidden;  /** 隐藏超出的内容 **/

over-flow

作用：规定元素内容溢出元素框时发生的事情

取值：visible 默认值不剪切内容，无滚动条

hidden 将溢出的内容隐藏掉，内容实际依旧存在结构中，只是隐藏掉了

scroll 无论内容是否溢出，显示水平和垂直方向两个滚动条

auto 根据内容来决得是否显示滚动条及显示哪个方向的滚动条

overflow-x 属性

overflow-y 属性

over-flow只作用在定高的块状元素上

css的background属性

作用：通过css的背景属性给元素添加背景样式，如背景颜色，背景图片，背景平铺，背景图片位置，背景图像的固定

background-color：

默认值是transparent（透明）
设置背景颜色
- 预定义颜色
- 16进制（#fff）
- rgb
- rgba 设置背景颜色半透明，a是值alpha透明度取值是0到1，1是不透明(有兼容性问题但一般不考虑)

background-image

作用：给元素设置背景图片，多用于设置logo，一些小图片，超大的图片

优点：便于控制背景图片的位置（精灵图）

取值：none（默认）｜url

background-image:url(图片地址);
图片地址可以加引号也可以不加引号，加引号可以避免一些特殊符号引起的问题，所以推荐加引号

注意：

元素可以同时添加背景颜色和背景图片，只不过背景图片会压住背景颜色，背影颜色会成为背景图片的背景色
如果背景图片小于元素，则背景图片会自动在元素之中平铺，将元素铺满
如果背景图片大于元素，则背景图片会有一部分无法完全显示
如果背景图片和元素一样大，则会正常显示

background-repeat 背景平铺

作用：用来设置背景图片的平铺方式

取值：repeat 默认值在水平方向和垂直方向双向平铺

no-repeat 不平铺

repeat-x 水平平铺

repeat-y 纵向平铺

background-positon 背景图片的位置

background-positon：x y；

x坐标 y坐标，可以使用方位名词或精确单位

方位名词：top center bottom left center right；
- 两个值都是方位名词：没有顺序之分即background-position：center right和right center是等效的
通过方位名词是可以区分出是水平方向还是垂直方向的
- 如果只指定一个方位名词，另一个省略的方位名词默认是center
  
  方位名词的方式像是一个九宫格，案例展示，画九宫格
通过偏移量来指定背景图片的位置

百分数或数字和单位标识符组成的长度值（10px）
- 如果参数是精确单位则两个值的顺序是固定的，即第一个是x轴，第二个是y轴
- 如果只设置一个数值，则该数值是x轴，另一个默认是center
```
background-position:-50px 300px;
```
注意：background-position取值为百分比的时候，正值是向左走，负值是向右走
参数是混合单位 (可以不讲)

方位名词和精确单位混合使用，则第一个是x轴，第二个是y轴

**案例：**雪碧图··

background-size 背景图片的大小

取值：

宽度值高度值；第一个是宽度第二个是高度。 background-size:100px 200px

可以采用精确数字加单位，也可以采用百分百，百分比是计算相对于背景定位区域的百分比

若写一个数字的话，则默认是宽度，第二个默认是auto（自动）
cover 是将背景图片按照图片比例进行缩放，只到可以将背景定位区域全部覆盖的最小尺寸（图片比例不变，将元素铺满）
contain（包含）是将背景图片按照图片比例进行缩放，直到背景图片可以在背景定位区域完全展示的最大尺寸(图片比例不变，图片在元素中完整显示)

精确的尺寸，一般是数字加单位

background-attachment 背景图片附着（固定）了解

作用：设置背景图片是否跟随元素移动

background-attachment：取值

scroll 背景跟随元素滚动

fixed 背景图片固定在页面中，不会随元素移动，此时再定位（background-position）就是相对于整个浏览器窗口定位（设置偏移量）

案例：https://im.qq.com

background-clip

作用：设置背景的范围。clip修剪

取值：border-box 默认值，背景会出现在边框的下面

paddding-box 背景不会出现在border下面，只会出现在内容区和内边距

content-box 背景只会出现在内容区

（有一点点的兼容性问题，可以忽略不计，ie浏览器的ie8不支持）

background-origin

作用：背景图片偏移量开始计算的原点。（注意是背景图片，不是背景颜色）

取值：padding-box 默认值，background-position从元素的的左上角内边距处开始计算

content-box 背景图片的偏移量从元素的左上角内容区处开始计算

border-box 背景图片的偏移量从元素的左上角边框处开始计算

background复合写法

所有背景相关的样式都可以通过该属性设置

样式书写没有固定顺序，但一般习惯顺序是：背景的颜色图片地址平铺滚动位置

bg-color bg-image bg-repeat bg-position/bg-size bg-attachment background-origin background-clip

background:red url() no-reapt fixed right top;

注意点

样式没有顺序之分，但是background-size必须再background- position的后面，且用/隔开（即bg-position/bg-size）
bg-orign和bg-clip的取值相同但是表示的含义不同，为了区分开，这两个样式书写顺序得是bg-origin要在bg-clip的前面

图片属于网页中的外部资源，外部资源都需要浏览器单独发送请求加载

浏览器加载图片时是按需加载，即需要的时候再加载，不需要9⃣️先不加载

:line :hover :active伪类中添加的背景图片是在指定状态出发时才会加载，第一次在没有缓存的情况下会有空白间隙

css渐变

作用：可以让两个或多个指定的颜色之间显示平稳的过渡

css有来两种渐变 - 线性渐变 line-gradient -颈向渐变 radial -gradient

background-image：line-gradient（方向，颜色1，颜色2…）

background-image：line-gradient（颜色1，颜色2…）方向默认是从上到下

background-image：line-gradient（to right，颜色1，颜色2…）从左到下右

background-image：line-gradient（to bottom right，颜色1，颜色2…）从左上角到下右下角

css盒模型

css将所有的页面元素设计为了一个个矩形的盒子，页面布局实际上就是在页面上摆放这一个个的盒子（看其他网站比划出一个个盒子）

看礼盒的图片

html页面中的元素本质就是一个的矩形盒子，用来封装周围的html元素，它包括实际内容填充边框边距

看盒模型图片：标准盒模型

Content 盒模型的实际内容

元素的内容区域使用width和height设置的，元素的子元素文本等内容都在内容区中排列

border 边框

作用：border可以定义元素的边框，边框就是盒子的边缘，边框里面属于盒子内部，边框外面属于盒子的外部
设置border要通过三个样式设置
- Border-width:设置边框的宽度，单位一般都是px
  - border-width 有默认值，默认值是3px，所以border-width可以不写，不设置时采用默认值
  - border-width取值方式：
    - 四个值：上右下左
      
      三个值：上左右下
      
      二个值：上下左右
      
      一个值：设置四个方向的值相同
  - 只设置一个方向的宽度
    
    border-top-width border-right-width border-bottom-width border-left-width
- border-style：设置边框的样式
  
  取值方式同上border-widht和border-color一样
  
  可去的值有：solid 实线边框
  
  dashed 虚线边框
  
  dotted 点线边框
  
  double 双线
- border-color：设置边框的颜色
  
  同样可以分别指定四个方向的边框颜色，取值方式和border-width一样
  
  四个值 border：red green blue yellow；
  
  三个值
  
  二个值
  
  一个值
  - 只设置一个方向的颜色
    
    border-top-style border-right-style border-bottom-style border-left-style
  - boder-color也可以省略不写，采用默认值为黑色
    
    默认颜色是透明 tansparent？？？
- border简写属性，所有边框相关的样式都可以通过该样式设置，没有固定顺序
  
  border：border-width border-style border-color; 这种方式是设置了四个方向的边框是一样
  
  borer：1px solid red；
  
  还可以单独设置一个方向的边框样式：
  
  border-top border-right border-bottom border-left
  
  borer-top：1px solid red；
注意：在标准盒模型中boder会加大盒子的宽高

案例：css三角形

div {
  width: 0px;
  height: 0px;
  border-top: 150px solid red;
  border-right: 100px solid blue;
  border-left: 100px solid yellow;
  border-bottom: 100px solid green;
}

表格的细线边框

border-spacing：0px；这个属性设置单元格的外边距

border-collapse：collapse； collapse：折叠设置表格的边框合并成一个边框

设置了border-collapse：collapse后border-spacing将不在起作用

table{
  width:500px;
  height:500px;  表格可以不设置宽高由内容撑开尺寸
  border:1px solid  red;
  border-spacing:0px; 
  border-collapse:collapse;
}
td{
	border:1px solid  red;
}

padding 内边距填充

padding设置元素的内边距，即盒子的边框和内容之间的距离（填充）

可以单独设置： padding-top 上内边距 padding- right 右内边距 padding-bottom 下内边距 * padding-left 左内边距

可以简写，使用padding属性设置：（用法和border-width一样有四种取值方式）

4个值padding：3px 2px 8px 8px; 上右下左

1个值padding：3px; 四个方向的内边距值一样时的写法

2个值padding：3px 2px；第一个值表示上下内边距是3px 第二个值表示左右内边距是2px

3个值padding：3px 2px 3px；第一个值表示上内边距是3px 第二个值表示左右内边距是2px 第三个值表示下内边距是3px

padding取值：length｜百分比

百分比是按照父元素的宽度的百分比，无论父元素有没有设置padding值，子元素的padding采用百分比都是相对于父元素宽度width来计算的padding值

注意：

在标准盒子模型中如果盒子已经设定了宽高，padding会加大盒子的尺寸，背景颜色会延伸到内边距
如果元素没有指定宽高属性，则此时padding不会撑开盒子所以说当元素和父元素是一样宽时不用给子元素设置宽度值了，它会自己默认时父元素的100%

注意：一个盒子可见框的大小由内容，内边距，边框相加决定

margin外边距

margin设置元素与其他元素之间的间距

外边距不会影响盒子可见框的大小，但是外边距会影响盒子的位置

有四个方向的取值，可取的值：length｜百分比|auto

margin-top 上边距，设置正值，盒子会向下移动，设置负值盒子会向上移动

margin-right 默认情况下margin-right不会产生任何效果

margin-bottom 设置正值会使其下面的元素向下移动，设置负值会使下面的元素向上移动

margin-left。左边距设置正值元素会向右移动，设置负值元素会向左移动
margin的简写属性，可以同时设置四个方向上的margin，用法和padding和border-width一样

百分比是按照父元素的宽度的百分比，无论父元素有没有设置margin值，子元素的margin采用百分比都是相对于父元素宽度width来计算的margin值

auto是由浏览器自动计算的值

margin会影响盒子实际的占用空间

元素在水平方向上的布局

元素在器父元素中水平方向的位置由以下几个属性共同决定，且必须满足这个等式

margin-left + border-left + padding-left + contern + padding-right + border-right + margin-right=其父元素的内容区的宽度

这七个值中，有三个值可以设置为auto； width margin-left margin-right

原则是：如果这三个值中某个值设置为auto，则会自动调整为auto的那个值是以使等式成立

如果将一个宽度和一个外边距设置为auto，则宽度会调到最大，设置为auto的那个外边距会自动为0
- 如果将三个值都设置为auto，则宽度最大，外边距都是0
- 如果将两个外边距设置为auto，宽度固定值，则会将两遍的外边距设置为相同的值，所以利用这个特点使定宽的块状元素水平居中
  
  注意：1:巧用外边距使定宽块级元素水平居中，必须是设置了宽度的块级元素

方法：盒子左右边距都设置为auto；

margin：0 auto;
margin：auto auto；
margin：10px auto；

margin-left：auto；
margin-right：auto；

2:行内元素，行内块元素水平居中是给父元素设置：text-align：center；

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-RfzV1IdT-1658490110152)(/Users/wei/Desktop/markdown/css备课/WechatIMG46.jpeg)]

外边距合并（边距重叠）

外边距合并指的是相邻的垂直方向的外边距会发生重叠的现象
- 兄弟元素
  
  当两个兄弟元素之间的相邻垂直外边距相遇时会合并为一个外边距，取两者之间的较大值（两者都是正值）
  - 特殊情况
    
    如果相邻的外边距一正一负，取两者之和
    
    如果相邻的外边距都是负值，则取两者中的绝对值较大的那一个的值
```
两个普通的元素margin如果都是正值，合并后的实际边距取他们之间的最大值。？如果有负值则就把两个margin值相加
```
只有标准流中块状元素才会发生垂直外边距合并的问题，行内块元素，浮动元素，绝对定位元素之间的外边距不会发生合并

解决方法：1给{第二个}盒子浮动,2给第二个盒子绝对定位3给任意一个盒子加display:inline-block;

（但是这种兄弟之间相邻的垂直外边距合并的现象是有利于开发的（防止元素之间间距太大），可以不解决）
- 父子元素
  
  对两个嵌套关系的块级元素，第一个字元素的margin回传给父元素
  
  即第一个子元素的margin会顶开父元素与父元素相邻元素的间距，或者父元素和子元素都有margin值，margin会重叠为一个margin值，谁大显示谁
```
html：
<div class="top">div>
<div class="middle">
  <div class="firstChild">我其实只是想和我的父元素隔开点距离。div>
  <div class="secondChild">div>
div>
css：
.top{width:160px; height:50px; background:#ccf;}
.middle{width:160px; background:#cfc;}
.middle .firstChild{margin-top:20px;}
```
  （这种父子元素的相邻的垂直外边距重叠问题会影响页面布局，必须解决）
  
  解决方法：1:给父元素设置上边框即border-top 但是注意这种方式会影响父元素的尺寸
  
  2:给父元素设置上内边距 padding-top 但是注意这种方式会影响父元素的尺寸
  
  3:给父元素设置overflow：hidden；
  
  还有其他的解决方法，浮动，固定，绝对定位的元素不会有塌陷问题（后讲）

行内元素的盒模型

行内元素不支持直接设置宽高属性
行内元素可以设置padding，但是垂直方向padding不会影响页面的布局（行内元素会变大但是在垂直方向不会挤开其他元素）
行内元素可以设置border，垂直方向border不会影响页面的布局
行内元素可以设置margin，垂直方向margin不会影响页面布局

默认样式

通常情况下，浏览器会为元素设置默认样式，但是不同的浏览器设置的默认样式会有些不同

默认样式会影响我们的页面布局，所以在编写网页之前要清楚一下或者统一一下默认样式（特别是pc端）

页面中很多元素都有默认的内外边距，页面样式初始化，清除内外边距

*{
	margin:0;
	padding:0;
}
ul{
	list-style:none;
}

推荐用于清除修改默认样式的css文件：normalize.css

css3新增属性：border-radius box-shadow text-shadow

box-sizing

默认情况下盒子可见区域的大小内容，内边距和边框共同决定

box-sizing用来设置盒子尺寸的计算方式，用来设置width和height的作用，

取值：content-box 默认值，width和height用来表示内容区

border-box width和height表示盒子可见框的尺寸，即包含内容，内边距和边框，定了可见框的总尺寸后再设置border和内边距会调整（减小）内容区的尺寸，我们不用再单独计算content的尺寸了

outline 轮廓线

作用：设置元素的轮廓线,用法和border一样 outline:1px solid red;

不同的是，border会影响盒子可见框的尺寸，outline不会影响盒子可见框的尺寸，对页面布局没有影响

圆角边框 border-radius

作用：设置元素边框为圆角 radius（半径）
原理：圆形和元素边框的交集形成的圆角效果（原理展示）

取值：精确数值加单位 20px ｜百分比
单独设置一个角的：

border-top-left-radius ：水平方向圆角的半径垂直方向圆角的半径；

border-top-left-radius ：50px 60px； 两个值不一样是椭圆，两个值一样是正圆可以简写只写一个值

border-top-right-radius

border- bottom-right-radius

border-bottom-left-radius
border-radius是一个简写属性可以分别设置4个值

border-radius：左上角右上角右下角左下角；

border-radius：左上角右上角和左下角右下角；

border-radius：左上角和右下角右上角和左下角；对角

border-radius：四个角一样；
```
border-radius:10px 20px 30px 40px;
border-radius:10px;
```
以上是设置了正圆相切

还可以设置椭圆形的圆角

border-radius:10px 20px 30px 40px/20px 30px 40px 50px；

/前的四个值是圆角的水平半径，/后的值是圆角的垂直半径

常见的使用：

将元素设置为正圆：元素的宽高值一样（正方系），border-radius设置为宽高值的一半或50%

圆角矩形：border-radius设置为矩形短边的一半

box-shadow 盒子阴影

box-shadow：阴影的水平偏移量垂直偏移量模糊距离阴影尺寸阴影颜色将外部阴影改为内部阴影；

默认情况下阴影在元素的正下方和元素大小一样，所以看不到
水平和垂直方向的阴影便宜量这两个值是必须的
默认的阴影是outset（外阴影）但是不能写这个值，否则阴影无效。设置为外阴影时直接省略即可

Inset是设置阴影为内阴影

.shadow-show{
  width:400px;
  height:200px;
  background:red;
  box-shadow: 20px 20px 10px 10px;
}

"shadow-show">

案例演示：在浏览器控制台调试看效果

**注意：**盒子的阴影不占据位置，不会对其他元素产生影响，不会影响页面布局

Text-shadow 文字阴影

作用：为文本设置颜色

text-shadow：水平阴影位置垂直阴影位置模糊距离阴影颜色；

其中水平阴影和垂直阴影位置是必须的，不可以省略

文档流

网页是一个多层结构，一层摞着一层，css可以分别为每一层设置样式，用户只能看见最上面一层的，这些层中，最底下的一层被称为文档流，文档流是网页的基础。我们所创建的元素默认是在文档流中排列的。

对于我们元素而言有两个状态在文档流中和不在文档流中（即脱离文档流）

元素在文档流中的特点：块状元素和行内元素的特点

块级元素在标准流中：独占一行，宽度默认是父元素的100%，可以直接设置宽高，从在垂直方向上上向下依次排列

行内元素在标准流中的特点:可以和其他元素在一行显示，从左向右依次排列，一行放不下另起一行

float浮动

浮动最初产生的目的是实现文字环绕。

在我们实际开发中为什么需要浮动：块级元素在正常的文档流中是由上至下依次排列的，但有时我们想要块级元素进行左右排列，虽然将元素转化为行内块元素可以使元素在一行展示但是行内块元素之间有缝隙不好控制，所以需要使用浮动
作用：float属性可以使元素在其父元素内左右移动，来达到使页面元素水平排列的页面的布局
float取值：none 不浮动

left 左浮动

right 右浮动

div {
	float:left
}

注意：
- 浮动元素会脱离文档流，漂浮在文档流之上，和文档流不在一个层级。浮动元素原来占据文档流中位置的位置就空了出来，其后面的在文档流中的元素会自动顶替他原来在文档流中的位置。而此时浮动了的元素漂浮在文档流之上会所以会遮挡文档流中的一些元素（浮动的原理）
- 一个元素浮动会尽量在其父元素中的向左或向右浮动，默认不会从父元素中移出（直到它的外边缘碰到包含框或另一个浮动框的包含框为止）
- 如果在一行中放不下浮动元素了，那么浮动元素会自动转到下一行
- 右浮动会颠倒盒子的位置
- 浮动元素只会影响后面的标准流不会影响前面的标准流，即如果浮动元素上面是一个没有浮动块元素，则浮动元素不会上移
- 浮动元素不会超过它前面的浮动的兄弟元素，最多就是和他一样高
- 浮动元素脱离文档流后会压住下一块元素，但不会压住其内的文字和img图片，因为浮动产生的原就是实现文字环绕的效果

脱离文档流的元素特点

任何元素都可以浮动，不管其原来是什么显示模式，浮动后的元素就具有类似行内块元素的特点

1:块级元素不再独占一行

块状元素在文档流时如果没有设置宽度，宽度默认是父元素的100%；但是脱离文档流后它的宽高由内容撑开，如果块级元素设置了宽度，脱7来离文档流后宽度不会改变

2:行内元素设置脱离文档后，可以直接设置宽高，无需转换显示模式

3:浮动后的元素是紧挨着的中间没有间隙

脱离文档后不用再区分块状元素和行内块元素了

高度塌陷

块级元素在不指定高度时，其高度是靠内容撑开的，当其子元素设置了浮动后就会脱离文档流，脱离文档流后将无法撑起父元素的高度，导致父元素的高度塌陷，父元素的高度塌陷后会影响和父元素同在标准流中其他元素，导致页面布局混乱，所以这个问题必须要解决

BFC（block Fomatting Context）块级格式化环境

bfc是css中一个独立的渲染区域独立的布局区域，属于标准流，（bfc是一个隐含的属性）不能直接开启，要通过其他属性开启，开启bfc后该元素会变成一个独立的布局区域，它有自己的布局规则，bfc里面的子元素不会影响外面的元素，外面的元素也不会影响bfc里面元素。

元素开启bfc后的特点：

bfc内的块级元素会在垂直方向依次排列
元素的margin-left与其包含块的border-left相接触
bfc内块级元素的垂直方向的距离由margin决定，属于同一个bfc的相邻的兄弟元素的外边距相遇会发生合并

开启bfc的元素不会被浮动元素所覆盖（外界不会影响bfc）
开启bfc的元素内的第一个子元素和父元素（开启了bfc）外边距不会重叠(子元素的外边距不会冲出父元素，不会bfc外界产生影响)
开启bfc的元素可以包含浮动的子元素，即计算bfc的高度时候浮动元素也参与计算，不会因浮动造成高度塌陷，即清除了浮动的影响

开启bfc的方式：因为bfc要通过其他属性间接开启，会有一些副作用

根元素有的地方说跟元素是html，有的说是body

给元素设置浮动即 float值非none ；开启bfc的副作用浮动元素脱离文档流，会影响页面布局
将元素转换为行内块元素 dispaly：inline-block或dispaly：flex等；副作用：设置元素为inline-block的宽度会变化为靠内容撑开
给元素的设置overflow属性，属性值不是visited（hideen，scroll，auto）

常使用overflow：hidden，开启bfc可以使其包含浮动的元素；副作用相对较少

绝对定位元素，position的值为absolute，fixed；即position的值不是static或者relative；副作用：脱离文档流

浮动布局的注意点：

先用在标准流之中的父元素在页面中确定位置，在让子元素浮动
一个盒子中有多个盒子，一个子元素浮动了，那么其他元素也应该浮动，为了防止发生问题

清除浮动：

因为浮动的元素会脱离文档流，会使其后面的元素上移，并会导致父元素塌陷，影响页面布局，所以要清除浮动

clear的作用：通过在被浮动影响的元素上设置clear属性，清楚浮动元素对自身的影响

Clear本质：是在设置了clear属性的元素上添加看不见但是真实存在的margin-top，这个margin-top的值就是要清楚的浮动元素的高度值。

clear取值：

left 清除左侧浮动元素的影响

right 清除右侧浮动元素的影响

both 清除左右侧中谁的高度大就按谁的清楚

清除浮动的策略是闭合浮动，只让浮动在父元素内影响，不影响外面的元素

方法：1:（隔墙法）给浮动的最后一个元素后面添加一个清除浮动的的空的块级标签，设置样式为clear： both；

缺点：添加了额外的标签，结构化差，不推荐使用

注意：添加的这个元素必须是块级元素

2:给父元素添加伪元素 after伪元素或双伪元素（推荐使用）

缺点：ie6 ，ie7不兼容:after

父元素::after{
	content："";
	display:block;
	clear:both;
}


双伪类：在浮动元素的父元素上添加用来清除浮动的类名，谁用给谁加上即可
这个方式可以同时解决父元素高度塌陷问题和父子元素垂直外边距合并的问题
.clear-all::before,
.clear-all::after{
	content:"";
	display:table;
	clear:both;
}

//？？
:clearfix{
	*zoom:1
}
处理ie浏览器的兼容性问题

3:给父元素设置overflow属性，属性值可以是hidden｜auto｜scroll

缺点：无法显示溢出的部分

注意浮动元素不能使用margin：0 auto实现水平居中，没有边偏移，没有z-index，定位元素比浮动元素的层级高可以压住浮动元素

position定位属性

作用：可以让元素自由的移动到页面中的任意位置，这点是标准流和浮动所不能实现的效果
使用方法：确定元素的定位模式，使用边偏移来确定移动的位置

1: 定位模式是通过css的position属性设定的，一共有4种定位模式

position:static 静态定位，是元素默认的定位方式，即标准流，不需要设置，它没有偏移量
position:relative 相对定位
position:absolute 绝对定位
position:fixed 固定定位
position:sticky 粘滞定位

2:偏移量有4个属性

作用：元素设置定位以后，可以通过偏移量来移动元素的位置

top 从顶端偏移量，即定位元素和定位位置（相对位置）上边的距离
bottom 从底端偏移量

定位元素垂直方向的位置由top和bottom两个属性来控制，通常情况下我们使用其中一个来移动元素在垂直方向的位置
left 从左侧偏移量
right 从右侧偏移量

相对定位

设置了相对定位的元素是相对自身原来在标准流中的位置进行偏移的
语法：position:relative；
注意：
- 设置了相对定位的元素是相对于自身在标准流中原来的位置偏移
- 开启相对定位以后，如果不设置偏移量元素不会发生任何的变化
- 相对定位的元素不会脱离文档流，在文档流中仍然保留其原位置，所以后面的元素不会占据其原位置
- 相对定位没有脱离文档流，不会改变元素的性质，块级元素还是块级元素，行内元素行内元素
- 相对定位会提高元素的层级，比浮动还高，其可以压住其他元素包括元素中的文字及图片
- 因为其会占据原来的位置，不会影响页面布局。最常见的用法是使用相对定位的元素来嵌套绝对定位的元素（子绝父相）来进行页面布局
包含块（containing block）
- 正常情况下，包含块就是离元素自身最近的祖先块级元素
```
今天天气很不错
em的包含块是div
```
- 绝对定位的元素是相对于其包含块进行定位的
绝对定位的包含块就是离他最近的开启了定位的祖先元素，如果所有祖先元素都没开启定位则根元素就是它的包含块，html（根元素，初始包含块）

绝对定位

设置了绝对定位的元素是相对于离它最近的开启了定位的祖先元素进行移动的，如果其所有的祖先元素都没有开启定位，则相对于根元素定位
语法：position:absolute
注意：
- 设置了绝对定位的元素位置不会改变，要通过偏移量才可以移动
- 如果其没有祖先元素或祖先元素没有定位，则相对于根元素（html）定位移动
- 如果其祖先元素设置了定位（相对定位，绝对定位，固定定位中的一种），则相对于其有定位的最近一级的祖先元素进行定位偏移
- 绝对定位的元素脱离了标准流并且不在占据标准流中的原来位置
- 绝对定位会改变元素的性质，具有行内块元素的一些特点，行内元素可以设置宽高，块级元素的宽高靠内容撑开
- 脱离文档流后其层级会升高比浮动还高，其可以压住其他元素包括元素中的文字及图片
- 因为相对定位会占据原来的位置，不会影响页面布局。最常见的用法是使用相对定位的元素来嵌套绝对定位的元素（子绝父相）来进行页面布局。子绝父相主要是看是否需要占据页面中的位置

固定定位

固定定位的元素是固定在浏览器可视窗口的某一位置不动，即该元素不会随着页面的滚动而滚动

语法：position:fixed；

注意：

相对于浏览器可视窗口偏移定位的。与其任何祖先元素都没有关系，无论祖先元素有没有设置定位
定位后不会随着页面滚动（html和视窗是不一样的，html会随内容的增加而变化）
固定定位可以看作是一种特殊的绝对定位，固定定位和绝对定位一样是完全脱离标准流的，不在占据其原位置
脱离文档流后其层级会升高比浮动还高，其可以压住其他元素包括元素中的文字及图片

使用了position绝对定位和固定定位的元素，水平方向居中要使用偏移设置，使用margin：0 auto；不在起作用，水平居中时要使用偏移实现。

使用了相对定位的元素margin：0 auto；水平居中仍然起作用，会使边偏移设置的效果失效（与书写顺序无关）

案例练习：1：绝对定位水平居中 2: 固定在页面的版心

定位扩展：

设置了固定定位和绝对定位的元素同float元素一样具有类似于行内块元素的特点

1:块级元素如果没有设置宽度和高度。设置了固定定位和绝对定位后，大小变为有其内容撑开的大小

2:行内元素设置了固定定位和绝对定位后，可以直接设置宽度高度，无需显示模式的转换

3:脱标的元素（浮动，绝对定位，固定定位）不会发生边距合并的问题

粘滞定位

pisition：sticky；

粘滞定位和相对定位的特点基本一致，不同的是粘滞定位可以在元素到达某个位置的时候将其固定

了解即可，有兼容性问题，ie浏览器不支持，此效果可以通过js实现

定位元素水平布局

当元素开启定位以后，水平方向的布局等式就要加上left和right两个值，规则和文档流中的水平布局等式一样只不过多了两个值

left+margin-left+border-left+padding-left+content+padding-right+border-right+margin-right+right=包含块的宽度

当发生过渡约束时即等式右边大于等式左边，如果9个值中没有auto，则自动调整right值以使等式成立，如果有auto可自动调整auto的一项的值来使等式成立

可以设置的auto的值有，width，margin-left，margin-right，left，right

因为left和right的默认值是auto，所以如果不知道left和right则等式不成立时，会自动调整这两个值

定位元素垂直方向布局

定位元素垂直方向的布局等式也必须成立

top+margin-top/bottom+b order-top/bottom+padding-top/bottom+height+bottom=包含块的高度

给以开启了定位的元素设置在父元素中水平垂直居中(fixed定位则相对于视窗水平垂直居中)

div{
  width:200px;
  height:200px;
  background:red
  position:absolute;
  left:0;
  right:0;
  top:0;
  bottom:0; 
  margin:auto;  //水平方向的marigin为auto水平居中，垂直方向的margin为auto垂直居中
}

z-index定位层级

定位元素的层级默认都是一样的，如果元素的层级都一样的话则优先显示结构中靠下的（后来者居上）

z-index属性用来控制定位元素显示的层级顺序（在z轴上的层叠顺序）

默认值是auto；
只有定位元素才有z-index
z-index属性值必须是整数（负值，正值，0），且不能带单位，可以是负值但是负值用起来会有很多问题，不讲
z-index属性数值越大，显示顺序越靠上，数值相同则按照书写顺序后来居上
祖先元素的层级再高也盖不住它里面的后代元素

注意浮动元素不能给定宽的块状元素使用margin：0 auto实现水平居中，没有边偏移，没有z-index，定位元素比浮动元素的层级高可以压住浮动元素

浮动元素脱标后可以压住标准流中的盒子，但是不会压住元素内的文字即图片，可以用来实现文字环绕的效果

position定位（相对，绝对，固定）后的元素可以压住标准流中的盒子，浮动元素及盒子里的内容

display（显示）

作用：用来设置元素的显示模式，实现元素显示模式的转换

display:inline(默认值) 将元素设置为行内元素

display:block 将元素设置为块级元素

display:inline-block 行内块元素，可以设置宽高属性，但是又不会独占一行

display:none 将元素隐藏，隐藏后元素不再占据原位置，但是在页面结构中并没有删除该元素

visibility 可见性属性

用来设置元素的显示状态，即控制元素可见或不可见，其隐藏的元素在页面中仍然占据原来的位置

visibility：visibility 默认值，元素可见

visibility：hidden 元素不可见，但是依旧占据原来的位置

overflow 溢出属性

作用：规定元素内容溢出元素框时发生的事情

取值：visible 默认值不剪切内容，无滚动条

hidden 将溢出的内容隐藏掉，内容实际依旧存在结构中，只是隐藏掉了

scroll 无论内容是否溢出，显示水平和垂直方向两个滚动条

auto 根据内容来决得是否显示滚动条及显示哪个方向的滚动条

overlay。滚动条压在页面上面，不占据页面宽度（有兼容性问题）

overflow-x 属性

overflow-y 属性

over-flow只作用在定高的块状元素上

字体图标

字体的优点：矢量，不会失真，可以修改颜色，比图片存储小

iconfont 显示的是图标，实际是字体，放大缩小不会失真，可以设置大小及颜色

阿里妈妈字体图标库，免费。推荐

cursor 鼠标样式

作用：设置鼠标在桌面上的光标形式

cursor：取值

default 默认样式是小白箭头
pointer 小手
text 文本
move 移动方块
no-allowed 禁止

outline 边框线

给表单元素去掉默认的蓝色边框使用方式和border一样但是outline不影响页面布局

outline：0或 outline:none;

input,textarea{
	outline:none;
}

禁止拖拽文本域
textarea{
	resize:none;
}

vertical-align

作用：常用来设置图片或者表单（行内块元素）和文字垂直对齐方式（而不是元素在父元素中的垂直对齐方式0

作用于行内元素(a,span)和行内块元素（img,input）

基线：

基线的位置是不固定的，文本之类的行内元素的基线是字符x的下边缘

img图片的基线是图片的下边缘

在行内块元素inline-block的基线是分两种情况

- 如果行内块元素中有内联元素（文字）则基线是最后一行内联元素的基线
- 如果行内块元素内没有内联元素或者该行内块元素overflow不是visible，其基线就是margin的边缘

vertical-align：

文字默认是在基线上排列的，不过也要根据字体的设计，有的设计的文字就不在基线上，基线只是一个参考，看不见却真实存在，基线是英文的基线对于我们中文来说并不适应，算是一个小的bug

baseline 默认值和文字的基线对齐子元素的基线和父元素的基线对齐
top 子元素的顶端和父元素的顶部对齐
middle 子元素的中线和父元素中的小写的x的中线对齐
bottom 子元素的低线和父元素的低部对齐

vertical-align：10px，在默认值的基础上向上走10px（也可以设置负值）

div{
  width:500px;
  font-size:50px;
  border:1px solid red;
}
span{
	font-size:20px;
	border:1px solid blue;
	vertical-align:middle;
}



  今天天气很不错 helloyx  hello

常见案例是，图片在div中底部有一条缝隙，是因为图片是行内块元素，行内块元素的vertical-align默认和文字的基线对齐。（因为基线不是最底端所以低端有一个缝隙）

解决方法是：1:将图片的vertical-align属性值改为除基线外的其他值

2:将图片转换为块级元素

**注意：**文字基线图

css的vertical-align可以设置td单元格内的元素垂直方向的对齐，不单单只是文字的在td标签上的对齐

（vertical-align一般只是作用在行内元素，文本，行内块元素在垂直方向的对齐方式，但是对于td标签或者通过display：table-cell转化td单元格的标签可以通过vertical-align属性设置单元格内的元素的垂直对齐方式，可以给一个块级元素转化为diaplay：table-cell为单元格元素，就可以使用vertical-align：top｜middle｜bottom来设置其里面元素在垂直方向的对齐方式了，但是这种方式很少使用）

块级元素在父元素内：

水平居中：margin：0 auto；

垂直居中：将父元素转化为单元格并设置vertical-align：middle 定位

行内元素，文字，图片在父元素内：

水平居中：text-align：center

垂直居中：line-height等height vertical-align:middle并将父元素转换为单元格display:table-cell

css初始化

*{
  margin:0;
  padding:0;
}
li{
	list-style:none;
}
img{
 border:0;  照顾低版本浏览器 如果图片外包含了链接会有边框的问题
 vertical-align:middle;  取消图片底布有空隙的问题
}
button{
 cursor:pointer;
}
a{
  color:#666;
  text-decoration:none;
}


等...查看文档

css3新增语义化标签

块元素主要是用来布局的，就是将我们页面分为一块一块的

header 头部标签一个页面中可以使用多次
main 页面的主体部分，一个页面只能用一次
footer 尾部标签一个页面中可以使用多次 head和footer可以表示整个页面头部和尾部，也可以变表示网页中某一个部分的头部和尾部
nav 导航标签 nav导航航海家的意思一个页面可以使用多次
aside 侧边栏标签，和主体相关的其他内容
article 内容标签，表示一个独立的文章
section 定义文档某个区域表示一个独立的区域，上面的标签都不能表示的时候可以使用section
这些标签在显示上没有区别，只是用来区分语义的，但是实际上使用最多的还是div和span

div 没有语义，用来便表示一个区块，是我们使用最多的布局元素

span 没有语义，行内元素，用来在页面中选中文字

查文档看图

注意
- 在ie9中需要将这些标签转化为块级表签
- 这些标签主要是针对搜索引擎的
- 在移动端经常使用
- 这些标签在页面中可以多次使用，包括header

css新增的表单属性

placeholder=“提示文本” 表单默认信息
multiple=“multiple” 可以多选文件提交
autofocus=“autofocus” 页面加载完成后自动聚焦到指定表单
required=“required” 必填项

autocomplete 值为 on或off

input::placeholer{
	color:blue;
	font-size:14px;
}
对表单占位符样式修改

Css3 新增属性选择器

作用：属性选择器可以根据元素已有的属性选择相应的元素，这样就不用在借助id或类选择器

E[att] 选择具有att属性的E元素
E[att=val] 选择具有att属性且属性值为val的E元素
…其他的属性选择器带学生看，了解即可

属性选择器和类选择器，伪类选择器一样，权重为10

Css3 结构伪类选择器

作用：结构伪类多用于选择将父元素中的子元素

:first-child

父E :first-child选择父元素中第一个子元素

父E p:first-child 还可以在:first-child前加上对另一个选择器用于验证。如果第一个子元素是p标签，则将其选择出来。如果第一个子元素不是p标签则没有元素被选择出来。

此方法会将所有子元素进行排序，先选择:first-child，再与p进行校验

:last-child

选择父元素的最后一个子元素，用法同：first-child一样
:nth-child(n) ntn翻译第n个

用作：选择父元素中的一个或多个特定的子元素

n有多种取值方式，n可以是数字，关键字和公式
- n是数字时，将父元素中的第n个子元素选择出来，数字从1开始
- n是关键取值：1:even偶数 :nth-child(even)选择父元素中的偶数子元素
  
  2:odd 奇数 :nth-child(odd) 选择父元素中的奇数子元素
- n取值为公式（n是由0开始计数的每一次+1，即 0，1，2，3，4，5…，但是第0个子元素或者超出了元素的个数则会被忽略）
  
  常见公式：2n 选择偶数子元素
  
  2n+1 奇数
  
  5n 5的倍数
  
  n+5 从5开始5以上的子元素直到最后。即 0+5+5 ，1+5=6 2+5=7
  
  -n+5 从5开始5以下的子元素直到第一个
E:last-of-type E:first-of-type E:nth-of-type 指定类型E的第n个元素

会将父元素中的所有E类型的元素进行排序，再按:first-child选择子元素

**注意：**类选择器，伪类选择器，属性选择器权重为10

伪元素选择器

作用：在某标签中通过css的方式添加新的表签，这个新添加的标签不是html标签在文档树结构中找不到，但是却可以起到一样的效果，从而简化html的结构

::before ::after

格式：

E::before{ }

在标签E内容最前面添加伪元素，该伪标签是E的子标签
E::after{ }

在标签E内容最后面添加伪元素，该伪标签是E的子标签

注意：

::before 和::after创建的元素是行内元素

::before 和::after伪元素必须有 content=“标签体”

伪元素和标签选择器一样权重是1

伪元素常用场景，清除浮动

清除浮动的本质是闭合浮动

额外标签法，在最后一个浮动元素的后面创建一个空的块级元素，给这个元素设置clear：both
给浮动元素的父元素设置overflow：hidden

给浮动元素的父元素设置 ::after伪元素

父元素::after{
		content:'';  伪元素必备属性
		display:block;  伪元素是行内元素，将其改为块级元素，额外标签法插入的必须是块级标签
		height：0；  使伪元素不显示
		visibility：hidden； 使伪元素不显示
		clear：both； 清除浮动
}

双伪元素清除浮动

父元素::before,父元素::after{
	content："";
	display:table;  将伪元素改为块级元素并在一行显示，如果改为block的话，两个块级元素没法在一行显示
}
父元素::after{
	clear:both;
}

后两种使用伪元素清除浮动的方法本质上是额外标签法的升级优化，简化了html结构

其他的伪元素

::first-letter 表示第一个字母

::first-line 表示第一行

::selection 表示用户使用鼠标选中的内容

filter （滤镜）属性

作用：filter定义了元素的可视效果，模糊饱和度，常用于img。ie不兼容
取值：none（默认）

blur(3px) 函数。作用：给图片设置模糊的效果，blur(0)是个函数，里面的参数取值越大，图片越模糊，参数为0是不模糊，参数不能是百分比

常用场景：毛玻璃效果

opacity

给元素设置透明度。opcity 翻译不透明

opacity：0.7

0是完全透明，1是完全不透明

clac()函数

给元素的属性设置动态值，calc()是个函数，使用通用的数学运算规则

可以使用 + - * 运算，注意在使用+ -是运算符号前后要加空格，使用* / 运算符时可以不加空格，但是建议加上
可以使用白分比，px，em，rem等单位

移动端浏览器有兼容性问题

height:calc(100%-20px);

总结元素水平垂直居中汇总

文档流中的行内元素及文字

水平居中：text-align：center；

垂直居中：line-height 等于height 此方式不能使行内块元素垂直居中

display：table-cell 且 vertical-align：middle 此方法可以使在文档流中的行内元素，行内块元素，块级元素都垂直居中，脱离文档流则不可以了

文档流中的行内块元素

水平居中：text-align：center

垂直居中：display：table-cell 且 vertical-align：middle 此方法可以使在文档流中的行内元素，行内块元素，块级元素都垂直居中，脱离文档流则不可以了

文档流中的块级元素

水平居中：指定在文档流中的宽度的块级元素 margin：0 auto；

垂直居中：display：table-cell 且 vertical-align：middle

定位可以给任意显示模式的元素设置，设置了绝对定位，固定定位的元素的脱离了文档流后就不在区分元素的性质了，可以通过偏移量来自动移动元素的位置，自然可以使元素垂直水平居中了

定位元素水平垂直居中的方法：

步骤1： left：50%（百分比是相对于父元素的百分比）

步骤2： margin-top：-自身宽度的一半 margin-top：-自身高度的一半

但是当元素自身宽高没有设置固定值，而是随内容撑开宽高时可以使用 tansform：translateX(-50%) translateY(-50%); 因为transform的translate位移的百分比是相对于元素自身的百分比

扩展：通过定位设置元素水平垂直居中方法

步骤1：元素指定宽高值且设置绝对或固定定位

步骤2: top：0；

bottom：0；

left：0；

right：0；

margin：auto；

transition(过渡)属性

作用：为元素样式的改变添加过度的效果，提升用户体验通常配合:hover使用网络搜索sprite animation图片

transiton是一个简写属性

transtion：需要添加过度效果的属性名花费的时间运动曲线延迟时间；

transition-property （property性能）需要添加过度效果的属性名，多个属性名之间使用逗号，隔开

想要所有属性都有过渡效果，使用all，all是默认值，可以省略不写

大部分样式都支持过渡效果，注意过渡时必须从一个有效值向另一个有效值进行过渡。比如width：0 至width：100px；（使用百分比也可以）但是不能是auto，auto没法确定具体的值

例如width height background；

transition-property：width, height,background;
Transsition-duration 过度效果花费的时间 (duration 持续)

即过度从开始到完成的时间，单位是秒 s 或者毫秒ms，单位不能省略 1s=1000ms
Transition-timing-function 过渡的时序函数运动曲线（可省略）
- ease 慢速开始先加速，再减速默认值（ease减缓，下降）
- linear 匀速运动
- ease-in 加速运动
- ease-out 减速运动
- ease-in-out 先加速后减速
- steps() 分步执行过渡效果
  
  steps(2,start) 可以设置一个第二个值
  
  end 在时间的结束执行过渡（默认值），start，在时间开始执行过渡
- cubic-bezier() 来指定时序函数。 https：//cubic-bezier.com
transition-delay 过渡效果的延迟时间，即等一段时间后再执行过渡

单位是s ，2s，即2s后开始. 可省略

**注意：**谁做过渡就将transiton属性加给谁

.father{
  width: 400px;
  height: 500px;
  background: #000;
  transition:all 2s;
}
.father:hover{
  width:600px;
  background: palevioletred;
}

如果想要多个属性过渡且过渡设置不同可以分开写，并使用英文逗号分隔 ‘,’

.father{
  width: 400px;
  height: 500px;
  background: #000;
  transition:width 2s,background .3s;
}
.father:hover{
  width:600px;
  background: palevioletred;
}

transform(转换)2d转换

作用：transform翻译是使…变形,css中transform就是通过css来改变元素的形状和位置（实现元素的移动，旋转，缩放等效果），元素变形不会影响到页面布局

transform只是一个大的属性，但是元素具体怎么变形还要通过transform的值来决定，tansform的值都为函数，（什么是函数我们先不深究，记住带括号的就是函数，就像之前饿url()就是函数）

translate 位移

格式

transform:translate(x,y);
transform:translate3d(x,y，z); 3d位移
transform：translateX(x); x轴位移，平移
transform:translateY(y); y轴
transform:translateZ(y); z轴平移 
transform：translateX(x) translateY(y);在x，y轴都移动

translate()函数，参数x，y分别代表了元素在水平方向和垂直方向的移动的距离，中间使用逗号分开
x y 可以采用数字加单位的精确值，也可以是百分比，百分比是相对于元素自身的宽度或高度和计算的

采用margin移动的百分比是相对于父元素的宽度计算的，采用定位移动的百分比是相对于父元素的宽度或高度计算的

tranform：translateZ();元素在z轴平移即调整元素在z轴的位置，即调整元素和人眼之间的距离，向z轴正值方向了移动的距离越大，即元素离人越近，z轴平移属于立体效果（近大远小），默认情况下网页是不支持透视的，如果要看到近大远小的效果，必须设置网页视距，视距设置在有3d属性的元素上（给不同的元素上设置视距会有不同的效果）
```
div{
  transform：perspective（1200px）translateZ(800px)
  // 设置当前网页的视距是1200px，即人眼距离网页（屏幕）的距离
}
```

使用此移动方式不会影响其他元素的位置
此属性对行内元素不起作用

案例：让元素水平垂直居中，替代margin：0 auto的方式
3d转换

三维空间就是立体空间，在立体空间中有三个坐标轴，分别是x轴，y轴，z轴
- x轴，水平方向向右，x轴左边为负值，右边为正值
- y轴，垂直向下，下边为正值，上边为负值
- z轴，z轴垂直于x，y轴组成的平面，向外是正值，向里是负值
3d位移

格式：
```
transform:translate3d(x,y,z);
transform:translate3dX(x); 
transform:translate3dY(y);
transform:translate3dZ(z);
```
- 其中x，y，z指在轴上要移动的距离；
  
  x，y是可以采用px，百分比，百分比是相对于元素自身计算的百分比
  
  z轴的值一班都是采用px，
  
  x，y，z不能省略，如果没有就写0
- 3d移动后看不出变化，因为是要陪和透视属性一起使用
笔记不详细

3d旋转，透视，3d呈现没看呢

perspective 透视

如果想要在网页中产生3d的效果需要用到透视，可以理解成3d物体投影在2d平面上

透视我们称之为视距，就是人的眼睛到屏幕的距离

距离视觉点（眼睛）越近的物体在电脑平面成像越大，越远成像越小

透视属性要写在被观察元素的父盒子上

物体在z轴上向外走的距离越远，即离我们的眼睛越近，距离屏幕的距离越远，我们看到的物体就越大

透视的单位是像素

rotate 旋转

transform:rotate(度数);
作用：2d旋转作用是让元素在平面内顺时针或者逆时针旋转

度数单位是deg transform:rotate(30deg)

单位是turn transform：rotate(0.5turn) 旋转0.5圈
默认情况下是以元素的中心为旋转点旋转，顺时针旋转是正值，逆时针旋转是负值，旋转一周是360deg

可以单独设置让元素沿着x,y,z轴旋转指定的角度

transform：rotateX() rotateY(). rotateZ()

transform:translateZ(100px)  rotateY(180deg);
transform:rotateY(180deg) translateZ(100px);
注意位移旋转写的顺序不一样，效果也不一样


transform：translateY(180deg);
元素旋转到背面后是否显示元素的背面
backface-visibility:hidden; 不显示背面
backface-visibility:visible; 显示背面

transform-origin 转换中心点

作用：设置元素的变形的原点。中心点. origin 起源

格式：

transform-origin:x y;

默认的转换中心点是元素的中心点（50% 50%），百分比是相对于元素自身的宽度或高度和计算的
x y可以是精确值（数值px），也可以是百分比，方位名词

transform之缩放 scale()

作用在；设置元素的放大和缩小

格式：

transform：scaleX() 水平方向缩放
transform：scaleY() 垂直方向缩放
transform:scale(x,y);  水平和垂直双方向缩      放参数用,分隔

x，y是元素宽度和高度的缩放倍数，没有单位
transform:scale(1,1); 缩放一倍即没有缩放 x y的值一样时可以只写一个即transform:scale(1);
transform:scale(0.5); 小于1的值是缩小
使用此方式缩放元素的优点是：不影响其他元素，如果直接修改元素的宽高的话影响其他元素。
transform：scale()是可以通过transform设置缩放的中心点的,缩放是以转化中心点为缩放中心的

transform的简写

tansform可以将位移，旋转，缩放综合写，但是有顺序之分，在有位移的情况下要把位移放在最前面

transform：translate() scale() rotate()等;

因为旋转会影响元素的中心点，先旋转在位移元素会跑偏

animition动画

作用：将定义好的动画绑定到元素上

动画和过渡类似，都可以实现一些动态的效果，不同的时过渡要在某个样式属性变化时才能触发，动画可以自动触发动态效果
动画的使用步骤：先定义动画，再绑定到调用动画的元素上

1:定义动画： @keyframes 关键帧 @不能省略

关键帧设置了动画执行的每一个步骤

@keyframes 动画名{
	0%{   
	  样式声明   
	}
	50%{
	 样式声明
	}
	100%{
	 样式声明
	}
}

0%至100%是指的动画序列

0%（from）是动画的开始，100%（to）是动画的结束

使用百分比来划分动画花费的时间，我们可以将花费时间划分为任意多份，设置多个状态的变化

百分比要是整数，百分比就是总时间的划分

在@keyframes中规定某种动画样式，就能创建由当前样式逐渐改为新样式的动画效果

2:调用动画

E{
	animation:动画名称 花费时间 运动曲线 延迟时间 动画播放次数 是否轮流反复播放动画 动画不播放时的样式；
}

animation是简写属性，里面的每一项属性都可以单独设置,简写也可以省略某些项

无论简写还是单独设置，动画名称和花费时间是不能省略的

animation-name 要对元素绑定的关键帧的名字（动画名称）

animation-duration 动画花费的时间 duration 持续

animation-timing-function 动画运动曲线

animation-delay 动画延迟时间
animation-iteration-count 定义动画应该播放的次数

取值数值次数或者 infinite 动画无限次播放
animation-direction （direction方向）指定动画执行的方向

取值：normal 默认值，动画正向播放即从from到to 每次都是这样

reverse 动画反向播放，每次都是反着

alternate 动画正着去反着回来动画走回来而不是跳回来要掌握

alternate-reverse 动画先反着执行再正着执行

animation-fill-mode 动画不播方时（即动画完成时或者动画有一个延迟未开始时），要引用到元素的样式

取值：none 默认值动画执行完毕元素回到原来的位置

forwards 动画结束后停止在结束的位置

backwards 动画延时等待时，元素会处于开始位置

both 结合了frowrads和backwards，动画会在两个方向上扩展动画属性

简写属性里不能包含animation-play-state 设置动画的执行状态

取值：running 默认值动画执行

paused；暂停动画此属性经常与鼠标等操作配合使用。要单独设置

要掌握的属性：animation-fill-mode：forwards；动画结束后停在结束位置

animation-direction：alternate 动画走回来而不是跳回来

可以给一个元素添加多个动画，使用英文,分隔

E{
	animation:动画名称1 花费时间 运动曲线 延迟时间,动画名称1 花费时间；
}

flex布局 flexible灵活的

在传统的布局方式中我们常采用：在盒模型的基础上使用定位，浮动，display转换元素的显示模式，但是有些效果实现起来很不方便，w3c提出了解决方案使用flex布局，flex可以灵活，响应式的实现各种页面布局

flex是css中有一种布局手段，主要用来代替浮动来完成页面的布局，flex可以使元素具有弹性，让元素可以随着页面的大小的改变而改变

flex在pc端有兼容性问题（ie11或更低版本不支持或仅部分支持），多用于移动端开发，传统布局多用于pc端开发，pc端若不考虑兼容性也可以使用flex布局

要使用弹性盒，就要使用display属性将一个元素设置为弹性容器

弹性容器：

display：flex 将元素设置为块级弹性容器，元素独占一行用的较多

display：inline-flex 将元素设置为行内弹性容器元素可以和其他元素在同一行展示

弹性元素：

弹性容器里的直接子元素（亲儿子）是弹性元素（弹性项）

一个元素可以同时是弹性容器和弹性元素

注意：

通过给父元素设置flex属性来控制子元素的排列方式
任何元素都可以采用flex布局，行内元素也可以指定为flex布局，行内元素采用了flex布局后可以直接设置宽高无需转换
当我们为父元素设置了flex布局后，子元素的float，clear，vertical-align属性将失效
被指定为flex布局的元素叫做flex容器，它里面的所有子元素就是flex项目，简称为项目

flex相关的属性有的是要设置在父元素上的有的是要设置在子元素上的

父元素设置的属性：

1:需要给父元素设置display：flex；就是知道这个盒子就是弹性容器，采用flex布局

flex-direction

取值：

row 默认值弹性元素在容器中水平排列，由左向右主轴为水平方向，起点在左端
row-reverse 弹性元素在容器中水平排列，由右向左主轴为水平方向，起点在右端。
column(列) 弹性元素在容器中垂直排列，自上而下主轴为垂直方向，起点在上沿
column-reverse 弹性元素在容器中垂直排列，自下而上主轴为垂直方向，起点在上沿

作用：决定flex容器主轴的方向，弹性元素排列方向称为主轴（即项目排列的方向，子元素是根据主轴排列的），

与主轴垂直方向的称为侧轴

flex布局的容器有两根轴主轴和侧轴，主轴和侧轴没有固定；默认情况下水平方向为主轴，垂直方向为侧轴，flex-direction可以转换主轴的方向，

justify-content

作用：设置子元素在主轴上的排列方式(如何分配主轴上的空白空间)

使用该属性前一定要确定好哪个方式是主轴

取值：

flex-start：默认值子元素在主轴的头部对齐
flex-end 子元素在主轴的尾部对齐
center 子元素在主轴上居中对齐
space-between 子元素在主轴上两端对齐，项目之间的间隔相等
space- around 每个子元素两侧的间隔相等，所以，项目之间的间隔比项目与两端的间隔要大一倍
space-evenly。空白分布到元素的单侧有兼容性问题

flex-wrap

作用：默认情况子元素都在一条轴线上排列，flex-wrap属性指定当子元素在一行排不下时如何换行

取值：nowrap 默认值子元素不自动换行，子元素会被压缩

	 wrap   换行，第一行在上方  元素沿着副轴方向自动换行

wrap-reverse 换行，第一行在下方元素沿着副轴反方向换行

flex-flow

flex-flow是flex-direction和flex-wrap的简写属性。没有书写顺序

flex-flow:row wrap;

align-items

作用：设置单行子元素在侧轴上的排列方式
取值：

flex-start：侧轴的起点对齐

flex-end：侧轴的终点对齐

center：在侧轴的中点对齐

stretch 拉伸默认值在子元素没有设置高度或设为auto时，在侧轴上拉伸弹性元素使其占满整个容器的高度

baseline 弹性元素第一行文字基线对齐

align-centent

作用：设置多行子元素在侧轴上的对齐方式多行即是子元素有换行的情况，该属性在子元素为单行的情况下不起作用
取值：
- flex-start：侧轴的起点对齐
- flex-end：侧轴的终点对齐
- center：在侧轴的中点对齐
- space- around 每根轴线两端的间隔相等，所以轴线与轴线之间的间隔比轴线与边框之间的间隔要大一倍
- space-between 与侧轴两端对齐，轴线之间的间隔平均分配
- stretch 拉伸默认值，轴线占满整个侧轴

设置在子元素（项目）上的属性

Flex-grow属性

作用：定义弹性元素放大比例。即当父元素有多余空间时，弹性元素如何分配剩余空间，剩余空间是值父元素剪去那些已经设置尺寸元素后所剩下的空间

使用flex-grow定义子元素在剩余空间所占的分数
- flex-grow取值：0|数字
- flex-grow：0；表示该即是存在剩余空间，该子元素也不放大
  - 如果所有的子元素flex-grow的值都为1，则他们将等分剩余空间
  - 如果有一个子元素flex-grow的值为2，其他的子元素flex-grow：1，则为2的子元素分配剩余空间时所占的剩余空间比其他子元素多一倍

flex-shrink属性

作用：定义项目（子元素）缩小的比例，默认值为1；即在父元素中的空间不足的以容纳所有子元素时，弹性元素如何缩小（弹性元素缩小的是根据flex-shrink和元素本身的大小来共同决定的，比较复杂不要深究）

格式：flex-shrink：numeber

如果所有项目的flex-shrink属性值都为1，在空间不足时他们将等比例缩小。
如果有一个项目的flex-shrinks属性值为0，其他项目的值为1，在空间不足时前者不会缩小
负值对该属性无效

flex-basis （可不讲）

作用：设置弹性元素在主轴上的基础长度就像一个弹簧的静止状态时的自身长度，如果设置了该属性，元素本身设置的宽高属性就没有作用了

当弹性容器的主轴为水平方向时，flex-basis决定了元素的元素的宽度

当弹性容器的主轴为垂直方向时，flex-basis决定了元素的元素的高度

默认值为auto，参考元素自身的高度或者宽度

如果flex-basis设置了一个具体的数值，则以该值为准

flex简写属性

flex属性时flex-grow flex-shrink flex-basis的简写属性

默认值为 flex:initial; 即表示： flex:0 1 auto;

快捷键： flex：auto；即表示 flex:1 1 auto;

flex:none; 即表示 flex:0 0 auto; 不能放大，缩小即弹性元素没有弹性

align-self

作用：在元素是单行的情况下，允许某单个项目与其他项目在侧轴上的对齐方式不同，设置该项目自己在侧轴上的对齐方式。

对该单个项目而言，设置了aglin-self属性会覆盖父元素align-items的属性作用在它身上的属性

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

默认值为auto，表示继承父元素align-items的属性，如果没有父元素，则等同于stretch
属性值除了auto以外，其他的同align-items一样

order

作用：定义弹性元素在页面上的排列顺序（前后顺序）

取值为数值默认值为0，数值越小，排列的越靠前

不改变html结构
可以有负值

移动端

浏览器的私有前缀，css3的一些新增属性老板本的浏览器不一定能支持，为了各种浏览器兼容其老版本的所有新增样式要加私有前缀，比较新的浏览器无须添加

-moz- firefox 浏览器私有前缀

-ms- ie浏览器私有前缀

-webkit- safari chrome 私有前缀

-o- opera浏览器私有前缀

-moz-border-radius:16px;        firefox 浏览器私有前缀

-ms-border-radius:16px;         ie浏览器私有前缀

-webkit-border-radius:16px;     safari chrome 私有前缀

-o-border-radius:16px;            opera浏览器私有前缀

移动端浏览器大多是webkit的内核，所以移动端处理webkit内核浏览器的兼容性问题即可，在移动端端我们可以放心的时候h5标签和css3样式，浏览器的私有前缀我们只要考虑-webkit-即可

Css3 box-sizing ，在pc端考虑兼容性就标准盒模型不考虑就怪异盒模型移动端可以直接怪异盒模型

移动端的特殊样式要单独清理一下

点击高亮清除 -webkit-tap-highlight-color：transparent；

移动端浏览器默认的外观在ios上加上这个属性才能给按钮和输入框自定义样式

-webkit-appearance：none；

禁止长按页面时弹出菜单

img，a{-webkit-touch-callout:none;}

现在移动端手机的分辨率和屏幕尺寸大小不一

视口

视口就是浏览器显示页面内容的屏幕区域，视口分为布局视口视觉视口和理想视口

一半移动端设备在早起为了使pc端的网页在移动端也可以显示全，所以都将布局视口分辨率设置为980px，这样pc端的网页大多在手机上可以基本呈现（早起的网站宽度一般都不会超过1000，980，990的宽度，没有做移动端适配的网站 ifeng.com），但是每个元素显示的很很小，一般默认用户可以手动缩放网页查看，这样的用户体验并不好，为了解决这个问题，大部分网站都会为移动端单独设计一套ui

视觉视口：就是用户在手机上可以看网页的区域，我们可以通过缩放操作视觉视口，但是不会影响布局视口，布局视口仍然保持原来的宽度

理想视口：为了使网页在移动端有最理想的浏览和阅读宽度而设定，对设备来讲，最理想的视口就是视觉视口，我们需要给我们的移动端页面手动添加meta标签来通知浏览器操作，meta标签的主要目的就是告诉浏览器布局视口的宽度和理想视口的宽度一致，也就是设备有多宽，我们的布局视口就有多宽

（展示页在移动端状态下设置了meta标签和不设置meta标签的不同状态）

标准的viewport设置

width设置的是viewport宽度，我们的布局视口的宽度等于设备的宽度（视觉视口的宽度），即实现了理想视口的状态

initial-scale 初始缩放比，大于0的数字

maxmum-scale 允许的最大缩放比，大于0的数字

minmum-scale 允许的最小缩放比，大于0的数字

user-scalable 用户是否可以缩放，yes （1）或no（0）

视口就是屏幕中用来显示网页的区域

可以通过查看视口大小来观察css像素和物理像素的比值

默认情况下视口宽度 1920px（css像素） 1920px（物理像素）此时是1:1

通过对屏幕缩放，放大两倍视口 960px （css像素）此时的物理像素仍然是1920px，css像素和物理像素的像素比是 1:2

所以我们可以通过改变视口的大小，来改变css像素和物理像素的比值

不同的屏幕，单位像素的大小是不同的，像素越小屏幕就会清晰，智能手机的像素点远远小于计算机的像素点

二倍图

先查看上面对长度单位中的像素知识点

pc端和早前的手机频幕（普通屏幕） 1css像素=1物理像素

视网膜屏幕是一种显示技术，可以将更多的物理像素点压缩至一块屏幕里，从而达到更高的分辨率，并提高屏幕的显示的细腻程度

我们需要一个5050的css像素的图片，直接放到手机中里，手机会放大2倍，即100 * 100 （使用100100的物理像素点显示我们图片）图片显示变模糊，处理这种问题的方法时，我们设计的时候就设计一个100 * 100的图片，然后程序员在写css代码的时候，将图片的尺寸缩小为50 * 50（css像素），这样我们的网页在移动设备上显示的时候，移动再将图片放大两倍显示，即100*100 ，这样就和我们设计图设计的是一样了，这样就不会出现图片模糊的情况了（文字是矢量的放大或者缩小都不糊，背景颜色也不会）

（也就是使用倍图来提高图片质量，来解决高清设备中图片模糊的问题）

总结:我们准备的图片比我们实际需要的大2倍，这就是2倍图（通常是2倍图，还有3倍图，4倍图等）

常见的设计稿的是相对iphone6/7/8的2倍图即750px的，3倍图为1125px；放弃一些不常见的极端屏幕

img标签和背景图片在使用倍图的时候，注意缩放的问题

img{
  原始图片尺寸为100 * 100
  width:50px;
  height:50px;
}

.box{
	原始图片尺寸为100 * 100
	background-size:50px 50px;
}

移动端制作方案单独制作移动端页面（常见）或者响应式页面

rem

em是一个单位，是元素相对于元素自身字体大小的倍数

rem（root em）与em类似，是相对于html元素的字体大小的倍数

html{
	font-size:14px;
}
div{
	font-size: 16px;
}
div p{
  width:10rem;
  height: 20rem;
  width:10em;
  height: 20em;
  background: black;
}

使用rem单位的优点是：可以通过在html中设置字体大小来控制整个页面元素的大小

媒体查询

产生原因：页面元素根据屏幕大小自动缩放，以呈现等比例变化

流式布局和flex布局主要是针对宽度的布局，在高度上不能响应式变化

响应式布局：

网页可以根据不同的设备或者窗口大小呈现出不同的效果
使用响应式布局，可以使一个网页适用于所有的设备
响应式布局的关键是媒体查询

作用：可以通过媒体查询给不同宽度的屏幕设置不同的样式，当我们重置浏览器大小的时候，页面也会根据浏览器的宽度和高度重新渲染页面

格式： media翻译媒体关键字 and or only ；and可以将多个媒体特性链接在一起，且（交集）；not 排除某个媒体类型，非（可以省略）；only 指定某个特定的媒体类型可以省略；逗号，表示或（并集）

@media 媒体类型 and|not|only (媒体功能){
 	样式声明
}

@media，@不可省略

媒体类型：screen 屏幕；手机，电脑，平板屏幕

all 所有设备

print 打印设备

speech 屏幕阅读器等发生设备

可以使用逗号 , 连接多个媒体类型，这样他们之间就是或的关系

@media screen，print{
  body{
   font-size:16px;
  }
}

可以在媒体类型之前添加一个only，表示只有，使用only是为了兼容一些老版本的浏览器

媒体功能：(max-width:500px) 定义在输出设备中页面最大可见区域的宽度，最大宽度500px，即<=500px的屏幕

视口的最大宽度（视口小于指定宽度时生效）

(min-width:500px) 定义在输出设备中页面最小可见区域的宽度，最小宽度500px，即>=500px的屏幕

视口最小宽度（视口大于指定宽度时生效）

(width:500px) 定义在输出设备中页面可见区域的宽度，屏幕宽度为500px

样式切换的分界点，我们称其为断点，也就是网页的样式会在这个点时发生变化

一般比较常用的断点

小于768 超小屏幕 max-width=768px 手机

大于768 小屏幕 min-width=768px

大于992 中型屏幕 min-width=992px

大于1200 大屏幕 min-widt=1200px

注意：

媒体功能要使用括号包围

max-width和min-width都是包含等于

@media screen and (max-width:350px){
		html{
			font-size:24px;
		}
}
@media screen and (min-width:351px){
		html{
			font-size:24px;
		}
}

在我们的屏幕上 并且 最大的屏幕宽度为350px 设置样式，即宽度<=350px的屏幕

推荐媒体查询我们按照从小到大的顺序来书写

移动端布局通过媒体查询和rem就可以实现不同的设备宽度，元素的尺寸也动态变化

使用媒体查询根据不同的设备比例设置html字体大小，然后页面元素使用rem单位，当html字体变化时元素的尺寸也会发生变化，从而达到等比例缩放的适配效果

按照设计稿与设备宽高的比例，动态的计算出html标签的font-size大小（媒体查询），css中，设计稿元素的宽高相对位置等取值，按照同等比例换算为rem单位的值

通过媒体查询,不同的屏幕尺寸引入不同的样式资源

 
 "stylesheet" href="./style.css" media="screen and (max-width:350px)">
  "stylesheet" href="./style.css" media="screen and (min-width:351px)">

vw

不同设备的完美视口大小是不同的，iphone6/7/8 是375 ipnone6/7/8 P是414

不同设备的像素比（物理像素与css像素的比值）是不同的，所以我们给一个元素设置width：375px；在不同设备上的显示效果是不同，在375的设备就是全屏，在414的设备就不是全屏

所以在移动端开发的时候就不能使用px作为单位来进行页面布局了

使用百分比布局的话，每个元素都是相对于父元素的百分比，所以百分比的相对物是不固定的，使用百分布局也不合适，我们得找一个在同一个设备中不会变化的来作为参照物

vw即viewport width 视口的宽度在一个设备中视口的宽度是固定的，vw设个单位永远相对于视口的宽度来进行计算

100vw=1个视口的宽度在视口为375px的设备上 100vw等375px。在视口为414的设备上 100vw等414px

1vw=1%的视口的宽度

设计图上一个48px * 35px的元素在750px的设备上使用vw

100vw=750px（设计图的像素） 0.133333333vw=1px

6.4vw=48px；

4.667vw=35px；即每一个元素的npx用vw表示极为 n*0.1333333

但是这样计算很麻烦，我们可以使用vw和rem配合使用

即

html{font-size:0.133333333vw} 即font-size为1px

div{width:48rem} 即48vw即为48*0.133333vw 即48px

但是浏览器都设置的有最先显示的font-size值为12px，即如果我们设置的font-size小于12px（0除外），就会给我们的font-size重置为12px

我们写的48rem实际表现为48*12px为576px这是因为我的html的font-size为0.1333333vw为1px小于12px的，所以我么可以将html的font-size值扩大一些，随意扩大到40px即5.333333vw，即html{font-size:5.3333333vw};

我们的div{width:1.2rem} 即48/40

sass

什么是sass，目前市场上三大css 预编译语言之一

sass less stylus
- 什么是css预编译语言：可以以语言的形式书写css样式（css不是语言，是css样式表）
- css预编译语言不能直接在浏览器中运行，需要编译成css文件以后运行，这样我们就需要将一个叫sass的工具将sass编写的代码编译成.css文件，将我们写的.sass文件转换成.css文件去浏览器运行
- sass工具的安装依赖的环镜：rube环境 python环境 node环境
- 如何安装，因为sass是一个依赖node环境的前端工具，我们就可以使用npm安装，因为是要安装在我们的电脑上的，一次安装多次使用所以要使用npm安装全局包
  - 打开命令行，目录无所谓
  - 输入指令$ npm install --global sass
    
    mac 指令$ sudo npm install --global sass
  - 检测安装打开命令行，目录无所谓，输入指令$ sass --version
- 工具的使用
  - 了解sass的文件形式
    - .sass 后缀的文件和 .scss 后缀的文件都是sass文件，这两个文件在语法上没有区别，写法一样，只是.sass 没有打括号的分号，全部依靠缩进保持关系（这是以后css发展的趋势，但是现在支持的还不是很好）
```
.sass 文件
	div
		font-size：19px
		color：red
```
    - .scss 文件，就是你怎么写css就怎么写
  - 编译成css文件
    - 单文件编译
      - 打开命令行
      - 切换到你要编译的目录
      - 输入指令$ sass 编译哪一个文件编译成哪一个文件
        
        sass index.scss index.css
      - 缺点：每一次修改源文件都要从新编译
    - 单文件实时编译
      - 打开命令行
      - 切换到你要编译的目录
      - 输入指令$ sass --watch 要编译的文件:要编译成的文件
        
        sass --watch index.scss:index.css
      - 缺点：只能同时监控一个scss文件，要修改多少个文件就要开多少个cmd窗口分别监控
    - 文件夹实时编译
      
      能帮我们监控整个文件的变化，只要你监控的文件夹里面有任何一个scss或者sass文件发生变化，就会自动帮你进行编辑
      - 打开命令行
      - 切换到你要监控的文件夹目录
      - 输入指令$ sass --watch 要监控的文件夹：生成的文件存放的文件夹
        
        -----目录结构 zw的项目 index.html sass ----cmd命令 $ sass --watch sass:css (会自动帮我们生成css文件夹)
    - map文件的作用
      
      按照这个形式进行开发，我要修改样式应该修改sass文件，不能去修改css文件，一旦放修改css文件，下次编译的时候就会被覆盖了，html里面引入的是css文件
      
      map文件的作用：帮我们把原本映射在css文件的行数直接映射在sass文件，前提是css文件里面的映射源注释不要删除
vscode插件Easy sass

vue 项目引入sass ：https://blog.csdn.net/m0_38010595/article/details/112258189

html引入sass：https://blog.csdn.net/qq_41571838/article/details/81634968
sass是css的预处理器，是css的扩展可以帮助我们减少css的重复代码，节省开发时间

sass文件的扩展名为.scss

使用sass的原因：css没有很好的计算能力，代码冗余，不便维护，不利于复用

sass的注释

单行注释 //开头后面书写注释，会在编译的时候被忽略掉，开发注释
多行注释 /* 注释的内容 */ 快捷键：shift + alt + A

会在编译的时候被保留下来，但是打包的时候被忽略掉

打包，就是压缩文件，没有换行空格等
强力注释

/*！注释的内容 */

在注释的开始写一个感叹号！，会在编译的时候保留下来，将来打包的时候也会保留

sass变量使用$符号

定义变量，在sass中可以定义一些变量，后期可以统一使用修改

$变量名：value;
--
$color1:red;
$abc:left;

sass变量可以存储的信息：字符串，数字，布尔值，颜色值，列表，null

在变量中可以引用其他的变量，在编译后的css文件中使用变量的地方会被替换成变量的值

在变量定义时剪号和下划线可以交替使用，即两者之间没有严格的区分
1:使用变量，直接使用在值的位置
```
div{
color:$color1;
}
```
2:在样式名或者选择器上使用，使用插值表达式

相当于把变量的值插入到另一个内容中，格式为：把变量使用#{ }包裹起来
```
div{
 margin-#{$abc}:100px;
}
```

使用变量的地方，将来一旦变量修改，每一个使用变量的位置都会改变

嵌套

1:嵌套选择器

div{
 width:100px;
 p{
  width:10px;
  a{
  	color:#ddd;
  }
 }
}

在嵌套选择器中调用父选择器使用&符号

div{
    &:hover{
        color:red;
    }
}

2:嵌套属性

和选择器没有关系和属性名有关系，前提是：属性名中带有中划线（-）的才可以嵌套

属性名: 后要加空格

font: {
 size:14px;
 weight:4;
}

等同于:
font-weight:4;
font-size:14px;

混合 @mixin. @include

格式：在定义mixin的时候可以使用其他的sass特性比如说嵌套

@mixin 名字{
		样式声明
}
@mixin 名字 (参数名1,参数名2){
		样式声明
}

调用时
div{
  @include 名字;
}
div{
  @include 名字(实际参数1,实际参数2);
}
掉用时参数的顺序要和定义时参数顺序一致

@mixin all {
	color:red;
	p{
	 font-size:24px;
	}
}
div{
	@include all;
}


等同于
div{
	color:red;
	p{
	 font-size:24px;
	}
}

extend 继承

作用：一个选择器与另一个选择器的样式几乎一致，只有少量区别时，可以采用继承，让样式a继承样式b的样式

让一个选择器A继承另一个选择器B的内定义的所有样式及与B相关的其他样式

.button-A  {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}

.button-B  {
  @extend .button-A;
  background-color: red;
}

.button-C {
  @extend .button-A;
  background-color: green;
  color: white;
}

后两个样式继承样式A  编译后式并集选择器
等同于：
.button-A,.button-B,.button-C {
  border: none;
  padding: 15px 30px;
  text-align: center;
  font-size: 16px;
  cursor: pointer;
}
.button-B  {
  background-color: red;
}
.button-C{
	  background-color: green;
  color: white;
}

@import 和Partials

在css中支持使用@import引入其他css文件，但是css每次在调用@import指令时都会向服务器发送一次http请求，很消耗资源。但是使用sass的@import指令将引入sass时不会发送http请求，将所有的sass文件最终编译成一个css文件。

在一个.scss文件中引入另一个.scss文件时使用

@import "被引入的文件名";

引入文件时不需要加文件的后缀名，sass会自动添加.scss后缀
如果你不希望将一个sass文件编辑成一个css文件，要在创建被引入的文件名前加一个下划线_ 这样sass不会将其编译成css文件

即给文件命名时名字前要加下划线. _style-box.scss
在@import引入文件时不用加下划线

sass函数

乘法：（不可以单位不同）
width：100px*2

除法：（不可以单位不同，除法为了和css样式表中的/区分，所以书写格式要格外注意）
$width:1000px;
width：$width /2; //使用变量，是除法运算
width：round(1.5)/2;  //使用函数，是除法运算
height：（500px /2）; //使用圆括号，是除法运算
height：20px+100px/2px;  //使用了加号，是除法运算

变量计算，加减乘除都可以
$width1:100px;
$width2:200px;
$width3:300px;
width:$width1+$width2-$width3;

处理数字的函数

abs(-10px) 返回结果是 10px 绝对值函数
round(3.5) 返回结果是 4 四舍五入函

bootstrap

bootstrap是根据类名添加样式的

组件

bootstrap需要为页面内容和栅格系统包裹一个.container容器，bootstrap预定好了这个类，叫.container,它提供了两个作此作用的类
container类

container类是有padding值的
- 响应式布局固定宽度
- 大屏（>=1200px）宽度定为1170px
- 中屏（>=992px）宽度定为970px
- 小屏（>=768px）宽度为750px
- 超小屏即手机（<768px）宽度自动为100%
container-fluid类
- 流式布局容器宽度为100% 占据全部视口的容器，适合用于单独做移动端开发

栅格系统中是靠行和列的组合来创建页面的，我们将要写的页面内容放在这些创建好的布局中
row必须放到container布局容器的里面

row设置了margin负值，所以container内写入row后container的padding则被抵消掉了

我们实现列的平均分配，需要给列添加类前缀

col-xs-所占的份额 xs为extra small 超小

col-sm- sm为small 小

col-md-份额 md为medium 中等

col-lg-分额。 lg为large 大屏幕
每个列有默认的padding值大约为15px
如果一行内各列所占的分数相加等于12分则会沾满container的宽度每个子元素按照分配的份额分布
如果一行内各列所占的分数相加小于12 则占不满container的宽度在行的最后面会有空余时间
如果一行（row）内所包含的列（column）占的分额相加大于12，则后面多余的列所在的元素将会被挤到下一行
可以同时为一列指定多个试用于不同设备设备的类名，以便在不同宽度的屏幕下划分不同的分数

class=“coll-lg-2 col-md-3 col-sm-6 col-xs-12”
列嵌套

即在一个列中嵌套一个新的行row，行内再分为多个小列column

row的margin负值会抵消列的padding,而且高度自动和父元素一样高
列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。
列排序

使用col-lg-pull-份额使元素向左侧移动

使用col-lg-push-份额使元素向右移动
工具类

为了加快对移动设备的友好页面的开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或者隐藏页面的内容

隐藏
- hidden-xs 在超小屏幕隐藏
- hidden-sm 在小屏幕隐藏
- hidden-md 在中屏隐藏
- hidden-lg 在大屏幕隐藏
显示类
- visible-xs 在超小屏幕显示
- visible-sm 在小屏幕显示
- visible-md 在中屏显示
- visible-lg 在大屏幕显示

ps使用：

前端常用的面板

窗口 --》打开这些面板：图层信息字符选项工具选项历史记录

创建画布：

文件–》新建（创建出一个画布） ctrl+n

常用的工具：

文字：T

输入文字后文字很小 --》字符面板提供了文字的信息可以对文字进行修改

默认是添加横排文字还可以添加竖排文字

移动

只能移动对应图层上的元素，不能移动锁定的图层，想要移动锁定的图层要先将锁解开（比如：背景图层是锁定的，要先将小锁解开，双击图层会有一个修改名字的弹窗点击确定）

可以在右侧选择图层后移动也可以将上方的自动选择改为图层

选区工具

作用：可以用于测量页面中的元素大小，结合信息面板看起来更方便
- 在信息面板中可以看到框选中的值
- 也可以用于选中页面中的区域，复制出一个新的图层
截取素材：选中选取后按 ctrl+c （会有一个小剪子）ctrl+n （新建一个图层，会以选取的宽高建立）ctrl+v 将图片粘上去，就获取到一个图片素材了。点击文件 --》存储为，将素材存到我们的电脑上可以选择存储的格式一般存储为jpg
- 测量得到的尺寸默认是厘米可以修改编辑 --》首选项–〉单位与标尺在单位里将标尺与文字都改为像素
案例：打开一个网页截屏按下电脑键盘上 prt scr sys rq 键，回到ps工具中新建一个页面，会默认以我们截屏的宽高来进行设置
- 调整选取：使用选取工具选中区域后，按着空格选区会跟着走，将选取调整到合适的位置后再松手可以再调整选取的大小
- 可以使用放大镜 alt+滚轮可以放大或缩小
- 截取素材：选中选取后按 ctrl+c （会有一个小剪子）ctrl+n （新建一个图层，会以选取的宽高建立）ctrl+v 将图片粘上去，就获取到一个图片素材了。点击文件 --》存储为，将素材存到我们的电脑上可以选择存储的格式一般存储为jpg
抓手工具（小手）

拖拽画布，放大的时候特别好用放大时可以使用小抓手拖拽画布
菜单栏下的视图勾选标尺（ctrl+R）

参考线鼠标在标尺上按下向下拖到合适的位置，使用选取工具在参考线周围参考线会有一个吸附的功能

参考线可以使用移动工具移动回去，或者使用菜单栏视图清除参考线
- 使用参考线和选取工具配合裁剪出准确的元素
  
  将图像放大在需要裁剪的边缘使用选区工具先框选然后拉出参考线到合适的位置，各个方向参考线都拉到合适的位置后，再使用选区工具选中元素 ctrl+c ctrl+n ctrl+v 文件存储为
调整图像大小

菜单栏图像图像大小可以修改图片的大小
裁剪工具
吸管工具取色器

取色后点击左侧工具栏显示的颜色，出现颜色信息面板（拾色器）
画笔

可以随意绘制，前端用的不多
橡皮擦

前端开发--CSS基础

快速生成css样式

选择器的分类

基础选择器

元素的关系

复合选择器

后代选择器（常见）

子选择器

交集选择器

并集选择器（常见）

属性选择器

css的三大特性

继承性

优先级

层叠性

css中的长度单位

像素

百分比

em

rem

fonts字体属性

font-family属性

font-size

font-weight

font-style

font组合属性

文本属性

color：文本的颜色

text-align

text-decoration 装饰文本

text-indent 文本首行缩进属性

line-height 行高属性

white-space

over-flow

css的background属性

background-color：

background-image

background-repeat 背景平铺

background-positon 背景图片的位置

background-size 背景图片的大小

background-attachment 背景图片附着（固定） 了解

background-clip

background-origin

background复合写法

css盒模型

Content 盒模型的实际内容

border 边框

padding 内边距 填充

margin外边距

元素在水平方向上的布局

行内元素的盒模型

默认样式

box-sizing

outline 轮廓线

圆角边框 border-radius

box-shadow 盒子阴影

Text-shadow 文字阴影

文档流

float浮动

高度塌陷

BFC（block Fomatting Context）块级格式化环境

清除浮动：

position定位属性

相对定位

包含块（containing block）

绝对定位

固定定位

粘滞定位

定位元素水平布局

定位元素垂直方向布局

z-index定位层级

display（显示）

visibility 可见性属性

overflow 溢出属性

字体图标

cursor 鼠标样式

outline 边框线

vertical-align

css初始化

css3新增语义化标签

background-attachment 背景图片附着（固定）了解

padding 内边距填充

Css3 新增属性选择器

总结元素水平垂直居中汇总