css3

标签：垂直   目的   before   end   ted   时间   16px   弹性盒   near   

css选择器

一、基本选择器

1、标签选择器 div{}
2、类选择器（class）.box{}
3、id选择器 #box{}
4、通配符（获取所有元素） *{}
5、群组选择器 div，h1，p{}

权重最大10000(！important)
语法 属性：属性值 ！important；

二、关系选择器

1、后代选择器（空格） div .box{}
2、子代选择器 div>.box{}
3、相邻兄弟选择器 E+F：选择E后面紧跟的同级的F
4、兄弟选择器 E~F：选择E后面所有的同级的F

三、动态伪类选择器（超链接）

1、a：link 锚链接被访问前的样式
2、a：visited 锚链接被访问后的样式
3、E：hover 鼠标滑过元素的样式
4、E：active 鼠标按下时元素的样式

四、目标伪类选择器
E：target 选择所有匹配的E，且匹配元素被相关的URL指向
解释：配合锚点跳转，只有URL生效时样式才生效

（用CSS画三角形）
（border：50px solid）
（border-color：颜色 transparent transparent transparent；）
（上面边框三角形）

五、语言伪类选择器
q：lang（no）{quotes：“文本”“文本”；}
配合使用

六、ui状态伪类选择器（表单）

1、E：enabled 可用的表单元素的样式
2、E：disabled 不可用的表单元素的样式
3、E：checked+E 被选中的表单元素的描述文本（单选多选）
4、E：：selection 元素内容被选中时的样式（火狐要加前缀-moz-）

注意 浏览器前缀
-moz- （火狐）
-webkit-（谷歌）
-ms- （IE）
-o- （欧朋）

七、否定伪类选择器
：not（E） 除了E以外全都有样式

八、结构伪类选择器

1、E：first-child 获取E元素，要满足是父元素的第一个子代
2、E：last-child 获取E元素，要满足是父元素的最后一个子代
3、E：nth-child（n）获取E元素，要满足是父元素的第n个子代
4、E：nth-last-child（n）获取E元素，要满足是父元素的倒数第n个子代
注意 n的用法：n的倍数、even偶数、odd奇数、-n+a从1到a

5、E：first-of-type 获取E元素，要满足是父元素的该类型的第一个子代

6、E：last-of-type 获取E元素，要满足是父元素的该类型的最后一个子代

7、E：nth-of-type（n）获取E元素，要满足是父元素的该类型的第n个子代

8、E：nth-last-of-type（n）获取E元素，要满足是父元素的该类型的倒数第n个子代

9、E：empty 获取空元素E（连空格都不能有）

九、属性选择器（attr=属性）

1、E[attr] 拥有attr的E添加样式

2、E[attr=“value”]拥有attr的属性值为value的E添加样式

3、E[attr*=“value”]拥有attr的属性值包含value的E添加样式

4、E[attr^=“value”]拥有attr的属性值以value开头的E添加样式

5、E[attr$=“value”]拥有attr的属性值以value结尾的E添加样式

十、伪元素

1、E：：before 给E最前面加一个子元素
注意 一定要写{content：“”；}

2、E：：after 给E最后面加一个子元素

3、E：：first-letter 给E的第一个字添加样式

4、E：：first-line 给E的第一行添加样式

边框圆角
语法 border-radius：“数值”；

两个值 左上右下+右上左下
三个值 左上+右上左下+右下
四个值 左上+右上+右下+左下
单独方向
border-top-left（左上）

新增颜色模式

1、rgba 红（0-255）、绿、蓝、透明度（0-1）
语法 color：rgba（数值 数值 数值 数值）；

2、hsla 色调（0-360，红橙黄绿青蓝紫）、饱和度（0%-100%）、亮度（0%-100%，50%为平衡值）、透明度（0-1）
语法 color：hsla（数值 数值 数值 数值）；

注意 以上的透明度a不会把文本透明，而opacity会把文本透明

新文本属性

1、文本阴影
语法 text-shadow：水平移动 垂直移动 模糊度 颜色；
属性 水平（左负右正）、垂直（上负下正）、模糊（只有正）、颜色

2、文本溢出
语法 text-overflow：
属性 clip（默认没有省略号）
ellipsis（以省略号形式标识 ）
配合
（1）width 高度
（2）white-space:nowrap; 不允许换行
（3）overflow:hidden 超出隐藏
（4）ellipsis 省略号

3、单词换行
语法 word-wrap：break-word；

4、自定义字体
（1）创建
语法 @font-face
{
font-family：名字;
src:url();
}
（2）使用

