CSS基础-CSS3

1.CSS（层叠样式表）

作用：美化html标签
写在style标签中，style标签一般写在head标签中，title标签下面（内嵌式）

当前页面，小案例

外联式： 写在一个单独的.CSS文件中，需要link标签引入.html文件中

多个页面，项目中

css文件中的标签与html标签中索要美化的对象标签相同

通过link标签引入，href后写css的路径

行内式： style标签直接写在html文件中的标签后面

css写在style标签的属性中
当前标签，配合js使用

补：变字号

2.选择器

标签选择器 以标签名命名的选择器
特：选中所有这个标签都生效
结构：标签名{css属性名：属性值；}


类选择器

特：针对性控制，定义且使用后生效
结构：.类名{css属性名：属性值；}

1）所有标签都有class属性，class属性的属性值为类名；
2）类名可以由数字、字母、下划线、中划线组成，但不能以数字或中划线开头；
3）一个标签可同时有多个类名，类名之间以空格隔开；
4）类名可以重复，一个类选择器可以同时选中多个标签。

id选择器

结构：#id属性值（css属性名：属性值；）
作用：找标签，配合js使用

1）所有标签都有id属性；
2）id属性值在一个页面中是唯一的，不可重复；
3）一个标签上只能有一个id属性值；
4）一个id选择器只能选中一个标签。


通配符选择器

结构：*（css属性名：属性值；）
作用：不分标签，全部修饰

3.字体

字体	属性名	取值	注意
大小	font-size	数字+px	谷歌默认16px，必加单位
粗细	font-weight	normal/400（正常） bold/700（加粗）	不是所有字体都有不同程度的粗细
样式	font-style	normal（正常） italic（倾斜）
字体	font-family	微软，雅黑，sans-serif(无衬线字体），etc	多写一点为了保证电脑可以显示
行高	line-height	数字（该标签font-size的X倍）/ 数字+px

• font -family在书写时，一律加上引号（单，双均可）

two.颜色（属于C3)

表示方法	表示含义	属性值
关键词	想要颜色名	red、green...
rgb表示法	红绿蓝三原色，每项取值范围：0~255	rgb（0，255，0）
rgba表示法	红绿蓝三原色+a表示透明度，取值范围是0~1	rgba（255，255，0，0.5）
十六进制表示法	#开头，将数字转换成十六进制表示
hsl	hsl(色相, 饱和度, 明度) 取值分别为0~360%，0~100%，0~100%	hsl(0, 100%, 50%)
hsla	a表示透明度，取值范围是0~1	hsl(0, 100%, 50%，0.5)

font的复合属性
属性名：font
取值： font：style weight size/line-height family；（各属性用空格隔开，大小和行高用/隔开）
取值有顺序：样式 粗细 大小/行高 字体族
省略要求：只能省略前两个，若省略相当于设置了默认值
注意：如果需要同时设置单独和连写的形式

1）把单独的样式写在连写的下面

2）把单独的样式写在连写的里面

即挨个写

4.样式的层叠问题

后面的覆盖前面的

< div >< span >< /span >< /div>
因为span是行内元素，因此不可以直接给span添加text-aline，而是给div添加text-aline

text-aline设置的对象必须是文字、行内标签、行内块标签

5.文本样式

text-indent

文本	取值	说明
缩进	数字+px 数字+em（1em=当前标签的font-size大小）

