web第九天，浮动与定位

一，如何给一个元素添加多个背景图

　　background ： url（第一个背景图），url（第二个背景图），url（第三个背景图）

　　多张背景图的时候，先写的优先级较高

二，position定位

　　格式： position ： relative ； left ：0； bottom ：0 ；

　　浮动：解决左右排列的问题（主要去做的）

　　定位：解决叠加排列的问题（主要去做的）

　　position取值：

　　　　1，static（默认）

　　　　2，relative（相对定位）

　　　　　　如果没有定位偏移量，对元素本生没有任何影响。

　　　　　　不使元素脱离文档流，空间是会被保留。

　　　　　　不影响其他元素布局

　　　　　　left，right，top，bottom是相对与当前元素自身进行偏移的

　　　　3，absolute（绝对定位）

　　　　　　使元素完全脱离文档流

　　　　　　使内联元素支持宽高（使内联元素具备块元素特性）

　　　　　　使块元素默认宽根据内容决定（让块具备内联特性）

　　　　　　如果有定位祖先元素相对于定位祖先元素发生偏移，没有定位祖先元素相对于整个文档发生偏移（绝对、相对、固定）

　　　　　　注：如果祖先元素中有多个元素具备定位模式，那么是已离自己最近的祖先元素进行偏移。

　　　　4，fixed（绝对定位）

　　　　　　使元素完全脱离文档流

　　　　　　使内联元素支持宽高（让内联具备快特性）

　　　　　　使块元素默认宽根据内容决定（让块具备内联的特性）

　　　　　　相对与整个浏览器窗口进行偏移，不受浏览器滚动条的影响

　　　　　　不会受到祖先元素的影响

　　　　5，sticky：粘性定位

　　　　　　在没有到达指定位置时没有固定效果，到达了指定位置就变为固定模式

　　　　注 : 定位偏移量： left right bottom top，不能单独使用，必须得配合定位模式

　　　　6，z-index定位层级

　　　　　　默认层级为0

　　　　　　嵌套时候的层级问题：比较的时候，会先跟同级别的去比较。（同级别必须有定位模式与z-index）

固定定位练习

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>Document</title>
 7     <style>
 8         *{margin: 0;padding: 0;}
 9         a{text-decoration: none;}
10         ul{list-style: none;}
11         img{display: block;}
12         .clear:after{content: "";display: block;clear: both;}
13         .l{float: left;}
14         .r{float: right;}
15         #main{
16             border: 1px black solid;
17             width: 320px;height: 320px;
18             margin: 100px auto;
19             position: relative;
20         }
21         .main{
22             width: 100px;height: 100px;background: red;
23         }
24         #box1{position: absolute; left: 10px;top:10px; color: white; line-height: 100px;text-align: center;}
25         #box2{position: absolute; right: 10px;top:10px;color: white; line-height: 100px;text-align: center;}
26         #box3{position: absolute;left: 110px; top: 110px;color: yellow; line-height: 100px;text-align: center;background: blue;}
27         #box4{position: absolute;left: 10px;bottom: 10px;color: white; line-height: 100px;text-align: center;}
28         #box5{position: absolute;right: 10px;bottom: 10px;color: white; line-height: 100px;text-align: center;}
29     </style>
30 </head>
31 <body>
32     <div id="main">
33         <div id="box1" class="main ">链接</div>
34         <div id="box2" class="main ">链接</div>
35         <div id="box3" class="main ">链接</div>
36         <div id="box4" class="main ">链接</div>
37         <div id="box5" class="main ">链接</div>
38     </div>
39     
40 </body>
41 </html>

View Code

相对定位练习

 1     img {
 2         display: block;
 3     }
 4 
 5     .clear:after {
 6         content: "";
 7         display: block;
 8         clear: both;
 9     }
10 
11     .l {
12         float: left;
13     }
14 
15     .r {
16         float: right;
17     }
18     #box1{ 100px;height: 100px;background: blue;border: 1px black solid;}
19     #box2{ 100px;height: 100px;background: blue;position: relative;left: 50px;bottom: 50px;border: 1px black solid;}
20     #box3{ 100px;height: 100px;background: yellow;position: relative;left: 100px;bottom: 100px;border: 1px black solid;}
21     #box4{ 100px;height: 100px;background: blue;position: relative;left: 150px;bottom: 150px;border: 1px black solid;}
22     #box5{ 100px;height: 100px;background: blue;position: relative;left: 200px;bottom: 200px;border: 1px black solid;}
23 </style>
24 <body>
25     <div id="box1"></div>
26     <div id="box2"></div>
27     <div id="box3"></div>
28     <div id="box4"></div>
29     <div id="box5"></div>
30 </body>
31 </html>

