CSS总结

目录

CSS概念

理解

CSS构成

注意：

CSS里面的注释

CSS目的

CSS分类

属性相同时CSS优先级

CSS选择器

选择器优先级

外部CSS

外部CSS创建引入方式1

引入外部样式表（放在哪里都可以）

外部CSS创建引入方式2

案例

link和import之间的区别

行内CSS

内部CSS

内部CSS与外部CSS

选择器

标签名选择器

类选择器

交集选择器 

格式：

案例： 

id选择器

注意：

通配符选择器

分组选择器

包含选择武器

伪类选择器

结构性伪类选择器

目标伪类选择器

UI元素状态伪类选择器

否定伪类选择器

动态伪类选择器

层级选择器

属性选择器

 模糊匹配的属性选择器

伪元素（行内元素）

CSS基本属性

文本属性

color属性写法

text-transform属性值

文本阴影案例

列表属性

list-style-position

list-style合并属性

背景属性

background-repeat属性

background-position属性 

背景图片大小

background-attachment属性

background-clip属性 

背景复合属性

设置内容可见性 

visibility属性

设置透明度

opacity属性

光标属性 

cursor属性

filter图像滤镜属性

属性值

为盒子设置模糊

空余空间

属性值

文档流

标准流限制如下

脱离文档流

浮动

注意：

浮动规则案例

浮动副作用

清浮动

清除浮动方式

清浮动属性 

overflow属性让浮动父元素计算高度

溢出属性 

overflow属性值

overflow属性分类

定位

注意：

粘性定位

定位里的层级

层级属性

注意：

绝对定位与浮动的区别

宽高自适应

宽度自适应

自适应属性

min-height属性

窗口自适应

CSS里面以%为单位

cala函数

注意：

盒子模型

边框

border属性（复合属性）

边框分类

内边距

内边距分类

padding：复合内边距

外边距

外边距分类

margin复合外边距

注意：

外边距的特性

元素显示类型

块元素

行内元素

行内块元素

盒子阴影

属性值

圆角边框

属性值

两边值的个数对于值的分配遵循以下原则

怪异盒模型

标准盒模型

怪异盒子模型·

理解属性值

弹性盒子

功能：

1.默认（说明可以改）让子元素（包括块级）横向排列

2.子元素是行内元素则直接转化为块级元素 

3.设置一个元素相对于父盒子的水平垂直居中——margin: auto;

设置弹性盒子垂直排列方式

主轴对齐方式

属性值

调整侧轴排列

属性值

调整是否挤压元素宽度

属性值

折行

属性值

调整折行之后的行间距

属性值

项目对齐方式

属性值

项目调整顺序

剩余宽高

网格布局

flex与grid布局

容器和项目

网格布局中的属性

容器属性

触发网格布局

行列划分

属性值n的写法

列间距（复合属性）

指定区域

网格布局对齐方式

grid-auto-flow属性

属性值

单元格项目对齐

单元格内容对齐

网格布局项目属性

网格线合并

移动端

模拟器上显示的分辨率

移动端布局

设置滚动条隐藏（全局生效）

多列布局（瀑布流）

属性

响应式布局

常见的布局方式

响应式布局设计原则

媒体查询

媒体查询操作方式

设备类型（默认为all）

注意：

常用媒体查询

PC端或大屏幕设备

通用断点

字体引入

语法规则

rem布局开发

px、em、rem单位

基于375px宽度设计的网页在不同宽度客户端等比例缩放问题 

vh与vm单位

 注意：

精灵图

图片整合的优势

两栏布局与三栏布局 

2种3栏布局方法

第一种

第二种 

CSS渐变

线性渐变

direction属性

direction也支持角度渐变

径向渐变

控制渐变

注意：

center属性改变渐变起点

渐变起点：

重复渐变

重复线性渐变

重复径向渐变

过渡

transition属性（复合属性）

属性值

transition-timing-function属性值

逐帧动画 

贝塞尔曲线

transform（）属性（复合属性）

属性值translate（值1，值2）

属性值scale（）

改变中心点位置为左上角（默认值为center）

旋转

rotate()属性

多属性值的使用

1.位移与缩放

2.位移与旋转

倾斜的

属性：skew()

关键帧动画

animation与transition的区别

animation属性 

动画持续时间

动画延迟时间

动画过渡类型

动画循环次数

动画在循环中运行方向

动画运行状态

动画填充模式

关键帧动画

3D

属性值

3D位移

设置景深

3D旋转

3D缩放

CSS概念

定义：层叠样式表，用来修饰html的，目前遵循的W3C发布的CSS3.0

理解

1. 每个CSS样式由2部分组成，即选择符和声明，声明又分为属性和和属性值
2. 属性必须发布放在花括号中，属性与属性值用：连接
3. 每条声明用；结束
4. 当一个属性有多个属性值时，属性与属性值不分先后顺序，用空格隔开
5. 在书写样式过程中，空格，换行等操作不影响属性的显示

CSS构成

style>
    h1{
        color: rgb(239, 21, 21);
        font-style: italic;
    }

注意：

• CSS选择器必须放在style标签内
• style标签放在哪里都可以，并且可以写多个
• CSS优先级body内style高于head内style
• style标签是html提供的标签

CSS里面的注释

内容：/*注释内容*/

CSS目的

使用CSS属性来实现最终可以将CSS代码和HTML代码进行分离，同时也可以提高代码的复用性

CSS分类

1. 内部CSS：使用html提供的style标签把css代码包起来
2. 外部CSS：从外部引入CSS
3. 行内CSS：当前行有效，给标签内加一个style属性