文本	取值	属性值
水平对齐	text-align	left（左对齐） right（右对齐） center(居中）

要让文本水平居中，需要给文本所在标签（文本的父容器）设置

所谓容器（可以说是参照物），即能装在内容的载体，例如块级标签，虽然text-aline的作用对象是行内元素，但该行内元素需要存在于一个块级标签内部，因此，需要给块级(父）元素设置text-aline，作用对象是父级标签内部的行内元素，但不可以直接给行内元素添加text-aline属性
eg.
1）< p >这是内容< /p >
p是块级元素，就可以直接给p添加text-aline
2）< div>< span>这是内容< /span>

6.文本修饰

属性	属性值	效果
text-decoration	underline	下划线
	line-through	删除线
	overline	上划线
	none	无装饰线

7.谷歌浏览器调试工具

打开方式：

1）打开网页的显示界面，单击鼠标右键，“检查”
2）F12或者Fn+F12（自己尝试）

如果想具体知道尺寸
点击想要调试的对象，长按键盘上的 上/下箭头进行调试，尺寸合适后在代码中进行修改。

8.选择器进阶

后代选择器
结构：选择器1 选择器2{css}（两个标签之间用空格隔开）
后代包括儿子，孙子，重孙子，etc（全部选中）

作用是选中div的元素内部的所有 p标签

选择器中由三个类选择器组成，应分别对应三个嵌套关系中的每一个标签，但p和span并未设置对应选择器，所以最终文字并不会显示红色，若想显示1）补全类选择器；2）将选择器改为.one p span

子代选择器
结构：选择器1>选择器2{css}
只能选中儿子（p）

并集选择器
作用：同时选中多组标签，设置相同的样式
结构：选择器1，选择器2{css}

交集选择器
作用：选中页面中同时满足多个选择器的标签
结构：选择器.类名{css}（标签选择器必须在最前面）

hover伪装选择器
作用：美化鼠标悬停在元素上的状态
结构：选择器：hover{css}
任何标签都可以添加伪类

emmet语法

9.背景相关属性

背景颜色
css标签中设置（bgc）
背景图片
属性名：background-image（bgi）
属性值：url 路径
插入的图片会将背景填充完整

背景平铺
属性名：background-repeat（bgr）
属性值：

取值	效果
repeat	水平和垂直方向都平铺 （占满）
no-repeat	不平铺（只显示一个）
repeat-x	水平方向平铺
repeat-y	垂直方向平铺

背景位置
属性名：background-position（bgp）
属性值：
1）0(水平） 0（垂直）（默认值左上）
2）单词（水平垂直可以颠倒顺序）：水平方向left center right
垂直方向top center bottom
3）写像素大小（坐标）（不可以颠倒顺序）：+为向右或向下移动，-为向左或向上移动（图片只能在盒子的范围内显示）

背景相关属性连写
顺序：无固定顺序

补：img标签和背景图片的区别
img标签插入的图片比较重要，背景图片不那么重要。
img标签：直接输入img标签即可
背景图片：div标签+背景图片

10.元素显示模式

块级元素
特：1）独占一行
2）宽度默认是父元素的宽度，高度默认由内容撑开
3）可设置宽高
eg. div、p、h…

行内元素
特：1）一行可以显示多个
2）宽度和高度默认由内容撑开
3）不可以设置宽高
eg.a、span
行内元素换行会导致显示时中间存在缝隙
下图中你好和很好之间

行内块元素
特：1）一行可显示多个
2）可设置宽高
eg.input、textarea、button、select…
元素显示模式转换

属性	效果	使用频率
display:block	转换成块级元素	较多
display:inline-block	转换成行内块元素	较多
display:inline	转换成行内元素	极少

补:html嵌套规范注意点
1)块级元素一般作为大容器，可以嵌套：文本、块级元素、行内元素、行内块元素等等
p标签中不要嵌套div、p、h等块级元素(谷歌浏览器有容错功能)
2)a标签内部可以嵌套任意元素
a标签中不能嵌套a标签

11.CSS特性

继承性
特:子标签会继承父标签的特性
控制文字属性都可以继承，但是和盒模型相关的width、height、padding等不会继承，需要重新设置
1)若标签本身自带颜色,则不会继承父标签的特性,但是可以单独设置 eg.超链接(a)
2)若该标签可以被控制,但不会超出自己本身的范围eg.h1

可以通过调试工具判断样式是否可以继承

层叠性
1)前盖后
2)1+1
当样式冲突时,只有当选择器的优先级相同时,才能通过层叠性判断结果

优先级
优先程度:继承<通配符选择器<标签选择器<类选择器<id选择器<行内样式<！important(针对性越高,优先级越高)

权重叠加计算
应用场景：复合选择器，此时需要通过权重叠加的计算方法，判断最终哪个选择器的优先级最高
计算公式：(每一级之间不存在进位）

行内样式指的是写在body里类似于标签属性的一种样式
eg.< span style="font-size:16px>这是span标签< /span >
比较规则：
1）先看第一级，若该级最大，则此选择器最优先运行
2）若所有数字都相同，则为同一优先级，遵从叠加性原则
3)如果都是继承，比较层叠性（eg.儿子继承爸爸，不继承爷爷）
!important如果不是继承，则权重最高，最先显示

图上的复合选择器中，div是标签选择器，对div标签进行修饰，#father和.c1都可以针对性的选择，但是body中并没有对子标签进行针对性的修饰，所以子标签p标签会继承父标签div的格式，故该选择器具有继承性

拓展：谷歌浏览器检查错误

1）选择器本身出错eg.文字，多写…
2)选择器的上一行出错

1）若html中出现红色波浪线，则存在语法错误
2）调试中出现感叹号也是存在语法错误
英文符号中，光标与符号是紧挨着的

12.PxCook.的基本使用

