7.13PHP所学知识总结

布局页面的时候：大色块 小色块 小色块...内容
    布局：浮动（盒子模型），定位，层级(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">