自己整理的八股文，有兴趣的同学可以收藏起来

CSS盒模型

盒子的组成：内容content、内边距padding、边框border、外边距margin

标准盒模型：padding+margin+border+content

IE盒模型：margin+content（padding+border）

控制盒模型的模式：box-sizing：content-box(标准盒模型)、border-box(IE盒模型)

CSS选择器的优先级

CSS的三大特性：继承性、层叠性、优先级

优先级：给同一个样式添加多个样式，谁的权重高就显示谁的样式

!important>行内样式>id>类/伪类>标签>全局选择器

隐藏元素的方法有哪些

dispaly:block; 元素在页面上消失，不占据空间

opacity:0; 元素透明度0，占据空间

visibility:hidden; 让元素消失，占据空间位置，一种不可见的状态

position:absolute;

clip-path 剪切元素

rem和px的区别

px是像素，显示器上给我们呈现画面的像素，每个像素的大小一样，绝对单位

rem，相对单位，相对于html根节点的font-size的值，直接给html根节点font-size设置62.5%

1rem=10px（16px*62.5%=10px）

重绘和重排有什么区别

重排(回流)：布局引擎会根据所有的样式计算盒模型在页面上的位置和大小

重绘：计算好盒模型的位置和大小，浏览器根据盒模型的特性进行绘制

浏览器的渲染机制

对dom的大小，位置进行修改后，浏览器需要重新计算元素的位置和大小，就叫重排

对dom的样式进行修改，比如color和background-color，浏览器不需要重新计算元素几何，直接绘制了新样式，这叫重绘

元素垂直居中

position+margin

position+transform

flex布局

grid布局

table布局

CSS属性哪些能继承，哪些不可以？

CSS的三大特性：继承性，层叠性，优先级

1、文字的一些属性：font；

2、文本的一些属性：line-height；

3、元素的可见性：visibility:hidden;

4、表格布局的属性：border-spacing;

5、列表的属性：list-style

6、页面样式属性：page

7、声音的样式属性

有没有用过预处理器

CSS样式不利于后期维护和阅读

预处理语言新增了变量，函数，混入等强大的功能

预处理语言：SASS、LESS

语义化的理解

写在HTML页面结构时所用的标签有意义

例如：头部用header、中间部分用main、底部用footer

怎么判断页面使用了语义化标签呢？

去掉所有css样式，显示内容较为正常

为什么要选择语义化呢？

方便团队协作，利于开发；让HTML结构更加清晰明了；有利于爬虫和SEO；能够让浏览器更好的去解析代码；给用户带来良好的体验

H5C3有哪些特性

H5新特性：

语义化标签；数据缓存localstorage、sessionstorage；新增音频视频；新增动画canvas；新增表单控件email、search、url；新增拖拽释放

CSS3新特性：

新增了选择器：属性选择器，伪类选择器，伪元素选择器；新增了媒体查询；新增了文字阴影；盒子模型box-sizing;2D和3D；渐变；过渡动画；自定义动画；背景的属性

解决了哪些移动端的兼容问题

1、当设置样式overflow：scroll/auto时，IOS上的滑动会卡顿

-webkit-overflow-scrolling:touch

2、在安卓环境下placeholder文字设置行高时会偏上

input有placeholder属性的时候不要设置行高

3、移动端字体小于12px时异常显示

应该先把整体放大一倍，然后再用transform进行缩小

4、iOS下input按钮设置了disabled属性为true显示异常

input[type==button]{
         Opcity:1   
         }

5、安卓手机下取消语音输入按钮

Input::-webkit-input-speech-button{
              Dispaly:none
              }