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,需要先计算,再继承