<!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. idea插件Lombok

    在spring boot 中,我们可以使用@Data标签,这样就不需要手动添加getter/setter方法了,但Idea会报错. 此时,我们需要安装Lombok插件,安装好插件后便可以解决这个问题. ...

  2. Storm默认配置 default.yaml

    default.yaml文件所在位置:apache-storm-0.9.4.tar.gz/apache-storm-0.9.4/lib/storm-core-0.94.jar/default.yaml ...

  3. java web项目中引入spring

    自己动手实践了一次,发生中间出了一下问题,现整理出来,供参考. Step1: 新建一个java web项目 Step2:下载spring的jar包http://repo.spring.io/libs- ...

  4. 5.Spring MVC 自动装配问题

    一.使用@controller注解,实际上也是在IOC容器中配置了,它的id是类的首字母小写 一.使用@controller注解,实际上也是在IOC容器中配置了,它的id是类的首字母小写 1.如果不使 ...

  5. sqlserver 统计信息自动更新 ----trace flag 2371

    对于已经应用的表(非临时表)统计信息更新条件为500+20%,具体更新条件 If the statistics is defined on a regular table, it is out of ...

  6. SQLSERVER2012里的扩展事件初尝试（上）

    SQLSERVER2012里的扩展事件初尝试(上) SQLSERVER2012里的扩展事件初尝试(下) 周未看了这两篇文章: 扩展事件在Denali CTP3里的新UI(一) 扩展事件在Denali ...

  7. Mysql使用binlog恢复数据解决误操作问题的两种方法

    为保证没有其他参数配置影响,重新安装配置了一台最小化安装的CentOS7虚拟机 1. 基础知识
 安装mysql5.6数据库Mysql binlog初步理解 2. 配置mysql 开启binlog.修 ...

  8. Fuckey V1.0 Beta版发布！！！

    Fuckey,以前叫FullNexus4,只因为当时想做一个软件给自己的Nexus 4,方便方便一下,不过这名字感觉太局限了,毕竟很多朋友不是使用的Nexus 4的手机,但却还是使用了FullNexu ...

  9. [翻译] JTSReachability

    JTSReachabilit An adaptation of Apple's Reachability with some block-based conveniences. 这是一个苹果的网络检测 ...

  10. 浅谈jodaTime 的使用

    第一步:引入依赖: 1 <dependency> 2 <groupId>joda-time</groupId> 3 <artifactId>joda-t ...