内部样式、外部样式、行内样式
1.link和import的区别：
2.样式表的优先级
行内式>内部式>外部式
但是注意，在属性后面加上“!important”时，该属性的优先级最高。
优先级只适用于同一个属性类型，不同属性类型则保留下来。
3.标签选择器
1.元素选择符/类型选择符（element选择器） 如：div{width:100px;……}
2.class选择器/类选择器 语法：.class{属性:属性值;} 注意：同一个标签可以使用多个class类属性值；使用多个类选择器时遵循就近原则（在样式文件中的“近”，最近定义的）
3.id选择器 唯一选择 语法：#id名{属性:属性值;}
4.通配符选择器 语法：*{属性:属性值;} 作用于所有元素
5.群组选择器 语法：选择符1，选择符2，选择符3…… 如：#top1,#nav1,h1{width:100px;} 当几个选择器控制的元素需要的样式一样时使用，节约代码量
6.后代（包含）选择器 语法：选择符1 选择符2 选择符3……
选择符1>选择符2：一代子元素选择器，只选择亲儿子元素
7.伪类选择器 只是对超链接起作用 语法：a:link{属性:属性值;}超链接的初始状态
a:visited{属性:属性值;}超链接被访问后的状态
a:hover{属性:属性值;}鼠标悬停，即鼠标滑过超链接时的状态
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态
4.选择器的权重
!important>内联样式>包含选择符>id选择器>类选择器>元素选择器
5.css文本属性
1.font-size 字体大小 浏览器默认16px，设计图常用字号是12px
2.font-family 字体 当字体是中文字体、英文字体中有空格时，需加引号；多个字体中间用逗号链接，先解析第一个字体，如果没有解析第二个字体，以此类推
3.color 颜色 red；rgb(255,255,255)；#ffffff
4.font-weight 加粗 bolder（更粗的）/bold（加粗）/normal（常规）/lighter（细体）；font-weight:100~900;100~500不加粗，600~900加粗 (100细体；400正常；700粗体；900更粗体)
5.font-style 倾斜 italic（斜体字）/oblique（倾斜的文字）/normal（常规显示）
6.text-align 文本水平对齐 left/right/center/justify（水平两端对齐，但是只对多行起作用）
7.line-height 行高 line-height=height时，可以实现单行文本垂直居中
8.text-indent 首行缩进 可以取负值；只对第一行起作用 首行缩进2字符：2em
9.letter-spacing 字间距；word-spacing 词间距
10.text-decoration 文本修饰 none（没有）/underline（下划线）/overline（上划线）/line-through（删除线）
11.font 文字简写 将多个属性写到这一个中 注意：顺序为font-style font-weight font-size/line-height font-family;其中，前两个可以省略不写，但是后面的必须要写！！
12.text-transform 检索大小写 capitalize（每个单词首字母大写）/lowercase（全部小写）/uppercase（全部大写）
6.css列表属性
1.list-style-type 定义列表符号样式 disc（实心圆）/circle（空心圆）/square（实心方块）/none（去掉符号）
2.list-style-image 将图片设置为列表符号样式 list-style-image:url();
3.list-style-position 设置列表项标记的放置位置 outside inside
4.list-style 简写 none去除列表符号
7.css背景属性
1.background-color rgba(255,255,255,0.5) a——代表透明度 也可以用transparent全透明
2.background-image 图片默认平铺
3.background-repeat 平铺 repeat-x x轴平铺；repeat-y y轴平铺；no-repeat不平铺
4.background-position x px y px;x%px y%px;left center;
5.background-size 图片大小 拉伸 可以取数值、百分比、cover（等比例缩放）、contain（铺不满，会有留白）
6.background-attachment 背景图片的固定 scroll（滚动）、fixed（固定，固定在浏览器窗口里面，固定之后就相对于浏览器窗口了）
7.background 复合写法 除background-size外可以写一起，无顺序，也可以不设置
8.浮动属性
1.float:left/right/none
2.见缝插针的方式进行排列
3.文字会被挤出来，不会被覆盖
4.清浮动：clear:none（允许有浮动对象）/right（不允许右边有浮动对象）/left（不允许左边有浮动对象）/both（不允许有浮动对象）
不让谁浮动用在谁身上
四种方案：1.写固定高度
2.清浮动 clear:none/left/right/both
3.当前浮动元素后面补一个盒子，不设置宽高，clear:both;
4.overflow:hidden;让浮动元素计算高度
5.(万能方法)
在待清浮动的元素后面添加以下样式代码即可。
.box::after{
content: "";/*在元素后面添加内容，后面再次他添加其他元素即可换行显示。*/
display: block;/*将添加的content内容类型转换成块元素，因为只有块才能清浮动元素*/
clear: both;/*清浮动*/
width: 0;
height: 0;
visibility: hidden;/*将content内容隐藏显示*/
}
5.伪元素
语法：div::first-letter{想附加的首字母样式}
种类：first-letter首字母
first-line首行
div::before{content:"想添加的内容"}在div元素前面添加内容，但添加的内容不可选中。
div::after{content:"想添加的内容"}在div元素后面添加内容，但添加的内容不可选中。
9.盒子模型
1.内边距padding
设置1个值，4个方向都一样
设置2个值，上下，左右
设置3个值，上，左右，下
设置4个值，上，右，下，左
背景色可以蔓延到内边距
padding-top/padding-bottom/padding-left/padding-right设置单一方向内边距
不允许负值
2.边框border
语法格式：border: 10px solid red;（border-width border-style border-color）
样式：solid（单实线）double（双实线）dashed（线段状虚线）dotted（点状虚线）
背景色也能蔓延到边框
border-top/border-bottom/border-left/border-right设置单一方向边框
如果按括号里的格式分开编写，则属性值：
设置1个值，4个方向都一样
设置2个值，上下，左右
设置3个值，上，左右，下
设置4个值，上，右，下，左
3.外边距margin
支持负值
屏幕居中：margin:0 auto;
特性问题：
1.兄弟关系：两个盒子垂直外边距和水平外边距问题
- 垂直方向，外边距取最大值
- 水平方向，外边距会进行合并处理
2.父子关系：给子加外边距，但作用于父身上了，怎么解决？
给父加padding
给父加边框，再给子加外边距
让子或父加浮动
给父加overflow:hidden
10.溢出属性
1.溢出属性（容器的）
overflow:visible/hidden/scroll/auto/inherit
visible:默认值，溢出内容会显示在元素之外；
hidden:溢出内容隐藏；
scroll:滚动，溢出内容以滚动方式显示；
auto:如果有溢出会添加滚动条，没有溢出正常显示；
inherit:规定应该遵从父元素继承overflow属性的值。
overflow-x:X轴溢出；overflow-y:Y轴溢出。
2.空余空间
white-space:normal/nowrap/pre/pre-wrap/pre-line/inherit 该属性用来设置如何处理元素内的空白；
normal:默认值，空白会被浏览器忽略；
nowrap:文本不会换行，文本会在同一行上继续，直到遇到<br/>标签为止；
pre:保留回车、空格、tab，不换行；
pre-wrap:保留回车、空格、tab，换行；
pre-line:显示回车，不显示空格、tab，换行；
inherit:继承父元素。
3.省略号显示
text-overflow:clip/ellipsis;
clip:默认值，不显示省略号（……）
ellipsis:显示省略标记
11.元素显示类型
1.元素类型的分类（依据CSS的显示）
块元素：div、p、ul、ol、li、dl、dt、dd、h1-h6等
display:block/list-item;
注意：p标签内不能放块级元素！
行内（内联）元素：a、b、em、i、span、strong等
display:inline;
只能设置左右边距，不能设置上下边距。
行内块元素：img、input等
display:inline-block;
2.元素类型互相转换
display:none; 页面内不显示
☆让元素不显示还有方法2：visibility:hidden;
两种方法的区别：方法1是不占位的隐藏，方法2是占位的隐藏。
12.定位 position
static:默认值
absolute:绝对定位，类似浮动，要搭配上下左右使用，参照物是浏览器第一屏,基于父元素
relative:相对定位，自己的初始位置
fixed:固定定位，固定在浏览器当前窗口，一直显示，不会滚出屏幕外
sticky:粘性定位，可以做吸顶效果，粘性定位是css3.0新增加的，兼容不好
☆浮动和绝对定位的区别？？？？？？
float：半脱离，文字环绕
absolute：全脱离，不会出现文字环绕效果
13.层级
z-index:数值（可以为负值）
数值越大越靠上显示
必须要有position定位，否则无意义
14.绝对定位的深入探究
1.父子盒子关系
如果想让父盒子在子盒子之上，需要给子盒子设置z-index:-1;
2.兄弟盒子关系
想让谁在上面，给谁设置更大的层级z-index即可。
3.让行内元素改为块元素（三种方法）
1.通过设置position:absolute;
2.display:block;
3.float:left;
15.定位控制元素水平垂直居中
使用绝对定位到指定位置，再通过margin调整
16.锚点
作用：页面不同区域的跳转，使用a链接。
<a href="#锚点名字"></a>
<div id="锚点名字"></div>
17.精灵图（雪碧图）
将好多小图片合成一张大图片，通过background-positon:值1 值2;来将所需的小图片显示出来，提高加载速度。
值1和值2都是负值！
18.宽高自适应
1.常规元素
width和height不写或者写auto
随内容自动撑开
最小高度min-height
2.浮动元素
详见8.4清浮动四种方法。展示案例为《28-二级下拉菜单案例》
19.窗口自适应
盒子根据窗口的大小进行改变，设置方法：html,body{height:100%;}
20.两栏布局
calc()函数：
用于动态计算长度值。
需要注意的是，运算符前后都需要保留一个空格，例如：width:calc(100% - 10px);
任何长度值都可以使用calc()函数进行计算，此函数支持“+”，“-”，“*”，“/”运算，并且遵循标准的数学运算优先级规则。
21.三栏布局
22.CSS3基础
原则：渐进增强和优雅降级
23.层级选择器
div>p 子代选择器，当前元素后面的子代元素
div+p 当前元素的后面第一个兄弟元素
div~p 当前元素的后面所有的亲兄弟元素
24.属性选择器
[属性名] 拥有当前属性名的属性的元素
div[class] 所有的div中有class属性的标签被选择出来
div[class="box"] 完全匹配 所有的div中有class属性且值为box的标签被选择出来
div[class~="box"] 包含匹配 所有的div中有class属性且值包含box的标签被选择出来
模糊匹配：
class^="b" class属性值以b开头的元素
class$="b" class属性值以b结尾的元素
class*="b" class属性值包含b的元素
25.结构性伪类选择器
div:last-child div的最后一个孩子节点元素
div:first-child div的第一个孩子节点元素
div:nth-child(k) div的第k个孩子节点元素
div:nth-child(2n) div的第偶数个孩子节点元素 偶数2n even 奇数2n+1 2n-1 odd
div p:only-child div下面仅有一个p标签的p标签元素选择出来
div:empty div下面不含任何孩子节点的被选择出来，有空格也不行
:root 相当于html
26.目标伪类选择器
div:target 当锚点在div上的时候该div应用样式，其他的不应用（手风琴案例）
27.UI元素状态伪类选择器
E:enabled 匹配所有用户界面（form表单）中处于可用状态的E元素
E:disabled 匹配所有用户界面（form表单）中处于不可用状态的E元素
E:focus 焦点会匹配此选择器
E:checked 匹配所有用户界面（form表单）中处于选中状态的元素E
E::selection 匹配E元素中被用户选中或处于高亮状态的部分，调整选中文本时底色和文字色
28.否定伪类选择器
E:not(s) 匹配所以不匹配简单选择符s的元素E
例：li:not(:first-child){
background-color: yellow;
}
29.动态伪类选择器
a:link{属性:属性值;}超链接的初始状态
a:visited{属性:属性值;}超链接被访问后的状态
a:hover{属性:属性值;}鼠标悬停，即鼠标滑过超链接时的状态
a:active{属性:属性值;}超链接被激活时的状态，即鼠标按下时超链接的状态
30.文本阴影
text-shadow: 10px 10px 10px red;
text-shadow: 水平方向位移 垂直方向位移 模糊程度 阴影颜色;
加多个阴影：text-shadow: 10px 10px 10px red,10px 10px 10px yellow;
31.盒子阴影
box-shadow: 水平方向位移 垂直方向位移 模糊程度 阴影大小 阴影颜色 （inset改为内阴影）;
32.圆角边框
border-radius: 10px;四个角弧度一样
border-radius: 10px 50px;左上角+右下角 右上角+左下角
border-radius: 10px 50px 40px;左上角 左下角+右上角 右下
border-radius: 10px 50px 40px 30px;顺时针方向
border-top-left-radius: 10px;左上角（先上下后左右）
border-radius: 30px/60px; 水平方向30px/垂直方向60px连成弧线 只支持border-radius
单独设置某几方向的圆弧写法：border-radius: 10px 20px 30px 40px/50px 60px 70px 80px;(不支持border-top-left-radius此种写法)
33.字体引入
字体模块：@font-face
@font-face{
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
使用时直接font-family: <YourWebFontName>;
34.怪异盒模型
语法：box-sizing: content-box(标准盒模型)/border-box(怪异盒模型);
普通盒模型：padding、border在元素长宽之外
怪异盒模型：padding、border在元素长宽之内
35.弹性盒
新的布局方式，特别适合移动端布局。
语法：display: flex;
设置display: flex;的大盒子称为“容器”，里面的元素称为“项目”。
影响：1、子元素默认横向排列（主轴为水平）
2、如果弹性盒的子元素为行内元素，自动更改为块元素
3、如果弹性盒仅有一个子元素，给该子元素增加margin:auto;即可让其水平垂直居中
更改主轴方向：flex-direction: row（水平）/column（竖直）/row-reverse（水平从右到左排列）/column-reverse（竖直从下到上排列）;
调整主轴对齐方向：justify-content: flex-start（靠主轴开始端）/flex-end（靠主轴结束端）/space-between（沿主轴两端对齐）/space-around（沿主轴距离环绕）/center（沿主轴居中）;
调整侧轴对齐方向：align-items: flex-start（靠侧轴开始端）/flex-end（靠侧轴结束端）/center（沿侧轴居中）;
折行与行间距：(弹性盒特性：不会自动折行，会默认挤压在一行显示)flex-wrap: wrap;
控制折行后的行间距：align-content: flex-start/flex-end/center/space-around/space-between;
项目-对齐方式：align-self: flex-start/flex-end/center/baseline/stretch(拉伸，当没有高属性时，撑开占满空间。);
项目-调整顺序：order:数值;数值越大越往后排，基数为0。
项目-剩余宽高：flex: 1;该块元素占满剩余空间
如果一行上面的元素都设置flex: 数值;则按各块数值比例进行分配空间。
36. 移动端布局
移动端布局中必须要写<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
user-scalable=no 禁止缩放屏幕，可以不加
☆《55-足球圈APP移动端布局案例.html》重点练习！！！！！
横向滚动：
弹性盒默认挤压排布，不想让其挤压，呈横向滚动条排布，添加flex-shrink:0;即可。当值为1时为挤压排布，值为0时为不挤压排布。
37.多列布局（实现片瀑布流）
column-count: 5;显示5列
column-gap: 30px;列间距
column-rule: 2px solid red;列间分隔线
column-fill: balance/auto（父盒子占满）;列高度统一
column-width: 500px;调整列宽
column-span: none/all;横跨列，给项目添加
break-inside: avoid;避免盒子内部折行
38.响应式布局
A. 媒体查询
@media all and (min-width:320px){}
横竖屏检测：
orientation：portrait竖屏
orientation：landscape横屏
39.em与rem
em: 相对单位，相对于父元素的字体大小，10em————10倍父元素大小
rem：相对单位，相对于根元素（html）的字体大小，10rem————10倍根元素大小
40.vw和vh
vw：view-width
vh：view-height
100vw === 视口宽度
100vh === 视口高度
☆100%和100vw、100vh的区别：
100% 刨除滚动条，剩余的空间
100vw、100vh 包含滚动条，窗口大小
41.渐变
A.线性渐变
linear-gradient(to top right,red,yellow,green)
linear-gradient(90deg,red,yellow,green)
支持多颜色渐变,支持任意方向
B.径向渐变
radial-gradient(center,shape,size,start-color,...,last-color);
center: 渐变七点的位置，可以为百分比，默认是图形的正中心
shape：渐变的形状，ellipse（椭圆形）circle（圆形），默认为ellipse，如果元素的形状为 正方形，则ellipse和circle显示一样
size：渐变的大小，即渐变到哪里停止，有四个值。closest-side：最近边;farthest-side: 最远边;closest-corner: 最近角;farthest-corner: 最远角;
C.重复渐变
repeating-linear-gradient(red,yellow 10%,green 20%);
10%的位置为yellow，20%的位置为green，然后按照这20%向下重复。
42.过渡
transition: all/具体属性值 运动时间s/ms 延迟时间s/ms 动画类型
transition-property(all):参与过渡的属性值
transition-duration: 运动时间
transition-delay: 延迟过渡时间
transition-timing-function: 动画类型
注：display: none;不适用
动画类型：linear(匀速)/ease(逐渐慢下来)/ease-in(加速)/ease-out(减速)/ease-in-out(先加速后减速)
贝塞尔曲线：cubic-bezier() 网址：http://cubic-bezier.com/
逐帧动画：transition-timing-function: steps(动画执行的步数);
43.2D属性-transform变形
A.平移 translate(100px,100px) translateX(100px) translateX(100px)
B.缩放 scale(缩放倍数) scaleX(缩放倍数) scaleY(缩放倍数) 负值时会使元素倒置
transform-origin: left top; 改变中心点的位置center/left top/...... 此属性写在想要变换的元素上
C.旋转 rotate(度数deg)=rotateZ(度数deg)绕Z轴旋转 rotateX(度数deg)绕X轴旋转 rotateY(度数deg)绕Y轴旋转 正值为顺时针，负值为逆时针
transform-origin: left top; 改变中心点的位置center/left top/...... 此属性写在想要变换的元素上
多属性值：语法：transform: translateX(400px) rotate(45deg);
先写哪个变化属性值就先变换哪个，在变换完成后的基础上在进行下一个变换，最终生成目标图案。
基本上都是先写位移属性，在写其他属性。
D.倾斜 skew() skewX(30deg) skewY() 正值为右下角向右拉动30deg夹角，负值为右下角向左推动30deg夹角
44.关键帧动画——animation
首先声明动画：
@keyframes 自定义动画名称 {
from{
...
}
to{
...
}
}
或
@keyframes 自定义动画名称 {
0%{
...
}
20%{
...
}
...
100%{
...
}
}
其次调用动画：
animation: 自定义动画名称 维持时间 速度 延迟时间 执行次数（infinite无限次）
steps(1,start/end) == step-end
1：从动画的上一个状态变换到下二个状态需要多少帧
start：保留下一帧，看不到第一帧，从第一帧很快跳到最后一帧
end：保留当前帧，看不到最后一帧，动画结束
单一属性：
animation-name 检索或设置对象所应用的动画名称
animation-duration 检索或设置对象动画的持续时间 值：number
animation-timing-function 检索或设置对象动画的过渡类型 同42.过渡中的动画类型
animation-delay 检索或设置对象动画延迟的时间 值：number
animation-iteration-count 检索或设置对象动画的循环次数 值：infinite/number
animation-direction 检索或设置对象动画在循环中是否反向运动 值：normal（正常方向）/reverse（反方向运动）/alternate（动画先正常运行再反方向运行，并持续交替运行）/alternate-reverse（动画先反方向运行再正方向运行，并持续交替运行）
animation-play-state 检索或设置对象动画的状态 值：running/paused（暂停 当鼠标经过动画时动画停止，鼠标移开时动画继续执行）
animation-fill-mode 检索或设置对象动画的最后一帧的效果 值：none/forwards（保留最后一帧）/backwards（返回初始位置状态）
animate.css动画库：https://www.dowebok.com/demo/2014/98/
<link rel="stylesheet" href="https://www.dowebok.com/demo/2014/98/animate.min.css">
检测浏览器属性兼容性：www.caniuse.com
45.3D-平移
transform-style: flat（2D）/preserve-3d（3D）; 加在父盒子上，搭建一个3D舞台，使用3D效果时使用例如translateZ(200px)或translate3d(0,0,200px)即可
perspective: 300px; 景深 眼睛与屏幕之间的距离 加在父盒子上，可以实现近大远小的效果。
46.3D-旋转
transform: rotate3d(1,1,1,30deg);
前面三个数字0~1，表示三个轴旋转几倍的30deg。
47.3D-缩放
必须配合景深以及其他变换使用。
48.网格布局grid
语法：display: grid;
grid可以让行内元素转换为块元素
inline-grid可以让行内元素转换为行内块元素
grid-template-rows 规定行属性
grid-template-columns 规定列属性
1）绝对大小（根据列数或者行数确定值的个数） 例：200px 200px 200px 三行/列
2）百分比（根据列数或者行数确定值的个数） 例：33.33% 33.33% 33.33% 三行/列
3）功能函数 repeat(参数1,参数2) 参数1：重复的次数；参数2：重复的数值或重复的模式 例：repeat(3,33.33%) === 33.33% 33.33% 33.33% 三行/列
4）auto-fill关键字（自动填充）配合功能函数使用
5）fr关键字（列宽片段）
grid-row-gap: 行间距
grid-column-gap：列间距
grid-gap：复合式写法
新版本已经省略grid了
指定区域：
grid-template-areas: 'a b c'
'd e f'
'g h i';
想跨格占据则让相应格子取相同名字，然后再使用grid-area: a;占据即可。
注意：跨格占据只能是正方形或矩形，异形不可以。
对齐方式：
grid-auto-flow: column/row;
单元格
justify-content: start/center/stretch/space-around/space-between/space-evenly（项目与项目的间隔相等，项目与容器之间也是同样长度的间隔）;
align-content: start/center/stretch/space-around/space-between/space-evenly;
place-content: <justify-content> <align-content> 复合写法
格内内容
justify-items: 横向
align-items: 竖向
place-items: 复合写法
项目属性：
网格线合并
grid-column-start: 左边框所在的垂直网格线
grid-column-end: 右边框所在的垂直网格线
grid-column: start/end;
grid-row-start: 上边框所在的水平网格线
grid-row-start: 下边框所在的水平网格线
grid-row: start/end;
2689
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
