六.背景
1.背景颜色
| background-color:合法颜色值 |
2.背景图片
| background-image: url(08.png); |
3.背景图片的平铺
| background-repeat: repeat;默认值，x轴和y轴都平铺 no-repeat 不平铺 repeat-x x轴平铺 repeat-y y轴平铺
|
4.背景图片的定位
| background-position: 取值：1. 两个值 分别设置x轴和y轴 ①以px单位的数字 ② x% y% 关键字 x:left/center/right y:top/center/bottom 2.一个值 只设置x轴，y轴默认居中！！！并不是同时设置xy轴 |
5.背景图片的尺寸
| background-size: 取值，1.两个值，分别设置宽高 ①px为单位的数字 ②x% y%： 取一个值，同时设置宽高 2.contain 图片根据元素尺寸自动等比缩放，正好全部显示图片 3.cover 图片根据元素尺寸自动等比缩放，目的是正好把元素铺满， 但是图片有可能显示不全 |
外层div 背景图片
内层 div
p标签
找到编写样式的元素在写
先外后内 先左在右 先上后下
编写样式
尺寸，大体位置（f12自己试）
边框 背景
文本所有样式（f12查）
微调
6.简写方式
| background: color img repeat position; 编写没有顺序但position的两个值不能分开写 简写方式没有size。size需要单写 最简方式 background:color/img; |
七.渐变
| 多种颜色，平缓变化的一种显示效果 一般会让元素增加质感 色标：一种颜色，以及这种颜色出现的位置 渐变的分类 1.线性渐变 2.径向渐变 3.重复渐变 |
1.线性渐变
| 以直线的方式改变颜色 background-image: linear-gradient(方向,色标1,色标2.......); 取值：方向 1.写终点 to top 0deg to right 90deg to bottom 180deg to left 270deg 2.角度 0deg 色标： 颜色 位置 1.% 2.px 3.不写位置---颜色会平均分配 |
2.径向渐变
| 以圆的方式，改变颜色 background-image: radial-gradient(半径 at 圆心x 圆心y,色标1,色标2......); 取值：圆心 1.px为单位的数字 2.% 3.关键字 x:left/center/right y:top/center/bottom 色标，位置为%，是半径长度的% |
3.重复渐变
| 把线性渐变或者径向渐变，重复的执行 重复的线性渐变 background-image: repeating-linear-gradient(45deg,#000 0%,#0ff 1%,#000 2%); 重复的径向渐变 background-image: repeating-radial-gradient(100px at center center, #000 0%,#0ff 1%,#000 2%); |
4.线性渐变对低版本浏览器的兼容问题
| -webkit- chrome safari -moz- firefox -ms- IE 如果linear-gradient 添加了内核前缀，方向必须写起点，不加to background: -webkit-linear-gradient(top,#f00,#00f); 如果没有添加前缀，方向必须写终点，加to background: linear-gradient(to top,#f00,#00f); |
练习：
1.使用css+html完成
2.使用html+css完成
编写css的思路
| 1.找到要编写样式标签 从外往里,从左往右，从上往下 2.编写样式 ①尺寸，大体位置 ②背景，边框 ③文本所有 ④微调 |
七.渐变
| 多种颜色，平缓变化的一种显示效果 一般会让元素增加质感 色标：一种颜色，以及这种颜色出现的位置 渐变的分类 1.线性渐变 2.径向渐变 3.重复渐变 |
1.线性渐变
| 以直线的方式改变颜色 background-image: linear-gradient(方向,色标1,色标2.......);
取值：方向 1.写终点 to top 0deg to right 90deg to bottom 180deg to left 270deg 2.角度 0deg
色标： 颜色+位置 位置的取值 1.% 2.px 3.不写位置---颜色会平均分配 |
2.径向渐变
| 以圆的方式，改变颜色 background-image: radial-gradient(半径 at 圆心x 圆心y,色标1,色标2......); 取值：圆心 1.px为单位的数字 2.% 是半径的百分比，只有色标是百分比的形式的时候，半径才有有意 3.关键字 x:left/center/right y:top/center/bottom 色标，位置为%，是半径长度的% #fff 0%, #000 20%,
|
3.重复渐变
| 把线性渐变或者径向渐变，重复的执行 重复的线性渐变
background-image: repeating-linear-gradient(45deg,#000 0%,#0ff 1%,#000 2%); 重复的径向渐变
background-image: repeating-radial-gradient(100px at center center, #000 0%,#0ff 1%,#000 2%); |
4.线性渐变对低版本浏览器的兼容问题⭐⭐⭐⭐⭐⭐⭐⭐
| 低版本浏览器，不兼容渐变属性（ie8.0以下） 为了让版本能够兼容渐变，需要使用css hack的写法编写样式 浏览器内部核心代码----内核 -webkit- chrome/safari /edge -moz- firefox -ms- IE 如果linear-gradient 线性渐变添加了内核前缀，方向必须写起点，不加to background: -webkit-linear-gradient(top,#f00,#00f); 如果没有添加前缀，方向必须写终点，加to background: linear-gradient(to top,#f00,#00f); |
八.文本样式
1.字体属性
font-size
font-family
| ①字号 font-size: px、rem、pt ②字体----需要硬件安装了对应的字体库 font-family:系列1,系列2,系列3..........可以写多个字体，用英文逗号隔开 如果字体系列的值中，有空格，建议使用双引号包裹 ③字体的加粗 font-weight: 取值： 100-1000 lighter 300 细 normal 400 普通 bold 600 加粗 bolder 700 更粗 不带单位的数字，必须是100的整倍数，最大1000 light和bolder基本上看不出效果 ④字体的样式 font-style:normal; 没样式 italic 斜体 ⑤小型大写字母 font-variant: small-caps; ⑥字体的简写方式 font: style variant weight size family; 一定按照顺序编写 font: italic small-caps bold 36px "mv boli"; 最简方式font：size family; |
2.文本属性
| ①文本颜色 color： ②文本的水平对齐方式 text-align: left; 默认值 center right justify 两端对齐 text-align:center 的细节,让内部的文本，行内，行内块水平居中 内部块级元素会继承，但是不会让块级元素居中 margin：0 auto；让当前块级元素水平居中 ③垂直对齐方式--行高 line-height 如果行高大于字号大小，文本默认处于行高垂直居中位置 一般会把行高设置为容器高度，让文本在容器内部垂直居中 line-height: 1.px为单位的数字 2.无单位的数字，代表字号的倍数 一般只对一单行文本设置行高来做垂直居中 多行文本的垂直居中是内边距算！！！ ④文本线条修饰 text-decoration: underline; 下划线 overline 上划线 line-through 删除线 none 删除所有线条 ⑤首行缩进text-indent: px为单位的数字 ⑥文本阴影 text-shadow: h-shadow v-shadow blur color; 水平位移 垂直位移 模糊程度 颜色 |
练习04_ex.html
| div,内容假文，带中文 1.设置4套字体系统 2.文本大小，文本颜色 3.加粗并斜体 4.小型大写字母 5.两端对齐 6.带下划线 7.首行缩进30px 8.文本垂直居中 |
九.表格的样式
1.表格的常用样式
| ①table尺寸，边框，背景，文本，内外边距都有效 ②td/th 高度正常使用，宽度需要靠内容撑 边框，背景，文本，内边距都有效 外边距margin无效 |
2.表格的专属样式
①td/th属性: 垂直对齐方式
| vertical-align:top/middle/bottom 设置td/th中文本的垂直对齐方式 |
②table的属性
| 1.table边框合并 border-collapse: separate; 默认值，边框分离状态 collapse 边框合并 2.table边框之间的距离，前提边框处于分离状态 border-spacing: 20px; 3.表格标题 caption-side:top/bottom; 4.设置表格显示规则
|
th下边框 td下边框 整个width900
第一列600
a标签的颜色 #005aa0
a标签浮动以后就变成块级元素，可以设置宽高了，width:100px;height:32px,
hover:变白 上边框
十.定位
| 改变元素在页面中的位置 定位的分类 1.默认流定位 2.浮动定位 3.相对定位 4.绝对定位 5.固定定位 |
1.普通流定位
| 默认文档流定位 每个元素在页面上都占据空间（所有元素皆为框） 每个元素都是从父元素的左上角开始绘制 块级元素按照从上往下的顺序逐个排列，单独成行 行内元素和行内块元素多个元素在一行显示，从左往右排列，一行放不下折行 |
2.浮动定位
| float:none; 默认值，不浮动（默认文档流定位） left；左浮动 right；右浮动 元素浮动的特点 1.元素一旦浮动，会完全脱离文档流（不占页面空间，后续元素上前补位） 2.浮动元素最终会停靠在发生浮动的当前行的最左边或者最右边或者其他已浮动元素的后面 3.父元素显示不下所有的浮动元素，会换行显示 4.浮动是为了解决多个块级元素横向显示的问题 |
3.浮动引发的特殊情况
①浮动元素的占位问题
| 浮动元素，会在浮动方向上占位，后续浮动元素不能占据这个位置 |
②浮动元素对文本，行内，行内块的影响
| 文本（文字），行内，行内块永远不会被浮动元素压在下面 |
③右浮动使用外边距位移
| 必须使用margin-right进行位移 |
④没有定义宽度的元素，脱离文档流之后，宽度靠内容撑开
⑤元素一旦脱离文档流，会变成块级元素（宽高有效，上下外边距有效）
6.清除之前浮动元素带来的影响
| 浮动元素带来的影响： 一个文档流中块级元素，如果之前有浮动的哥哥 这个元素会被哥哥压在下面 清除之前浮动元素带来的影响：不被已经浮动的元素压着 clear:left/right/both |
7.高度坍塌
| 高度坍塌形成原因： 一个父元素没有设置高度，内部所有子元素都浮动脱离了文档流，导致父元素失去高度了 解决方案： 1.给父元素设置高度 项目中，如果子元素（儿子）较少，能够快速知道儿子高度，可以给父元素定义高度 子元素较多，或者子元素个数不确定，就不能给父元素定义高度 2.给父元素也设置浮动，不能用的方案 但是，会影响父元素兄弟元素，以及父元素的父元素 3.overflow:hidden/auto 不能溢出显示了 4.给父元素添加一个空的div，不设置宽高，只设置clear:both |
元素脱离文档流
| 1.元素不占页面空间 2.后续元素上前补位 3.没定义宽度，脱离文档流后，宽度靠内容撑开 4.元素一旦脱离文档流，会变成块级元素 |
十一.其它重要样式属性
1.显示方式
| display：block;让元素按照块级方式去显示 display： inline-block; 让元素按照行内块级方式去显示 display： inline; 让元素按照行内方式去显示 display：table; 让元素按照表格方式去显示 display：none; 隐藏，脱离文档流的隐藏 除了none其他都是显示 |
2.显示效果
| visibility: visible; 默认值，显示 hidden;隐藏，不脱离文档流的隐藏 visibility: hidden和display:none的区别？？ visibility: hidden不脱离文档流的隐藏 display：none 是脱离文档流的隐藏 |
3.透明度
| opacity: 0.5; 取值0~1 0全透明，1不透明 opacity和rgba的区别 rgba 只改变当前颜色的透明度 opacity 元素以及元素后代所有与颜色相关的属性都会变透明 |
4.垂直对齐方式
| 元素内部文本的垂直对齐：只能用line-height 或者给文本添加容器，使用上内边距或者上外边距调整 vertical-align: 使用场合 ①表格td/th垂直对齐方式 控制内部内容垂直对齐方式 top/middle/bottom ②行内块垂直对齐方式 控制当前行内块和前后行内元素，行内块元素，文本的垂直对齐方式 top/middle/bottom 默认值middle ③img垂直对齐方式 控制img和前后行内元素，行内块元素，文本的垂直对齐方式 top/middle/bottom/baseline 默认值baseline 基线 |
5.光标的处理
| 不同操作系统的光标不一样 设置属性之后，会直接调用操作系统的默认光标 cursor: default; 默认值，小箭头 pointer 小手 text提示文本输入 的 I wait 等待加载 help 帮助 crosshair |
6.列表的样式
| 设置列表的表示项的样式： ①list-style-type: disc 默认值，实心小圆点 square; 实心方块 circle 空心圆 none 去除列表标识项 ②list-style-image:用来引用图片当作列表项，但此处引用的图片不能设置图片的大小，所以必须要使用小图片 ③list-style-position: outside; 默认值，在li外侧，在ul的内边距中显示列表标识 inside 在li中显示列表标识 ④简写方式 list-style:type url position; list-style: none;最简方式，清除列表标识项 |
十二.定位
| 相对定位，绝对定位，固定定位 position:static 默认值，默认文档流 relative 相对定位 absolute 绝对定位 fixed 固定定位 注意：元素一旦设置postion,并且取值为relative/absolute/fixed其中一种时 1.这个元素被称为已定位元素 2.已定位元素会解锁4个偏移属性 top:/right:/bottom:/left: 左右冲突以left为准 3.已定位元素，会解锁堆叠属性 z-index posotion 和偏移量必须要同时使用 |
1.相对定位-----不脱离文档流
| position：relative; 配合偏移属性，不脱离文档流（页面不会乱），不影响周围元素， 相对哪里定位？相对与它本身原来的位置配合偏移量做的位移 如果一个元素设置了相对定位，并且不写偏移属性，这个元素对页面布局没有任何影响 如何偏移---相对自己原先位置做偏移 使用场合①做元素位置的微调 ②作为绝对定位的祖先级已定位元素，子绝父相 |
2.绝对定位-----脱离文档流
| position：absolute; 配合偏移属性， 绝对定位，脱离文档流 元素一旦脱离文档流： ①不占页面空间 ②后续元素上前补位 ③元素如果不写宽度，脱离之后的宽度以内容为准， ④脱离文档流的元素变为块级元素 如何偏移 ①如果元素没有已定位的祖先元素，绝对定位元素相对可视区域左上角进行偏移 ②如果其祖先级有已定位元素，以"最近的""已定位的""祖先级"元素左上角做偏移 多数情况，我们设置“最近的”已定位的“祖先级”元素时会使用相对定位relative来设置，因为相对定位不脱离文档流，对页面布局没有任何影响 使用场合，页面布局中使用，可以让元素移动到页面的任何地方 |
3.固定定位
| position：fixed; 配合偏移属性 如何偏移？相对可视区域的左上角做偏移 使用场合，把元素永远固定在页面可视区域的一个位置，不随着页面滚动而离开可视区域 |
4.堆叠顺序
| 默认的堆叠顺序：后写的压前面的（看html中标签写的先后顺序，后写的堆叠顺序高，不是看样式的先后顺序） z-index: 不带单位的整数，一般-999~~+999 注意事项 1.html代码中后写的元素堆叠顺序高 2.z-index默认堆叠顺序0~1之间，堆叠顺序序数越高，就会压着其他元素 3.浮动在第几层？ 小于0，大于-1 4.只有已定位的元素可以设置堆叠顺序 5.堆叠顺序对父子级元素无效，儿子永远压着父亲 |
CSS3 core
一.复杂选择器
1.兄弟选择器
| 兄弟元素：具有同一个父级元素的一系列同级元素称为兄弟元素 兄弟选择器只能通过哥哥找弟弟，只能往后找 ①相邻兄弟选择器，通过哥哥找到紧紧挨着哥哥后面的一个弟弟 选择器1+选择器2{样式声明} ：匹配离选择器1最近的且符合选择器2的元素（必须挨着选择器1且符合选择器2的要求的所有元素） ②通用兄弟选择器，通过哥哥找到所有符合条件的弟弟们 选择器1~选择器2{样式声明} ：匹配选择器1后面符合选择器2的元素们 找到选择器1后面所有符合选择器2的元素们 项目中的使用场合 除去老大，其它弟弟们都应用的样式，使用兄弟选择器 这种需求，使用相邻兄弟选择器的效率高 |
练习
06_ex.html
| h3 静夜思 div 床前明月光 div 疑是地上霜 div 举头望明月 div 低头思故乡 标题与正文之间30px 正文每行之间10px |
CSS3 CROE
一.复杂选择器
1.兄弟选择器
| 选择器1+选择器2{样式声明} 选择器1~选择器2{样式声明} 一组元素，除了大哥不匹配，其它的弟弟都用应用此样式 |
2.属性选择器
| 通过元素的属性，来匹配元素 [attr]{样式声明} 匹配所有定义了attr属性的元素 [attr1] [attr2]{样式声明} 匹配所有定义了attr1和并且定义了atrr2属性的元素 elem[attr] {样式声明} elem[attr1] [attr2]{样式声明} [attr=value] {样式声明}匹配所有定义了attr属性并且值为value的元素 [attr1=value] [attr2=value]{样式声明} 匹配所有定义了attr1和atrr2属性 并且值为value1,value2的元素 elem[attr=value] {样式声明} 对属性值的模糊匹配 ^ * $ ~ 以value开头 只要包含value值 以value结尾的 有独立单词 无论是不是独立单词都可 [attr*=value]{ 样式声明} 匹配属性值中，包含value的元素 [attr^=value]{ 样式声明} 匹配属性值中，以value开头的元素 [attr$=value]{ 样式声明} 匹配属性值中，以value结尾的元素 [attr~=value]{ 样式声明} 匹配属性值中，包含value这个独立单词的元素 |
3.伪类选择器
①
| 最常用的伪类选择器，就是使用在链接的锚元素上的选择器，用于定义不同状态下的链接样式，链接伪类并不存在于html中，只有当用户和网站交互时，才能体现出来 E:link 选择未被访问过的链接给它设置样式 例如：a:link{color:blue;} E:visited 选择已经访问过的链接，给它设置样式 a:visited{color:purple;} E:hover 选择鼠标悬停其上的元素E，给它设置样式 E:active 选择被激活（鼠标已经按下还没有被释放）的元素E，给它设置样式 E:focus 选择获得焦点的元素E给它设置样式 尽管:link :visited非常有用，但他们是静态的，第一次显示之后，他们不会在改变元素的样式，并且他们只用于锚元素，因此被称作链接伪类或者锚伪类 E:hover E:active E:focus则不同，他们可以根据用户行为动态改变文档的外观，故被称为动态伪类，或者用户行为伪类。 动态伪类还可以用来设置任何元素， 伪类选择器，使用单:定义，匹配元素某一种状态下的样式 伪元素，使用双::定义，修饰元素的某一部分的样式 |
①目标伪类
| 当元素被锚点激活时，匹配的样式（当点击锚点的时候，目标的样式就会被改变） :target{样式} |
练习：点击菜单，出现对应图片
②结构伪类
| 结构伪类选择器可以根据元素在文档中的位置，来动态的选择元素，从而减少了HTML文档对id或者类的依赖，有助于保持代码干净整洁。 (1)E:first-child{样式声明} ：选择父元素的第一个子元素E，给它设置样式 (2)E:last-child{样式声明} ：选择父元素的最后一个子元素E，给它设置样式 (3)E:nth-child(n){样式声明} ：选择父元素的第n个子元素E，，给它设置样式 |
| 练习：01_ex.html 一个4*4的表格，200*200px 第一行背景色 #0ff 最后一行背景色 #ff 第三行的第二列背景色 #f0f
(4) E:empty{} 选择没有子元素的元素E，内部不能有标签，不能有文本，不能有回车，不能有空格,什么都没有 （5）E:only-child选择父元素下仅有的一个子元素E，并给它设置样式，匹配属于其父元素的唯一子元素，子元素如果有同级文本，也算是唯一子元素，会被正常匹配 |
⑤否定伪类
| 否定伪类选择器用来选择不满足某些条件的元素 选择未被选择器selector所选中，且类型为E的元素 E:not(selector){样式声明} 符合selector元素都不要 满足条件的都不要，给剩下的设置样式 p:not(:first-child){color:red;} |
⑥伪元素选择器
| 伪元素---残疾的不完整的元素，某个元素的部分 匹配一个元素中某一个部分的样式，伪元素选择器，并不是基于真正的元素，而是基于元素当前所具有的特性来选取元素，由于这些元素本身并不存在于文档中，只是基于元素的抽象，因此称作伪元素， 伪元素选择器是CSS中已经定义好的选择器，不能由用户随便起名，只能按照CSS规定的标准格式使用，语法格式为： 选择器:伪元素{属性：值} 伪元素选择器在CSS中一直存在，但CSS3对伪元素进行了一定的调整，把选择器 和伪元素之间冒号，有CSS2和1中的一个冒号改成了2个冒号，但是，为了向下兼容，现代浏览器仍然支持老的写法，因此，2中都是合法的。 例E元素： E:first-letter / E::first-letter{} 选择E元素内的第一个字符，并设置样式 E:first-line / E::first-line{} 选择E元素内的第一行，并设置样式 E:before / E::before{content: ;} 在E元素之前插入由content属性生成的内容 E:after / E::after{content: ;} 在E元素之后插入由content属性生成的内容 E::selection :选择被用户选中的元素 ::first-letter 或者:first-letter 用于选择元素中的第一个字符，第一个字符包括E::before插入的内容，匹配一个元素区域中首字符的样式 ::first-line 或者 :first-line 用于选择E元素中的第一行文本，第一行是指在浏览器窗口显示的第一行文本，如果调整浏览器窗口的尺寸，第一行的内容会跟着变化，第一行的文本包括E::before和E::after中插入的文本，用于匹配一个元素区域中首行的样式 与------------冲突时 这两个伪元素出现比较早，单双:都适用 |
⑦伪元素----内容生成
| 使用css来生成html元素 ::before{} 或者:before content："" 设置这个行内元素内容，这个内容只能设置文本或者url(img) 使用css在当前元素内容区域内，的最前面添加一个假的行内元素 这个元素默认是行内元素，使用content添加内容，（将content中的内容加到body中的对应标签的最前面） ::after{} 或者:before 使用css在当前元素的内容区域内，的最后面添加一个假的行内元素 content："" 设置这个行内元素内容，这个内容只能设置文本或者url(img) 这个元素默认是行内元素，使用content添加内容，（将content中的内容加到body中的对应标签的最后面） 解决外边距溢出 解决高度坍塌 .clearfix::after { display: block; clear: both; content: ""; } </div id="d1"> </div id="d2"></div> </div> |
二.弹性布局
| 弹性布局，是一种布局方式，现在主流的布局方式，属性特别特别多，能够灵活的控制元素在X轴和y轴的显示方式 主要解决某个元素中子元素的布局方式 使用display可以改变一个框的显示类型，显示类型就决定了一个元素的生成框的类型，同时也会影响一个框的行为。 给一个元素设置display：flex.这个元素的儿子们变成弹性布局。不会影响到孙子 |
1.弹性布局的4个专有名词
| 弹性容器 发生了弹性布局的元素们的父元素，就是设置display:flex的元素就是弹性容器，目的是让内部所有儿子变成弹性布局显示，仅限儿子，孙子不是，。 弹性项目 设置display:flex的元素的儿子们（真正发生了 弹性布局的元素们） 主轴 弹性项目们的排列方向--主轴有4个方向 主轴是x轴，主轴起点在左侧，主轴终点在右侧 主轴是x轴，主轴起点在右侧，主轴终点在左侧 主轴是y轴，主轴起点在顶部，主轴终点在底部 主轴是y轴，主轴起点在底部，主轴终点在顶部 交叉轴 是永远与主轴垂直的一个方向（主轴有4个方向，分别是X左右，y轴上下，主轴是其中一个方向时，交叉轴是与之垂直的方向） 弹性布局十分灵活，就是靠控制项目在主轴上的对齐方式，和项目在交叉轴上的对齐方式。 来掌控项目的位置 当元素变为弹性容器时，父元素的text-align（文本对齐方式）失效，vertical-align失效，弹性项目的float失效，只能使用弹性提供的 属性和margin来控制项目们在x/y轴的位置 给父元素设置 display:flex;把块级父元素变成弹性容器 inline-flex;把行内父元素变成弹性容器 |
容器的属性会作用到所有的项目们身上
项目属性只会应用到某一个项目，不影响其他项目
2.容器的css属性
| 控制所有的弹性项目 ①主轴方向4条------------------------交叉轴只有2个方向 flex-direction: row 默认值 → row-reverse ← column ↓ column-reverse; ↑ ②容器在主轴方向空间不够时，项目是否换行 flex-wrap: nowrap; 项目压缩，不换行-----默认值，不换行，如果主轴空间不够会压缩 wrap 项目不压缩，换行 ③主轴方向和换行的缩写 flex-flow: row-reverse wrap; ④设置项目在主轴上的排列方式 justify-content : flex-start 默认值，主轴起点对齐 center 主轴中心对齐 flex-end 主轴终点对齐 space-around 每个项目左右的空间一样大 space-between 两端对齐，每个空白相同----两端对齐
⑤设置项目们在交叉轴上的排列方式 align-items: flex-start 默认值，交叉轴起点对齐 flex-end 交叉轴终点对齐 center 交叉轴中间对齐 baseline 让项目中的文本基线对齐（以文本对齐） stretch 如果项目们在交叉轴方向不写尺寸，项目充满交叉轴 |
3.项目的css属性
| 控制某一个弹性项目 ①单独设置某个项目在交叉轴的排列方式 align-self: flex-start 默认值 flex-end center baseline 让项目中的文本基线对齐（以文本对齐） stretch 如果项目们在交叉轴方向不写尺寸，项目充满交叉轴 auto 使用父元素设置的align-items的值 ②项目在主轴上的排列顺序 order：无单位的整数 order：1; order：2 ; order：3; 取值越小，越靠近主轴起点，默认值0 ③flex-grow 如果主轴方向有剩余空间，flex-grow会控制项目们变大，把剩余的部分按照各个项目flex-grow的取值比例分份。flex-grow:0;默认值 ④flex-shrink 如果主轴方向空间不足，flex-shrink会控制项目变小，把不足的部分按照各元素的flex-shink取值比例压缩 按照各个项目取值，不同的项目减去自己份数 flex-shrink:1;默认值 例如：主轴一共300的空间 3个div的宽200（所以缩水空间300像素） flex-shrink的取值 如果flex-shrink取值分别为 1 3 6 缩水比例：30 90 180 缩水后3个div的所占空间为170 110 20
⑤flex-basis 设置每个项目在主轴方向的基本尺寸 flex-basis优先级大于项目宽高 flex-basis : px为单位的数字 % ⑥flex-grow flex-shrink flex-basis的简写 flex : 0 0 20%; 不增长 不缩水 在主轴方向上占20% |
三.CSS hack
| 写浏览器兼容，低版本的浏览器不兼容很多css样式 -webkit- -moz- -o- -ms- 然哥个人建议，去面试之前的准备工作 1.查公司是否正规------天眼查 2.查岗位需求----需要css hack看拓展视频20分钟 |
四.转换
| 改变元素在页面中的位置，大小，角度，形状。不要用转换做页面布局 2D转换 只在x轴和y轴上发生转换效果 3D转换 添加了z轴的效果 所有的转换都使用同一个属性 transform：转换函数1 转换函数2 转换函数3........; |
1.2D转换
①位移
| transform: translate(150px); translate(v1) 只有一个值，代表x轴位移+ → - ← 分别设置x轴和y轴的位移 translate(x,y) translate(v1,v2) 分别设置x轴和y轴位移y： + ↓ - ↑ 代表x轴位移：translatex(150px);，x大小写都对 代表y轴位移translatey(150px); |
②旋转
| transform: rotate(n deg); n为正，顺时针 负，逆时针 旋转注意事项 1.转换原点，不同的旋转原点会产生不同的结果 transform-origin:x y; 取值，以px为单位的数字 % 关键字 x:left/center/right y:top/center/bottom 2.旋转是会带着坐标轴一起旋转的 所以旋转之后再位移，会发生偏移（旋转之后x轴的方向在进行位移） |
③缩放
| 改变元素的大小 scale(value) 同时设置x轴和y轴的缩放v倍 scale(value1,value2) 分别设置x轴和y轴的缩放 scalex(value1) 单独设置x轴缩放 scaley(value1) 单独设置y轴缩放 取值：无单位的数字，代表放大或缩小的倍数 value>1 放大 0>value>1 缩小 value<-1 放大并翻转 -1<value<0 缩小并翻转 |
④倾斜
| skew(v1)=skewx(v1)
skewy(v1)
skew(v1,v2) 分别设置x轴和y轴的倾斜 |
2.
3D转换-----3D旋转
| 页面中所有的3D效果都是模拟的 透视距离 模拟人的眼睛到3D转换元素之间的距离 由于距离不同，3D也会不同 透视距离必须设置在3D转换元素的父元素上 perspective: 200px; transform: rotate3d(x,y,z,ndeg);同时设置3个轴变化的倍率 transform: rotate3d(1,2,5,ndeg); n每改变一度，x y z 分别改变 1 2 5度 rotatex(ndeg) 只有x轴旋转---->烤羊腿，爆米花机 rotatey(ndeg) 只有y轴旋转---->土耳其烤肉，旋转门 rotatez(ndeg) 只有z轴旋转---->风车，摩天轮，煎饼 |
五.过渡
| 让两个css的值之间的变化过程显示出来，必须使用伪类激活 |
1.语法
| ①设置参与过渡效果的属性 transition-property:属性名1 属性名2....; transition-property:all 所有支持过渡的样式属性都参与过渡 支持过渡的样式属性： 颜色属性 大多数取值为数据的属性 阴影 转换 ②设置过渡时长 transition-duration: 1s; transition:1s ③设置延迟时间 transition-delay: 2s; ④设置时间曲线函数 transition-timing-function:贝赛尔曲线函数 ease 默认值 慢速开始，变快，减速，慢速结束 linear 匀速运动 ease-in 慢慢开始，一直加速 ease-out 快速开始，一直减速 ease-in-out 慢速开始，疯狂加速，疯狂减速，慢速结束 ⑤过渡的简写方式 transition: property duration timing-function delay; ---顺序不能颠倒 需要过度的属性 过度时长 曲线函数 延迟时间 最简方式 transition：duration ; ⑥过渡代码的编写位置 过渡代码写在原始样式中，去回都有过度效果 过渡代码写在伪类中，过渡效果有去无回，回来的时候时没有过度效果，闪现回来 |
| 练习。1.翻滚吧，亮亮 Div 200*200 norepeat center 120% margin:600 auto 2.亮亮么么哒 |
六.动画
| 动画是过渡的升级版 动画是显示两个或者多个css值之间，在一段时间内平缓变化效果，动画就是把多个过渡效果整合到一起
|
1.关键帧
| 关键帧：这一帧播放的时间 这一帧的样式 我们使用关键帧来控制一组动画效果 在定义动画的时候使用关键帧来定义 |
2.动画的使用
①定义动画
| @keyframes 动画名称{ 0%或from {样式声明;} ..... 100%或to{样式声明;} } |
②使用动画
| 1.调用动画的名称 animation-name: 动画名称; 2动画的持续时间 animation-duration: 2s; 3动画的时间曲线函数 animation-timing-function: linear; 4动画的延迟 animation-delay: 1s; |
③动画的特有属性
| 1.动画播放的次数 animation-iteration-count: 具体的数字; infinite 无限 2.动画的播放顺序 animation-direction: normal; 默认值0%~~100% reverse 100%~~0% alternate 交替执行，第一遍0%~~100%，第二遍100%~~0%，即第一遍正着播放，第二遍反着播放， 3.动画的简写方式 animation:name duration timing-function delay count direction; 动画名称 时长 时间曲线函数 延迟 播放次数 播放顺序 最简方式 animation：name duration; 4.动画的填充方式 animation-fill-mode: backwards; 在动画延迟时间内，一直显示动画第一帧 forwards; 动画结束后，展示动画的最后一帧 both； 前后都保留效果 |
animate.css别人封装好的动画，外面直接拿来用
3.低版本浏览器对动画的兼容
| 低版本浏览器不支持动画 需要在定义动画的时候写兼容 @keyframes name{关键帧} @-webkit-keyframes name{关键帧} @-moz-keyframes name{关键帧} @-o-keyframes name{关键帧} @-ms-keyframes name{关键帧} |
七.CSS优化
1.优化的目的
| 减少服务器端的压力 提升用户体验 |
2.css的优化原则
| 尽量的减少http请求的个数-------缓存（精灵图，雪碧图的使用） 在页面的顶部引入css文件 将css和js写入单独文件中 |
3.css代码的优化
| css文件一定要短 尽量使用简写方式，能重用就重用，选择更短的取值 避免出现空的src和href 上线之前一定进行代码压缩 |
练习
1.完成动画时钟
2.scss安装
3.使用弹性布局完成3个布局结构
6440
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
