1.如何理解HTML语义化
增加代码的可读性
让搜索引擎更容易读懂（SEO）
2.块级元素&内联元素
块级元素：display:block/table 的有div h1-h6 table ul ol li p...
内联元素：display:inline/inline-block 的有 span img input button strong...
3.知道的网页制作会用到的图片格式有哪些？
png，jpg，jpeg，gif，svg
但是上面的哪些都不是面试官想要的最后答案，面试官希望听到的是Webp
4.盒子模型宽度计算？
offsetWidth=（内容宽度+内边距+边框），无外边距
div{
width:100px;
padding:10px;
border:1px solid #ccc;
margin:10px;
}
其offsetWidthe为122px
注意：如果让offsetWidth等于100px 如何做：
div{
box-sizing:border-box;//怪异盒子模型
width:100px;
padding:10px;
border:1px solid #ccc;
margin:10px;
}
5.如何简单实现一个三角形？
首先我们需要把宽度设为0
其次我们就可以设置边框了
最后只要将其三块边框设置为透明色就可以达到想要的效果
#triangle{
width:0;
border:30px solid transparent;
border-bottom-color:aqua;
}
<div id='triangle'></div>
6.如何实现扇形？
实现扇形和实现三角形是一样的，无非多加了边框圆角，其次把不需要的设置为透明色
#sector{
width:0;
border-top:100px solid red;
border-bottom:100px solid yellow;
border-left:100px solid green;
border-right:100px solid blue;
border-radius:100px;
}
<div id='sector'></div>
7.margin纵向重叠问题
p{
font-size:16px;
line-height:1;
margin-top:10px;
margin-bottom:15px;
}
<p>aaa</p>
<p></p>
<p></p>
<p></p>
<p>bbb</p>
按道理来讲：aaa到bbb之间15px + ( 10px +15px )*3 + 10px =100px
但事实上aaa到bbb之间的距离为（重叠取之间的最大值）：15px
8.对margin的top，left，right，bottom设置为负值，有何效果？
margin-top/left 是平移元素自身
margin-right/bottom 平移的是其他元素
margin-top和margin-left负值，元素向上，向左移动
margin-right负值，右侧元素左移，自身不受影响
margin-bottom负值，下方元素上移，自身不受影响
9.什么是BFC? 如何应用？
块级格式化上下文（block formatting context）
一块独立渲染的区域，内部元素的渲染不会影响边界以外的元素
形成BFC常见条件是：
float属性不为none
position的值不是static 或者 relative
overflow不为visable
display为inline-block，table-cell，table-caption，flex，inline-flex
开启BFC特点作用:
1.开启BFC的元素不会被浮动元素覆盖
2.开启BFC的元素父子边距不会合并
3.开启BFC的元素可以包含浮动的子元素（解决浮动高度塌陷）
10.float布局
1.并排一行
2.破坏文档流（半脱离文档流）
3.包裹块状化
11.手写clearfix（清除浮动）
.clearfix::after{
content:""
display:bloack;
clear:both;
}
12.flex布局实现三个点的色子
思路：
1.首先画出三个点和最大的盒子
2.使用flex布局，且用justify-content分配容器的空间，二端对齐space-between
3.那么第二个设置垂直居中
4.第三个点设置垂直居下
.box{
width:200px;
padding:20px;
display:flex;
justify-content:space-between;
/*flex-direction:row-reverse;*/
}
.item{
display:block;
width:40px;
height:40px;
border-radius:50%;
background-color:#666;
}
.item:nth-child(2){
align-self:center;
}
.item:nth-child(3){
align-self:flex-end;
}
<div class='box'>
<div class='item'></div>
<div class='item'></div>
<div class='item'></div>
</div>
13.定位有哪些？分别参考什么定位？
static：无定位
relative：参照自身定位
absolute：参照最近一层有定位元素的且属性值不为static的祖先元素
fixed：参照视口定位
sticky：参照最近有滚动的祖先元素
14.如何使一个元素水平垂直居中？
行内元素
span{
/*行内元素*/
text-align:center;
line-height的值等于height的值
}
定位元素【1.不定宽高】
.father{
poasition:relative;
}
.son{
position:adsolute;
top:50%;
left:50%;
transform:translate(-50%,-50%)
}
定位元素【2.定宽高】
.father{
poasition:relative;
}
.son{
position:adsolute;
top:50%;
left:50%;
width:100px;
height:50px;
margin-left:-50px;
margin-top:-25px
}
定位元素【3.定宽高】
.father{
poasition:relative;
}
.son{
position:adsolute;
top:0;
right:0;
left:0;
bottom:0;
width:50px;
height:50px;
margin:auto;
}
flex布局【4.不定宽高】
.father{
display:flex;
}
.son{
margin:auto
}
flex布局【4.不定宽高】
.father{
display:flex;
justify-content:center;
align-item:center;
}
单元格：行内元素【5.定宽高】
.box{
display:table-cell;
width:300px;
height:300px;
background-color:yellow;
vertical-align:middle;
text-align:center
}
单元格：块级元素【6.定宽高】
.box{
display:table-cell;
width:300px;
height:300px;
background-color:yellow;
vertical-align:middle;
}
.box p{
width:200px;
height:200px;
background-color:tomato;
margin:0 auto;
}
15.line-height如何继承？
body{
font-size:20px;
line-height:300%;
}
p{
background-color:#ccc;
font-size:16px;
}
写具体数值，如30px，则继承该值
写比例，如2/1.5，则继承该比例
写百分比，如200%，则继承计算出来的值font-size*line-height
16.哪些属性可以继承？
文本字体相关的属性普遍具有继承性，如
color
font-开头（font-size）
list-开头（list-style-type）
text-开头（text-align）
line-开头 （line-height）
17.消除图片底部间隙的方法
图片块状化-无基线：img{display:block;}
图片底线对齐：img{vertical-align:bottom;}
父级设置font-size:0;
行高足够小-基线位置上移动：box{line-height:0;}
18.单行溢出隐藏
/*单行*/
.box{
overflow:hidden;
text-overflow:ellipsis;
white-space:nowrap;
}
19.rem是什么及px，em，rem的区别？
px像素。绝对单位，像素px是相对于显示器屏幕分辨率而言的
em，相对单位，相对于父元素，不常用
font-size设置em是相对于父元素字体大小，而width和height是相对于自身的字体大小
rem，相对于根元素html的字体大小，常用于移动端布局
font-size，width和height始终相对于根字体大小
20.响应式布局常见的方案
响应式布局是通过媒体查询技术使得一个网站兼容多种屏幕尺寸的设备
通过响应式实现rem布局
html{
font-size:4px;
}
@media (min-width:320px){
html{
font-size:5px
}
}
@media (min-width:414px){
html{
font-size:6px
}
}
@media (min-width:540px){
html{
font-size:8px
}
}
@media (min-width:768px){
html{
font-size:11px
}
}
@media (min-width:992px){
html{
font-size:14px
}
}
@media (min-width:1200px){
html{
font-size:18px
}
}
通过js实现rem布局
{
const docEl=document.documentElement;
const setHtmlFontSize=()=>{
const viewWidth=docEl.clientWidth
//1rem=10px
docEl.style.fontSize=`${viewWidth/75}px`
};
setHtmlFontSize();
window.addEventListener("resize",setHtmlFontSize,false)
}
21.使用一个元素显示以及隐藏的方式？
display:none； 元素不占据空间且无法点击，性能消耗大
opacity:0； 元素占据空间可以点击，性能消耗小
visibility:hidden；元素占据空间，无法点击
通过移动元素位置，比如margin移动到屏幕外面隐藏
设置height，width等盒子模型属性为0
影响元素盒模型的属性设置成0
如果元素内有子元素或内容，还应该设置其overflow:hidden来隐藏子元素
22.CSS Sprites是什么？它的优势和劣势？
CSS Sprites精灵图，是把一堆小图片整合到一张大的图片
优势：
1.很好的减少了网页的请求，大大提高页面的性能
2.解决网页设计师在图片命名的困扰
劣势：
1.开发较麻烦，测量繁琐
2.维护麻烦，背景少许改动有可能影响整张图片
22.描述一下CSS中的渐进增强，优雅降级之间的区别？
渐进增强（从下往上）：
针对低版本的浏览器进行构建页面，保证最基本的功能，然后再针对高级浏览器进行效果，交互等改进和追加功能，达到更好的用户体验。
优雅降级（ 从上往下）：
一开始就构建完整的功能，然后在针对低版本的浏览器进行兼容。
23.介绍对浏览器内核的理解
| chrome | Blink |
|---|---|
| Opera | Blink |
| IE | Trident |
| Safari | webkit |
| firefox | Gecko |
浏览器内核分为二部分：渲染引擎和 JS引擎
渲染引擎：将代码转换成页面输出到浏览器界面
JS引擎：解析和执行javascript来实现网页的动态效果
最开始渲染引擎和js引擎并没有区分很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎
24.重绘和重排的区别？
元素位置是相对的，一个元素位置移动可能改变其他元素位置移动，这个过程就叫重排也叫回流
一些属性不会影响位置变化，只影响元素外观风格，这个过程被称为重绘
特点：
重排要比重绘更消耗性能
重排必将重绘
重绘不一定重排
25.meta标签viewport的理解
可以布局视口宽度width等于设置独立像素device-width更好的布局
26.图片img标签title于alt属性的区别？
alt：是图片无法正常显示时对图片的描述
title：鼠标悬停再元素上时会提示文字信息
27.link和@import的区别？
link：
写在html页面，一般存在于head中；
link属于XHTML标签， 处理加载CSS外，还能用于定义RSS,定义rel连接属性等作用；
link会按照顺序加载
无兼容性问题
@import：
写在css文件中；
@import属于是CSS提供的，只能用于加载CSS；
@import引用的CSS会等到页面被加载完再加载
只在IE5以上才可以识别
28.简述一下src与href的区别？
href标识超文本引用，用于link和a等元素应用，通过href将当前元素和引用资源之间建立联系
src表示引用资源替代当前元素，用在img，script，iframe，无跨越问题
29.HTML和XHTML的区别？
XHTML是可以扩展的超文本标签语言，更严格的HTML语言，具有以下特点：
1.必须有根元素
2.标签必须小写嵌套闭合
3.一旦报错，就不会往下执行了
30.label标签作用？
label标签for属性与一个表单控件id值一致
点击label则自动聚焦到表单
31.transform变换
这里推荐菜鸟教程：
CSS3 2D 转换 | 菜鸟教程 (runoob.com)
CSS3 3D 转换 | 菜鸟教程 (runoob.com)
1.translate(x,y)：位移
2.scale(x,y)：缩放
3.rotateX(180deg)：旋转
4.skewX(30deg)：倾斜
32.CSS3动画
这里推荐菜鸟教程：CSS3 动画 | 菜鸟教程 (runoob.com)
animation-name：动画名称
animation-duration：动画时长
animation-timing-function：规定动画速度曲线，默认是ease
animation-delay：规定动画何时开始，默认是0
animation-iteration-count：规定动画被播放的次数，默认是1
animation-direction：规定动画是否在下一个周期逆向播放，默认是nornal
animation-play-state：规定动画是否正在运行或暂停，默认是running
animation-fill-mode：规定动画是否保留最后一帧，保留最后一帧可以用forwards
33.CSS3过渡
这里推荐菜鸟教程:CSS3 过渡 | 菜鸟教程 (runoob.com)
transition-property：参与过渡属性
transition-duration：过渡的持续时间
transition-delay：设置过渡的延迟时间
transition-timing-function：过渡的速率
34.transition和animation有何区别?
transition：用于做过渡效果，只需书写开始和结束状态和变化持续时间，由伪类事件被动触发，性能开销小
animation：用于做动画，可以定义多个变化过程中多个状态，主动出发，性能开销大
35.nth-child和nth-of-type的区别是什么？
nth-child：选择的是父元素的子元素，要同时满足二个条件时才能生效，其一：是子元素，其二：子元素刚好处在那个位置
nth-of-type：选择的是某父元素的子元素，而且这个子元素是指定类型的
36.选择器优先级，怎么计算？
!import > 行内样式 > id选择器 > 类选择器 > 标签选择器 > 通配符 > 继承
权重算法（0，0，0，0）---->第一个0对应对应的是！import的个数，第二个0对应的是id选择器的个数，第三个对应的是类选择器的个数，第四个0对应的是标签选择器的个数，合起来就是当前选择器的权重
比较：先从第一个0开始比较，如果第一个0大，那么说明这个选择器的权重高，如果第一个相同，比较第二个，依次类推
比如：（0，1，2，3）>（0，1，1，5）
37.CSS3中有哪些新特性？
新增CSS选择器（：not（.input））：所有class不是input的节点...
圆角：border-radius
多列布局：multi-column layout
文本效果：阴影text-shadow；text-wrap，word-break，word-wrap
渐变：gradient（推荐菜鸟教程:CSS3 渐变 | 菜鸟教程 (runoob.com)）
变换：transform
过渡动画
多背景（推荐菜鸟教程:CSS3 背景 | 菜鸟教程 (runoob.com)）
...
38.画一条0.5px的线
采用transform：scale()的方式，该方法用来定义元素的缩放转换：
transform:scale(0.5,0.5)
