html相关
1、如何理解HTML语义化?
利于搜索引擎(SEO)、代码阅读性好
2、块状元素 & 内联元素
- display: block/table div h1 h2 table ul ol p等
- display: inline/inline-block span img input button等
3、浏览器重绘、重排
网页生成过程:
HTML
被HTML解析器解析成DOM
树css
则被css解析器解析成CSSOM
树- 结合
DOM
树和CSSOM
树,生成一棵渲染树(Render Tree
) - 生成布局(
flow
),即将所有渲染树的所有节点进行平面合成 - 将布局绘制(
paint
)在屏幕上
重排(也称回流): 当DOM
的变化影响了元素的几何信息(DOM
对象的位置和尺寸大小),浏览器需要重新计算元素的几何属性,将其安放在界面中的正确位置,这个过程叫做重排。 触发:
- 添加或者删除可见的DOM元素
- 元素尺寸改变——边距、填充、边框、宽度和高度
重绘: 当一个元素的外观发生改变,但没有改变布局,重新把元素外观绘制出来的过程,叫做重绘。 触发:
- 改变元素的
color、background、box-shadow
等属性
重排优化建议:
- 分离读写操作
- 样式集中修改
- 缓存需要修改的
DOM
元素 - 尽量只修改
position:absolute
或fixed
元素,对其他元素影响不大 - 动画开始
GPU
加速,translate
使用3D
变化
transform
不重绘,不回流 是因为transform
属于合成属性,对合成属性进行transition/animate
动画时,将会创建一个合成层。这使得动画元素在一个独立的层中进行渲染。当元素的内容没有发生改变,就没有必要进行重绘。浏览器会通过重新复合来创建动画帧。
css相关
1、盒子模型宽度如何计算?
- 标准盒模型:属性width,height只包含内容content,不包含border和padding。offsetWidth = width + padding + border
- IE 盒模型:属性width,height包含border和padding,指的是content+padding+border。offsetWidth = width;
- box-sizing:border-box; 可以将盒子转换为IE盒模型
2、margin纵向重叠问题
如下代码,AAA BBB之间的距离是多少?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>margin 纵向重叠</title>
<style type="text/css">
p {
font-size: 16px;
line-height: 1;
margin-top: 10px;
margin-bottom: 15px;
}
</style>
</head>
<body>
<p>AAA</p>
<p></p>
<p></p>
<p></p>
<p>BBB</p>
</body>
</html>
复制代码
- 相邻元素得margin-top和margin-bottom会发生重叠
- 空白内容的
<p></p>
也会重叠 - 答案: 15px
3、margin负值问题
- margin-top和margin-left负值, 元素向上、向左移动
- mrgin-right负值,右侧元素左移,自身不受影响
- margin-bottom负值,下方元素上移,自身不受影响
4、BFC理解和应用
- Block Format Context, 块级格式化上下文
- 一块独立渲染区域,内部元素的渲染不会影响边界以外的元素 形成BFC的常见条件
- float不是none
- position 是 absolute或fixed
- overflow 不是 visible
- display 是 flex inline-block等 BFC的常见应用
- 清除浮动
5、float布局问题,以及clearfix
圣杯布局和双飞翼布局
- 三栏布局,中间一栏最先加载和渲染(内容最重要)
- 两侧内容固定,中间内容随着宽度自适应
- 一般用于PC网页 实现:
- 使用float布局
- 两侧使用margin负值,以便和中间内容横向重叠
- 防止中间内容被两侧覆盖,一个用padding一个用margin
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>圣杯布局</title>
<style type="text/css">
body {
min-width: 550px;
}
#header {
text-align: center;
background-color: #f1f1f1;
}
#container {
padding-left: 200px;
padding-right: 150px;
}
#container .column {
float: left;
}
#center {
background-color: #ccc;
width: 100%;
}
#left {
position: relative;
background-color: yellow;
width: 200px;
margin-left: -100%;
right: 200px;
}
#right {
background-color: red;
width: 150px;
margin-right: -150px;
}
#footer {
text-align: center;
background-color: #f1f1f1;
}
/* 手写 clearfix */
.clearfix:after {
content: '';
display: table;
clear: both;
}
</style>
</head>
<body>
<div id="header">this is header</div>
<div id="container" class="clearfix">
<div id="center" class="column">this is center</div>
<div id="left" class="column">this is left</div>
<div id="right" class="column">this is right</div>
</div>
<div id="footer">this is footer</div>
</body>
</html>
复制代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>双飞翼布局</title>
<style type="text/css">
body {
min-width: 550px;
}
.col {
float: left;
}
#main {
width: 100%;
height: 200px;
background-color: #ccc;
}
#main-wrap {
margin: 0 190px 0 190px;
}
#left {
width: 190px;
height: 200px;
background-color: #0000FF;
margin-left: -100%;
}
#right {
width: 190px;
height: 200px;
background-color: #FF0000;
margin-left: -190px;
}
</style>
</head>
<body>
<div id="main" class="col">
<div id="main-wrap">
this is main
</div>
</div>
<div id="left" class="col">
this is left
</div>
<div id="right" class="col">
this is right
</div>
</body>
</html>
复制代码
手写clearfix
.clearfix:after {
content: '';
display: table;
clear:: both;
}
复制代码
6、flex布局问题
常用语法
- flex-direction
- justify-content
- align-items
- flex-wrap
- align-self 实现一个3色的骰子
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>flex 画骰子</title>
<style type="text/css">
.box {
width: 200px;
height: 200px;
border: 2px solid #ccc;
border-radius: 10px;
padding: 20px;
display: flex;
justify-content: space-between;
}
.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;
}
</style>
</head>
<body>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
</body>
</html>
复制代码
7. css 定位
absoute和relative分别依据什么定位?
- relative依据自身定位
- absolute依据最近一层的定位元素定位
居中对齐有哪些实现方式?
- 水平居中
- inline元素: text-align: center
- block元素: margin: auto;
- absolute元素: left: 50% + margin-left负值
- 垂直居中
- inline元素: line-height的值等于height值
- absolute元素: top: 50% + margin-top负值
- absolute元素: transform(-50%, -50%)
- absolute元素: top,left,bottom,right=0 + margin: auto
8.line-height如何继承
- 写具体数值,如30px,则继承该值
- 写比例,如2/1.5,则继承该比例
- 写百分比,如200%,则继承计算出来的值
<style>
body {
font-size: 20px;
line-height: 200%;
}
p {
background-color: #ccc;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一行文字</p>
</body>
</html>
复制代码
p标签行高将会是多少? 答案: 40px
9. css 响应式
rem是什么?
- rem是个长度单位
- 根据根元素的font-size大小,与媒体查询结合,常用与响应式布局
响应式布局的常见方案?