静态页面笔记包括 html和css

HTML/CSS 笔记

一.html 简单介绍

1. html 意思是超文本标记语言

2. 超文本：可以点击且跳转的文字或 图片 ； 标记语言：描述网页的一种语言

3. 网页组成部分：结构 html 样式 css 行为 javascript

4. xhtml:可扩展性的标记语言，xhtml和html的区别
   (1) html语言，标签名可以大写，也可以小写，但是xhtml只能小写
   (2) html单标签，结束可以不加/ xhtml语言必须要加 /
   (3) html属性值可以单引号也可以双引号，xhtml必须双引号

5. 文章类的标签
   标题标签 h1-h6 由大到小 h1最大
   特点：双标签/有加粗/字体大小从大变小
   段落 p
   特点：双标签

6. 加粗标签 b 主要是语义的区别，strong表强调
   特点：双标签
   倾斜 i/em 主要是语义的区别，em表强调
   特点：双标签
   下划线 u 删除线 del 上标 sup 下标 sub

7. 强制换行 br
   水平线 hr
   特殊字符
   空格  
   左箭头 <
   右箭头 >
   版权符号 ©
   注册商标 ®

8. 图片标签 img 常见图片格式： jpg/png/gif/jpeg/webp
   特点：单标签
   属性：
   src: 图片路径
   绝对路径：直接找在线地址复制下来即可
   相对路径：将图片下载到自己的文件里面，根据方法找到图片
   width: 宽度
   height: 高度
   title: 鼠标划过图片显示的文字
   alt: 图片未加载出来的提示

9. 超链接 a
   属性
   href：跳转链接地址
   target: 窗口打开方式
   _self 当前窗口直接刷新，默认值
   _blank 新开一个窗口

10. 列表
    无序列表 ul li
    应用场景：新闻列表/网页导航/商品列表
    有序列表 ol li
    type:排序方式 1/I/i/A/a 加在ol身上
    start:排序的起始值，必须是数字 加在ol身上
    自定义列表 dl dt和dd
    dt 一般只有一组，且经常放图片
    dd 可以是多组，一般是对图片的说明
    应用：上面的图片，下面是文字的时候

11. cellspacing 边框之间的距离
    行标签 tr 调整整个一行
    align 行里面文字水平位置 left(默认靠左)/center(居中)/right(靠右)
    valign 行里面文字垂直位置 top(顶部)/bottom(底部)/middle(居中，默认值)
    列标签 td 调整单独的单元格
    align 行里面文字水平位置 left(默认靠左)/center(居中)/right(靠右)
    valign 行里面文字垂直位置 top(顶部)/bottom(底部)/middle(居中，默认值)

colspan 列合并 哪个不同合并哪个，值为合并的单元格的个数
rowspan 行合并 哪个不同合并哪个，值为合并的单元格的个数
12. css-> 层叠样式表
样式表
行内(内联)样式表
在标签后面生成一个style的属性
在style的属性值里面写对应的css属性
内部样式表
外部样式表
css属性
宽度 width:数值px; 必须加单位 0可以不加
高度 height:数值px; 必须加单位 0可以不加
背景色 background-color:颜色单词;
字体颜色 color:颜色单词;

13. 内部样式表
    在head标签里面生成一个style的双标签 (也可以不放在head里)
    通过css语法设置样式
    css语法
    选择器{
    css属性:css属性值; ->声明
    css属性:css属性值 ->声明 最后一个可以不加分号
    }
    标签选择器 标签名{} 如 p{color:red;} 可以选择到所有的p标签
    行内样式表
    缺点：样式较多，代码比较混乱
    使用: 样式比较少的时候
    内部样式表
    缺点：结构和样式都比较多，不容易修改
    使用：写小案例的时候
    外部样式表
14. 在html文件的外面新建一个带有.css后缀的文件
15. 让html和css文件关联起来

rel: 规定当前关联文档的类型 type: 当前文件的类型 href: css文件的路径 优点：结构和样式的分离 引用：写整页或者工作开发后 三种样式表的权重 行内样式表权重最高，样式优先显示 内部和外部根据就近原则(谁靠后，优先显示谁)

14. 选择器
    标签选择器 标签名{}
    类选择器 .class名{} ->类似于人的名字

15. class名可以重复

16. 一个标签可以有多个名字，且多个之间用空格隔开
    id选择器 #id名{} ->类似于人的身份证号

17. id名不能重复

