布局页面的时候：大色块 小色块 小色块...内容
布局：浮动（盒子模型），定位，层级(z-index)，显示( display)
1.浮动：float：left(左) right（右） margin:auto（居中）
设一个父标签 设定宽高，里面随便浮动
超出部分：overflow：hidden（隐藏） scorll（滚动条）
overflow-x
overflow-y
盒子模型：
从里到外：内容->内边距->边框->外边距
对应样式：content->padding->border->margin
盒子模型的样式分上下左右：
top bottom left right
例： border-left-1px;
border-left-style:solid;
border-left-color:red;
border-left:1px solid red;适用于盒子左边框（简写）
border : 1px solie red; 适用于盒子所以边框（简写）
padding-left:10px;
padding:10px;
padding:10px;
盒子模型自适应：box-sizing:border-box
margin 第一个子标签设置margin会作用到父标签
<div class="fu">
<div class="dd">div1</div>
<div class="dd">div2</div>
<div class="dd">div3</div>
<div class="dd">div4</div>
<div class="dd">div5</div>
</div>
<p style="clear:both;"></p>
2.定位 绝对定位 相对定位
position：fixed absoute relative
top left right bottom
fixed:相对窗口定位 通过上下左右调位置
absolute:相对body定位 相对于最近的有position样式属性的父标签定位 到body为止
relative:相对自身定位 通常用来限制子标签的absolute 有自身位置，通常用来微调
例：
<div style=" 100px;height: 100px;background: #ccc; position: fixed;bottom: 0px; right: 0px"></div>
<div style="margin-left: 10px; position: relative;">
这是一个div 作为父标签
<div style="position: absolute; top: 10px;
left: 10px;">这是子标签</div>
</div>
<div style="position: relative; top: 100px; left: 100px">12</div>
<span style="position: absolute; top:0px; ">123</span>
3.层级
<div style="position: absolute; z-index: 10">1234</div>
<div style="position: absolute; top: 10px;left: 10px; background: red; z-index: 11000">1235</div>
4.显示 display
<div style="visibility: hidden;">123</div>
123
<input type="text" style="border: none;outline: none">