HTML面试题
如何理解HTML语义化？
- 让人更容易读懂（增加代码的可读性）
- 让搜索引擎更容易读懂（利于SEO）
默认情况下，哪些HTML标签是块级元素，哪些是内联元素？
- display: block/table; 有div h1-h5 table ul ol p等
- display: inline/inline-block; 有 a b em strong i span img input button等
CSS面试题
布局
盒模型宽度计算：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
#div1 {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
-
offsetWidth = (内容宽度+内边距+边距)，无外边框
-
因此，答案是122px
怎么让offsetWidth = 100px ？
box-sizing: border-box;margin 纵向重叠问题：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
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会发生重叠
- 空白内容的也会重叠
- 答案是15px
margin负值问题
- margin-top和margin-left负值，元素向上，向左移动
- margin-right负值，右侧元素左移，自身不受影响
- margin-bottom负值，下方元素上移，自身不受影响
什么是BFC？如何应用？
-
black format context，块级格式化上下文
-
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
-
形成BFC的常见条件
- float不是none
- position是absolute或fixed
- overflow不是visible
- display是flex，inline-block等
-
BFC的常见应用
-
清除浮动
overflow: hidden;
-
float 布局
圣杯布局和双飞翼布局的目的
-
三栏布局，中间一栏最先加载和渲染（内容最重要）
-
两侧内容固定，中间内容随着宽度自适应
-
一般用于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>圣杯布局是使用的padding，双飞翼使用的是margin。
flex布局
常用语法：
- flex-direction 切换主轴方向
- justify-content 水平方向对齐方式
- align-items 垂直方向对齐方式
- flex-warp 是否换行显示
- align-self 属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。
-
响应式
- rem是什么？
- rem是一个长度单位
- px，绝对长度单位，最常用
- em，相对长度单位，相对于父元素，不常用
- rem，相对长度单位，相对于根元素，常用于响应式布局
- rem是一个长度单位
- 响应式布局的常见方案？
- media-query，根据不同的屏幕宽度设置根元素的font-size
- rem，基于根元素的相对单位
- vw/vh vw/vh是相对于视窗的宽度，视窗宽度是100vw，视窗高度是100vh
- 百分比，就是盒子的宽高都按照%，比如width:20%
定位
- relative 依据自身定位
- absolute 依据最近一层的定位元素定位
- 定位元素：
- absoulute relative fixed
- body
水平居中
- inline 元素：text-align: center;
- block 元素：margin: 0 auto;
- absolute元素：left: 50%; transfrom: translateX(-50%)
垂直居中
- inline元素：line-height的值等于height值
- absolute元素：top: 50%; transfrom: translateY(-50%)
- absolute元素：top, left, bottom, right = 0; margin: auto
CSS3
图文样式
-
line-height的继承
body { font-size: 20px; line-height: 200%; } p { font-size: 16px; }此处的行高是40px，需要先计算，再继承