1.如何理解语义化
标签的命名有一定直观上的含义,能直接看出可能的作用
优点:
1. 当页面加载失败时也能过呈现出清晰的结构
2. 有利于SEO(让搜索结果排名靠前)优化,有利于被搜索引擎收录
3. 在项目的开发和维护时有利于降低开发难度和节省成本
2.页面呈递流程、回流和重绘
1. 页面的呈递流程
(1)首先浏览器会将获取到的HTML代码解析为一个dom树,HTML中的每一个标签都是dom树中的节点
(2)浏览器会将所有样式解析为样式结构体
(3)dom树和样式结构体结合后构建呈现树(render tree),其中的每个节点成为box(Box dimensions)
(4)当render tree构建完毕后,浏览器会根据它绘制对应的页面
2. 回流
当render tree中的内容因为元素的尺寸,布局,显示等该改变需要重新构建时会产生回流(页面元素的改变影响了布局)。每个页面至少存在一次回流,页面第一次加载的时候。
3. 重绘
当render tree中的一些元素需要重新更新属性,而这些属性只是影响元素的外观,风格(例如color)不会影响到布局称为重绘。 回流必有重绘,重绘不一点有回流。
3.link和import的区别
1. 本质区别:link属于xhtml标签,@import属于css提供的一种方式
2. 引用类型区别:link可以引入css/js等外部文件,import只能引入CSS文件
3. 加载顺序区别:link引入的css会和页面一起加载,@import引入的css等到页面加载完毕才会加载
4. 兼容性区别:link是xhtml标签几乎没有兼容性问题,@import属于css2.1提出的,IE5一下不能识别
4.px和em的区别
相同点:都是长度单位
不同点:px是像素单位,是绝对单位,不会因为其他元素的尺寸改变而变化。em是相对于其父元素的字体大小决定的,是相对单位。
5.清除浮动的方法
1. 给父级元素定义高度或者添加样式:overflow:hidden
2. 在末尾添加一个空元素,并添加样式:clear:both
3. 给父级元素定义伪类
.clearfloat:after{display:block;
clear:both;
content:"";
visibility:hidden;
height:0}
.clearfloat{zoom:1}//zoom属性是IE浏览器的专有属性,可以设置或检索对象的缩放比例
6.什么是优雅降级和渐进增强
1. 渐进增强 progressive enhancement
针对低版本浏览器构建也页面,保证最基本的功能,然后再针对高版本浏览器进行效果、交互等改进和追求功能达到更好的用户体验。
2. 优雅降级graceful degrafation
一开始构建完整的功能,再针对低版本浏览器进行兼容
区别:
优雅降级是从复杂的现状开始,并试图减少用户体验的供给(往后看)。渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断拓充,以适应未来环境的需要(往前看)。
7.display:none和visibility:hidden区别
1. display:none:销毁了对应的dom元素,因此脱离了文档流,浏览器不会解析该元素。visibility:hidden是视觉上的消失,可以理解为透明度为零,在文档流中占位,浏览器会解析。
2. 使用visibility:hidden比display:none性能上更好。display:none切换时也页面回产生回流。而visibility:hidden不会。
8.relative、absolute、fixed和sticky的区别
1. relative:相对定位,相对于自身的定位,没有脱离标准流,一般是配合absolute使用(子绝父相)
2. absolute:绝对定位,相对于离自己最近的带有定位的父元素的定位,脱离了标准流
3. fixed:固定定位,相对于浏览器视口的定位,不会随着页面的滚动而滚动。
4.sticky:粘性定位,跟前面几个属性值都不一样,它会产生动态效果,很像 relative 和 fixed 的结合:一些时候是 relative 定位(定位基点是自身默认位置),另一些时候自动变成 fixed 定位(定位基点是视口比如型表格滚动的时候,表头始终固定。sticky 生效的前提是,必须搭配 top、bottom、left、right 这四个属性一起使用,不能省略,否则等同于 relative 定位,不产生"动态固定"的效果。原因是这四个属性用来定义"偏移距离",浏览器把它当作 sticky 的生效门槛
9.块级元素和行内元素举例
1. display:block/table:div
、p
、h1-h6
、ul
、ol
、dl
、li
、header
、footer
、aside
、section
、article
、form
、table
等
2. display:inline:a
、b
、br
、em
、i
、span
、strong
、small
、code
、q
、sub
、sup
3. display:inline-block:button
、img
、input
、select
、textarea
10.css盒模型
1. 标准盒模型:width = content
2. IE盒模型:(box-sizing:border-box )width = border + padding + content
11.HTML5新特性
1. 语义化标签
- 定义了文档的头部区域
-
<footer></footer>
定义了文档的尾部区域 -
<nav></nav>
定义文档的导航 -
<section></section>
定义文档中的节(section、区段) -
<article></article>
定义页面独立的内容区域 -
<aside></aside>
定义页面的侧边栏内容 -
<detailes></detailes>
用于描述文档或文档某个部分的细节 -
<summary></summary>
标签包含 details 元素的标题 -
<dialog></dialog>
定义对话框,比如提示框
2. 增强型表单
新增input的输入类型
-
color:主要用于选取颜色
-
date:从一个日期选择器选择一个日期
-
datetime:选择一个日期(UTC 时间)
-
datetime-local:选择一个日期和时间 (无时区)
-
datetime-local:选择一个日期和时间 (无时区)
-
email:包含 e-mail 地址的输入域
-
month:选择一个月份
-
number:数值的输入域
-
range:一定范围内数字值的输入域
-
search:用于搜索域
-
tel:定义输入电话号码字段
-
time:选择一个时间
-
url:URL 地址的输入域
-
week:选择周和年
3. 新增表单属性
- placehoder 属性,简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示,在用户输入后消失。
- required 属性,是一个 boolean 属性。要求填写的输入域不能为空
- pattern 属性,描述了一个正则表达式用于验证 元素的值。
- min 和 max 属性,设置元素最小值与最大值。
- step 属性,为输入域规定合法的数字间隔。
- height 和 width 属性,用于 image 类型的 标签的图像高度和宽度。
- autofocus 属性,是一个 boolean 属性。规定在页面加载时,域自动地获得焦点。
- multiple 属性 ,是一个 boolean 属性。规定 元素中可选择多个值。
4. 新增视频和音频标签
5. canvas、SVG绘图
6.地理定位
7.拖放API
8.web worker (HTML5提供的一种多线程方案)
9.webStorage
10.webSocket(HTML5提供的一种在单个TCP连接上进行的全双工通讯的协议)
12.CSS3新特性
1. 动画属性
@keyframes/animation
2. 边框属性
border-image/border-radius/border-shadow
3. 颜色属性
opacity
4.弹性盒子模型
flex/align-content/align-item/align-self/justify-content/order……
5. 过渡和动画
(1)2D/3D转化
transform/translate/scale/rotate/translate3d/skew
(2)过渡
transition
13.BFC理解和应用
1. 概念
Block format content ,块级格式化上下文,是一块独立渲染的区域,内部元素的渲染不会影响边界以外的元素。
2. 应用
(1)伪元素清除浮动
(2) 解决父元素高度塌陷,外边距重叠
3. 如何产生
(1)跟元素
(2)float属性(不为none)
(3)display属性(为inline-block,table-cell,fiex,inline-flex)
(4)position属性(不为static,relative)
(5)overflow属性(不为visible)
14.居中对齐的方式有哪些
水平居中
(1)Inline元素:text-align:center
(2)block元素:margin:0 auto
(3)absolute:(left:50%+margin-left:-50%)
(4)translateX
(5)flex:(display:flex;justify-content:center)
垂直居中
(1)inline元素:height:line-height
(2)absolute:(top:50%+margin-top:-50%)
(3)translateY
(4)flex:(display:flex;flex-direction:column;justify-content:center)
15.css选择器
优先级:!important
> 内联 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器
伪类选择器(伪类 表示元素的一种特殊状态)
:active
向被激活的元素添加样式:focus
向拥有键盘输入焦点的元素添加样式:hover
当鼠标悬浮在元素上方时,向元素添加样式:link
向未被访问的链接添加样式:visited
向已被访问的链接添加样式。(隐私问题只能设置颜色):first-child
向元素的第一个子元素添加样式:lang
向带有指定lang
属性的元素添加样式::selection
匹配被用户选中或处于高亮状态的部分
伪元素选择器(表示元素中一些特殊的位置,不会出现在dom中)
:first-letter
向文本的第一个字母添加特殊样式。:first-line
向文本的首行添加特殊样式。:before
在元素之前添加内容。:after
在元素之后添加内容
16.style写在body前后的区别
1. 写在body前
有利于浏览器逐步渲染
2. 写在body后
由于浏览器以逐行的方式对HTML文档进行解析,当解析到尾部的样式时会导致浏览器停止之前的渲染,等待加载且解析样式表完成后再重新渲染
17.DIV+CSS布局和table布局区别
table布局
缺点:
1. 显示样式和数据绑定在一起
2.布局不够灵活
3. 一个页面可能会有大量的table元素,代码冗余度高
4. 不利于被搜索引擎收录
优点:
1. 理解比较简单
2. 不同的浏览器看到的效果一般相同
DIV+CSS布局
优点:
1. 符合w3c标准
2. 搜索引擎更加友好
3. 样式调整方便,内容和样式分离
4. css样式代码简洁,对于一个大型网站来说可以节省大量带宽
18.如何画一条0.5px的线
1. 采用meta viewport 的方式
<meta name="viewport" content="width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5"/>
**只针对移动端
2. 采用transform:scale()的方式
transform: scale(0.5,0.5);