7.13PHP所学知识总结-CSDN博客

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

转载于:https://www.cnblogs.com/Prinlily/p/9307304.html