将图片直接拖进页面的空白处
png的图用设计模式量，右边的尺子
psd的分层图用开发模式

13.盒子模型

帮助布局（摆标签，摆内容）
“盒子”：
1）每一个标签都可称之为盒子；
2）网页中的元素可以看作是一个个矩形区域，这个区域也可以称之为盒子。

盒子模型：

• 写的时候从外到内，从上到下（根据框架，调内容）

内容区域（content）：笔记本
内边距区域（padding）：填充泡沫
边框区域（border）：纸盒子
外边距区域（margin）：两个盒子间的距离

内容区域的宽度和高度
作用：利用width和height属性默认设置是盒子内容区域的大小
属性：width / height
边框区域

• 属性名：border
• 属性值：单个属性的连写，取值之间以空格隔开（不分顺序）
  eg.border：10px solid red
  solid：实线
  dashed：虚线
  dotted：点线

边框单方向设置
场景：只给盒子的某个方向单独设置边框
属性名：border-方向英语单词
属性值：属性连写

盒子的整体大小=内容+border*2

内边距

会将盒子撑大
可写复合属性

• 四个数字顺时针方向，即上右下左
• 三个数字 上 左右 下
• 四个数字 上下 左右

盒子自动删减（不会被撑大）
方法：增加CSS3的模型
box-sizing:border-box；
外边距
与内边距设置方法相同

清除默认内外边距

版心居中

margin：0 auto；
实际意义是内容在父容器里面实现水平居中
作用对象（元素本身）要求：
1）必须是块级或行内块元素；
2）必须有宽度。

14.外边距问题

合并现象

下方盒子上边距与上方盒子下边距重合，取较大值

塌陷现象

对象：两个互相嵌套的元素
现象：对内部元素编辑时，外部元素受到影响

• 对子元素设置margin-top时
• 解决方法：
  1）给外部元素设置boder-top或者padding-top
  2）给父元素设置overflow：hidden

15.行内元素的内外边距问题

行内元素的区域由内容决定，
margin可改变左右，不可改变上下
可通过line-height来改变

16.结构伪类选择器

作用：通过标签关系查找标签

选择器	对象
E:nth-child(n){ }	匹配父元素中第n个元素，并且是E元素

• E是标签的通用代表符号
• n的注意点
  1）n=0、1、2、3…
  2)常见公式

功能	公式
偶数(2的倍数）	2n
奇数	2n+1/2n-1
找前五个	-n+5
找到从第5个往后	n+5（包括第5个）
##17.伪元素

• 对象非主体内容，由CSS模拟出的标签效果
• 种类：

伪元素	作用
：：before	在父元素内容的最前面添加伪元素
：：after	。。最后面。。

• 注意点：
  1)必须设置content才可以生效
  2）伪元素默认是行内元素

17.标准流

• 浏览器默认的一种排版规则
  1）块级元素独占一行、自上而下
  2）行内元素从左到右、挤不下换行

18.浮动

作用

• 让块级标签完美的在同一行排列
  1)图文环绕
  
  2）网页布局
• 内容
  问题：当两个div写代码不同行时，转化display时，两个区域之间会有间隔
  方法：在CSS中加float属性（left，right，none）
  
  3）使块级元素排列在一行

特点

1）脱标：浮动元素会脱离标准流，向指定方向浮动，直到碰到容器边缘或其他浮动元素。

• 相当于从地面飘到了空中（图中粉色覆盖了蓝色）

2）半脱离：图中粉色并没有覆盖蓝色标签中的字
3）浮动找浮动：下一个元素会在上一个浮动元素后面左右浮动
4）若想让one向下动，添加margin-top
5）一行可以显示多个
6）可以设置宽高


将连个标签放进新的div中，将外部div居中，可以实现浮动居中

拓展：CSS书写顺序：浏览器执行效率更高

1）浮动/display
2）盒子模型：margin、border、padding 宽度高度背景色
3）文字样式

19.清除浮动给其他标签带来的影响

1）设置父级元素的高度，将背景颜色去掉

div属于块级元素，独占一行，因此红会在蓝下方显示，添加浮动后，红向右走，但因为蓝div独占一行的特性（并不是粉的框定作用，内部才叫做框定），会阻止红继续向上走


2）额外标签法

• 方法：在父级标签内容的最后加块级元素标签
  标签CSS属性：clear：both
• 原因：添加的.clearfix元素因clear: both被强制放在浮动元素下方，撑开了父容器的高度
• 特：最后显示的区域大小是由内容撑起来的
  
  3）单伪元素
  写法：
  
