08-CSS的定位

来源：互联网发布：java数字图像处理 pdf 编辑：程序博客网时间：2024/06/11 21:38

问题：现在在页面上有两个盒子其中第二个盒子将第一个盒子压住一半
作用：解决页面上盒子与盒子之间的层叠问题。
使用：
position：absoult；//设置定位
top//定位以后距离浏览器上边框的距离是多少
left//定位以后距离浏览器左边框的距离是多少

 <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    *{        margin:0px;        padding: 0px;    }      .one{        width: 200px;        height: 200px;        background: red;      }    .two{    width: 200px;    height: 200px;    background: blue;    position: absolute;/*设置定位*/    top: 0px;    left: 0px; }    </style></head><body>    <div class="one"></div>    <div class="two"></div></body></html>

这里写图片描述
蓝色的盖住了红色的

上述是其中的其中用法而已。

position属性（位置）

取值：
1.static：静态的
position：static；静态定位
所有标准流中都是静态定位
2.relative：相对的
position：relation；相对定位
使用的时候还要配合 top left right bottom来使用。
如果设置了trbl四个数值，会以盒子原本的位置发生偏移。
相对原来的位置进行平移。在页面上占据了位置没有脱离标准流。
总结：相对定位是想当年位置。

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    *{        margin:0px;        padding: 0px;    }    div{        width: 200px;        height: 200px;    }      .one{        background: red;      }    .two{    background: blue;    position: relative;/*设置定位*/    top: 20px;/*距离原来位置的上面20px*/    left: 20px;/*距离原来位置的左边20px*/ } .three{    background: green; }    </style></head><body>    <div class="one"></div>    <div class="two"></div>    <div class="three"></div></body></html>

3.absoult绝对的
position：absoult；绝对定位
使用的时候也要配合trbl四个值来使用。这四个值是相对于边框来的。
1如果这个标签没有父元素就相对于body或者浏览器进行的*。
2如果这个标签有父元素但是父元素没有定位，那么trbl还是相对于body定位的*
3如果绝对定位的标签有父元素而且父元素有定位（非stastic）就是相对于父元素的边框定位，定位可以赋予负值哦
4绝对定位的元素不会占用位置。
总结：绝对定位就是看脸型的。

.three{    background: green;    position: absolute;/*设置绝对定位*/    top: 20px;/*相对于border20px*/    left: 20px;/*距离border左边20px*/ }

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>    *{        margin:0px;        padding: 0px;    }    div{        width: 200px;        height: 200px;    }      .one{        background: red;      }    .two{    background: blue; } .three{    background: green;    position: absolute;/*设置绝对定位*/    top: 20px;/*相对于border20px*/    left: 20px;/*距离border左边20px*/ } .four{    background: yellow;    position: relative; }    </style></head><body>    <div class="one"></div>    <div class="two"></div>    <div class="four">    <div class="three"></div>    </div></body></html>

