[前端面试]HTML AND CSS
HTML
html语义化标签的理解
是什么:
在布局页面的时候，根据内容的结构与含义，选择合适的带语义的html标签
如header，footer，nav，article，main，aside，h标签等
好处：
- 增强代码可读性，有利于开发者开发与维护
- 有利于seo搜索引擎优化
- 有利于在网络卡顿时，正常显示页面结构（虽然没有样式），提高用户体验
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优先级
- !import
- 行内样式 > 嵌入式与外联
- 选择器优先级
- 继承样式
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：
- float left/right
- position absolute/fixed
- display inline-block/table-cell
- overflow：hidden/auto/scroll
实现移动端响应式布局的方式
响应式：在不同屏幕的设备上，动态调整页面布局与样式
1）采用flex布局，避免使用固定宽度，采用百分比
使用vw，vh，rem，em单位定义尺寸
2）使用媒体查询，针对不同屏幕尺寸编写样式
图片适配：使用百分比宽度，srcset属性
3）使用第三方组件库
css尺寸单位
- px 绝对长度，由屏幕分辨率决定
- em 相对长度，相对自身font大小，自身fontsize未设置继承父元素
- rem 相对长度，相对页面根元素大小
- vw/vh 相对长度，相对视窗的宽/高 1/100
居中的实现方式
-
利用flex布局
display：flex
justify-Content：center
align-Items：center -
利用定位：
position：absolute
left:50%;
top:50%;
transform: translate(-50%, -50%);