• content: " " 生成一个空的伪元素节点
• display: block 将伪元素设为块级元素（只有块级元素才能触发clear属性）
• clear: both ； 强制该伪元素清除左右两侧的浮动，脱离浮动流（强制放在浮动元素的下方，使计算机不得不计算父容器的高度
• height: 0;除去conten的默认高度
• visibility: hidden ；隐藏伪元素的（颜色…会产生干扰）
  4）双伪元素
  
  display：table；表格级别的块级容器

5）给父元素设置overflow：hidden

20.CSS定位

应用场景

1）定位之后的元素层级最高，可以层叠在其他盒子上面
2）可以让盒子始终固定在屏幕中的某个位置

使用步骤

1）设置定位方式

• 属性名：position

定位方式	属性值
静态	static
相对	relative
绝对	absolute
固定	fixed

2）设置偏移值

• 垂直和水平任选一个
• 一般使用就近原则
  水平    left/right    数字+px（常用）   距离左/右的距离
  垂直   top/bottom  数字+px（常用）  距离上/下的距离

相对定位

• 简写：por
• 特：1）需要配合方向属性值才可实现移动
  2）相对于原来的位置移动，其他内容不占用其原来位置
  3）可能覆盖其他内容，但并没有脱标
  4）还具备原来的显示模式特点（块级元素，独占一行）
  如果left和right都存在，以left为准；同理，以top为准

绝对定位

• 简写：poa
• 特：1）脱标，其他内容占据其原来的位置
  2）改变标签的显示模式特点（具有行内块元素的特点，在一行共存，可改宽高）
  3）若父级元素有定位，则以父级元素为参照物，若父级元素没有定位，则以浏览器为参照物
  加的数值是子元素与父元素之间的距离
• 脱标
  
• body没有定位，以浏览器为参照物
  
• two没有定位，以浏览器为参照物
  
• two有定位，以two为参照物
  什么定位都可以
  一般使用相对定位，若使用绝对定位，父标签跑了，子标签也跑（子绝父相）
  

居中

• 绝对定位不会使盒子居中
  
  通过加百分比的形式居中

若要让盒子居中，则盒子的左边框要偏左，因此需要设置margin-right：100px或者margin-left：-100px（右下为正，左上为负）

位移居中（自己水平垂直居中）C3

• 属性值 transform：translate（-50%，-50%）
• 如果只有一个，写一个即可
  

banner（图）

将所要展示的图片放到一个大盒子里面，更容易定位相对位置

设置宽度的原因是因为设置绝对定位后的标签具有行内块样式的特点，显示的盒子由内容决定

固定定位

• 相对于浏览器进行定位移动
• 属性值：position-fixed（pox）
• 特：1）脱标
  2）以浏览器为参照物
  3）具备行内块的特点（最好设置宽高）
  

21.显示层级

• 定位>浮动>标准流
• 两个标签都加定位
  
  两个盒子调换位置（默认情况下，下面的层叠上面的）
  
  z-index：整数；
  1）只有该元素被定位后才可以生效
  2）默认值为0
  

22.定位装饰

垂直对齐

• 基线：浏览器按照基线对齐
  

• 解决方法
  属性值vertical-aline

属性名	效果
baseline	基线对齐
top	顶部对齐
middle	中部对齐
bottom	底部对齐

两个行内块标签

• 图中两者仍不上下错开，是因为浏览器将行内和行内块标签当作文字对齐，默认基线对齐
• 解决办法：找到其中一个标签设置vertical-aline：middle（行内块和文字对齐，行内块和行内块对齐都用此方式）

一个图一个文本框

• 按照基线对齐导致
  

嵌套关系

• 盒子里面套文本
• 盒子里面套图片
  1）
  
  2）将img转化为块级标签，则浏览器会将img作为标签处理
• 盒子里面的图片居中
  
  

23.光标

• 属性名：cursor

属性值	效果
pointer	小手，可以点击
text	工字型，可以选择文字
move	十字，可以移动/放大…

24.圆角边框（C3）

• 属性名：border-radius（边框半径）

• 常见取值：数字+px、百分比

• 复制规则：从左上角顺时针开始赋值，没有赋值看对角
  
  

• 正圆(必须是正方形）
  

• 胶囊（必须是长方形，属性取值为高度的一半）
  

• 单独设置某个角
  

• 单角椭圆（x半径 y半径）

• 单角椭圆连续写法
  注意用 / 隔开
  

25.溢出部分的显示效果

• 属性名：overflow

属性名	效果
hidden	隐藏
scroll	无论是否溢出，都显示滚动条
auto	根据是否溢出，自动添加滚动条

• 隐藏
  
• 都显示滚动
  
• 自动显示滚动
  

26.元素本身隐藏

• 常见属性
  1）visibility：hidden（占位隐藏）
  2）display：none（不占位隐藏）

拓展：元素整体透明度（C3)

