前端面试题总结-CSS-H5-CSS3

CSS

1.盒模型（box-sizing）margin+border+padding+content

• 标准盒模型 box-sizing: content-box;(默认) 盒子宽度=content
• IE盒模型 box-sizing: border-box; 盒子宽度=content+padding+border

2.css特性：继承性，层叠性，优先级

css优先级：!important>行内样式>id>类/伪类/属性>标签>全局选择器

3.隐藏元素的方法：

1. display：none；不占据空间位置
2. opacity：0；元素不可见，占据空间
3. visibility：hidden；占据空间
4. position：absolute；移除可见区
5. clip-path剪切掉

4.单位

• px：像素 绝对单位长度
• em：相对于元素的字体大小 （font-size）,pixels/16=em
• rem：相对于根元素的字体大小（相对于浏览器的基准字体大小）1rem=10px
• vw：相对于视口宽度的1%
• vh：相对于视口高度的1%

5. 重绘：是在一个元素的外观被改变所触发的浏览器行为，浏览器会重新把元素外观绘制出来的过程，叫做重绘。

重排：当DOM树的某一部分更新并且节点的尺寸或位置发生了变化，浏览器需要重新计算元素的几何属性，将其安放在界面中的正确位置，这个过程叫做重排。

会引起重排的情况：

• 添加或删除可见的DOM元素
• 元素的位置发生变化
• 元素的尺寸发生变化（包括外边距、内边框、边框大小、高度和宽度等）
• 内容发生变化，比如文本变化或图片被另一个不同尺寸的图片所替代
• 页面初始化渲染的时候
• 浏览器的窗口尺寸变化

避免重排的方法：

• 不使用table布局
• 更改样式时最好更改类名，而不是直接修改样式
• 可以把需要更改的元素先脱离文档流，再进行操作（absolute，fixed）
• 避免在大量元素上使用:hover
• 给动画的HTML元件使用fixed或absolute的position，那么修改他们的css是不会重排
• 可以使用display:none或者visibility:hidden进行控制，减少重排和重绘的次数

6.水平垂直居中 

水平居中

• 行内元素：text-align:center
• 块级元素：margin:0 auto

水平垂直居中

        1.定位+margin

position:absolute;
top:0;
bottom:0;
right:0;
left:0;
margin:auto;

         2.定位+transform

position:absolute;
top:50%;
bottom:50%;
right:50%;
left:50%;
transform:translate(-50%,-50%)

        3.flex布局

display:flex;
justify-content:center
align-items:center

        4.grid布局

.container {
  display: grid;
  align-items: center;
  justify-items: center;
}

        5. table布局

        6.行内垂直居中：height和line-height一致。

7.预处理器

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

1. 嵌套：允许在样式规则中嵌套其他样式规则，反映层级与约束关系。
2. 变量和计算：引入变量，可用于存储颜色、尺寸等信息，同时支持数学运算，减少代码重复。
3. Extend和Mixin：代码片段的复用，Extend用于共享样式规则，Mixin用于在样式表中进行样式复用并可进行传参操作。
4. 循环：支持在样式表中使用循环结构，适用于生成复杂但有规律的样式。
5. Import：模块化，允许在样式表中导入其他样式文件，有助于提高可维护性和代码复用。

8.清除浮动

1. 在浮动元素后面增加一个元素，设置clear:both
2. 父元素设置伪元素clear:both
3. 父元素设置overflow:hidden 原理：会让父元素形成一个BFC（块级上下文） 

9.设置0.5px的线

1. transform:scaleY(0.5) 
2. height:0.5px
3. 线性渐变：background:linear-gradient(0deg,#fff,#000)
4. box-shadow

10. float和position区别

1. 层级不同：float低于position
2. 场景不同：float用于图片周围浮动文字，信息流；position固定位置，如导航条

11.画三角形

width:0
height:0
border:10px solid
border-color:white white red white

HTML5

1.语义化的理解：在写HTML页面结构时所用的标签有意义，例如head，main，footer。

怎么判断页面是否语义化了？把css去掉，如果能够清晰的看出页面结构，显示内容较为正常。

语义化的意义：

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

2.H5增加了哪些新特性？

1. 语义化标签
2. 音频视频
3. 画布canvas
4. 数据存储localstorage，sessionstorage
5. 表单控件 email url search
6. 拖拽释放API

CSS3 

1.css3新增哪些新特性？

1. 新增选择器，包括属性选择器，后代、兄弟选择器，伪类选择器等。
2. 新增了媒体查询
3. 文字阴影text-shadow
4. 边框属性 border-radius border-img outline
5. 盒子模型 box-sizing
6. 渐变属性
7. 过渡 transition
8. 自定义动画
9. 背景的属性background-origin，background-size，background-clip
10. 2D和3D转换

2.rem是如何做到适配的

rem是相对于根元素（html）的font-size属性来计算大小，利用媒体查询设置不同尺寸下的根元素的字体大小，从而达到适配。

3.解决过哪些移动端兼容问题

1. 当设置样式为overflow:scroll/auto时，IOS的滑动会有卡顿，此时可以设置 -webkit-overflow-scrolling:touch
2. 在安卓环境下placeholder文字设置行号时会偏上，解决方法为input有placeholder属性的时候不要设置行高
3. 移动端字体小于12px时异常显示：应该先把整体放大1倍，再用transform进行缩小。
4. IOS下input按钮设置了disabled属性为true时显示异常，input[type=button]{opacity:1}
5. 安卓手机下取消语音输入按钮 input::-webkit-input-speech-button{display:none}