18. 一个标签只有一个id名
    起名：
    必须是英文
    也可以是英文和数字的组合
    可以加一个-/_
    不要以数字开头
    字体大小 font-size:数值px
    默认大小为16px,一般设置偶数
    文本水平对齐方式 text-align: left/center/right/justify
    行高 line-height: 数值px
    多行文本：加大行和行之间的距离
    单行文本：利用行高和当前区域的高度一样，即可实现垂直居中
    ps快捷键
    放大或者缩小 alt+滚轮
    调整单位 ctrl+k ->单位和标尺 ->单位换成 像素，显示信息 F8 或者窗口->信息
    –>
    通用选择器 * 可以选择到所有的标签
    *{padding:0;margin:0} 一般在该选择器中去掉所有标签自带的margin和padding值
    伪类(在某种状态)选择器
    选择到超链接的选择器:link{} 链接未访问之前
    选择到超链接的选择器:visited{} 链接访问过后
    元素:hover{} 鼠标划过
    选择到超链接的选择器:active{} 鼠标按下

19. 如果四种状态同时存在，顺序必须是 爱(l) o (v) e恨(ha) te法则

20. hover可以针对所有的元素
    群组选择器
    选择器,选择器,选择器{}

21. 选择器的个数不限制，每个之间用逗号隔开就行

22. 选择器的种类也不限制
    后代选择器 选择器 选择器 选择器{}

23. 选择器的个数是不限制

24. 选择器之间是可以跨代的

25. 选择器的种类不限制,只要能够选择器到该元素就行
    选择器的权重值
    行内样式 1000
    id选择器 100
    类选择器/伪类选择 10
    标签选择器 1

26. 后代选择器的权重值由每个选择器的权重值相加

27. 权重值越高，样式越优先显示

28. 权重值相同的时候，就近原则(后面写的优先显示)

29. 群组选择器的权重是每一个选择器自己本身，和其他人没有关系
    层叠
    用不同的选择器，选择了同一个元素，设置相同的属性，但是属性值是不同的时候，根据权重值的大小，优先显示样式,如果样式没有冲突，正常显示
    字体四件套
    字体大小 font-size
    字体加粗 font-weight
    bold 加粗
    100-900 100-300偏细 400-500正常 500-900加粗
    normal 正常 去掉加粗标签的加粗样式
    字体倾斜 font-style
    italic
    normal 正常 去掉倾斜标签的倾斜样式
    字体类型 font-family

30. 多个字体之间用逗号隔开

