HTML面试题
如何理解HTML语义化?
全写div vs 标题h1,段落p
让人易读
让搜索引擎更易读懂(SEO)
默认情况下,哪些HTML标签是块级元素、哪些是内联元素?
块级元素 display:block/table ; 有div h1 h2 table ul ol p等
内联元素 display:inline/inline-block; 有span img input button等
CSS面试题
<style type="text/css">
#div1 {
width: 100px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
}
</style>
</head>
<body>
<div id="div1">
this is div1
</div>
<script>
// document.getElementById('div1').offsetWidth
</script>
</body>
offsetWidth=(内容宽度+内边距+边框),无外边距
100px+20px+2px=122px
让offsetWidth等于100px,怎么做?
加样式:border-sizing:border-box;即内容宽度+padding+border=width=100px
margin纵向重叠问题 (子元素纵向排列存在margin重叠问题)
相邻元素的margin-top和margin-bottom会发生重叠
空白内容的<p></p>
也会重叠,没有指向
答案:15px
margin负值问题
对margin的top left right bottom设置负值,有何效果?
margin-top和margin-left负值,元素向上、向左移动
margin-right负值,右侧元素左移,自身不受影响
margin-bottom负值,下方元素上移,自身不受影响
BFC的理解和应用
什么是BFC?如何应用?
Block format context,块级格式化上下文
一块独立渲染区域,内部元素的渲染环境不会影响边界以外的元素
形成BFC的常见条件
float不是none
position是absolute或fixed
overflow不是visible
display是flex inline-block等
BFC的常见应用
清除浮动
<head>
<style type="text/css">
.container {
background-color: #ccc;
}
.left {
float: left;
}
/* 注意加bfc与不加bfc区别 */
.bfc {
overflow: hidden;
/* 触发元素 BFC */
}
</style>
</head>
<body>
<div class="container bfc">
<img src="https://www.imooc.com/static/img/index/logo.png" class="left" style="magin-right: 10px;" />
<p class="bfc">某一段文字……</p>
</div>
</body>
float布局的问题,以及clearfix (手写clearfix)
如何实现圣杯布局和双飞翼布局(PC布局)
目的
三栏布局(左中右),中间一栏最先加载和渲染(内容最重要)
两侧内容固定,中间内容随着宽度自适应
一般用于PC网页
技术总结
使用float布局
两侧使用margin负值,以便和中间内容横向重叠
防止中间内容被两侧覆盖,一个用padding,一个用margin
手写clear
/* 手写 clearfix */
.clearfix:after {
content: '';
display: table;
clear: both;
}
flex画色子
flex实现一个三点的色子
flex常用语法
flex-direction:row | row-reverse | column | column-reverse定义了主轴的方向(正方向或反方向)
justify-content何分配顺着弹性容器主轴(或者网格行轴) 的元素之间及其周围的空间
align-items定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。
flex-wrap指定 flex 元素单行显示还是多行显示
align-self 定义flex子项单独在侧轴(纵轴)方向上的对齐方式。
absolute和relative分别依据谁定位?
relative依据自身定位
absolute依据最近一层的定位元素定位
定位元素
absolute relative fixed
body
居中对齐有哪些方式?
水平居中
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
第二种,需要知道子元素尺寸
第三种,第四种不需要知道子元素尺寸
第四种方法,即保证浏览器兼容性又子元素尺寸未知
<style type="text/css">
body {
font-size: 20px;
line-height: 1.5;
}
p {
background-color: #ccc;
font-size: 16px;
}
</style>
<!--以上代码 p标签行高多少 16*1.5=24px 比例先继承再算 -->
<p>AAA</p>
<style type="text/css">
body {
font-size: 20px;
line-height: 200%;
}
p {
background-color: #ccc;
font-size: 16px;
}
</style>
<!--以上代码 p标签行高多少 20px*200%=40px 百分比先算再继承(注意和比例区别)-->
<p>AAA</p>
<!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>rem 演示</title>
<style type="text/css">
html {
font-size: 100px;
}
/* 相当于1rem=100px */
div {
background-color: #ccc;
margin-top: 10px;
font-size: 0.16rem;
}
</style>
</head>
<body>
<p style="font-size: 0.1rem">rem 1</p>
<p style="font-size: 0.2rem">rem 1</p>
<p style="font-size: 0.3rem">rem 1</p>
<div style="width: 1rem;">
this is div1
</div>
<div style="width: 2rem;">
this is div2
</div>
<div style="width: 3rem;">
this is div3
</div>
</body>
</html>
如何实现响应式
media-query,根据不同的屏幕宽度设置根元素 font-size
rem,基于根元素的相对单位
<!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">
@media only screen and (max-width: 374px) {
/* iphone5 或者更小的尺寸,以 iphone5 的宽度(320px)比例设置 font-size */
html {
font-size: 86px;
}
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
/* iphone6/7/8 和 iphone x */
html {
font-size: 100px;
}
}
@media only screen and (min-width: 414px) {
/* iphone6p 或者更大的尺寸,以 iphone6p 的宽度(414px)比例设置 font-size */
html {
font-size: 110px;
}
}
body {
font-size: 0.16rem;
}
#div1 {
width: 1rem;
background-color: #ccc;
}
</style>
</head>
<body>
<div id="div1">
this is div
</div>
</body>
</html>