**盒子模型**
宽=margin-left+margin-right+border-left+border-right+padding-left+padding-right+contenWidth
宽=margin+border+padding+width
高=margin+border+padding+height
CSS三种页面布局:
1. 流动模型（flow)
2. 浮动模型
3. 层模型
浮动模型：通常块元素独占一排，若想让两个块元素并排，设置浮动就可以实现
例：实现两个div并排
#div1{
width:200px;
height:300px;
border:2px solid green;
float:left;
}
#div2{
width:200px;
height:300px;
border:2px solid red;
float:left;
}
<div id=”div1”></div>
<div id=”div2”></div>
层模型：
三种形式：1.绝对定位（position:absolute)：相对于父元素
2.相对定位（position：relative)：相对于原来位置
3.固定定位（position：fixed）：相对于网页窗口
relative和absolute组合使用
设置：
父元素：position：relative
子元素：position:absolute
清除浮动：
clear:both/left/right
常用的块级元素 <div > <p > <h1>....<h6> <ol>
<ul> < li > <dl > <dt > <dd>
行内元素（内联元素） <span > <strong > <em > <i > <b> < a>
<label> <q> <var> <cite> <code>
常用的内联块元素：<img> <input>
块级元素居中 ：margin:0 auto;
行内元素居中：父元素 text-align:center;
display:block就是将元素显示为块级元素
例如：将行内元素a转换为块状元素，从而使a元素具有块状元素的特点
a{
display:block
}
块级元素的特点：
1. 每个块级元素都从新的一行开始，并且其后面的元素也另起一行
（一个块级元素独占一行）
2. 元素的高度，宽度，行高以及顶和底边距都可以设置
3. 元素宽度在不设置的情况下，和父元素的宽度一致
display:inline-block就是将将元素设为内联块元素
<img> <input>
特点：1.和其他元素都在一行上
2.元素的高度，宽度，行高以及顶和底边距都可以设置
注释：
1.html注释： <!--注释文本-->
2.css注释： /*注释文本*/
webstorm: 注释的快捷键： ctrl+shift+/
border-radius:10px; 圆角效果
outline:none;/*文本框获取焦点时去边框*/
cursor: pointer;/*鼠标变成手状*/
盒子模型-边框：
用div来设置边框的粗细，样式，颜色
4. 元素的高度，宽度，行高以及顶和底边距都可以设置
1. 缩写形式：border:线的粗细 样式 颜色
例：div{
Border:2px solid green
}
2. 分开写：
div{
Border-width:2px;
Border-style:solid;
Border-color:red;
}
3. border-style边框常用样式：dashed(虚线）/dotted(点线）/solid(实线）
4. 边框上，下，左，右的设置
border-top/border-bottom/border-left/border-right/