如何理解语义化：
对应的内容是用相应意思的标签，增加开发者和机器爬虫对代码的可读性。
块状元素和内联元素：
块状元素有：display:block/table；有div h1 h2 table ul ol p等，这些元素特点是独占一行。
内联元素：display:inline/inline-block；有span img input button等，内联元素不会独占一行，会挨着往后排，直到浏览器的边缘换行为止。
盒模型宽度计算：
#div{ width:100px; padding:10px; border:1px solid #000; margin:10px; }
offsetWidth = （内容宽度+内边距+边框），无外边距，因此#div的宽度是122px。
如果让offsetWidth等于100px，该如何做？
加一个：box-sizing:border-box;
margin纵向重叠问题：
p{ font-size:16px; line-height:1; margin-top:10px; margin-bottom:15px; }
相邻元素的margin-top和margin-bottom会发生重叠
空内容的也会重叠，会被忽略掉
所以AAA和BBB之间的距离是15px
margin负值问题：
<html lang="en"> <head> <meta charset="UTF-8"> <title>margin负值问题title> <style> .box1{ width: 500px; height:100px; border:1px solid #000; padding:10px; } .left{ width: 50px; height:50px; float:left; border:1px solid red; margin-left:-10px; margin-right:-20px; } .right{ width: 50px; height:50px; float:left; border:1px solid blue; } .box2{ width: 500px; height:200px; border:1px solid #000; padding:10px; } .top{ width: 50px; height:50px; border:1px solid red; margin-top:-10px; margin-bottom:-20px; } .bottom{ width: 50px; height:50px; border:1px solid blue; } style> head> <body> <h2>测试 margin-left、margin-right为负值h2> <div class="box1"> <div class="left">div> <div class="right">div> div> <h2>测试 margin-top、margin-bottom为负值h2> <div class="box2"> <div class="top">div> <div class="bottom">div> div> body> html>
margin-top 和 margin-left 负值，元素向上、向左移动
margin-right 负值，右侧元素左移，自身不受影响
margin-bottom 负值，下方元素上移，自身不受影响
BFC理解与应用：
<style> .left{ float:left; } .bfc{ overflow: hidden; } style> <div class="bfc"> <img class="left" src="//www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt=""> <p class="bfc">文字文字文字文字文字文字文字文字p> div>
什么是BFC？如何应用
BFC全称是 Block format context，块级格式化上下文
BFC是一块独立的渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件：
float不是none。设置元素为float，该元素就有了BFC
position 是 absolute 或 fixed
overflow 不是 visible
display 是 flex、inline-block等
BFC的常见应用：
清除浮动
手写clearfix：
/*手写clearfix*/ .clearfix:after{ content:''; display: block; clear:both; } /* *zoom:1;兼容IE低版本 */
圣杯布局和双飞翼布局：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>float布局title>
<style>
.box1{
padding:0;
margin:0;
}
.box1 header,.box1 footer{
height:20px;
background:#ccc;
text-align:center;
}
.box1 .main{
padding-left:100px;
padding-right:200px;
}
.box1 .content{
height:50px;
background:#666;
float:left;
width: 100%;
margin-right:-100%;
}
.box1 .left{
height:20px;
background:yellow;
width: 100px;
float:left;
margin-left:-100px;
}
.box1 .right{
width:200px;
height:20px;
background: aquamarine;
float:left;
margin-left:100%;
}
/*手写clearfix*/
.clearfix:after{
content:'';
display: block;
clear:both;
}
/*
*zoom:1;兼容IE低版本
*/
style>
head>
<body>
<div class="box1">
<header>headerheader>
<div class="main clearfix">
<div class="content">contentdiv>
<div class="left">leftdiv>
<div class="right">rightdiv>
div>
<footer>footerfooter>
div>
<style>
.box2{
padding:0;
margin:0;
}
.box2 #main{
width: 100%;
height:200px;
background:#ccc;
}
.box2 #main-wrap{
margin:0 200px 0 100px;
}
.box2 #left{
width:100px;
height:100px;
background:#0000FF;
margin-left:-100%;
}
.box2 #right{
width:200px;
height:100px;
background:red;
margin-left:-200px;
}
.col{
float:left;
}
style>
<div class="box2">
<div id="main" class="col">
<div id="main-wrap">maindiv>
div>
<div id="left" class="col">
left
div>
<div id="right" class="col">
right
div>
div>
body>
html>
圣杯布局和双飞翼布局的目的
三栏布局，中间一栏优先加载和渲染（内容最重要）
两侧内容固定，中间内容随着宽度自适应
一般用于PC页面
圣杯布局和双飞翼布局的技术总结
使用float布局
两侧使用margin负值，以便和中间内容横向重叠
防止中间内容被两侧覆盖，一个用padding一个用margin
flex布局实现一个三点色子：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>flex布局title>
<style>
.box{
width: 100px;
height:100px;
border:1px solid #000;
display: flex;
justify-content: space-around;
align-items:flex-start;
}
.item{
width: 20px;
height:20px;
background:#000;
border-radius:50%;
}
.item:nth-child(2){
align-self:center;
}
.item:nth-child(3){
align-self:flex-end;
}
style>
head>
<body>
<div class="box">
<div class="item">div>
<div class="item">div>
<div class="item">div>
div>
body>
html>
常规使用属性：
flex-direction：主轴方向
justify-content：主轴对齐方式
align-items：交叉轴对齐方式
flex-wrap：是否换行
align-self：子元素在交叉轴对齐方式
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
line-height如何继承：
写具体数值，如30px，则继承该值（比较好理解）如下代码，答案是30px
body{ font-size:20px; line-height:30px; } p{ font-size:16px; }
写比例，如2或1.5，则继承该比例（比较好理解）如下代码如果是2，答案是32px
body{ font-size:20px; line-height:2; } p{ font-size:16px; }
写百分比，如200%，则继承计算出来的值（考点）如下代码如果是200%，答案是40px
body{ font-size:20px; line-height:200%; } p{ font-size:16px; }
网页视口尺寸：
window.screen.height 屏幕高度
window.innerHeight 网页视口高度
document.body.clientHeight body高度