启动本地服务：http-server
先安装node，然后安装http-server
// 安装http-server
$ npm install -g http-server启动本地服务
// 启动http-server
$ http-server -p 8888即可访问：http://localhost:8888/
HTML试题
如何理解HTML语义化？
·让人更容易读懂，增加代码可读性
·让搜索引擎更容易读懂，SEO（Search Engine Optimization，搜索引擎优化）
<h1>标题</h1>
<div>
<p>文字</p>
<ul>
<li>列表</li>
<li>列表</li>
</ul>
</div>默认情况下，哪些HTML标签是块级元素、哪些是内联元素？
·块状元素，display:block/table; 独占一行，有 div、h1、h2、table、ul、ol、p等
·内联元素，display:inline/inline-block; 在一行往后挤，有 span、img、input、button等
CSS试题
布局：盒模型的宽度如何计算？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>盒模型的宽度</title>
<style type="text/css">
#div1 {
width: 100px;
padding: 10px;
border: 1px solid red;
margin: 10px;
}
#div2 {
width: 100px;
padding: 10px;
border: 1px solid red;
margin: 10px;
box-sizing: border-box;
}
</style>
</head>
<body>
<div id="div1">
this is div1
</div>
<div id="div2">
this is div2
</div>
</body>
<script>
// offsetWidth = 内容宽度 + 内边距 + 边框，无外边距
console.log(document.getElementById('div1').offsetWidth); // 122
// 设了box-sizing: border-box 后，offsetWidth = width = 100px，内容宽度为78
console.log(document.getElementById('div2').offsetWidth); // 100
</script>
</html>布局：margin纵向重叠的问题
·相邻元素的 margin-top 和 margin-bottom 会发生重叠
·空白内容的<p></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>margin 纵向重叠</title>
<!-- 如下代码，问 AAA 和 BBB 之间的距离是多少？ -->
<!-- 答案：15px -->
<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负值，对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的常见应用，清除浮动
<!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>BFC清除浮动</title>
<style type="text/css">
.container {
background-color: #f1f1f1;
}
.left {
float: left;
}
.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>
</html>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 圣杯布局</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 双飞翼布局
</div>
</div>
<div id="left" class="col">
this is left
</div>
<div id="right" class="col">
this is right
</div>
</body>
</html>float布局：手写clearfix
/* 手写 clearfix */
.clearfix:after {
content: '';
display: table;
clear: both;
}flex布局：flex实现一个三点的色子
flex常用语法回顾
·flex-direction 主轴方向
·justify-content 主轴对齐方式
·align-items 交叉轴对齐方式
·flex-wrap 是否换行
·align-self 子元素在交叉轴的对齐方式
<!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;
/* flex 布局 */
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>定位：absolute和relative分别依据什么定位？
·relative依据自身定位
·absolute依据最近一层的定位元素定位。定位元素：absolute、relative、fixed，如果都没有，依据body定位
定位：居中对齐有哪些实现方式？
水平居中
·inline元素：text-align:center
·block元素：margin:auto
·absolute元素：left:50% + margin-left负值
<!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">
.container {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
}
.container .item {
background-color: #ccc;
width: 500px;
/* 水平居中 */
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="item">
this is block item
</div>
</div>
</body>
</html>垂直居中
·inline元素：line-height的值等于height值
·absolute元素：top:50% + margin-top负值
·absolute元素：transform(-50%, -50%)
·absolute元素：top,right,bottom,left = 0 + margin:auto 【这是水平垂直居中的终极方案】
<!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">
.container {
border: 1px solid #ccc;
margin: 10px;
padding: 10px;
height: 200px;
}
.item {
background-color: #ccc;
}
.container-1{
text-align: center;
line-height: 200px;
height: 200px;
}
.container-2 {
position: relative;
}
.container-2 .item {
width: 300px;
height: 100px;
position: absolute;
left: 50%;
margin-left: -150px;
top: 50%;
margin-top: -50px;
}
.container-3 {
position: relative;
}
.container-3 .item {
width: 200px;
height: 80px;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
.container-4 {
position: relative;
}
.container-4 .item {
width: 100px;
height: 50px;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
margin: auto;
}
</style>
</head>
<body>
<div class="container container-1">
<span>一段文字</span>
</div>
<div class="container container-2">
<div class="item">
this is item2
</div>
</div>
<div class="container container-3">
<div class="item">
this is item3
</div>
</div>
<div class="container container-4">
<div class="item">
this is item4
</div>
</div>
</body>
</html>图文样式：line-height的继承问题
·写具体数值，如30px，则继承该值
·写比例，如 2 或者 1.5，则继承该比例
·写百分比，如 200%，则继承计算出来的值（考点）
<!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>line-height 继承问题</title>
<!-- 如下代码，p 标签的行高将会是多少？ -->
<!-- 答案：40px -->
<!-- 解析：父元素行高是百分比，p继承父元素计算后的行高，即20px * 200% = 40px -->
<style type="text/css">
body {
font-size: 20px;
line-height: 200%;
}
p {
background-color: #ccc;
font-size: 16px;
}
</style>
</head>
<body>
<p>这是一行文字</p>
</body>
</html>响应式：rem是什么？
·px，绝对长度单位，最常用
·em，相对长度单位，相对于父元素，不常用
·rem，相对长度单位，相对于根元素，常用于响应式布局
响应式：如何实现响应式？
·通过 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>响应式：vw/vh
·rem 的弊端：具有“阶梯”性
·网页视口尺寸
window.screen.height // 屏幕高度
window.innerHeight // 网页视口高度
document.body.clientHeight // body 高度·vw：网页视口宽度的 1/100, window.innerWidth 即为 100vw
·vh：网页视口高度的 1/100，window.innerHeight 即为 100vh
·vmax：取两者最大值；vmin：取两者最小值
2117
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
