html + css篇
1.元素垂直居中
设置子元素和父元素的行高一样
子元素设置为行内块，再加 vertical-align：middle
已知父元素高度，子元素相对定位，通过 transform：
translateY（
-50%）
不知道父元素高度，子绝父相，子元素 top：50%，transform：
translateY（
-50%）
创建一个隐藏节点，让隐藏节点的 height 为剩余高度的一半
给父元素 display：
table，子元素 display：
table-cell，vertical-align：
middle
给父元素添加伪元素
弹性盒，父元素 display：flex，子元素 align-self：center
2.如何让chrome浏览器显示低于12px的文字
添 加 谷 歌 私 有 属 性 -webkit-text-size-adjust ： none ， 现 在
-webkit-transform：scale（）
3..Css 选择器有哪些，那些属性可以继承，优先级如何计算？Css3 新增的伪类有哪些
Css2 选择器：
元素选择器，id 选择器，群组选择器，类选择器，*通配符选择器，后代
选择器
Css2 伪类选择器：a:link/visited/hover/active
Css3 选择器：第 9 页
空格 > +相邻兄弟选择器 ~通用选择器（查找后面所有）
结构伪类选择器：
查找第几个 nth-child（
n）
查找同一类型第几个 nth-of-type
查找唯一类型 only-of-type
属性选择器：根据标签属性查找 [attr=value]
: root 查找根元素 html 标签
: empty 查赵空标签
目标伪类选择器：（表单）
：enabled 查找可以使用的标签
：disabled 查找禁止使用的标签
：checked 查找被选中的标签
伪元素选择器 ：：selection 设置选中文本内容的高亮显示（只能用于背
景色和文本颜色）
否定伪类选择器 not（）
语言伪类选择器 lang（取值）
优先级（权重）：
元素选择器 1
伪元素选择器 1
class 选择器 10
伪类选择器 10
属性选择器 10
Id 选择器 100
内联样式的权重 1000
包含选择器权重为权重之和
继承样式权重为 0
那些属性可以继承：
Css 继承特性主要是文本方面第 10 页
所有元素可继承：visibility 和 cursor
块级元素可继承：text-indent 和 text-align
列表元素可继承：list-style，list-style-type，list-style-position，list-style-image
内联元素可继承：
letter-spacing，word-spacing，line-height，color，font，font-family，font-size Font-style ， font-variant ， font-weight ， text-decoration ，text-transform，direction
字母间距 段落间距 行高 字体颜色 字体种类 字体大小 字体样式 字体粗细 小型大写字母文本 文本修饰 转换不同元素中的文本 文本方向
4..网页中有大量图片加载很慢 你有什么办法进行优化？
图片懒加载，在图片未可视区域加一个滚动条事件，判断图片位置与浏览器顶端和页面的距离，如果前者小鱼后者，优先加载
使用图片预加载技术，将当前展示图片的前一张和后一张优先下载
使用 csssprite 或者 svgsprite
5.行内元素/块级元素有哪些？
行内元素：相邻的行内元素会排列在同一行，不会独占一行 设置宽高无
效 span
块级元素：会独占一行 可以设置宽高等属性 div
可变元素：根据上下文预警决定该元素为块元素还是内联元素第 11 页
块级元素：div h1-h6 hr p ul ol table address blockquote dir from
menu
行内元素：a br I em img input select span sub sup u textarea
可变元素：button del iframe ins
6.浏览器的标准模式和怪异模式区别？
标准模式：浏览器按照 W3C 标准解析执行代码
怪异模式：浏览器根据自己的方式解析执行代码，因为不同浏览器解析
执行方式不一样，所以叫怪异模式
区别：
在怪异模式下，盒模型为怪异盒模型 而在标准模式下为标准盒子模型
图片元素的垂直对齐方式对于行内元素和 table-cell 元素，标准模式下
vertical-align 属性默认值是 baseline，而在怪异模式下，table 单元格
中的图片的 vertical-align 属性默认值是 bottom，因此在图片底部会有
几像素的空间
元素中的字体css中font的属性都是可以继承的，怪异模式下，对于table
元素，字体的某些元素不能从其他封装元素继承中得到，特别是 font-size
属性
内联元素的尺寸标准模式下，
non-replaced inline 元素无法自定义大写，
怪异模式下，定义元素的宽高会影响元素的尺寸
元素的百分比高度当一个元素使用百分比高度时，在标准模式下，高度
取决于内容变化，在怪异迷失下，百分比被准确应用
元素溢出的处理标准模式下，overflow 取值默认值为 visible，在怪异模
式下，这个溢出会被当做扩展 box 对待，就是元素的大小由内容决定，
溢出不会裁剪，元素框自动调整，包含溢出内容
7.Margin 和 padding 在什么场合下使用
Margin 外边距 自身边框到另一个边框之间的距离
Padding 内边距 自身边距到自身内容之间的距离
当需要在 border 外侧添加空白时用 margin，当需要在 border 内侧添
加空白时用 padding
8.弹性盒子布局属性有那些请简述?
Flex-direction：弹性容器中子元素排列方式（主轴排列方式）
Flex-wrap：设置弹性盒子的子元素超出父容器时是否换行
Flex-flow：是 flex-direction 和 flex-wrap 简写形式
Align-item：设置弹性盒子元素在侧轴上的对齐方式
Align-content：设置行对齐
Justify-content：设置弹性盒子元素在主轴上的对齐方式
9.怎么实现标签的禁用
添加 disabled 属性
10.Flex 布局原理
就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式
