接上述笔记：
目录
京东界面练习（p102-114）
设置网站图标（用在标题栏和收藏栏）
网站图标一般都存储在网站的根目录下，名字一般都叫做favicon.ico
HTML
表格table
tr表示一行
td表示单元格
td，可以使用vertical-align和text-align修改td中内容的位置
colspan：横向合并单元格，例如
rowspan：纵向合并单元格
表格同样可以分为三个部分：thead，tbody，tfoot
如果表格中没哟砽tbody而是直接使用了tr，那么浏览器会自动创建一个tbody，并且将tr全部放到tbody中
tr不是table的子元素，而是tbody的子元素。
border-spacing：指定边框之间的距离
border-collapse：设置边框的合并
表单form
属性：action：需要提交的地址
input：text文本框，submit提交按钮，password密码框
提交必须要有一个name
单选按钮type=“radio”，必须是相同的name属性，checked默认选中
多选框type=“checkbox”，
下拉选项：select，option
自动补全：autocomplate=“off”
只读数据会提交：readonly 禁止数据不会提交 disabled
自动获取焦点：autofocus
CSS
行高（line-height）
行高指的是文字战友的实际高度，可以通过line-height来指定行高，行高可以指定一个大小（px，em）也可以指定一个整数。如果是整数，意味着行高是字体的指定倍数。默认行高1.33。行高还经常用来设置文字行间距。
字体框
字体框就是字体的格子，设置font-size就是设置字体框的大小
解决图片底部有空白问题
默认情况下会有空白
解决方法：vertical-align
文本
text-align：文本的水平对齐
left，right，center，justify两端对齐
vertical-align：文本的垂直对齐
baseline，top，bottom，middle，直接设置值
text-decoration：设置文本修饰
none，underline，line-through，overline
white-space：设置网页如何处理空白
normal，nowrap不换行，pre保留空白，就是保留格式
案例：如何设置多余内容使用省略号展示？
案例：下拉框显示案例：p86
背景
background-image：url("");
background-repeat：repeat，repeat-x，repeat-y，no-repeat
background-position：top，left，right，bottom，center，需要指定两个值，不然第二个值默认center
同样可以通过偏移量设定背景图片，水平方向，垂直方向
background-clip：border-box：默认值，背景会出现在边框下面
padding-box：背景不会出现在边框，只出现在内容区和内边距
content-box：只出现在内容区
background-origin：边距图片的偏移量计算的原点
padding-box：默认值，background-position从内边距开始计算
ventent-box：背景图片的偏移量从内容区处计算
border-box：偏移量从边框处开始计算
background-size：向这样写可以设置原来尺寸的缩小，如果只写一个，第二个默认值是auto
cover:图片比例不变，将元素铺满
contain：图片比例不变，将图片在元素中完整显示
background-attachment：背景图片是否跟随元素移动
scroll：默认值，背景元素会跟随元素移动
fixed：背景会固定在页面中，将元素在元素中完整显示
background：背景相关的间歇，没有顺序要求，使用/隔开，background-position/background-size
注意，background-origin background-clip，origin要写在clip前面
解决图片闪烁问题（雪碧图）
下图就是一个雪碧图：特点是一次性将多个图片记载到页面中，降低了请求的次数，加快了访问速度，提升了用户体验。
渐变
渐变是图片，需要通过background-image实现
linear-gradient（）线性渐变，颜色沿着一条直线发生变化
可以指定渐变方向： to left,to right, to bottom,to top
也可以使用度数来渐变：XXXdeg
用圈来渐变：Xturn
渐变如果是定多个颜色，多个颜色默认情况下是平均分布，也可以手动指定渐变情况，数字指的是从哪开始渐变。
repeating-linear-gradient（）平铺的线性渐变，这个时候指定渐变情况表示的是一个渐变的范围（如下如所示）
radial-gradient（）径向渐变（放射性效果）
默认情况下，圆心是根据元素形状来计算，同样可以指定径向渐变大小
circle圆，ellipse椭圆，同样可以指定渐变位置（使用at）
过渡transition
通过过渡我们可以指定一个属性发生变化时的切换方式。
transition-preperty：指定要执行的过渡的属性，width，height，颜色，all等大部分都支持过渡。只要值可以计算就可以过渡。注意过渡的时候过渡前后的数值必须要有效。
transition-duration：指定过渡效果的持续时间，s，ms。注意可以分别指定时间。
transition-timing-function：过渡的时序函数，也就是动画的过渡方式
ease：缺省，慢速开始，先加速，后减速
linear：匀速运动
ease-in：加速，ease-out：减速
ase-in-out：先加速后减速
cubic-bezier：贝塞尔曲线，参数是两个点坐标，使用工具
steps：分步执行过渡效果，steps（n），表示分n步执行。
end，start表示在某个时间点的开始还是结束启动。
transition-delay：过渡效果的延迟，就是等待一段时间后执行
动画
自动触发动态效果，设置动画效果，必须要设置一个关键帧，关键帧设置了动画的每一个执行步骤。
animation-name：要对当前元素生效的关键帧名字
animation-duration：动画的执行时间
animation-delay：动画延时
animation-iteration-count：动画执行次数。infinite无限执行
animation-direction：指定动画运行的方向
normal：默认从from到to
reverse：从to到from
alternate：从frome到to，重复执行动画时反向
alternate-reverse：和上面相反
animation-play-state：设置动画的执行状态
running：默认值，执行动画
paused：动画暂停
animation--fill-mode动画的填充方式
none：动画播放完毕，回到原来位置
forwards：动画播放完毕，停止在结束位置
backwards：动画延时等待的时候，元素就会处于from的开始位置
both：结合forwards和backwards
变形 transform
变形的原点
transform-origin
通过css来改变元素的形状和位置，变形不会影响到页面的布局,,不会导致偏离文档流
平移： translateX（）translateY （）translateZ （）
元素居中
z轴平移 translateZ
调整元素在z轴的位置，正常情况下就是调整元素到人眼之间的距离，距离越大，元素离人越近。默认情况不支持透视。如果需要看见效果，必须设置网页的视距才能看到效果。
设置视距举例：perspective：800px；
旋转
通过旋转可以使元素沿着x，y，z旋转指定的角度
rotateX（），rotateY（），rotateZ（）需要指定角度例如45deg
注意如果我们设置了视距，那么就会出现远近的透视效果，如果没设置视距就是简单旋转。
backface-visibility背面是否可见
visible：可见
hidden：不可见
设置3D变形效果
transform-style：preserve-3d
缩放scale
scaleX（），scaleY（），scale（）双方向
弹性盒flex
是css中的另一种布局手段，主要用来替代浮动完成页面的布局
可以使元素具有弹性，让元素随着页面大小改变而改变
弹性容器：
要使用弹性盒，必须要先将一个元素设置为弹性容器
通过display设置
display：flex 设置为块级弹性容器
display：inline-flex 设置为行内弹性容器
弹性容器样式：
flex-direction：指定容器中弹性元素的排列方式
row：缺省，水平排列，同时确定主轴方向，自左向右
row-reverse：反向排列，同时确定主轴方向， 自右向左
column：纵向排列，同时确定主轴方向，自上向下
column-reverse：反向纵向排列，同时确定主轴方向，自下向上
主轴：弹性元素的排列方向成为主轴
侧轴：和主轴垂直方向的成为
flex-wrap：设置弹性元素是否在弹性容器中自动换行
nowrap：缺省，不会自动换行
wrap：沿着侧轴自动换行
wrap-reverse：元素沿着侧轴反向换行
flex-flow：是flex-direction和flex-wrap的简写属性
justify-content：如何分配主轴上的空白空间，就是主轴上的元素如何排列。
flex-start：元素沿着主轴起边排列
flex-end：元素沿着主轴终边排列
center：居中
space-around：空白分布在所有元素的两侧
space-between：空白均匀分布到元素间
space-evenly：空白分布到元素的单侧
元素双方向居中
align-items：元素在侧轴上如何对齐
stretch：缺省，将元素长度设置为相同值。指的是同一行的元素长度相同，如果是不同行会有不同
flex-start：元素不会拉伸，而是侧轴起边对齐
flex-end：沿着福州的终边对齐
center：居中对齐
align-centent：侧轴空白空间分布
center：空白在两边
flex-start：空白在下边
flex-end：空白在上边
space-around：元素两边都有空白
space-between：空白在中间
align-self：用来覆盖当前弹性元素上的align-items
弹性元素：
弹性容器的直接子元素是弹性元素，一个元素可以同时是弹性容器和弹性元素。
弹性元素样式
flex-basis：元素的基础长度
如果主轴是横向的，该值指定的是元素的宽度
如果主轴是纵向的，该值指定的是元素的高度
flex-grow：指定弹性元素的伸展系数，当父元素有多余空间时，子元素的分配方式。默认值是0，父元素的剩余空间，会按照比例分配。
flex-shrink：当父元素中的空间不足以容纳所有元素的时候，对子元素进行收缩。0表示不允许收缩，同样的值越大收缩越多。
flex：综合上述三个样式，顺序要求：flex 增长 缩减 基础
order：决定弹性元素的排列顺序，越大越后
less是css的预处理语言
less是css的增强版，通过less编写更少的代码实现更强大的功能。
less本身是无法直接执行的，需要转换成css才能执行到浏览器中
变量重名时，后面的覆盖前面的
css函数
css本身也是支持变量设置的，语法为：--变量名：变量属性； 使 用：var（--变量名）
less需要额外编译
使用easy less插件
less注释：//
less变量：
语法@变量名称：值；
作为类名，或者一部分值（例如路径）使用我们需要加上大括号@{变量名}
less语法
可以直接对属性名进行引用
&表示外层的父元素，例如下图。&表示box3
扩展，和java继承一样
混合函数：mixins相当于创建了一个公共的函数，自己（.p4是不会使用这个样式的）但是这个的作用是可以直接给别人使用这个样式。
导入其他less，直接加减法
easy less配置
视口
使用meta设置视口
完美视口
自动设置完美视口
vw和适配
1vw就是1%的视口大小
在移动端兼容性很好，但是在pc端兼容性一般
vw适配：设置font-size然后使用rem
媒体查询
媒体查询语法：@media 查询规则{}
all：所有设备
print：打印设备
screen：带屏幕设备
speech：屏幕阅读器
only：唯一作用就是兼容老版本浏览器
媒体特性：
width：视口宽度
height：视口高度
min-width：视口的最小宽度，大于这个宽度生效
max-width：视口的最大宽度，小于这个宽度生效
如下例子：在宽度500的时候这样配置
断点
样式切换的分界点，我们称之为断点，也就是网页的样式会在这个点发生变化，常用断电如下：
其中逻辑 and not