1. 盒模型
css盒模型
CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。
元素的总宽度应该这样计算：
元素总宽度 = 宽度 + 左内边距 + 右内边距 + 左边框 + 右边框 + 左外边距 + 右外边距
元素的总高度应该这样计算：
元素总高度 = 高度 + 上内边距 + 下内边距 + 上边框 + 下边框 + 上外边距 + 下外边距
document.getElementById("box").offsetWidth
<style>
.box{
height: 200px;
padding: 10px;
border: 1px solid #ccc;
margin: 10px;
box-sizing: border-box;
/* box-sizing: content-box;默认值 */
}
</style>
<div id="box">
盒模型
</div>
2.BFC
BFC
BFC(Block formatting context 块级格式上下文)，会形成独立的渲染区域，内部元素的渲染不会影响外界
形成BFC的条件：
-浮动元素：float不是none
-绝对定位元素： position 是absolute或者fixed
-块级元素：overflow不是visible
-flex元素
-inline-block元素
应用场景：清除浮动等
<!-- BFC -->
<style>
.container{
background-color: #ccc;
}
.container div{
float: left;
width: 300px;
height: 53px;
border: 1px solid #000;
}
.bfc{
overflow: hidden;
}
</style>
<div class="container bfc">
<div>过来的</div>
<p class="bfc" style="border: 1px solid red;">友谊富家大室</p>
</div>
3.圣杯布局
圣杯布局、双飞翼布局（一般用于PC端网页布局）
目的：两侧内容宽度固定，中间内容宽度自适应；
三栏布局，中间一栏最先加载、渲染出来（主要内容）
实现方法：float + margin
两者的不同：左右盒子外边距的设置以及dom结构的布局
##圣杯布局
<style>
#header{
background-color: #f1f1f1;
text-align: center;
}
#content{
padding-left: 300px;
padding-right: 200px;
}
#content #center{
background-color: #ddd;
width: 100%;
}
#content #left{
position: relative;
background-color: orange;
width: 300px;
margin-left: -100%;
right: 300px;
}
#content #right{
background-color: green;
width: 200px;
margin-right: -200px;
}
#content .column{
float: left;
}
#footer{
background-color: #f1f1f1;
clear: both;
text-align: center;
}
</style>
<h1>实现圣杯布局</h1>
<div id="header">header</div>
<div id="content">
<div id="center" class="column">center</div>
<div id="left" class="column">left</div>
<div id="right" class="column">right</div>
</div>
<div id="footer">footer</div>
## 双飞翼布局
<style>
#main{
background-color: #ddd;
width: 100%;
}
#main #main-wrapper{
margin-left: 100px;
margin-right: 50px;
}
#main-box #left{
background-color: orange;
width: 100px;
margin-left: -100%;
}
#main-box #right{
background-color: green;
width: 50px;
margin-left: -50px;
}
.column2{
float: left;
}
</style>
<h1>双飞翼布局</h1>
<div id="main" class="column2">
<div id="main-wrapper">main </div>
</div>
<div id="left" class="column2">left</div>
<div id="right" class="column2">right</div>
4. flex布局
flex 布局
父级容器相关：
flex-direction 主轴方向（水平方向、垂直方向）
justify-content 主轴上的对齐方式（开始对齐、结束对齐、居中对齐、两端对齐）
align-items 交叉轴上的对齐（开始对齐、结束对齐、居中对齐）
flex-wrap 是否换行
子元素相关：
align-self 子元素在交叉轴上的对齐方式（开始对齐、结束对齐、居中对齐），
可以覆盖align-items 属性
<style>
.box {
display: flex;
justify-content: space-between;
/*水平方向*/
width: 150px;
height: 150px;
border: 1px solid #ccc;
padding: 15px;
box-sizing: border-box;
border-radius: 10px;
}
.item {
display: block;
width: 20px;
height: 20px;
background-color: #666;
border-radius: 50%;
}
.item:nth-child(2) {
/*第二个圆点垂直居中对齐*/
align-self: center;
}
.item:nth-child(3) {
align-self: flex-end;
}
</style>
<h1>flex布局</h1>
<div class="box">
<span class="item"></span>
<span class="item"></span>
<span class="item"></span>
</div>
html语义化的好处：提高代码可读性，让搜索引擎优化的爬虫程序更容易理解代码；
块级元素：独占一行(displa:blcok/table),div/hx/p/address/ul/ol/li/dl/dt/dd/table/form/fieldset/legend；
内联元素：不会独占一行，会紧跟排列，直到没有足够的空间(displa:inline/inline-block),span/strong/em/del/ins/label/a/sub/sup
内联块元素：input/img/select/textarea/iframe