• 作用：让某元素整体（包括内容）一起半透明
• 属性名：opacity
• 属性值：0~1之间的数字
  1表示完全不透明，0表示完全透明
  

C3(CSS3)

• 简介：内部含有多个模块
• 私有前缀：在正式支持该功能之前，用于标明测试内容的小标志（每个浏览器的前缀不一样）
  eg.-webkit-（谷歌，苹果，edge）
• 测试C3兼容性的网站：https://caniuse.***/
  

新增长度单位

vw（viewport width）视口宽度

• 50vw：指的是视口宽度的50%
  20vw：指的是视口宽度的20%
• 视口宽度改变，盒子也会跟着变，但比例不变
  

vh（viewport heigh）视口高度

vmax/vmin

选择宽和高中最大（/小）的那个

新增盒子属性

box-sizing:border-box

• 盒子大小不受内边距和边框的影响

resize

• 作用：调节盒子大小

属性值	效果
none	默认
both	宽高均可调节
horizontal	调节宽度
vertical	调节高度

必须和overflow配合起来使用，且值不是visible，目的是当内容溢出时可以通过改变盒子的大小来改变内容显示的范围
当将盒子高度放大直至文字可以全部显示时，滚动条消失

box-shadow

• box-shadow:水平 垂直 模糊距离 外延值 阴影颜色 inset（转为内阴影）；
• 属性值：数字+px
• 外延值：晕染开的效果
• 水平和垂直必须写
• 当写三个值的时候，第三个值为颜色或者模糊值

新增背景标签

background-origon

• 作用：设置背景图的原点

属性值	效果
padding-box	从padding处为原点（默认值）
border-box	border处为原点
content-box	content处为原点

• 默认值
  有重复的显示效果
  
• 内容为原点

background-clip（裁剪）

• 作用：设置背景图的显示位置

属性值	效果
padding-box	内边距以外的不显示
border-box	外边框以外的不显示
content-box	内容以外的不显示
text	只在文字中显示

• 图片不会显示的地方，背景图也不会显示
  
• text（不建议使用）
  

background-size

• 作用：设置背景图的尺寸

属性值	效果
像素
百分比
auto	默认值
contain	等比例缩放，宽和高谁大，以谁来，盒子可能不会被图片占满，因此会重复
cover	将盒子的宽或高占满，尽可能的将图片显示完整

• 高>宽，因此先将高占满盒子，宽再依据高的比例进行缩放，若有空余，进行重复
  
• 默认状态下的背景展示
  添加cover

背景属性连写

background：背景颜色 背景路径 是否重复 位置 / 大小 原点 裁剪

多个背景图

• 属于多个属性的连写，每个背景图之间要以，隔开
  

新增边框属性

边框外轮廓

• 特点：
  1）不占位置（类似于浮动）
  2）不参与计算盒子的大小
• outline-width：边框宽度
• outline-color：边框颜色
• outline-style：边框样式（eg.实线）
• outline-offset：外轮廓与边框的距离（形成空心的效果）
  独立于以上outline的属性，可以为负值
• 复合属性（没有特定顺序）
  outline：width style color；

新增文本属性

文字阴影

• text-shadow：水平 垂直 模糊距离 阴影颜色；
  水平和垂直的距离必须写，可以为负值
• 示例一
• 示例二
  
• 示例三
  

文本换行

• white-space：；

属性值	效果
normal	文本超出边界自动换行，再代码中的换行会被识别为一个空格
pre	原样式输出，与pre标签的效果相同
pre-wrap	在pre效果的基础上，超出元素边界自动换行
pre-line	在pre效果的基础上，超出元素边界自动换行，且只识别文本中的换行，空格会忽略
nowrap	强制不换行

• normal
• pre
  
• pre-wrap
  
• pre-line
  
• nowrap
  

文本溢出

• 需先添加white-space：nowrap；属性，使文本溢出边框
• text-overflow：；

属性值	效果
clip	当内容溢出时，将溢出内容剪裁掉。（配合overflow使用，默认值）
ellipsis	当内容溢出时，将溢出部分替换为…

• overflow的属性值为非visible
  

文本修饰

子属性	效果
text-decoration-line
text-decoration-color
text-decoration-style	solid、double、dotted、 dashed、wavy(波浪线)

• 复合属性
  text-decoration:text-decoration-line text-decoration-style text-decoration-color；

文本描边

