HTML

html语义化标签的理解

是什么:
在布局页面的时候，根据内容的结构与含义，选择合适的带语义的html标签
如header，footer，nav，article，main，aside，h标签等

好处：

1. 增强代码可读性，有利于开发者开发与维护
2. 有利于seo搜索引擎优化
3. 有利于在网络卡顿时，正常显示页面结构（虽然没有样式），提高用户体验

html5的新特性

添加语义化标签，main，nav，article，header，footer

添加媒体标签，audio，video，source标签

新增一些api，webstorage，拖放api，canvas标签，geolocation api

websockets

行内元素块级元素的区别

行内元素：

一行显示，设置宽高不生效，span，a，img，b，i，

块级元素：

换行显示，设置宽高生效，div，p，h，ul，li

转换：

display：block

display：inlineblock

CSS

css选择器有哪些,权重

id选择器
类选择器|属性选择器|伪类选择器：hover
标签选择器|伪元素选择器：：before
通配符选择器

css优先级

1. !import
2. 行内样式 > 嵌入式与外联
3. 选择器优先级
4. 继承样式

CSS3新增特性

盒子模型

flex和grid布局

css变量

伪类与伪元素

动画

变形与过渡

盒子模型的理解

what
在布局网页的时候，可以把一个个元素看作一个盒子
具有margin，border，padding，content属性
分为两种盒子：
1）标准盒子模型（默认情况）
2）怪异盒子模型
设置宽高，默认设置的是内容的宽高
而怪异盒子情况下，设置的是除margin之外所有属性的总和
how

box-sizing：border-box；//转化为怪异盒子模型

position定位方式

1）绝对定位

定位标准：最近已定位的祖先元素，没有相对窗口定位

在文档流中不占据位置

2）相对定位：

定位标准：相对自己原位置

在文档流中占据空间

3）固定定位：

定位标准：页面窗口（视口定位）

页面滚动不改变位置

4）默认定位：static

元素按照正常文档流排列，不会受到top，bottom，left，right的影响

dispay:none与visiblity:hiden的区别

改变元素的显示与隐藏状态

1）将元素从文档树中移除

浏览器不会在为这个元素进行绘制与事件处理，适合频繁添加与移除元素的场景

会触发回流，对页面布局有显著影响

2）改变元素的显示状态，未移除元素，仍占据原来的空间

浏览器仍要保留这个元素的布局消息，占据更多的内存与资源

触发重绘

对flex布局的理解

容器

1）父容器

display:flex

justify-content 子容器按主轴方向排列 flex-start/end，center，space-around/between

align-items 子容器按交叉轴排列 flex-satrt/end，center，baseline（首行文字），stretch

flex-wrap 自动换行

2）子容器

flex 在主轴上伸缩

（flex是多个属性的缩写，允许1-3个值连用，）

align-self 在交叉轴上的排列，取值和上面一样

轴

1）主轴

2）交叉轴

flex-direction：row/column

对BFC的理解

what
块级格式化上下文
一个独立的渲染区域，使其内部的布局不受外部元素的影响
why
主要用于清除浮动影响，与避免外边距合并等问题
how
创建bfc：

1. float left/right
2. position absolute/fixed
3. display inline-block/table-cell
4. overflow：hidden/auto/scroll

实现移动端响应式布局的方式

响应式：在不同屏幕的设备上，动态调整页面布局与样式

1）采用flex布局，避免使用固定宽度，采用百分比

使用vw，vh，rem，em单位定义尺寸

2）使用媒体查询，针对不同屏幕尺寸编写样式

图片适配：使用百分比宽度，srcset属性

3）使用第三方组件库

css尺寸单位

• px 绝对长度，由屏幕分辨率决定
• em 相对长度，相对自身font大小，自身fontsize未设置继承父元素
• rem 相对长度，相对页面根元素大小
• vw/vh 相对长度，相对视窗的宽/高 1/100

居中的实现方式

1. 利用flex布局
   display：flex
   justify-Content：center
   align-Items：center

2. 利用定位：
   position：absolute
   left:50%;
   top:50%;
   transform: translate(-50%, -50%);