扩展知识：如果文字与文字在同一行中，那么图片和文字的默认对齐是文字的基线和图片的底线对齐。
将来在写页面的时候用的最多的既不是绝对定位也不是相对定位而是绝对定位与相对定位一起使用就是子绝父相

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>这只是一个网站的头部</title>    <style>       *{        margin: 0px;        padding:0px;       }       .top{        width: 760px;        height: 150px;            margin: 0 auto;            /*图片的大小小于div的宽度所以要先设置一个平铺的纯色背景图片*/        background: url(img1/banner_bg.jpg);       }       .down{        width: 760px;            /*背景图片决定*/        height: 32px;            margin: 0 auto;        background: url(img1/button1_bg.jpg);       }       li{        list-style: none;        float: left;       }       a{        text-decoration: none;        color:red;        font-size: 12px;        display: inline-block;            /*根据背景图片设置宽高*/            width: 80px;        height: 32px;            text-align: center;        line-height: 32px;            /*导航之间的间距*/            background: url(img1/button1.jpg);       }       a:hover{            background: url(img/button2.jpg);       }       .er{        width:760px ;        height:100px;        background: red;        margin:0 auto;/*auto是自动*/        position: relative;       }       .er img{        /*position: relative;*/       /*   left: 770px;这个数值是测试出来0*/       /*相对定位还是占据标准流的位置会浪费页面的位置*/       /*所以使用绝对定位*/       position: absolute;       top: 0px;       right: -130px;       /*如果父元素没有定位就是相对于body的边框不会适应窗口大小的改变*/       /*为了使相对于父元素我们在父元素里面增加一个定位*/       }       .h img{        position: absolute;        top: -10px;        left:-5px ;       }       .h{        position: relative;       }    </style></head><body>    <div class="top">      <!-- 插入背景图片 -->           <img src="img/banner1.jpg" alt="">           </div>    <div class="down">      <ul>             <li><a href="#">导航</a></li>             <li><a href="#">返回首页</a></li>             <li class="h" ><a href="#">网站介绍 <img src="img\hot.png" alt=""></a></li>             <li><a href="#">想起来了</a></li>      </ul>    </div>     <div class="er"><img src="img/ewm.bmp" alt=""></div></body></html>

这里写图片描述
案例：
小盒子在大盒子里面，并且居中。
先left：*50%，再*margin-left：-（小盒子宽度的一半）

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Document</title>    <style>       *{        margin:0px;        padding: 0px;       }       .big{        width: 980px;        height: 600px;        background: red;        margin:0 auto;        position: relative;       }       .small{        width: 100px;        height: 50px;        background: blue;        position: absolute;        bottom: 5px;        /*利用页面的检查来找数值很麻烦*/        left: 50%;        /*50%就是平移父元素的50%但是因为小盒子有宽度其实就是小盒子的左边相对于大盒子的左边是大盒子宽度的一般 还要向左移动小盒子宽度的一半这个时候小盒子和大盒子的中线才能重合        为了解决这个方法就利用了下面一行代码*/       margin-left: -50px；       }    </style></head><body>  <div class="big">         <div class="small"></div>  </div>    </body></html>

4固定定位
**固定定位：**fixed

 position：fixed

补充知识点：
vertical-align设置图片和文字的对齐方式
取值：middle 中线对齐 baseline top texttop bottom…..还有好多取值可以查手册默认是baseline。

      img{        width: 300px;        height: 300px;        /*图片的中线和文字的中线对齐*/        vertical-align: middle;        /*设置了margin-top之后文字也会移动因为margin-top的距离文字也认为是图片的*/        margin-top: 1px;      }

overflow使用：
溢出的意思。
取值：
hidden：会将超出容器的部分隐藏起来
scroll：给容器加上滚动条
auto：根据具体情况判断容器是否要加上滚动条
3.0元素的隐藏：
overflow:hidden//将超出的部分裁剪掉
visibility: hidden//可以将元素隐藏，但是在页面上还保留着原来的位置。（停薪留职）
display: none;//可以将元素隐藏，并且在页面不占据位置。
diplay:none与display:block是一对反义词。

emma语法：

emmet是我们在sublime中的一个插件在这个插件中集成很多的快捷键。
１ html:
１.1 生成结构的快捷键：
！+ tab,可以生成html的结构代码。
１.2 生成id名和类名
标签名.类名#id名+tab
没有标签名.类名+tab ==>div
１.3 生成同级元素：
标签名+标签名+标签名 “+”tab
１.4 生成子类标签
标签名>子标签名>子标签名>子标签名+tab
**生成与子类标签的同级标签
标签名>子标签名>子标签名>子标签名^^子标签名+tab
１.5 带固定数量的标签:
ul>li*5+tab
１.6 带有序号名称
ul>li.abc$*3 + tab
１.7 生成带有内容的标签：
ul>li>a{item}*5
１.8 生成带有属性的标签
ul>li>a[href=”#”]
２ css
width:30px==>w30+tab

阅读全文

0 0