• 只有webkit的内核浏览器才可用
• 子属性：
  -webkit-text-stroke-width
  -webkit-text-stroke-color
• 复合属性：
  -webkit-text-stroke：width color；
  

新增渐变

线性渐变

• 语法：background-image:linear-gradient；
• 示例一
  可以输入多个颜色，颜色排布默认从上到下
  
• 示例二
  关键词调整渐变方向
  也可以写right top
  
• 示例三
  角度调整渐变方向
  
• 示例四
  设置开始渐变的位置

50px之前，没有别的颜色，只能是纯红色；50 ~ 100，由红色渐变为黄色，在150px时是纯黄色；100~150同理

径向渐变

• 语法：background-image:radial-gradient；
• 默认值，显示根据边框显示形状
• 通过关键词来改变圆心的位置
• 通过像素值来改变圆心的位置
  
• 改变渐变开始的位置
  
• 通过circle来调整正圆
• 通过像素值调整为正圆
  
• 复合属性
  

重复渐变

• 含义：在没有发生渐变的区域，从新开始渐变
• 语法：在linear或radial前面加repeating-
• 原效果
  
• 重复渐变效果
  

web字体

web字体

• 前提：用户的电脑中为下载这个字体，字体以.ttf的文件形式存在
• 简易写法：
• 高兼容性写法
  

字体图标

• 在百度搜索“阿里图标”，登录账号进行使用
• 方式一：下载至本地
  方式一中又分为展现图片的三种方式
  1.黑色，代码不直观
  2.黑色，代码直观
  3.彩色
  
  1.按照要求操作即可
  
  2.需通过link引入css的方式
  

如果写span，根据优先级先后顺序，类选择器覆盖标签选择器

3.引入js
suv和use属于HTML5，专门用于写矢量图（放大不失真）

• 方式二：在线使用

先选择使用的方法

直接将代码复制即可

变换

2D变换

位移

• 属性名：transform

属性值	效果
translateX	水平方向上的移动，像素值或者百分比（相对于自身）
translateY	水平方向上的移动
translate	同时设置水平和位移

• 注意点：
  1）位移与相对定位一样，均不脱离文档流；
  2）区别：相对定位的百分比参考的是父元素，位移的百分比参考的是自身；
  3）浏览器处理位移的效果更好

• 两种写法展示的效果相同
  不可以先先写X，再写一个Y，因为两种样式相同，根据覆盖原则，下面的会覆盖上面的，即只显示一个
  

• 配合位移，实现内容水平垂直居中，left和top的值直接写50%更好
  

缩放

• 属性值：scale
• scale的值可以为负，这个时候相当于翻了个面
• 两种方法效果相同
  不同于位移，同时改变水平和垂直时写一个值即可
  
• 可以改变默认值的效果

font-size最小值即为默认效果，eg.span，默认为12px，通过缩放可以使其小于12px呈现，但是要配合display: inline-block;使用

旋转

• 效果：绕中心点转

• 属性值：rotate
  1）rotateX：类似于体操运动员，是3D旋转；
  2）rotateY：类似于钢管舞蹈者，是3D旋转；
  3）rotateZ：类似于风扇扇叶，是2D旋转。

• 角度为负值时为逆时针旋转
  
  注意：rotate（30deg）和rotateZ（30deg）是相同的效果

扭曲

• 属性值：skew（数字deg，数字deg）
  如果只写一个，默认是水平方向上的

多重变换

• 作用：多个2D属性连写，可以写在同一个transform里
• 注意：如果涉及旋转时，建议将旋转放于最后，若先设置旋转，则坐标轴的顶点会变

变换原点

• 属性名：transform-origin：X，Y；
• 属性值：像素，关键词，百分比（自身的比例）
• 如果只提供一个值：像素值，为X方向，Y方向默认50%；关键词，另一个方向默认50%

3D变换

3d空间与景深

• 开启3d空间：对父元素设置transform-style: preserve-3d;
• 景深：指定观察者与xOy平面的距离，能让发生3D变换的元素。
  给父元素设置perspective

属性值	效果
none	默认值
像素	越小，3d效果越明显

• 顺、逆时针方向，从正方向往原点看
  

改变观察者的位置

• 观察者的默认位置位于 添加3d打开的标签 的正中央（注意盒子边框撑大盒子的效果）
• 属性名：perspective-origin: 像素值 像素值;
  像素值只能是正值
  

位移

• 属性名：transform: translateZ(像素值);
  只可以写像素值，因为它本身是一个平面，没有厚度

• 框中两个效果相同，当属性值为translate3d（）时，（）内必须写三个值
  

旋转