5、字体图标

说明 可以写 font-size
可以写 color
引入

盒模型

1、标准盒模型 width(height)= content
2、IE盒模型(怪异盒模型) width(height)= border+padding+content
语法 box-sizing：border-box;

浏览器前缀
-webkit-border-box：谷歌浏览器、国内浏览器
-o-border-box: opera浏览器
-moz-border-box：火狐浏览器
-ms-border-box：ie浏览器

新背景属性

1、background-size（背景图大小）
属性值
（1）数值或百分比：水平方向 垂直方向（可能发生扭曲）
（2）cover：覆盖，背景图片完全覆盖容器（可能会丢失一部分图片）
（3）contain：包含，容器完全包含背景图片（容器可能会出现空白区域）

轮播图的做法
background-image
background-size：cover；
background-position：center center；

2、background-origin（背景的摆放区域）
解释 背景图从哪里的左上角开始摆放
属性 padding-box（padding以内，默认）
content-box （内容以内）
border-box （边框以内）

什么是渐进增强和优雅降级

1、渐进增强 progressive enhancement
针对低版本浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验

2、优雅降级 graceful degradation
一开始就构建完整的功能，然后再针对低版本浏览器进行兼容

区别
优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带

新边框属性

1、边框阴影
语法 box-shadow：水平阴影（左负右正） 垂直阴影（上负下正） 模糊度px 阴影放大 颜色 里外（默认outset、里面inset）；（多个阴影用，逗号隔开）

2、边框图片
语法 border-image-source：url（）；引入图片
border-image-slice：0上 0右 0下 0左；（裁剪）
border-image-repeat：stretch（默认-拉伸）
repeat（平铺）
round（铺满）
border-image-outset：数值；（边框图像区域超出边框的量，不能为负）

渐变（gradient）

一、线性渐变（linear-gradient）

1、线性渐变
语法 background：linear-gradient（颜色，颜色，颜色）；
注意 浏览器前缀
background：-weblit-linear-gradient（颜色，颜色，颜色）；
background：-moz-linear-gradient（颜色，颜色，颜色）；
background：-o-linear-gradient（颜色，颜色，颜色）；

2、角度渐变
语法 background：linear-gradient（0deg，颜色，颜色）
注意 新版本，初始角度水平，顺时针

浏览器前缀
background：-webkit-linear-gradient（90deg，颜色，颜色）
注意 老版本，初始角度垂直，逆时针

3、颜色节点（不均匀分布）
语法 background：linear-gradient（颜色50%，颜色70%，颜色）；

二、径向渐变（radial-gradient）

1、径向渐变
语法 background：radial-gradient（颜色，颜色，颜色）；
注意 也可以加百分比

2、重复径向渐变
语法 background：repeating-radial-gradient（颜色，颜色，颜色）；
注意 百分比要小一点

过渡（transition）

1、transition-property：css属性
说明 规定应用过渡的 CSS 属性的名称

2、transition-duration：秒
说明 定义过渡效果花费的时间，默认是 0

3、transition-timing-function：
说明 规定过渡效果的时间曲线，默认是 ease
注意 ease 规定慢速开始，然后变快，然后慢速结束的过渡效果
linear 规定以相同速度开始至结束的过渡效果
ease-in 规定以慢速开始的过渡效果
ease-out 规定以慢速结束的过渡效果
ease-in-out 规定以慢速开始和结束的过渡效果

4、transition-delay：
说明 规定过渡效果何时开始，默认是 0

简写例子 transition：all 2s linear 3s；

2D转换（transform）

1、translate( X,Y) 位移
语法 transform：translate（20px，40px）；
transform：translateX（20px） translateY（40px）；

2、rotate（） 旋转（放后面）正顺负逆
语法 transform：rotate（360deg）；

3、scale( X,Y) 缩放（多少倍）
语法 transform：scale（1.2，2）；

4、skew(与Y轴的角度，与X轴的角度) 扭曲
语法 transform：skew（30deg，30deg）；

3D变换（transform）

注意 开启3D前提条件（写在父元素）
transform-style：preserve-3d；（保持3D变换模式）
perspective：（数值）；（设置观察的距离，景深）

1、位移
语法 transform：translate3d（X，Y，Z）；
单独方向 transform：translateX（数值）；
transform：translateY（数值）；
transform：translateZ（数值）；

2、旋转
语法 transform：rotate3d（X，Y，Z，角度deg）；
注意
旋转哪个轴就取1，不转就0
单独方向
transform：rotateX（角度）；
transform：rotateY（角度）；
transform：rotateZ（角度）；