属性相同时CSS优先级

行内CSS>内部CSS>外部CSS

注意：加属性值后加!important 的所对应的属性优先级最高

    h1{
        color: rgb(228, 15, 33)!important;
    }

CSS选择器

• 标签名选择器
• class选择器
• 交集选择器
• id选择器
• 属性选择器
• 分组选择器
• 通配符选择器
• 包含选择器
• 伪类选择器
• 层级选择器

选择器优先级

外部CSS

外部CSS创建引入方式1

引入外部样式表（放在哪里都可以）

属性

• link：本页面能和外部页面进行链接
• href：表示本页面要链接的CSS文件的地址
• type：表示本页面链接到的页面类型，这里链接的是CSS样式表（不写也可以）
• rel：用来说明本页面与链接页面之间的关系

注意：将内部样式表里的资源剪切到css文件中（不包含style标签）并在表中引入

外部CSS创建引入方式2

案例

注意：css.html与index.css在同一个文件夹下

    
    
    
    
    


    
我是大神

/* index.css */ 
   h1{
        color: aqua;
    }

link和import之间的区别

行内CSS

结构：

我是div

    
    
    
    


    
我是div

内部CSS

    
    
    
    


    
实验

内部CSS与外部CSS

• 内部CSS标签与外部CSS标签在页面内可以引入多个
• 内部CSS标签与外部CSS标签放在页面内哪里都可以

选择器

目的：要使用CSS对HTML页面中的元素实现一对一，一对多或者多对一的控制

标签名选择器

    
实验

类选择器

    
111111
    
222222
    
333333

    
111111

    
    
222222

    
333333

交集选择器 

格式：

选择器1选择器2{

            属性:属性值;

        }

注意： 选择器和选择器之间没有任何连接符号

案例： 

    
我是div
    
我是p

    

        
一段话
        
二段话
        
三段话
    

id选择器

    
111111
    
222222
    
333333

注意：

• 当我们使用id选择符时，应该为每个元素定义一个id属性
• id选择符的语法格式是“#”加上自定义的id名
• 起名是要取英文名，不能用关键字（所有标记和属性都是关键字）
• 一个id名称只能对应文档中的一个具体元素对象（唯一性），和类不同

通配符选择器

 /* 通配符选择武器，不管什么都具有下面的属性 */
    *{
        color: aqua;
    }

分组选择器

    
111111
    
222222
    
333333

包含选择武器

    

        
我是一段话
    

    

        
我是一段话
    

伪类选择器

结构性伪类选择器

   

    
道生一
    
一生二
    
二生三
    
三生万物
   
   

   

   

    
道生一
    
一生二
   
   

    
二生三
   
   

目标伪类选择器

  
a
  
b
  
c
    

    
点我到a
    
点我到b
    
点我到c
    

UI元素状态伪类选择器

E:focus：匹配获取焦点的元素E

  

    用户名：

    密码：

    记住用户名：

    
  
  
总有一天，我会改变世界

否定伪类选择器

    
111
    
222
    
333

动态伪类选择器

语法（style里面有顺序如下）

层级选择器

    

        
111
        
222
        
333
        
444
        
555
    

    

        
111
        
222
        
333
        
444
        
555
    

注意：以上两种选择器生效于兄弟节点

属性选择器

 模糊匹配的属性选择器

• class^="b"：查找以b开头的
• class$="b"：查找以b结尾的
• class*="b"：查找包含b的

伪元素（行内元素）

    
i am a dog

修改input中的placeholder默认颜色

注意：-webkit-表示兼容WebKit browsers（Chrome的内核）

CSS基本属性

文本属性

word-spacling：词间距

color：字体颜色

text-transform: capitalize;

text-overflow：ellipsis；（溢出并隐藏后的文本用…显示）

text-shadow: 水平方向位移 垂直方向位移 模糊程度 阴影颜色;（文本阴影——单）

text-shadow: 水平方向位移 垂直方向位移 模糊程度 阴影颜色，水平方向位移 垂直方向位移 模糊程度 阴影颜色;（文本阴影——多）

注意：多阴影之间的多个阴影用，隔开 

color属性写法

• 直接写英文字母
• rgb形式写灰度值，有4个参数，前3个为rgb灰度值，最后一个为透明度
• #加6个16进制数，其中每2个16进制代表rgb的每个灰度值

text-transform属性值

• capitalize： 每一个单词首字母转大写
• uppercase：每一个字母均转大写

body>
    
我是一段话

    
hello world

文本阴影案例

只要学不死，就往死里学

列表属性

    

        
11111
        
22222
        
33333
    

    

        
11111
        
22222
        
33333
    

list-style-position

作用：将标记放到盒子的里面还是外面

    

        
11111
        
22222
        
33333
    

list-style合并属性

相当于把list-style-type,list-style-image,list-style-position合并在一起

    

        
11111
        
22222
        
33333
    

背景属性