• 属性名：transform: rotateY(数字deg);
  transform: rotateY(数字deg);
  ransform: rotate3d(0，0，0，数字deg);
  0/1，假/真

缩放

• 属性名 transform: scaleZ( )；（配合translateY使用）
  transform: scale3d( x，y，z)；（不可以省略）
  将景深缩小为125px
  

改变原点

• 不同于2d，3d是绕着一条轴（坐标点所在的轴，具体是哪个，还要看rotate）旋转
• 配合transform：rotate使用
  

多重变换

• 和2d一样，尽量将旋转放于最后

背部可见性

• backface-visibility: hidden;
  无法看到调整rotateY时镜像转变的效果

过渡

• 配合hover伪类选择器使用
• 属性值为数字或百分比，或属性值可以转为数字的属性（eg.颜色）才可以过渡
• 写在元素本身的标签中

基本使用

• 给所要发生过渡的元素添加
• transition-property：可同时设置多个对象，之间用逗号隔开

属性值	效果
标签
all	所有能设置过渡的元素

• transition-duration：设置过渡的时间，单位一般为s/ms，多个值时用逗号隔开，过渡相同的时间写一个即可
  
• 过渡延迟
  transition-delay：时间；
• 过渡效果
  transition-timing-function

属性值	效果
ease	平滑过渡，默认效果，快慢块
linear	匀速
ease-in	慢块
ease-in-out	慢块慢，没有ease的效果平滑
step-start	不考虑过渡时间，直接显示结果
step-end	考虑过渡时间，但是没有过渡效果，时间到了，瞬间显示结果
steps（数字）	分“数字”步到达最终结果
beisaier曲线	橡皮筋效果

复合属性

• 只设置一个时间：表示过渡时间
• 设置两个时间：第一个是过渡时间，第二个是延迟

动画

• 帧：动画由好几张图片组成，一张图片就叫做一帧

简单使用

• 步骤：
  1）给发生动画的元素本身添加animation- name：名称
  2）定义动画@keyframes 名称{ }
    1.简单写法：from{ } to { }
    2.完整写法：百分比{ } 百分比{ }…
    { }中填写当前情况下元素的变化情况
  3）给元素本身设置animation-duration（持续时间）
  4）必要时添加animation-delay
  

####S 其他属性

动画效果

• 属性名：animation-timing-function
  属性值和过渡相同
• 在真正制作一个动画时，steps（）经常使用到，不会显示图片切换时的过程

动画播放次数

• 属性名：animation-iteration-count:

属性值	效果
数字
infinite	无数次

动画的方向

• 属性名animation-direction
• 属性值：alternate 效果：返回时也呈现动画效果，循环次数>=2时生效

属性名	效果
normal	正常方向（默认）
reverse	反方向
alternate	先正常，再反方向，并持续运行
alternate-reverse	先反方向，再正常，并交替

不发生动画时的位置

• 属性名：animation-fill-mode

属性名	效果
forwards	停在最后一帧
backwards	停在第一帧

动画的播放状态

• 属性名：animation-play-state

属性名	效果
paused	停止播放

建议配合hover伪类选择器使用

复合属性

• 顺序无要求，注意两个时间时，第一个时持续时间，第二个是延迟时间；只有一个时间，是持续时间

过渡与动画的区别

• 1）过渡需要设置触发条件，动画不需要
• 2）过渡不可以精细的调整，只可以调整始末的状态，而动画可以实现精细调控

多列布局

新闻样式

• 作用：实现分列显示

属性名	属性值	效果
column-count	数字	列数
column-width	列宽	根据列宽调整列数
columns	复合属性
column-rule-width	像素值	边框宽度
column-rule-color	颜色	边框颜色
column-rule-style	solid、dashed...	边框风格
column-rule	复合属性	边框样式
column-span	none、all	指定是否跨列

• 除了最后一个跨列是给指定的标签添加，其他的均是为容器添加
• 若想插入图片，直接在想要插入的地方插入img，设置img的width为100%（列宽的）

图片样式

• 方法：
  1）插入多个img
  2）设置列数
  3）定义img宽度

伸缩盒模型

容器与项目

• 伸缩容器：开启了flex的元素
• 伸缩项目：开启flex的元素里的子元素（不包括孙元素）
• 无论是哪种元素，一旦成为了伸缩项目，就会块状化
• 属性名display
• 属性值：flex/inline-flex
  inline-flex不常用，因为可以直接给伸缩容器的的父容器设置flex，而且不会有行内块元素的显示效果
• 查看元素是哪种元素的调试方法
  

主轴与侧轴

