!importantbanner等固定文案for 和 id:checked + base64的使用HTTP 请求base64的体积约为原图的4/3思路：
margin撑开包含，然后靠负margin形成bfc- 使用
flex
css3的animation
- css3的
animation是css3新增的动画属性，这个css3动画的每一帧是通过@keyframes来声明的，keyframes声明了动画的名称，通过from、to或者是百分比来定义 - 每一帧动画元素的状态，通过
animation-name来引用这个动画，同时css3动画也可以定义动画运行的时长、动画开始时间、动画播放方向、动画循环次数、动画播放的方式， - 这些相关的动画子属性有：
animation-name定义动画名、animation-duration定义动画播放的时长、animation-delay定义动画延迟播放的时间、animation-direction定义 动画的播放方向、animation-iteration-count定义播放次数、animation-fill-mode定义动画播放之后的状态、animation-play-state定义播放状态，如暂停运行等、animation-timing-function - 定义播放的方式，如恒速播放、艰涩播放等。
如何实现小于12px的字体效果
transform:scale()这个属性只可以缩放可以定义宽高的元素，而行内元素是没有宽高的，我们可以加上一个display:inline-block;
transform: scale(0.7);
- 1
css的属性，可以缩放大小
外边距折叠(collapsing margins)
- 毗邻的两个或多个
margin 会合并成一个margin，叫做外边距折叠。规则如下：
- 两个或多个毗邻的普通流中的块元素垂直方向上的
margin会折叠 - 浮动元素或
inline-block元素或绝对定位元素的margin不会和垂直方向上的其他元素的margin折叠 - 创建了块级格式化上下文的元素，不会和它的子元素发生margin折叠
- 元素自身的
margin-bottom和margin-top相邻时也会折
CSS选择符有哪些？哪些属性可以继承
- id选择器（
# myid） - 类选择器（
.myclassname） - 标签选择器（
div, h1, p） - 相邻选择器（
h1 + p） - 子选择器（
ul > li） - 后代选择器（
li a） - 通配符选择器（
* ） - 属性选择器（
a[rel = "external"]） - 伪类选择器（
a:hover, li:nth-child）
CSS哪些属性可以继承？哪些属性不可以继承
- 可继承的样式：
font-size font-family color, UL LI DL DD DT - 不可继承的样式：
border padding margin width height
CSS3新增伪类有那些
:root 选择文档的根元素，等同于 html 元素:empty 选择没有子元素的元素:target 选取当前活动的目标元素:not(selector) 选择除 selector 元素意外的元素:enabled 选择可用的表单元素:disabled 选择禁用的表单元素:checked 选择被选中的表单元素:after 在元素内部最前添加内容:before 在元素内部最后添加内容:nth-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n:nth-last-child(n) 匹配父元素下指定子元素，在所有子元素中排序第n，从后向前数:nth-child(odd):nth-child(even):nth-child(3n+1):first-child:last-child:only-child:nth-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n:nth-last-of-type(n) 匹配父元素下指定子元素，在同类子元素中排序第n，从后向前数:nth-of-type(odd):nth-of-type(even):nth-of-type(3n+1):first-of-type:last-of-type:only-of-type::selection 选择被用户选取的元素部分:first-line 选择元素中的第一行:first-letter 选择元素中的第一个字符
rgba() 和 opacity 的透明效果有什么不同
opacity 作用于元素以及元素内的所有内容（包括文字）的透明度rgba() 只作用于元素自身的颜色或其背景色，子元素不会继承透明效果
css 属性 content 有什么作用
- content 属性专门应用在 before/after 伪元素上，用于插入额外内容或样式
请解释一下 CSS3 的 Flexbox（弹性盒布局模型）以及适用场景
1Flexbox1 用于不同尺寸屏幕中创建可自动扩展和收缩布局
浏览器是怎样解析CSS选择器的
- 浏览器解析 CSS 选择器的方式是从右到左
在网页中的应该使用奇数还是偶数的字体
- 在网页中的应该使用“偶数”字体：
- 偶数字号相对更容易和 web 设计的其他部分构成比例关系
- 使用奇数号字体时文本段落无法对齐
- 宋体的中文网页排布中使用最多的就是 12 和 14
margin和padding分别适合什么场景使用
- 需要在
border外侧添加空白，且空白处不需要背景（色）时，使用 margin - 需要在
border内测添加空白，且空白处需要背景（色）时，使用 padding
抽离样式模块怎么写，说出思路
- CSS可以拆分成2部分：公共CSS 和 业务CSS：
- 网站的配色，字体，交互提取出为公共CSS。这部分CSS命名不应涉及具体的业务
- 对于业务CSS，需要有统一的命名，使用公用的前缀。可以参考面向对象的CSS
元素竖向的百分比设定是相对于容器的高度吗
元素竖向的百分比设定是相对于容器的宽度，而不是高度
全屏滚动的原理是什么？ 用到了CSS的那些属性
- 原理类似图片轮播原理，超出隐藏部分，滚动时显示
- 可能用到的CSS属性：
overflow:hidden; transform:translate(100%, 100%); display:none;
a标签上四个伪类的执行顺序是怎么样的
link > visited > hover > active
L-V-H-A love hate 用喜欢和讨厌两个词来方便记忆
网站图片文件，如何点击下载？而非点击预览
设置元素浮动后，该元素的 display 值会如何变化
设置元素浮动后，该元素的 display 值自动变成 block
让页面里的字体变清晰，变细用CSS怎么做？（IOS手机浏览器字体齿轮设置）
-webkit-font-smoothing: antialiased;
- 1
font-style 属性 oblique 是什么意思
font-style: oblique; 使没有 italic 属性的文字实现倾斜
display:inline-block 什么时候会显示间隙
- 相邻的
inline-block 元素之间有换行或空格分隔的情况下会产生间距 - 非
inline-block 水平元素设置为 inline-block 也会有水平间距 - 可以借助
vertical-align:top; 消除垂直间隙 - 可以在父级加
font-size：0; 在子元素里设置需要的字体大小，消除垂直间隙 - 把
li 标签写到同一行可以消除垂直间隙，但代码可读性差
