<!DOCTYPE html>

 <html lang="en">

 <head>

     <meta charset="UTF-8">

     <meta name="viewport" content="width=device-width, initial-scale=1.0">

     <meta http-equiv="X-UA-Compatible" content="ie=edge">

     <title>Document</title>

    <style>

    *{margin: ;padding: ;}

     /* 先给定义的box一个高度和宽度 */

    .box{width: 1200px;height: 50px;outline:1px red solid;margin:30px auto;}

    /* 去除ul无序列表的全局样式 */

    ul{list-style:none;}

    /* 再给li的父级一个宽高 */

    .box>ul{height: %;width: %;}

    /* 再给li一个宽高 宽是父级除以他的子级的出来的*/

    .box>ul>li{height:%;width: 150px;outline: 1px solid pink;

    /* 这是左浮动，要想右浮动就直接把left改变成right; */

    float: left;

    /* 这里让li里面的内容在他的宽度里水平居中 */

    text-align: center;

    /* 这里是让li里面的内容在他的高度里面垂直居中 注：他的父级有多高那么就可以设置他的行高为多少 */

    line-height: 50px;

    }

    </style>

 </head>

 <body>

    <div>

       <!-- 这是一个外边框的盒子 -->

       <div class="box">

           <ul>

               <li>你好！明天</li>

               <li>你好！明天</li>

               <li>你好！明天</li>

               <li>你好！明天</li>

               <li>你好！明天</li>

               <li>你好！明天</li>

               <li>你好！明天</li>

               <li>你好！明天</li>

           </ul>

       </div>

    </div>

 </body>

 </html>

float浮动的一些基础常识的更多相关文章

  1. float浮动属性的基本常识

    CSS 浮动 请看下图,当把框 1 向右浮动时,它脱离文档流并且向右移动,直到它的右边缘碰到包含框的右边缘: 再请看下图,当框 1 向左浮动时,它脱离文档流并且向左移动,直到它的左边缘碰到包含框的左边 ...

  2. 归纳篇（一）CSS的position定位和float浮动

    近期会更新一系列博客,对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进 ...

  3. CSS| position定位和float浮动

    对基础知识再度做个巩固和梳理. 一.position定位 (一):position的属性 1.absolute:生成绝对定位的元素,相对于最近一级定位不是static的父元素来进行定位: 2.rela ...

  4. css之float(浮动)的特性

    详解CSS float属性  float本身不脱离文档流,但是和 position:absolute;搭配使用会脱离文档流 阅读目录 基础知识 float的详细细节 float特殊情况 clear属性 ...

  5. Float浮动（慕课网学习笔记）

    float浮动 属性:值 意义 float:left 左浮动 float:right 右浮动 float:none 不浮动 float:inherit 继承父元素浮动属性,若父元素没有浮动属性则失效 ...

  6. 给li设置float浮动属性之后，无法撑开外层ul的问题。

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  7. 给li设置float浮动属性之后，无法撑开外层ul的问题。（原址：http://www.cnblogs.com/cielzhao/p/5781462.html）

    最近在项目中有好几次遇到这个问题,感觉是浮动引起的,虽然用<div style="clear:both"></div>解决了,但自己不是特别明白,又在网上查 ...

  8. float浮动问题：会造成父级元素高度坍塌；

    float浮动问题:会造成父级元素高度坍塌: 解决办法:清除浮动:clear:both; 给父元素高度:height(不是很可取) 给父元素:display:inline-black:(问题:marg ...

  9. 解决float浮动带来的父元素高度没有的问题---清除浮动

    float的特性 : 1:使元素block块级化: 2:破坏性造成的紧密排列特性. 基于以上的特性,使得我们通常把浮动用来布局,带来的问题是,容易出问题,重用性不行,ie6-的版本下很多问题,因为它是 ...

随机推荐

  1. Keras & Theano 输出中间层结果

    Keras & Theano get output of an intermediate layer 1.使用函数模型API,新建一个model,将输入和输出定义为原来的model的输入和想要 ...

  2. java jvm概述及工作过程中的内存管理

    java jvm 有分层的思想.   java类..java文件,源文件,源代码,源程序   编译器不能把源代码直接编译成0101,除非是java语言写的操作系统.   windows认识的可执行文件 ...

  3. iptable防火墙案例

    [root@WX020 firewall]# cat /etc/sysconfig/iptables# Firewall configuration written by system-config- ...

  4. SSH安全

    新建用户,设置密码 useradd eason passwd eason 不允许root直接登陆 修改配置文件 vi /etc/ssh/sshd_config 禁止root登录 查找“#PermitR ...

  5. HBase RegionServer宕机处理恢复

    本文分析RegionServer宕机后这个region server上的region是如何在其他region server上恢复的. region server宕机后发生了什么   HMaster有一 ...

  6. EBS请求定义成菜单

    1. 将请求定义为“功能”路径:系统管理员 –应用产品-函数输入自定义的功能名称,用户功能名以及说明   “特性”TAB页: 类型选择“表单”,其余两个字段默认:在表单TAB页: 表单字段:选择“运行 ...

  7. Oracle EBS 获取完全的值集信息

    SELECT fvs1.flex_value_set_name, fvs1.description, decode(upper(fvs1.longlist_flag), 'N', '值列表', 'Y' ...

  8. Oracle常见等待事件

    1Buffer busy waits从本质上讲,这个等待事件的产生仅说明了一个会话在等待一个Buffer(数据块),但是导致这个现象的原因却有很多种.常见的两种是: ·         当一个会话视图 ...

  9. REST Framework 的用户认证组件

    用户认证流程: 我们要知道这个流程是怎么走的? 认证之后做的什么? 怎么认证?这三个条件 认证流程:就是使用BaseAuthentication这个模块来做认证,判断你登陆成功传递过来的随机字符串是否 ...

  10. 解决 hibernate cannot define positional parameter after any named parameters have been defined

    解决 hibernate  cannot define positional parameter after any named parameters have been defined 把模糊查询的 ...