31. 字体会从前向后检索，有哪个显示哪个，都没有就显示默认字体
    文本属性
    字体颜色 color:英语单词/十六进制(前面加#)b(0-255,0-255,0-255)
    文本修饰 text-decoration
    underline 下划线
    overline 上划线
    line-through 删除线
    none 去掉下划线
    文本首行缩进 text-indent:数值px 可以设置负数
    字和字之间的距离 letter-spacing:数值px; 中文：汉字和汉字 英文：字母和字母
    单词之间的距离 word-spacing:数值+px;
    列表符号类型 list-style-type:disc(实心圆)(空心圆)/square(实心方块)ne(去掉列表符号)
    列表符号位置 list-style-position:outside(li的外面)/inside(li的里面)
    列表图片 list-style-image:url(图标路径)
    边框属性
    边框样式 border-style:solid(实线)/dashed(虚线)/dotted(点状线)/double(双实线)
    边框粗细 border-width:数值+px
    边框颜色 border-color:颜色值;
    复合写法 border: 边框样式 边框粗细 边框颜色; (三个值的顺序是不固定的)

单方向边框 border-方向(top/bottom/left/right):边框样式 边框粗细 边框颜色;
去掉边框 border-方向:none/0;
背景属性
背景色 background-color:颜色值
背景图 background-image:url(背景图路径)
背景图重复 background-repeat: repeat(重复)/repeat-x(横向重复)/repeat-y(纵向重复)-repeat(不重复)
背景图位置 background-position:水平 垂直;
数值px
关键字 水平: left/center/right 垂直: top/center/bottom
值设置一个值的话，第二个方向默认居中
复合写法 background: 背景色 背景图 背景图重复 背景图位置；

1. 属性值的顺序是不固定的
   背景图和img引入图片的区别
2. 背景图不占位置
3. 修饰性的图片一般用背景图，网页内容一般用img引入
   ps截图
4. 矩形工具选中
5. ctrl+c->ctrl+n 回车->ctrl+v>ctrl+s（更改图片格式为jpg）->存在自己的文件夹里
   背景图固定
   background-attachment:scroll(背景图滚动)/fixed(背景图固定)background-size: 100% 100%;
   浮动属性 float:none/left/right
   应用场景：让纵向排列的元素横向排列
   特点
6. 从父元素的左侧边缘或者右侧边缘挨个排列
7. 浮动元素会脱离文档流，会遮挡住后面的元素，但是不遮挡文字
8. 当外层父元素的宽度放不下里面浮动元素的时候，浮动元素会掉下来，并且左浮动会掉在父元素的左边，右浮动掉右边
   元素类型
   块级元素(div/p/h1-h6/ul/ol/dd/dt/table/hr)
9. 可以设置宽高
10. 独占一行
    内联元素(span/a/b/i/em/u/sup/sub/del)
11. 不可以设置宽高
12. 可以在同一行显示
    (内联块) img/input(表单元素)
13. 可以在同一行显示
14. 可以设置宽高
    元素类型的转换 display
15. block 块级元素
16. inline 内联元素
17. inline-block 内联块
    元素类型
    块级元素(div/p/h1-h6/ul/ol/dd/dt/table/hr)
18. 可以设置宽高
19. 独占一行
    内联元素(span/a/b/i/em/u/sup/sub/del)
20. 不可以设置宽高
21. 可以在同一行显示
    (内联块) img/input/area(表单元素)
22. 可以在同一行显示
23. 可以设置宽高
    元素类型的转换 display
24. block 块级元素
25. inline 内联元素
26. inline-block 内联块
27. none 隐藏元素，隐藏之后不占位置
    隐藏元素 visibility: hidden; 隐藏之后占位
    注意：内联块和内联元素在写代码时候的回车，会在页面中形成距离
    盒模型
    内容区：(1)主要放文字和图片~(2)s设置的宽度和高度所形成的区域
    内填充(内边距)：padding
    padding:一个值； 四周
    padding:值 值; 上下 左右
    padding:值 值 值；上 左右 下
    padding:值 值 值 值；顺时针
    padding-方向(top/bottom/right/left):数值px
    特点
28. padding会撑大盒子，如果不想被撑大的话，在原来宽高的基础上减去对应方向的值
29. padding可以用来调整内容区距离盒子的距离
30. padding不可以设置负数的
    img引入的图片有一个自带的底部大约3px的留白
    解决方法img{display:block}
    外边距
    margin的值和padding值设置一样
    特点
31. margin不会撑大盒子
32. margin可以设置负数，值越大，距离越远，值越小，交流越深入
33. margin可以用来调整盒子和盒子之间的距离
34. margin可以设置负数，值为正数，产生距离，值为负数，深入交流(会叠加在一起)
    缩进属性只对块级元素生效
    margin的bug1
    margin的传递: 当给元素里面的(1)第一个子元素，添加(2)上边距的时候，会错误的加在父元素身上
35. 用padding解决
36. 给父元素加一个边框
37. 给第一个子元素或者给父元素设置浮动
38. 给父元素加一个overflow:hidden; (溢出隐藏)
    margin和padding对内联元素左右生效，上下不生效
    margin的重叠：给上面的元素加了下边距，给下面的元素加了上边距，边距会重叠，并且重叠之后以最大值显示，左右会相加
    margin的bug
    margin的传递: 当给元素里面的(1)第一个子元素，添加(2)上边距的时候，会错误的加在父元素身上
39. 用padding解决
40. 给父元素加一个边框
41. 给第一个子元素或者给父元素设置浮动
42. 给父元素加一个overflow:hidden; (溢出隐藏)
    margin的重叠：给上面的元素加了下边距，给下面的元素加了上边距，边距会重叠，并且重叠之后以最大值显示，左右会相加
    margin:auto;块级元素居中,对内联元素不生效
    缩进属性只对块级元素生效
    margin和padding对内联元素左右生效，上下不生效
    css继承：加在父元素身上的属性，可以作用到他的后代
    可以继承的属性
43. 字体四件套 font-size(字体大小)/font-weight(字体加粗)/font-style(字体样式)/font-family(字体类型)
44. 文本类 color/text-align(文本水平对齐)/text-indent(文本缩进)ne-height(行高)/letter-spacing(字符距离)/word-spacing(单词距离)
45. 列表类 lists-tyle-type(列表类型)st-style-position(列表位置)st-style-image(列表图片)
    不能继承
    float/height/width/padding/margin/text-decoration(特殊)
    ps切片工具
46. 选择切片工具，选择需要裁的图
47. 裁完后，ctrl+alt+shift+s 保存
48. 右上角修改下图片格式->存储
49. 存到对应的项目下面，切片选择 所有用户切片
50. 写完会自动生成一个images的文件夹
    margin:auto只对块元素生效 图片加了不生效的话 大概率是没转块
    溢出属性 overflow/overflow-x/overflow-y
    visible 溢出正常显示
    hidden 溢出隐藏
    scroll 溢出显示滚动条
    auto 自动。内容少正常显示，内容溢出显示滚动条
    单行文本设置溢出显示省略号(只针对单行文本)
51. 设置宽度
52. 设置不换行 white-space: nowrap;
53. 设置溢出隐藏 overflow-x: hidden;
54. 设置溢出显示省略号 text-overflow: ellipsis;
55. 可以给该标签添加 title属性，划过显示所有内容
    表单元素
    表单集 form
    action: 提交路径
    method: 提交方式 GET/POST
    GET: 一般用来获取数据，安全系数低
    POST: 主要发送数据，安全系数高
    文本输入框
    value: 默认值
    密码输入框
    value: 默认值
    提交按钮
    value: 按钮文本
    单选框
    女 单选框要加相同的name属性值才可以互斥
    男 checked：默认选中
    下拉列表
    

刘亦菲 凤姐 selected：默认选中 多选框 后裔 disabled：禁止选中 文件上传 多行文本域 resize: none; 禁止用户调整大小 重置按钮 清空用户做的操作 第一列整体靠右可以使用 table td:first-child{text-align:right} 内联块元素的垂直对齐方式(要加在内联块元素身上，调整文字和他的位置) vertical-align baseline 基线对齐 默认 bottom 底线对齐 middle 中线对齐 top 顶线对齐 给img设置baseline以外的值，可以解决底部自带的3px留白 表格新增的标签 表格标题 表格列标题 把第一行的列里面的td换行th,有加粗且居中的效果 表格行分组 表头 一般有一组，把列标题的行包进去 表体 可以有多组 表尾 一般有一组 ，把底部合计包进去

表格新增的属性
边框之间的距离 border-spacing: 数值px
边框合并 border-collapse:collapse; 合并成细线边框
表格固定 table-layout:auto/fixed (表格不会根据内容的多少去调整宽度，每一个都一样宽，可以加快浏览器运行速度)
高度自适应

1. 不设置高/height:auto 由内容撑开
2. 高度设置百分比，也参考父元素
   max-height: 高度由内容无限撑大，但是不能超过该值，但是依然会溢出
   min-height:高度由内容无限变小，但是不能小于该值
   一屏页面
3. 给该元素设置宽高百分百
4. 给html,body{height:100%}
   伪元素选择器
   元素::first-letter{} 选择到第一个汉字或者第一个字母
   元素::flrst-line{} 选择到第一行文字
   元素::before{content:"";} 在元素里的最前面添加内容没有内容也必须得有content:""
   元素::after{content:""} 在元素里的最后面添加内容，没有内容也必须得有content:""
   content: url() 也可以引入图片
   高度塌陷
   条件：(1)父元素没有设置高度(2)子元素设置浮动
   解决方法
5. 给父元素加一个 overflow:hidden; 弊端：会把超出父元素的部分隐藏掉
6. 再浮动元素后面加一个块级元素，然后设置clear:left/right/both
   (1)清除浮动：清除浮动元素对自己的影响
   (2)clear只对块级元素生效
   弊端：可能造成代码冗余(多余)
7. 完美清除法
   元素::after{
   content:"";
   clear: both; 只针对块级元素
   display: block; 转换成块
   height: 0; content里面如果有内容的话，做的处理
   overflow: hidden;
   }

引入外部样式表@import 1. @import来说只能引入css文件，link来说，可以引入多种类型 link可以引入浏览器标题旁边的小图标 (1)在com或者cn的后面加 /favicon.ico (2)图片存到文件下面 (3) 改下路径即可 2. 加载文件的顺序，@import先加载结构后加载样式 link结构和样式同时加载 3. 浏览器的支持性，link所有浏览器都支持，@import在ie6以上支持 引入外部样式表@import url(css路径) 1. @import来说只能引入css文件，link来说，可以引入多种类型 link可以引入浏览器标题旁边的小图标 (1)在com或者cn的后面加 /favicon.ico (2)图片存到文件下面 (3) 改下路径即可 2. 加载文件的顺序，@import先加载结构后加载样式 link结构和样式同时加载 3. 浏览器的支持性，link所有浏览器都支持，@import在ie6以上支持 元素类型 置换元素(内联块img/input/textarea): 浏览器根据标签和标签里面的属性，在页面中显示不一样的效果 img->src/input->type 非置换元素:除了置换元素 绝对定位 position:absolute; 1. 参考物: 有(1)定位属性的(2)祖先元素 注意：加了绝对定位的元素会一层一层找带有定位属性的祖先，先找到谁就参考谁，如果找到body也没有找到的话，单靠的是浏览器窗口 2. 移动方向和距离: left/top/right/bottom:数值px 绝对定位特点 1. 给元素设置绝对定位后，margin:auto会失效 2. 绝对定位会脱离文档流，会遮挡住后面的元素，文字也会被遮挡 3. 一般情况下使用相对定位属性去形成参考物，(子绝父相) 1. 绝对定位实现水平垂直居中(在参考物里面的水平垂直居中) (1)给该元素设置position:absolute (2)给该元素设置top:50%;参考物高度的一半 left:50%;参考物宽度的一半 (3)给该元素设置margin-top:-该元素高度的一半； margin-left:-该元素宽度的一半 2.绝对定位实现水平垂直居中2 (1) 给该元素设置四个方向值都为0 (2) 给元素加margin:auto； 3.固定定位 position:fixed 参考物：浏览器窗口 移动方式和距离：top/bottom/left/right:数值px 特点：脱离文档流，margin:auto失效 注意：(1)如果头部需要固定的话，不论有没有通栏，都把通栏加上，定位也加在通栏身上，通栏整体白色 (2)头部设置了固定定位会把后面元素挡住，不被挡住的话给后面的元素设置margin-top:头部的高

4. 粘性定位 position:sticky
   参考物：浏览器窗口
   移动：top
   特点：元素没达到top之前，正常显示，达到top值之后，类似于固定定位，固定不对，且脱离文档流(吸顶效果)
   5.定位属性的层级关系
   z-index:数字; 默认是auto
   特点: (1)值越大 越在上面显示(2)必须要加在有定位属性的元素身上
   6.锚点：实现同一个页面不同板块之间的跳转
   主要是超链接和id的结合使用
5. 板块名字必须是id名
6. href的属性值在id前面把#加上
   7.过渡属性
   transition-property: 需要过渡的属性
   transition-duration:过渡时间 s/ms 1s=1000ms
   transition-delay: 延迟时间
   transition-timing-function: 过渡执行效果 linear(匀速)/ease(慢开-快-慢结束)/ease-in(慢开)/ease-out(慢结束)
   8.transition: 需要过渡的属性 过渡时间 延迟时间 过渡执行效果；
   注意：(1)属性值之间没有顺序，但是只有一个时间代表执行时间，两个时间分别是执行和延迟
   (2) 过渡里面必须的属性是过渡执行的时间，过渡所有的属性，值直接写 all
   (3) 过渡属性加在原本元素身上，不要加在hover里面
   9.边框实现三角形
7. 设置宽度和高度为0 width:0px； height:0px
8. 四个边框设置透明 border: 30px solid transparent;
9. 留下单独的边框 border-top: 30px solid red;
10. 渐变
    线性渐变 background-image:linear-gradient(方向,颜色值1,颜色值2……)
    渐变方向
    to bottom 向下 to right 向右 to top 向上 to left 向左
    to left top 向左上 to right top 右上 to left bottom 左下 to right bottom 右下
    数值deg
    11.重复性的线性渐变
    方向默认是向下的，根据高度去划分 加入高度是200 该值以为值 0-40 是红色纯色 40-50 是红到黄的渐变色 50-200是黄色纯色 要保证两个颜色之间有差值 才有过渡范围
    background-image: repeating-linear-gradient(red 40px,yellow 50px);
    12.径向渐变 background-image:radial-gradient(发散点的位置,颜色值1,颜色值2……)
    位置和背景图位置是一样的，但是要修改位置的话，要加浏览器的前缀
    background-image: -webkit-radial-gradient(right bottom,red,yellow,pink,orange)
    13.重复性的径向渐变
    background-image: repeating-radial-gradient(red,yellow 10px,blue 30px);
    background-image: -webkit-repeating-radial-gradient(bottom,red,yellow 10px,blue 30px);
11. 盒子阴影 box-shadow: 水平偏移 垂直偏移 模糊程度 模糊大小(可选) 阴影颜色 阴影位置(可选)
    box-shadow: -14px -12px 13px 5px red inset;
    文本阴影 text-shadow: 水平偏移 垂直偏移 模糊程度 阴影颜色;
    text-shadow: 4px 6px 3px red;
    圆角 border-radius:
    一个值: 四周
    两个值: 对角
    三个值: 左上 对角 右下
    四个值: 顺时针
    变圆 border-rasius:50%/100%

15.背景大小 background-size:宽度 高度;
数值px
百分比 背景图可能会被拉伸到变形
关键字 cover：背景图不断变大，直到覆盖盒子，才停止变大，所以可能会出现背景图被裁掉，显示不全
contain 背景图不断变大，直到碰到某个盒子边缘，就停止变大，所以可能会出现留白
16. 背景图的起始位置 background-origin
padding-box 从padding区域开始显示
border-box 从边框区域区域开始显示
content-box 从内容区开始显示
背景图从哪里开始不显示 background-clip
border-box 从边框之外不显示
padding-box 从padding区域外开始不显示
content-box 从内容区域外开始不显示
17.层级选择器
后代选择器 选择器 选择器{}
子代选择器 选择器>选择器{}
相邻的后面的兄弟 选择器+选择器{}
相邻的后面的兄弟们 选择器~选择器{}
18.伪类选择器
结构性的伪类 带child的
元素:first-child 这么多该元素的第一个
元素:last-child 这么多该元素的最后一个
元素:nth-child(n) 这么多该元素的第几个
n可以具体的数字/odd奇数/even偶数/表达式(3n等)
19.结构性的伪类 带type的
元素:first-of-type 这么多该元素的第一个
元素:last-of-type 这么多该元素的最后一个
元素:nth-of-type(n) 这么多该元素的第几个
注意：当所选择到孩子都是同一个人的时候，两个选择器没有区别，如果孩子不一样的时候，child要先去看该元素是众多孩子的第几个，type要先去看该类型孩子总共有几个，他是第几个
20. 属性选择器
[属性名] 根据属性名选择元素[type]{}
[属性名=“属性值”] 根据属性名和属性值匹配选择元素[type=“password”]{}
[属性名^=“值”] 属性值以某个值开头[type^=“pa”]
[属性名$="值"]属性值以某个值结尾[type$=“d”]
[属性名*=“值”] 属性值包含该值[type*=“a”]
目标伪类
目标:target{} 结合锚点使用，跳到该目标板块后，样式才执行
21.h5新增的标签 (特点: 语义化)
header 头部
nav 导航
section 板块
main 重要板块
aside 侧边栏
article 文章
hgroup 标题组
time 时间
mark 标记
footer 底部
22.音频
src: 音频路径
controls 控件
loop 循环播放
muted 静音播放
autoplay 自动播放 谷歌浏览器禁止
视频

属性和音频一样
poster=“图片路径” 未播放之前显示的图片
表单新增type类型
type=“email” 限制用户必须输入email类型
type=“url” 限制用户必须输入url类型
type=“range” 产生一个滑动条表单
type=“number”
type=“search” 产生一个搜索意义的表单
type=“color” 生成一个颜色选择的表单
type=“time” 限制用户必须输入时间类型
type=“month” 限制用户必须输入月类型
type=“week” 限制用户必须输入周类型
type=“datetime-local” 选取本地时间
表单新增属性
placeholder: 提示信息
required 必填。
min 最小
max 最大
autocomplete 是否自动提示信息 属性值 on off
placeholder 文本框的提示信息
autofocus 自动聚焦。一个页面只能有一个
novalidate 取消验证 加在form身上
multiple 文件上传多个

1.标准盒模型 box-sizing:content-box;
标准盒模型的总宽=width+padding左右+border左右+margin左右
怪异盒模型 box-sizing:border-box; 注意:ie678缺少文档声明也会触发怪异盒子
怪异盒模型的总宽=width+margin左右
2.弹性盒
父元素
形成弹性盒 display:flex;
子元素在主轴的排列方式 justify-content

1. flex-start 主轴起点
2. flex-end 主轴终点
3. space-between 主轴两端
4. space-around 中间距离是两端距离的2倍
5. space-evenly 每个之间的距离是平均的
   子元素
   3.弹性盒
   父元素
   形成弹性盒 display:flex;
   子元素在主轴的排列方式 justify-content
6. flex-start 主轴起点 默认值
7. flex-end 主轴终点
8. space-between 主轴两端
9. space-around 中间距离是两端距离的2倍
10. space-evenly 每个之间的距离是平均的
11. center 主轴上居中
    子元素在交叉轴的排列方式 align-items
12. stretch 默认拉伸,需要去掉子项的高度
13. flex-start 交叉轴起点
14. flex-end 交叉轴终点
15. center 交叉轴中心
    子元素
    4.换行 flex-wrap: nowrap 子项宽度超出默认不换行,子项会压缩/wrap换行
    多行之间的对齐方式 align-content
16. flex-start 盒子起点
17. flex-end 盒子终点
18. center 盒子中心
19. space-between 盒子两端
20. space-around 行中间的距离是两端的2倍
21. space-evebly 行和两端距离是平均的
    Day15
22. 弹性盒
    父元素
    主轴方向 flex-direction
    row 从左向右
    column 从上往下 主轴改完后,对应子元素的位置也跟着主轴改
    row-reverse 从右到左
    colum-reverse 从下往上
    子元素
    1.子元素
    子项在交叉轴的位置 align-self
    flex-start
    flex-end
    center
    排序 order:数字; 值越大越在后面
    子项放大比例 flex-grow:数字; 默认值0
    子项压缩比例 flex-shrink:数字; 1(压缩)/0(不压缩)
    设置子项溢出显示滚动条 (1)子项设置不压缩 flex-shrink:0(2)父元素设置overflow:auto
    2.子项的宽度 flex-basis:数字px/auto
    flex:flex-grow(0) flex-shrink(1) flex-basis(auto);
    flex:1; 和flex-grow:1的效果一样
    3.解除hover效果
    4.位移实现水平垂直居中
23. 元素设置position:absolute
24. 元素设置left:50%;top:50%; 百分数是参考物的一半
25. 元素设置transform:translate(-50%,-50%) 当前元素宽高的一半
    好处: (1)不论子元素宽高如何变化,百分数都可以拿到(2) 子元素不设置宽高也可拿到
    5.z位移 transform:translate(数值+px) 需要加景深或者3d舞台才能看到效果
    景深 perspective:数值px; 近大远小的效果 值越小 越近,加在变形元素的父元素身上
    形成3d空间transform-style:flat(平面)/preserve-3d (3d舞台) 加在变形元素的父元素身上
    6.变形
    位移(和相对定位差不多)
    x轴位移 transform:translateX(数值+px) 向右为正
    y轴位移 transform:translateY(数值+px) 向下为正
    xy都位移
    transform: translateX(-150px) translateY(100px);
    transform: translate(-150px,100px);
    位移实现水平垂直居中
26. 元素设置position:absolute
27. 元素设置left:50%;top:50%; 百分数是参考物的一半
28. 元素设置transform:translate(-50%,-50%) 当前元素宽高的一半
    好处: (1)不论子元素宽高如何变化,百分数都可以拿到(2) 子元素不设置宽高也可拿到
    z位移 transform:translateZ(数值+px) 需要加景深或者3d舞台才能看到效果
    景深 perspective:数值px; 近大远小的效果 值越小 越近,加在变形元素的父元素身上
    xyz 都位移
    transform: translateX(-150px) translateY(100px) translateZ(100px);
    transform: translate3d(x,y,z)
    形成3d空间transform-style:flat(平面)/preserve-3d (3d舞台) 加在变形元素的父元素身上
    7.变形旋转
    x轴旋转transform:rotateX(数值deg) 需要加景深或者3d舞台
    y轴旋转 transform:rotateY(数值deg) 需要加景深或者3d舞台
    z轴旋转 transform:rotateZ(数值deg) 平面里面也可以看 顺时针为正
29. 变形缩放
    （1.）x轴缩放 transform:scaleX(缩放倍数) 0：直接隐藏 1: 不缩放 0-1缩小 >1 放大
    （2.）y轴缩放 transform:scaleY(缩放倍数) 0：直接隐藏 1: 不缩放 0-1缩小 >1 放大
    （3.）xy都缩放 transform: scale(x,y) xy都缩放 大小一样的话可以写一个值
    9.缩放 transform:scaleZ(缩放倍数) 0：直接隐藏 1: 不缩放 0-1缩小 >1 放大
    xyz缩放
    transform:scaleX(缩放倍数) scaleY(缩放倍数) scaleZ(缩放倍数);
    transform:scale3d(x,y,z) xyz缩放倍数 不缩放写1
    10.变形倾斜
    x轴倾斜 transform:skewX(数值deg)
    y轴倾斜 transform:skewY(数值deg)
    xy都倾斜transform:skew(x,y)
30. 定义动画
    关键字 @keyframes 动画名{
    关键帧划分时间
    from{}
    to{}
    或者
    0%{}
    30%{}
    60%{}
    100%{}
    }
    浏览器前缀 谷歌 -webkit-; ie -ms- 火狐 -moz-
    @-webkit-keyframes 动画名{}
    使用动画
    animation-name: 动画名
    animation-duration:动画执行时间
    animation-delay: 动画延迟时间
    animation-timing-function:动画执行效果
    animation-iteration-count: 次数/infinite

动画和过渡区别

1. 过渡必须结合hover使用，动画可以直接动
2. 过渡一般只有两个状态，动画可以有多个
3. 动画可以无限次执行
4. 使用动画
   animation-name: 动画名
   animation-duration:动画执行时间
   animation-delay: 动画延迟时间
   animation-timing-function:动画执行效果 linear匀速/ease-in慢开/ease-out慢结束/ease-in-out 慢开 正常 慢结束
   animation-iteration-count: 次数/infinite
   animation: 动画名 动画执行时间 动画延迟时间 动画执行效果 次数;
   动画名和动画时间是必须要有
   13.BFC:块级格式化上下文, 在页面中能够 独立渲染 的一般分区域
   触发条件
5. overflow:hidden/auto/scroll
6. float的值为left/right
7. position的值为absolute/fixed
8. display的值为inline-block/flex/inline-flex/table-caption/table-cell
   特点
9. 在BFC的区域里面，浮动元素的高度会计算在内（解决高度塌陷）
10. BFC的区域不会和浮动盒子重叠 (左右布局)
11. BFC区域里的子元素不会影响到外面的元素 (解决margin重叠)
    14.响应式页面：根据浏览器窗口的大小，显示不一样的样式
    媒体查询
    @media 设备类型 and (媒体特性){}
    设备类型:all/screen
    媒体特性: max-width/min-width
    连接符: and
    写法: (1)and两边必须有空格(2)媒体特性px后面不要加;(3)多个媒体特性之间用and链接
    15.移动端准备

viewport: 视口
布局视口：默认980px;设置的css属性都是参考布局视口
可视视口：设备宽度，
完美视口 width=device-width
initial-scale: 初始缩放比例 不缩放
minimum-scale: 最小缩放比例 不缩放
maximum-scale: 最大缩放比例 不缩放
user-scalable=no 禁止用户缩放
16.

18. 手机参数
    物理像素：ps量取的值
    逻辑像素：css设置的值
    dpr(逻辑像素比) = 物理像素/逻辑像素
    dpr的来源: 在pc端ps量取多少就设置多少，但是到移动端之后，因为视网膜高清屏的出现，导致量取的值和设置的值不一样，需要通过dpr计算除css的值
    640/750设计图 -> dpr=2
    1080/>750 -> dpr=3
19. 单位
    (1)px
    (2)%
    (3)em 默认1em=16px 当该元素设置字体大小的话，参考的就是自己的大小，比如div{font-size:20px;width:2em}->1em=20px 宽度2em=40px
    (4)rem 默认1rem=16px 参考根元素的字体大小 html{font-size:30px} div{width:2rem}->1rem=30px; width:2rem=60px
    rem 默认1rem=16px 参考根元素的字体大小 html{font-size:30px} div{width:2rem}->1rem=30px; width:2rem=60px
    (5)vw(视口的宽)h(视口的高)
    1vw = 1%设备宽 1080px -> 1vw = 10.8px 高度一样
    10vw = 10%设备宽 高度一样
    100vw = 100%设备宽 高度一样
    750的设计图-> 设备宽度 375px
    100vw = 375px
    1rem = 100px
    1rem = 26.667vw
    1242的设计图-> 设备宽度414
    100vw = 414px
    1rem = 100px
    1rem = 24.155vw
    640的设计图 -> 设备宽度320
    1rem = 31.25vw
    20.移动端开发步骤
20. 加meta中的视口对应的标签
21. 根据dpr的在ps里面，调整图像大小里面的宽
22. 根据设计图的大小,设置根元素的字体大小
23. 给body重置字体大小 body{font-size: 0.16rem;}
24. ps正常量取，量取出来的值除以100即可

21.你好

1. 雪碧图/精灵图
   主要是使用的是background-position
   优点：(1)图片体积小 (2)减少请求次数
   缺点：(1)使用麻烦 (2)需要频繁的更改位置
2. 透明度
   (1) rgba(0-255，0-255，0-255,0-1) 可以模糊背景 内容不会模糊
   (2) opacity:0-1; 0：完全透明 1: 不透明 值越小越透，可以模糊背景 内容也会模糊
   opacity的属性在ie8以下不生效
   filter: alpha(opacity=value); value的取值1-100 1和0类似 100就是1 取值为整数(20/30/40)
3. 权重 !important
   !important 权重值最高 使用 color: blue !important;
4. 浏览器的内核(解析代码的机制)
   Trident 内核 -> 代表作品 ie 前缀 -ms-
   Webkit 内核 ->代表作品 谷歌/苹果浏览器 -webkit-
   Gecko 内核 -> 代表作品 火狐 -moz-
   Blink 内核 -> 代表作品 谷歌和欧鹏 -o-
5. 头部优化 向搜索引擎说明你的网页的关键词； 告诉搜索引擎你的站点的主要内容； 告诉搜索引擎你的站点的作者；