View Code

浮动与定位练习

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>Document</title>
  7     <style>
  8         *{margin: 0;padding: 0;}
  9         a{text-decoration: none;}
 10         ul{list-style: none;}
 11         img{display: block;}
 12         h2{font-size: 26px; color: #909090;line-height: 56px;padding-left: 30px;}
 13         .clear:after{content: "";display: block;clear: both;}
 14         .l{float: left;}
 15         .r{float: right;}
 16         main{margin: 100px auto;}
 17         img1{padding-left: 30px;}
 18         .content1{margin-right: 20px;
 19         background: url(./img/2.png) repeat-x ;
 20         position: relative;
 21         }
 22         .content1 img{
 23             padding-top: 5px;
 24             
 25         }
 26         .content1 p{
 27             font-size: 12px;
 28             line-height: 24px;
 29             position:  relative ;bottom: 24px;
 30         }
 31         .new{
 32             position: absolute;bottom: 150px;
 33         }
 34     </style>
 35 </head>
 36 <body>
 37     <div id="main" >
 38         <h2>黄金档</h2>
 39         <div id="img1" class="clear">
 40             <div class="content1 l">
 41                 <img src="./img/1.jpg" alt="">
 42                 <img src="./img/3.png" alt="" class="new">
 43                 <p>更新至九集</p>
 44                 <p>香蜜沉沉烬如霜</p>
 45                 <p>杨紫登陆上演千年之恋</p>
 46             </div>
 47             <div class="content1 l">
 48                 <img src="./img/1.jpg" alt="">
 49                 <p>更新至九集</p>
 50                 <p>香蜜沉沉烬如霜</p>
 51                 <p>杨紫登陆上演千年之恋</p>
 52             </div>
 53             <div class="content1 l">
 54                 <img src="./img/1.jpg" alt="">
 55                 <p>更新至九集</p>
 56                 <p>香蜜沉沉烬如霜</p>
 57                 <p>杨紫登陆上演千年之恋</p>
 58             </div>
 59             <div class="content1 l">
 60                 <img src="./img/1.jpg" alt="">
 61                 <p>更新至九集</p>
 62                 <p>香蜜沉沉烬如霜</p>
 63                 <p>杨紫登陆上演千年之恋</p>
 64             </div>
 65         </div>
 66         <div id="img2" class="clear">
 67             <div class="content1 l">
 68                 <img src="./img/1.jpg" alt="">
 69                 <p>更新至九集</p>
 70                 <p>香蜜沉沉烬如霜</p>
 71                 <p>杨紫登陆上演千年之恋</p>
 72             </div>
 73             <div class="content1 l">
 74                 <img src="./img/1.jpg" alt="">
 75                 <p>更新至九集</p>
 76                 <p>香蜜沉沉烬如霜</p>
 77                 <p>杨紫登陆上演千年之恋</p>
 78             </div>
 79             <div class="content1 l">
 80                 <img src="./img/1.jpg" alt="">
 81                 <p>更新至九集</p>
 82                 <p>香蜜沉沉烬如霜</p>
 83                 <p>杨紫登陆上演千年之恋</p>
 84             </div>
 85             <div class="content1 l">
 86                 <img src="./img/1.jpg" alt="">
 87                 <p>更新至九集</p>
 88                 <p>香蜜沉沉烬如霜</p>
 89                 <p>杨紫登陆上演千年之恋</p>
 90             </div>
 91         </div>
 92         <div id="img3" class="clear">
 93             <div class="content1 l">
 94                 <img src="./img/1.jpg" alt="">
 95                 <p>更新至九集</p>
 96                 <p>香蜜沉沉烬如霜</p>
 97                 <p>杨紫登陆上演千年之恋</p>
 98             </div>
 99             <div class="content1 l">
100                 <img src="./img/1.jpg" alt="">
101                 <p>更新至九集</p>
102                 <p>香蜜沉沉烬如霜</p>
103                 <p>杨紫登陆上演千年之恋</p>
104             </div>
105             <div class="content1 l">
106                 <img src="./img/1.jpg" alt="">
107                 <p>更新至九集</p>
108                 <p>香蜜沉沉烬如霜</p>
109                 <p>杨紫登陆上演千年之恋</p>
110             </div>
111             <div class="content1 l">
112                 <img src="./img/1.jpg" alt="">
113                 <p>更新至九集</p>
114                 <p>香蜜沉沉烬如霜</p>
115                 <p>杨紫登陆上演千年之恋</p>
116             </div>
117         </div>
118     </div>
119 </body>
120 </html>

View Code