background-size——背景图片大小(复合属性——宽 高） 

background-clip——背景裁剪（控制背景元素显示区域）

    
我是一段话

background-repeat属性

注意：背景图片默认为平铺（当背景图片大小小于盒子大小时）

属性

• repeat：默认x、y轴都平铺
• repeat-x：只在x轴进行平铺
• repeat-y：只在y轴进行平铺
• no-repeat：不平铺

background-position属性 

    
我是一段话

背景图片大小

属性：background-size(复合属性——宽 高）

cover：把背景图片（等比例）扩展至足够大，使背景图片完全覆盖整个区域，但可能会丢失图片部分

contion：会把图片（等比例）扩展，但会将图片完完整整显示在墙上

    
我是一段话

background-attachment属性

• fixed：相对于浏览器窗口（屏幕）固定（不是页面）

• scroll：相对于盒子固定（默认值）

background-clip属性 

注意：内容区域并不一定为背景区域

属性值

• border-box：背景从border区域向外裁剪（默认值）——此属性你将border边框改为虚线就可以清楚看到
• padding-box：背景从padding区域向外裁剪
• content-box：背景从content区域向外裁剪

背景复合属性

background属性

    
我是一段话

注意：会有覆盖现象        

设置内容可见性 

visibility属性

语法：visibility: 属性值;

属性值

• visible：定义元素内容可见（默认值）
• hidden：定义元素内容不可见，但会占据原有位置
• collapse：用在表格元素时会删除一行或一列，用在非表格元素上时和hidden效果一样
• inherit：子元素的visibility属性从父元素继承

display：none；与visibility：hidden；区别

• display：none；：不占位的隐藏（看不见，摸不着）
• visibility：hidden；：占位置的隐藏（看不见，摸得着）

设置透明度

opacity属性

语法：opacity:0;

当其值为0时表示透明，值为1时表示不透明

光标属性 

cursor属性

语法：cursor:属性值；

表示鼠标放在被cursor属性修饰的块内光标的显示结果 

属性值

• default：默认光标（通常是一个箭头）
• auto：默认，浏览器设置的光标
• crosshair：光标呈现为十字线
• pointer：光标呈现为一只手
• move：光标呈现表示某对象可移动的十字架型光标
• text：光标指示可以对文本进行书写的I型光标
• wait：光标指示程序正在忙（通常为一只表或一个沙漏）

filter图像滤镜属性

属性值

参数	呈现效果	使用方法	默认值	说明
none	默认值没效果	filter:none	none	没有效果
blur	设置图像模糊	filter:blur(px)	0	值越大图像越模糊
brightness	设置图像亮度	filter:brightness(%)	1	值可以超过100%，值越大越亮
contrast	设置图像对比度	filter:contrast(%)	1	值可以超过100%，值越大对比度越高
grayscale	设置图像为灰度图像	filter:grayscale(0-100%)	0	值不可超过100%，值越大图片越灰
hue-rotate	设置图像色相旋转	filter:hue-rotate(deg)	0	旋转角度与效果参照色相环
opacity	设置图像透明度	filter:opacity(0-100%)	1	值越小越透明
saturate	设置图像饱和度	filter:saturate(%)	1	值越大越饱和
sepia	设置图像为深褐色	filter:sepla(0-100%)	0	值越大图像越褐
initial	设置属性为默认值	filter:initial	initial	就是none的效果
inherit	属性从父元素继承	filter:inherit		效果是父元素的效果

为盒子设置模糊

空余空间

white-space属性

属性值

• normal：默认值，忽略空格回车等（文字在盒子一行显示一行满了换下一行）
• nowrap：文本不会换行，不管盒子范围，文本会在同一行上继续显示，直到遇到
  为止
• pre：预格式化文本，文本不会折行，若盒子长度不够文字在盒子外显示
• pre-wrap：预格式化文本，会折行
• pre-line：显示回车，不显示空格，会换行

    

        

            这是一行文字这是一行文字
            这是一行文字这是一行文字
            这是一行文字这是一行文字
        
    

文档流

含义：文档流是文档中可显示对象在排列时所占用的位置/空间

eg：块级元素自上而下摆放，内联元素从左到右摆放

标准流：如果完全遵循元素的默认摆放方式，那么就属于标准流

注意：标准流里面使用布局会有诸多限制，会导致许多页面效果无法实现

标准流限制如下

1.元素高矮不一的情况会以底边对齐

2.空格折叠现象

• 无论多少个空格、换行、tab、都会折叠为一个空格
• 如果我们想让元素之间没有空隙，那么代码必须紧密连接不能有空格

脱离文档流

使一个元素脱离文档流有三种方式

• 浮动
• 绝对定位
• 固定定位

浮动

浮动：增加一个浮层来放置内容

注意：

• 任何元素都可以浮动
• 所有的浮动都在同一层，页面中标准流一层，浮动一层
• 浮动后元素会脱离文档流，不占用空间
• 浮动只有左右浮动，没有上下浮动
• 脱离文档流后，元素相当于在页面增加了一个浮层来放置内容。此时可以理解为有两层页面，一层是底层原页面，一层是脱离文档流的上层页面，所以会出现折叠现象
• 浮动会让块级元素水平方向排布，如果容器空间宽度不够，那么会开第二行。
• 浮动的元素和不浮动的元素在一起，若浮动元素在上面因为浮动元素不占用空间，则不浮动的元素会把浮动元素空间占用，浮动元素把不浮动元素盖住，但是不浮动元素的文字不会被盖住

    
我是一段
    
我是二段
    
我是三段

注意：蓝色的部分虽然被红色覆盖，但是文字依然看得见 

浮动规则：见缝插针

    
我是一段
    
我是二段
    
我是三段

浮动规则案例

浮动副作用

• 如果父级元素没设置高度的话，浮动元素会造成父级元素高度塌陷（就是父元素高度直接没了）
• 后续元素会收到浮动元素影响，把浮动元素的位置占用

清浮动

含义：清除浮动元素盖住不浮动元素的效果

清除浮动方式

• 父元素设置高度
• 受影响的元素增加clear属性
• overflow清除浮动
• 伪对象方式

清浮动属性 

    
我是一段
    
我是二段
    
我是三段

overflow属性让浮动父元素计算高度

    

        
我是一段
    
    
我是三段

溢出属性 

overflow属性值

• visible：默认值，溢出内容会显示在元素之外
• hidden：溢出内容隐藏
• scroll：溢出内容以滚动方式显示，没有溢出也显示滚动条，只是不能用
• auto：如果有溢出会添加滚动条，没有溢出则正常显示（没滚动条）
• inherit：规定应该遵循父元素继承overflow属性

overflow属性分类

• overflow-x：x轴溢出
• overflow-y：y轴溢出
• overflow：x，y轴均能溢出

定位

注意：

• static默认按照文档流的顺序，从左到右，从上到下将网页填满（和行内与块级元素有关）
• 是否脱离文档流指是否占位置
• 除了static定位之后的都可以设置属性（top、bottom、left、right）
• 粘性定位不是脱离文档流的，其偏移位置为浏览器当前窗口
• 粘性定位和相对定位会保留自己原来的位置，绝对定位和固定定位都不会保留自己原来的位置
• css中的坐标系是以从左到右为x轴正向，以从上到下为y轴正向
• 每次设置一次绝对定位或固定定位，那么就多一层
• 设置定位之后，相对定位和绝对定位他是相对于有定位的父级元素（不管绝对相对，有就行）进行位置调整，如果父级元素不存在则继续向上逐级寻找，直到顶层文档
• 相对定位是相对于自己的移动，会占用之前的位置，不会占用之后的位置

粘性定位

定位里的层级

如果两个兄弟块级元素定位到相同位置，那么后面定位的块会把前面定位的块盖住（后来居上），如果想要让之前的块级元素盖住后面定位的块级元素，那么需要设置层级，并且需要前面块级元素的层级大于后面块级元素的层级

层级属性

层级为10

z-index：10；

注意：

• 层级可以设置为负值，值越大层级越大
• 两个兄弟块级元素下生效，父级元素不能盖住子级元素，如果想要父级元素盖住子级元素，那么不需要父级元素设置层级，子级元素设置层级为负数即可
• 绝对定位可以将行级元素直接转化为块级元素

绝对定位与浮动的区别

• float：半脱离文档流，文字环绕效果实现
• absolute：全脱离，不会实现文字环绕效果

宽高自适应

宽度自适应

width：auto；

width/height属性不写或者auto都为宽/高自适应（自适应窗口大小，不会出滚动条——窗口盒子大小不变）

自适应属性

• min-height：最小高度
• max-height：最大高度
• min-width：最小宽度
• max-width：最大宽度

min-height属性

min-height：500px；

如果被修饰的块没内容，那么他会占高度500px，有内容则高度大于500px

窗口自适应

定义：盒子根据窗口大小进行改变

/* 窗口自适应设定 */
html,body{height: 100%;}

注意：没有设置宽度是因为一个盒子默认占满整个宽度 

    
i am a pig

CSS里面以%为单位

• 一个元素如果有父级元素，那么该子类元素设置宽高的百分数，以及定位的百分数是以父级元素的宽高为参考对象
• 一个元素的位移变换（transform属性）等，不管有没有父级元素，都是以自身宽高为参照

cala函数

用途：用于动态计算长度值

注意：

• 运算符的前后都需要保留一个空格
• 任何长度都可以使用calc()函数进行计算
• 该函数支持“+”、“-”、“*”、“/”运算
• 该函数支持运算符优先级规则

盒子模型

盒子模型是CSS布局的基石，它规定了网页元素如何显示以及元素间的关系。CSS定义所有元素都可以拥有像盒子一样的外形和平面空间，即都包含边框、边界、补白、内容区。

边框

border属性（复合属性）

内部包含3种属性

• 线的宽度：border-width
• 线的样式：border-style
• 线的颜色：border-color

线的样式

• solid：实线
• double：双实线
• dashed：虚线
• dotted：点状线

   

    我是个大神
   

注意：背景颜色也能蔓延到边框中，但是边框不在盒子（宽高）范围内

边框分类

• border-top
• border-bottom
• border-left
• border-right

内边距

padding：相对于自己的内部边距

   

    我是个大神
   

内边距分类

• padding-left：左内边距
• padding-right：右内边距
• padding-top：上内边距
• padding-bottom：下内边距

padding：复合内边距

• 1个值，4个方向一样
• 2个值，上下，左右
• 3个值，上，左右，下
• 4个值，上，右，下，左 

外边距

margin：相对于自己的外部边距

我是一个方块
我也是一个方块

外边距分类

• margin-left：左外边距
• margin-right：右外边距
• margin-top：上外边距
• margin-bottom：下外边距

margin复合外边距

• 1个值，4个方向一样
• 2个值，上下，左右
• 3个值，上，左右，下
• 4个值，上，右，下，左 

注意：

• 内边距不支持负数，但外边距支持负值
• 设置盒子屏幕水平居中：margin:0 auto;（前面的0代表距离上面的像素）

外边距的特性

两个盒子垂直外边距与水平外边距问题

• 垂直方向：外边距取最大值
• 水平方向：外边距会进行合并叠加 

给子盒子加外边距

最终外边距作用在子盒子身上以父盒子为外 ，前提是设置边框，不设置边框的话那么就会外边距直接作用于父盒子身上

元素显示类型

块元素

独占一行，可以设置宽高，遵循盒子模型（内外边距，边框均可设置）

display：block；

display：list-item；

注意：p标签放文本可以，不能放块级元素 

行内元素

多个行内元素处于同一行，不能设置宽高，左右内外边距，边框均可设置，上下内外边距设置无效

display：inline；

行内块元素

兼具行内元素和块级元素特征，支持盒子模型

display：inline-block；

隐藏属性

display：none；

盒子阴影

box-shadow属性（复合属性）

属性值

只要学不死，就往死里学

注意：如果不加insert属性，那么默认是外阴影，加了insert属性就变内阴影,内外阴影如下

圆角边框

border-radius属性（复合属性）

border-radius：圆角效果；

注意：圆角效果的大小等于从矩形的顶点开始向两边延申的距离，到达指定距离的两个点之间用来形成圆角

属性值

• 一个值：四个角一样
• 二个值：左上右下，左下右上
• 三个值：左上，左下右上，右下
• 四个值：左上，右上，右下，左下

border-radius：水平距离/竖直距离；

注意：这里的圆角效果的大小等于从矩形的顶点向水平延申的距离，以及竖直延申的距离，之后到达指定距离的两个点之间用来形成圆角，并且，这种写法只支持border-radius属性

用来自定义多个角的话写法如下

两边值的个数对于值的分配遵循以下原则

• 一个值：四个角一样
• 二个值：左上右下，左下右上
• 三个值：左上，左下右上，右下
• 四个值：左上，右上，右下，左下

怪异盒模型

含义：更改原盒子模型的计算方式通过box-sizing属性的取值进行更改

属性：box-sizing——默认值是content-box（标准盒子模型）

该属性允许您以特定的方式定义匹配某个区域的特定元素

这是由CSS2.1规定的高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框

标准盒模型

属性值：content-box 

怪异盒子模型·

属性值：border-box

为元素设定的宽度和高度决定了元素的边框盒子

就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过已设定的宽度和高度分别减去边框和内边距才得到内容的宽度和高度

理解属性值

• border-box：盒子宽高以盒子大小为中心
• content-box：盒子宽高以内容为中心

弹性盒子

display：flex；

功能：

1.默认（说明可以改）让子元素（包括块级）横向排列

2.子元素是行内元素则直接转化为块级元素 

    

        毁灭吧！
        颤抖吧！
    

3.设置一个元素相对于父盒子的水平垂直居中——margin: auto;

    

        毁灭吧！
    

设置弹性盒子垂直排列方式

属性：flex-direction

属性值

• row：正向横向排列（默认）
• row-reverse：反向横向排列
• column：正向垂直排列
• column-reverse：反向垂直排列

理解：确定谁为主轴 

    

        毁灭吧！
        颤抖吧！
    

主轴对齐方式

属性名：justify-content

属性值

• flex-start：左对齐
• center：居中对齐
• flex-end：右对齐
• space-between：两端对齐
• space-around：距离环绕（两端流出空隙为npx，每个块之间流出空隙为2npx）

    

        毁灭吧！
        颤抖吧！
    

调整侧轴排列

属性名：aline-items

属性值

• flex-start：左对齐（默认值）
• center：居中对齐
• flex-end：右对齐

注意：在主轴上排列始终会在主轴排列，不会换行，不管块总宽度是否大于盒子宽度，如果大于则块宽度会被挤压变小，在这里的侧轴（为y轴的情况）排列更好的理解为从上到下的垂直排列方式

调整是否挤压元素宽度

属性：flex-shrink

属性值

• 0：禁止挤压
• 1：允许挤压

注意

• 该属性应该用在项目身上表示该项目是否允许被挤压
• 如果不允许被挤压，那么多个项目长于主轴时依然不会换行，只会溢出主轴外，此时中间若有允许被挤压的项目，那么该项目直接会被挤压消失

折行

折行属性：flex-wrap

作用：如果主轴显示不下就会直接折行，但是会行与行之间进行等间距排列

注意：如果折行后多个项目总高度大于 盒子高度，则会直接溢出

属性值

• wrap：折行
• nowrap：不折行

    

        毁灭吧！
        颤抖吧！
        恐惧吧！
        颤栗吧！
    

调整折行之后的行间距

属性名：align-content

属性值

• flex-start：左对齐
• center：居中对齐
• flex-end：右对齐
• space-between：两端对齐
• space-around：距离环绕

项目对齐方式

理解：设置弹性盒子的盒子为容器，容器里面的块级元素被称为项目，这是为弹性盒子每个项目设置的属性，这里的项目对齐方式可以脱离主轴的控制，在与主轴的垂直方向上进行特定排序

注意：可以脱离折行控制

属性名：align-self

属性值

• flex-start：左对齐
• center：居中对齐
• flex-end：右对齐
• baseline：和flex-start类似
• stretch：拉伸，如果该项目盒子不设置高度那么该项目会默认占满弹性盒子高度（弹性盒子设置高度）的高度——这是相对横向为主轴来说，纵向为主轴，该项目会默认占满弹性盒子宽度

    

        
毁灭吧！
        
颤抖吧！
    

项目调整顺序

order：0；

注意：order值默认为0，order值越大，顺序越靠后，如果多个order值一样，那么就按正常顺序排列（order可以为负数）。

剩余宽高

flex：1；

给项目加上此属性意思为占满剩余空间，如果多个项目flex属性相同，那么就会出现空间均分的情况，如果不同，则按比例换算自己占总的几份空间就占总的几份

网格布局

含义：将网页划分成一个个网格，可以任意组合成不同的网络，做出各种各样的布局

flex与grid布局

• flex布局是轴线布局，只能指定而且根据轴线位置，可以看作是一维布局
• grid布局是将容器划分成行和列，产生单元格，然后指定项目所在的单元格，可以看作是二维布局

容器和项目

容器：一个案例中最大的盒子，可以理解成父元素

项目：一个案例中，最大盒子里面的内容，可以理解成子元素

行和列：容器里面水平区域称为行，垂直区域称为列

单元格：行和列交叉的区域

网格布局中的属性

含义：网格布局中的属性和flex中的布局类似，分成了两类，一类容器属性，一类项目属性

容器属性

触发网格布局

给父元素添加：display：grid；

display关于网格的取值分为两个，grid（块网格）和inline-grid（行内块网格）

• grid==网格布局的容器为块级元素，该容器独占一行
• inline-grid==网格布局容器为行内块元素

注意：给行内元素加display：grid；就可以将此容器变成块元素

行列划分

规定行属性：grid-template-row：n；

规定列属性：grid-template-column：n；

后面的取值数量代表多少行，多少列

属性值n的写法

绝对大小：npx

百分比：n%

注意：行或列百分比总和为100% 

功能函数repeat（）

auto-fill关键字（功能填充）配合功能函数使用 

fr关键字 （列宽片段）

为了方便表示比例关系，网格布局提供了fr关键字（fraction的缩写，意味片段）如果两列的宽度分别为1fr和2fr，就表示后者是前者的两倍。

注意：以上5fr=表格列宽 

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
    

设置最小/最大值

grid-template-rows: minmax(100px,200px) 200px 300px;

minmax(100px,200px)：最小100px最高200px

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
    

列间距（复合属性）

grid-gap：30px 30px；

第一个值表示行间距，第二个值表示列间距

指定区域

合并网格的时候使用“grid-area：网格名字；”进行合并

设置子元素区域名字

grid-area: 区域名字；

结果图

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
    

注意：每个块占的位置只能是个矩形

网格布局对齐方式

grid-auto-flow属性

设置子盒子排列方式为纵向排列

grid-auto-flow: column;

属性值

• row：横向排列，默认值
• column：纵向排列

单元格项目对齐

单元格内容对齐

 注意：单元格对齐方式默认为stretch，不加宽高才好用

    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
        
9
    

网格布局项目属性

网格线合并

    

        
1
        
2
        
3
        
4
        
5
        
6
    

    .box div:nth-child(1){
        /* 简写方式 */
        grid-column: 1/3;
        grid-row: 1/3;
        /* 因此1占2行共4个单元格 */
    }

    .box div:nth-child(1){
        /* 简写方式 */
        grid-column: 2/4;
        grid-row: 2/4;
        /* 通过网格线改变块的位置与大小 */
    }

移动端

模拟器上显示的分辨率

• CSS像素：设备的独立像素
• 物理分辨率：设备的像素

设备像素比（dpr）=物理像素/CSS像素

移动端布局

布局视口：布局视口是指网页的宽度，一般移动端浏览器都默认设置了布局视口的宽度。

视觉视口：视觉视口是指用户正在看到网页的区域，这个区域的宽度等同于移动设备浏览器窗口的宽度。

理想视口：理想窗口是指对设备来讲最理想的视口尺寸，采用理想视觉窗口的方式，可以使网页在移动端浏览器上获得最理想的浏览和阅读的宽度

• width=device-width：宽度为设备宽度
• initial-scale=1.0：设备初始值，1.0表示不缩放
• user-scalable=no：用户不允许双击和捏放

设置滚动条隐藏（全局生效）

    /* 定制滚动条消失 */
    ::-webkit-scrollbar{
        display: none;
    }

多列布局（瀑布流）

属性

column-count：规定元素被分割的列数

column-gap：规定列之间的间隔大小

column-rule：调整列边框（复合属性）

column-fill：设置或检索对象所有列的高度是否统一

• auto：列高度自适应内容
• balance：所有列的高度以其中最高的一列统一

column-width：设置或检索对象每列的宽度 

column-span：该元素是否横跨父级元素所有列

• none：不跨列
• all：横跨所有列

break-inside：是否允许该盒子内部折行

• auto：允许
• avoid：不允许 

    

        
hello world
        
hello world
        
hello world
        
hello world
        
hello world
    

响应式布局

定义：按照屏幕的大小进行动态的响应，快速的反应，快速的处理让每个屏幕都能在这套网页中很好的展示，这就叫响应式布局

常见的布局方式

固定布局：以像素作为页面的基本单位，不管设备屏幕以及浏览器宽度，只设计一套尺寸

可切换的固定布局：同样以像素作为页面单位，参考主流设备尺寸，设计几套不同的宽度布局。通过识别的屏幕尺寸以及浏览器宽度，选择最合适的那套宽度布局

弹性布局：以百分比作为页面的基本单位，可以适应一定范围内所有尺寸的设备屏幕以及浏览器宽度，并能完美的利用有效空间展现最佳效果

混合布局：同弹性布局类似，可适应一定范围内所有尺寸的设备屏幕及浏览器宽度，并能完美利用有效空间展现最佳效果；只是混合像素、和百分比两种单位作为页面的基本单位

布局响应：对页面进行响应式的设计实现，需要对相同内容进行不同宽度的布局设计，有2种方式

• PC优先：从PC端开始向下设计
• 移动优先：从移动端向上设计

无论基于哪种模式的设计，要兼容所有设备，布局响应时不可避免地需要对模块布局做一些变化（发生布局改变的临界点称为布局断点）

响应式布局设计原则

• 模块内容挤压拉伸——布局不变
• 模块中内容换行平铺——布局不变
• 模块中内容删减增加——布局不变
• 模块位置改变——布局改变
• 模块展示方式改变：隐藏-展开——布局改变

媒体查询

媒体查询可以让我们根据设备显示器的特性（如视口宽度、屏幕比例、设备方向：横向或纵向）为其设置CSS样式，媒体查询由媒体类型和一个或者多个检测媒体特性的条件表达式组成。媒体查询中可用于检测的媒体特性有width、height、color等。使用媒体查询，可以在不改变页面内容的情况下，为特定的一些输出设备制定显示效果。

媒体查询操作方式

对设备提出询问（表达书）开始，如果表达式为真，媒体查询中的CSS被应用，若为假则忽略

媒体查询结构

    @media all and(min-width:320px){
        body{
            background: red;
        }
    }

理解：对于所有的媒体，若宽度>=320px则使用如下样式

设备类型（默认为all）

注意：

• and被称为关键字，其他关键字还包括not（排除某种设备），only（仅限某种设备）
• （min-width：400px）就是媒体特性，其被放置在一对圆括号中

常用媒体查询

PC端或大屏幕设备

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

orientation属性

• portration：竖屏
• landscape：横屏 

竖屏时执行后面操作

@media screen and (orientation:portrait) and (max-width:720px){}

横屏时执行后面操作

@media screen and (orientation:landscape){}

注意：当宽度比高度大的时候浏览器认为是横屏，否则为竖屏 

通用断点

字体引入

字体模块：@font-face

语法规则

@font-face{

font-family:;

src:[][,[format>]]*;

[font-weight:];

[font-style:

rem布局开发

目的：解决移动端等比例缩放问题

px、em、rem单位

• px：像素单位
• em：相对于父元素字体大小的单位，如父元素字体大小为16px则1em=16px
• rem：相对于根元素（html）的字体大小

    

        
div1
    
    

        
div2
    

基于375px宽度设计的网页在不同宽度客户端等比例缩放问题 

    

        hello
    

vh与vm单位

• vh：view-height，100vh等于视口的高度
• vw：view-width，100vw等于视口的宽度

 注意：

• 不同终端的视口不同，vh与vw也不同
• 没有滚动条时100vw等于100%，如果有滚动条时100vw包含滚动条其为窗口大小，而100%为刨除滚动条后的窗口大小

精灵图

功能：将导航背景图片，按钮背景图片等有规则的合成一张背景图，即多张图片合为一整图，然后用background-position来实现背景图片的定位技术

图片整合的优势

• 通过图片整合来减少对服务器的请求次数，从而提高加载速度
• 通过整合图片来减少图片体积

两栏布局与三栏布局 

两栏布局：左边固定，右边块自适应

三栏布局：两边固定，中间块自适应

2种3栏布局方法

第一种

第二种 

CSS渐变

定义：用CSS方式实现的一个颜色到另一个颜色之间的平稳的过渡

线性渐变

background: linear-gradient(direction,color1,color2);

direction属性

• to bottom：从上向下渐变（默认）
• to top：从下向上渐变
• to left：从右向左渐变
• to right：从左向右渐变

direction也支持角度渐变

background: linear-gradient(90deg,red,blue); 

理解：red在下面，blue在上面，随着度数的增加顺时针旋转 

注意：颜色可以写多个值，支持多颜色渐变 ，颜色后面也可以加百分比来控制渐变

    

        hello world
    

径向渐变

径向渐变不同于线性渐变，线性渐变是从一个方向向另一个方向的渐变，而径向渐变是从一个点向四周的渐变

background: radial-gradient(center,shape,size,color1,color2);

center：渐变起点位置

shape：渐变的形状

• ellipse：椭圆形（默认）
• circle：圆形

size：渐变的大小，即渐变到哪里停止

• closest-side：最近边
• farthest-side：最远边
• closest-corner：最近角
• farthest-corner：最远角

控制渐变

 background: radial-gradient(red 5%,green 20%,blue 30%);

理解：5%的前面全为红色，之后红色从5%时就开始渐变直到20%变为绿色，绿色从20%开始渐变直到30%变为蓝色，之后不需要渐变剩下区域全为蓝色

注意：

• 颜色可以写多个
• color1为最内侧颜色，之后的颜色逐渐往外侧延申

center属性改变渐变起点

background: -webkit-radial-gradient(20% 40%,red,green,blue);

-webkit-radial-gradient解决浏览器兼容问题，从浏览器内核的角度支持一下此属性的设置 

渐变起点：

• 20%：从左向右为x轴的20%
• 40%：从上到下为y轴的40%

重复渐变

重复线性渐变

background: repeating-linear-gradient(red 5%,green 20%,blue 30%);

理解：5%的前面承接100%后面，之后红色从5%时就开始渐变直到20%变为绿色，绿色从20%开始渐变直到30%变为蓝色，之后又开始重复上述过程，直到到达100%

重复径向渐变

background: repeating-radial-gradient(red 5%,green 20%,blue 30%);

过渡

含义：CSS3的transition允许CSS的属性值在一定时间区间内平滑的过渡。这种效果可以在鼠标单击、获得焦点、被点击或对元素任何改变中触发，并圆滑的以动画效果改变CSS属性值

transition属性（复合属性）

transition: all 5s 3s linear;

属性值

1. all：单一属性-transition-property：检索或设置对象中参与过渡的属性（all表示所有属性均变）
2. 5s：单一属性-transition-duration：检索或设置对象过渡的持续时间
3. 3s：单一属性-transition-dely：检索或设置对象延迟过渡的时间（什么时候开始过渡）
4. linear：单一属性-transition-timing-function：检索或设置对象中过渡的动画类型

简写：transition：all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型

注意：单一属性transition-property写属性值可以写多个，中间用空格隔开 

transition-timing-function属性值

逐帧动画 

steps(n)：动画执行的步数——8步

transition: all 5s 1s steps(8);

贝塞尔曲线

transition: all 5s 1s cubic-bezier(值1，值2，值3，值4)；

其可以自定义变速动画

transform（）属性（复合属性）

属性值translate（值1，值2）

含义：将元素向指定方向移动

• 水平移动：向右移动translate（npx，0）向左移动translate（-npx，0）
• 垂直移动：向上移动translate（0，-npx）向下移动translate（0，npx）
• 双角移动：右下角移动translate（npx，npx），右上角移动translate（npx，-npx），左上角移动translate（-npx，-npx），左下角移动translate（-npx，npx）

translateX（npx）：水平方向移动一个对象，对象只在x轴上进行移动npx，若内部为正值，则对象右移，反之左移

translateY（npx）：竖直方向移动一个对象，对象只在y轴上进行移动npx，若内部为正值，则对象下移，反之上移

属性值scale（）

含义：让元素根据中心圆点进行缩放，默认值为1.因此0.01-0.99之间任何值是一个元素缩小，任何大于1的值使元素显得更大

该函数可以接受1个值也可以接受2个值，若只有一个值时，其第二个值默认与第一个值相等

• scaleX(n)：元素在水平方向上缩放元素
• scaleY(n)：元素在竖直方向上缩放元素
• scale(n)：元素在整个平面上缩放元素

注意：该放大为中心点放大，里面的值为负数时会出现倒像

改变中心点位置为左上角（默认值为center）

transform-origin: left top;

旋转

rotate()属性

rotate(n)方法：通过指定的角度参数对元素根据对象原点指定一个2D旋转。它主要在二维空间内进行操作，接受一个角度值，用来指定旋转的幅度。如果这个值为正值，元素相对于原点中心顺时针旋转；若为负，则逆时针旋转。

rotateX(n)方法，元素围绕其x轴以给定的度数进行旋转，它主要在三维空间内进行操作

rotateY(n)方法，元素围绕其y轴以给定的度数进行旋转，它主要在三维空间内进行操作

注意rotate(n)等价于rotateZ(n)

多属性值的使用

1.位移与缩放

2.位移与旋转

注意：transform内可以写多个属性，但是掌握好先后顺序，不可以在一个块中写多个transform，因为会出现覆盖导致生效的只有最后一个

倾斜的

属性：skew()

该函数能够让元素倾斜显示。它可以将一个对象以其中心位置围绕x轴和y轴按照一定的角度倾斜

• 一个参数：表示水平方向倾斜的角度
• 二个参数：第一个参数表示水平方向的倾斜角度，第二个参数表示垂直方向的倾斜角度

    
hello

关键帧动画

animation与transition的区别

相同点：都是随着时间改变元素的属性值

不同点：transition需要触发一个事件（hover事件或click事件）才会随着时间改变CSS属性；而animation在不需要触发任何事件的情况下也可以显示的随着时间的变化来改变元素的属性值从而达到一个动画的效果，css3的animation就需要明确的动画属性值

animation: ppt2 2s linear 1s 10 alternate;

animation属性 

动画持续时间

animation-duration: 2s; 

动画延迟时间

animation-delay: 5s; 

动画过渡类型

animation-timing-function: linear; 

动画循环次数

animation-iteration-count: infinite;

• 数字：代表循环一定次数
• infinite：代表循环无限次

动画在循环中运行方向

animation-direction: alternate;

• alternate：正常方向交替运行
• alternate-reverse：反方向交替运行
• normal：默认正常状态，不支持反向
• reverse：从结果开始反向运动

动画运行状态

animation-play-state: running; 

• running：运行中，默认
• paused：暂停 

动画填充模式

animation-fill-mode: forwards;

属性值

• none：默认值，没有动画填充
• forwards：保留最后一帧状态
• backwards：保留第一帧的初始状态

注意：动画填充模式不是无限循环时使用 

关键帧动画

animation: run 3s steps(1,start);

 这里的1表示从第一帧到第二帧只需要1步，没有多余过渡 

• end（保留当前帧，看不到最后一帧，动画结束看不见）
• start(保留下一帧，看不到第一帧，从第一帧很快跳到下一帧) 因为从第一帧开始

注意：

• step-start等于steps(1,start);
• step-end等于steps(1,end);

3D

transform-style: preserve-3d;

属性值

• flat：2D舞台（默认）
• preserve-3d：3D舞台

3D位移

transform:translateZ(100px);

transform: translate3d(0,0,100px);

3个参数分别为x，y，z轴移动

设置景深

perspective:900px; 

设置景深——视觉感受：近大远小,上面的意思是对象距离我们900px 

向z轴移动100px

注意：z轴上物体离我们越来越近，视觉感受就是物体越来越大 

3D旋转

• rotateX()：以x轴旋转对应角度
• rotateY()：以y轴旋转对应角度
• rotateZ()：以z轴旋转对应角度
• rotate3d()：以x，y，z轴旋转对应角度

transform: rotate3d(1,0,0,90deg);

注意：前面3个值为0/1分别对应x，y，z轴，后面跟个角度，代表每个轴旋转多少度 

3D缩放

• scaleZ()：沿着z轴进行缩放
• scale3d()： 沿着x，y，z轴放大对应倍数

transform: scale3d(1,1,10)；

里面有3个值分别对应x，y，z轴放大对应的倍数