• 主轴：伸缩项目沿主轴排列，默认水平方向从左到右
• 侧轴：与伸缩项目排列方向垂直，默认垂直从上到下

主轴方向改变

• 属性名：flex-direction

属性值	效果
row	水平从左到右，默认值
row-reverse	水平从右到左
column	垂直从上到下
column-reverse	垂直从下到上

• 主轴方向改变，侧轴方向也随之改变，从左到右或从上到下

主轴换行方式

• 属性名：flex-wrap

属性值	效果
nowrap	不换行，有时会改变盒子大小，默认值
wrap	换行
wrap-reverse	反向换行

• nowrap
  

• wrap
  

• wrap-reverse
  

复合属性

• 属性名：flex-flow（不建议用）

主轴对齐方式

• 属性名：justify-content

属性值	效果
flex-start	从主轴起始位置开始排列，默认值
flex-end	从主轴结束位置开始排列
center	主轴居中对齐
space-around	中间=边缘*2
space-between	两端对齐
space-evenly	边缘=中间

• flex-end
• center
• space-around
  
• space-between
• space-evenly

侧轴对齐方式

一行

• 属性名：align-items

属性值	效果
flex-start	侧轴起点对齐
flex-end	侧轴终点点对齐
center	侧轴中点对齐
baseline	按照文字的基线对齐
stretch	若伸缩项目未设置高度，将占满容器的整个高度（默认值)

• flex-start
• flex-end
• center
• baseline
  
• stretch
  设置高度未设置高

多行

• 属性名：align-content

属性值	效果
flex-start	侧轴起点对齐
flex-end	侧轴终点点对齐
center	侧轴中点对齐
space-around	中间=边缘*2
space-between	两端对齐
space-evenly	边缘=中间
stretch	若伸缩项目未设置高度，将占满容器的整个高度，平分（默认值)

元素水平垂直居中

• 方案一
  
• 方案二
  

设置主轴方向上的基准长度

• 给伸缩项目添加属性
• 属性名：flex-basis

属性值	效果
像素值	如果主轴横向排列，宽失效，若主轴纵向排列，高失效
auto	默认值

• 宽失效
  
• 高失效
  

伸缩项目

• 给伸缩项目添加属性

伸

• 使用前提：当容器存在剩余的时候
• 属性名：flex-grow
• 属性值：数字，默认值为0（即不平分）
• 数字的含义：将所有设置flex-grow的数值相加，每个数值是该项目所占的剩余空间的比例
  

缩

• 使用前提：当没有flex-wrap:wrap;（换行）时，父容器装不下项目的时候
• 属性名：flex-shrink
• 属性值：数字，默认值为1
• 每个元素缩小值的计算方法：
  1）宽(1)*值(10+宽(2)*值(2)…=分母
  2）项目一缩小比例值(1)=宽(1)*值 / 分母
  3）项目一缩小值=比例值(1)*容器的缩小值

如果实际值与理论值存在差异，是浏览器计算时，由于边框的影响而产生的误差，若没有边框时则不会出现误差

缩有一个最小极限，最小也会装下项目里面的内容

复合属性

• 顺序：伸，缩，准线
• 属性名：flex
• 1）flex：1 1 auto；简写为 flex：auto；
  2）flex：1 1 0；简写为 flex：1；
  3）flex：0 0 auto；简写为 flex：none；
  4）flex：0 1 auto；简写为 flex：0 auto；默认值

开发者工具使用小技巧

复合属性

项目排序

• 属性名：order
• 属性值：数字，可以为负，数值越小，越靠前

单独对齐

• 属性名：align-self
• 作用：单独调整某个项目的对齐方式
• 属性值默认为auto

响应式布局

• 同样的网页在不同的设备上呈现出不同的布局

媒体查询

媒体类型

• 虽然没有优先级顺序，但是要注意元素的覆盖
• 属性名：@media 属性值{ }，{}中的内容需要可以覆盖掉原来的属性
• 属性值：print（打印机），screen（屏幕），all
  -print
  background的优先级比background-image的优先级高
  
• screen
  

媒体特性

• 属性名：@media ( ){ }

属性值	效果
width：像素	当宽为该像素值时显示效果
max-width	当宽小于等于该像素值时显示效果
min-width	当宽大于等于该像素值时显示效果
height：像素	当高为该像素值时显示效果
max-heigh	当高小于等于该像素值时显示效果
min-heigh	当高大于等于该像素值时显示效果
device-width	当宽等于该像素值时显示效果
orientation	检测设备是横屏还是竖屏，landscape（横向）portrait（纵向）

其他没写的同理

-设备屏幕的宽度计算方法：宽 / 缩放率

• width：800px