为期一个月的面试题纪实之HTML+CSS(持续更新...)

HTML+CSS

1.css长度单位px，em，rem，vh，vw区别？

• px固定长度，像素单位，一旦设置，就不能适应页面大小去改变
• em相对长度，相对于父级元素字体大小，2em表示当前父元素字体大小的2倍
• rem相对长度，也是相对于元素字体大小的两倍，2rem表示相当于根元素字体大小的两倍，以浏览器(HTML)为基准的字体计算
• vh，vw相对长度，相对于视口的页面来计算，100%vh相当于视口高度的百分之百

2.元素水平居中的方法？在不定高度情况下

• 第一种：position + transform：父元素相对定位，子元素绝对定位，top，left设置为50%，transform:translate(-50%,-50%)
• 第二种：position + margin:auto：父元素相对定位，子元素绝对定位，上下左右设置为0，margin设置为auto(只能为 auto一个值)
• 第三种：flex布局：父元素：display:flex;justify-content:center;align-items:center
• • 第四种：grid网格布局：父元素：display:grid;justify-content:center;align-items:center

3.css选择器有哪些？

4.让页面里的字体变清晰，变细用css怎么做？

• -webkit-font-smoothing 在window系统下没有作用，在ios系统下有作用
• -webkit-font-smoothing:antialiased是最佳的，灰度平滑的

5.HTML语义化标签有哪些？语义化特点？

• header：定义文档或节的页眉
• footer：定义文档或节的页脚
• acticle：定义文档内部的文章
• section：定义文档当中的节
• aside：定义页面内容以外的部分
• main：定义文档当中的主内容

语义化的优点

• 可以构建更好的文档结构，有利于开发和维护，语义化更具有可读性，有利于代码维护
• 有利于用户阅读，当样式丢失时能够清晰的呈现出文档结构，有利于SEO，搜索引擎可以根据标签来确定上下文和各关键字的权重
• 有利于其他设备的解析，盲人阅读器就是根据语义来渲染页面的

6.css的引入方式？

7.解决浮动元素，引起父元素高度塌陷问题(清除浮动方法)？

8.position的值相对于哪个位置定位的？

9.position:absolute和float属性异同？

10.前端页面有哪三层构成，分别是什么？