注意 改变盒子变换的基准点
transform-origin：水平 垂直；
left top
center middle
right bottom

观察的基准点(角度)
perspective-origin：数值（水平） 数值（垂直）；

动画

1、自定义动画
（1）通过@keyframes指定动画序列
语法 @keyframes 名字
{
0%{属性：属性值；}（节点）
50%{属性：属性值；}
70%{属性：属性值；}
100%{属性：属性值；}
}
（2）通过百分比将动画序列分割成多个节点
（3）在各节点中分别定义各属性
（4）通过animation属性将动画应用于相应元素

2、animation属性
(1)animation-name（动画名字，必须）
(2)animation-duration（动画播放时间，必须）
(3)animation-timing-function（动画播放的形式）
属性值：linear（线性）
ease（默认）
ease-in
steps(n)（按帧数）
(4)animation-delay（动画播放的延迟）
(5)animation-iteration-count（动画播放的次数）
属性值：infinite（无限次播放）
(6)animation-direction（动画是否轮流反向播放）
属性值：alternate（交替播放，先顺后逆）
reverse（反向播放）
alternate-reverse（轮流反向，先反后逆）
简写
animation：1 2 3 4 5 6；
注意
其他属性
animation-play-state：paused；（暂停动画）

弹性盒模型（flexbox）
另附文件

1、设置在容器（父元素上）上：
（1）display：flex； 父元素设置成弹性盒
规定子项目在父元素主轴方向一行显示，不会换行。侧轴方向会默认拉伸。

(2)设置主轴方向 flex-direction(写给父元素，元素摆放方向)
属性值: row 默认为水平向右
column 垂直向下
row-reverse 水平向左
column-reverse 垂直向上

(3)flex-wrap 伸缩换行
属性值：nowrap 默认不换行
wrap 换行

简写 (4)flex-flow：主轴方向的属性 伸缩换行的属性；
伸缩流主轴方向及换行

(5)设置子项目在容器主轴方向的对齐方式（父元素）
justify-content
属性值：
flex-start 默认在主轴方向起点位置对齐
flex-end 在主轴方向终点位置对齐
center 中间
space-between 将空白区域平分在子项目之间
space-around 将空白区域环绕在子项目两边

(6)设置子项目在其所在行的侧轴对齐方式 （父元素）
align-items（单行）
属性值：
stretch 默认拉伸
flex-start 子项目在其所在行的起始位置摆放
flex-end 子项目在其所在行的结束位置摆放
center 中间
baseline 子项目在其所在行以基线对齐

(7)设置子项目在侧轴方向的对齐方式（父元素）
align-content(控制多行)
属性值：
参考justify-content

2、设置在子项目上

（1）flex：数字；
设置子项目在父元素主轴方向的比份

（2）设置单个子项目在其所在行的侧轴对齐方式
align-self：
值参考align-items的属性值

(3)order设置子项目的顺序
写了order的排在没有order属性的元素后面
写了order的，属性值越小的在越前面

（4）是否可以缩放
flex-shrink：0；（不缩放）
flex-shrink：1；（默认缩放）

多列布局（另附文件）

媒体查询（另附文件）

屏幕分界点（页面结构简单时使用）
超小屏幕 xs （移动设备）768px以下
小屏设备 sm 768px-992px
中等屏幕 md 992px-1200px
宽屏设备 lg 1200px以上

语法 @media screen and (条件){css语法}

条件
1、min-width（最小宽度）
若当前页面宽度大于min-width的值时，则样式生效。所以媒体查询min-width应从小写到大
例如：@media screen and (min-width：768px){}

2、max-width（最大宽度）
若当前页面宽度小于max-width的值时，则样式生效
例如：@media screen and （max-width：1200px）{}

3、min-device-width
是设备整个显示区域的最小宽度
例如： @media screen and (min-device-width:768px)

BFC是什么？

首先说一下BFC是什么，概念从哪里来？BFC全称叫做（Block Formatting Context）中文叫块级格式化上下文，是一个网页的概念。网页是一个一个盒子组成的，那么这个BFC到底有什么用途呢？看下面具体分析。

怎么触发BFC

浮动元素：float 除 none 以外的值。
绝对定位元素：position (absolute、fixed)。
display 为 inline-block、table-cells、flex。
overflow 除了 visible 以外的值 (hidden、auto、scroll)

遇到哪些问题需要用到BFC

margin塌陷
高度塌陷

css3

标签：垂直   目的   before   end   ted   时间   16px   弹性盒   near   

原文地址：https://www.cnblogs.com/imbacool/p/12386361.html