欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

float浮动的一些基础常识

程序员文章站 2022-06-16 20:37:40
1 2 3 4 5 6 7 8 Document 9 27 28 29 30 31 32 33 34 你好!明天 35 你好!明天 36 你好!明天 37 ... ......

float浮动的一些基础常识

 1 <!doctype html>
 2 <html lang="en">
 3 
 4 <head>
 5     <meta charset="utf-8">
 6     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 7     <meta http-equiv="x-ua-compatible" content="ie=edge">
 8     <title>document</title>
 9    <style>
10    *{margin: 0;padding: 0;}
11     /* 先给定义的box一个高度和宽度 */
12    .box{width: 1200px;height: 50px;outline:1px red solid;margin:30px auto;}
13    /* 去除ul无序列表的全局样式 */
14    ul{list-style:none;}
15    /* 再给li的父级一个宽高 */
16    .box>ul{height: 100%;width: 100%;}
17    /* 再给li一个宽高 宽是父级除以他的子级的出来的*/
18    .box>ul>li{height:100%;width: 150px;outline: 1px solid pink;
19    /* 这是左浮动,要想右浮动就直接把left改变成right; */
20    float: left;
21    /* 这里让li里面的内容在他的宽度里水平居中 */
22    text-align: center;
23    /* 这里是让li里面的内容在他的高度里面垂直居中 注:他的父级有多高那么就可以设置他的行高为多少 */
24    line-height: 50px;
25    }
26    </style>
27     
28 </head>
29 <body>
30    <div>
31       <!-- 这是一个外边框的盒子 -->
32       <div class="box">
33           <ul>
34               <li>你好!明天</li>
35               <li>你好!明天</li>
36               <li>你好!明天</li>
37               <li>你好!明天</li>
38               <li>你好!明天</li>
39               <li>你好!明天</li>
40               <li>你好!明天</li>
41               <li>你好!明天</li>
42           </ul>
43       </div>
44    </div>
45 </body>
46 
47 </html>