<!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. JSON学习笔记-5

    JSON.parse() 1.从服务器接受数据进行解析(一般是字符串) 2.解析前要确保你的数据是标准的 JSON 格式,否则会解析出错.可以使用线工具检测:https://c.runoob.com/ ...

  2. Android sync adapter初体验之为什么官方文档上的代码不能work

    回答:因为其实可以work sync adapter就是google推出的一个同步框架,把各种同步操作放在一起智能管理比较省电之类的.对我而言最具体的好处反正就是,不用自己写代码了,用框架就可以了.目 ...

  3. 团队开发心得（May）

    经过之前一个多月的准备工作(包括去求调研.技术选型.知识储备等等),这个月开发工作终于步入正轨,下面谈谈我的心得体会. 个人收获方面,我选择了加入数据库小组,进行数据库方面的开发.刚开始的时候我是个小 ...

  4. 2.HTML标签

       <a>      链接标签 1) <a href=“#”>这是个链接</a> 表示空链接 2) 未访问过的链接 显示蓝色字体并带下划线;访问过的链接 显示紫色 ...

  5. 第四章 数据库和SQL 4-3 数据的更新（UPDATE语句的使用方法）

    一.UPDATE语句的基本语法. 二.指定条件的UPDATE语句(搜索型UPDATE) 三.使用NULL进行更新 NULL清空:使用UPDATE可以将列更新为NULL,俗称NULL清空. 四.多列更新 ...

  6. Linux 系统的IP与域名解析文件[局域网的DNS]

    系统的IP与域名解析文件[局域网的DNS] 局域网的DNS: 域名和主机名对应的工具,服务器直接通过域名,方便迁移 # 修改配置 vim /etc/hosts 直接添加: 192.138.25.129 ...

  7. IIS 7 反向代理 URL重写 转发动态请求

    一.反向代理是什么 有一篇文章说的挺好的 Nginx 反向代理.负载均衡.页面缓存.URL重写及读写分离详解 http://www.server110.com/nginx/201402/5534.ht ...

  8. 一、DAO设计模式 二、DAO设计模式的优化 三、JDBC中的事务，连接池的使用

    一.DAO设计模式概述###<1>概念 DAO,Data Access Object ,用于访问数据库的对象. 位于业务逻辑和数据持久化层之间,实现对数据持久化层的访问![](1.png) ...

  9. Linux新建用户没有设置密码

    只要你能登陆root账户就行 登陆root账户 输入  echo "密码“ | passwd --stdin 用户名

  10. Memcahce和Redis比较

    一.Memcache 1．     memecache 把数据全部存在内存之中,断电后会挂掉,数据不能超过内存大小redis有部份存在硬盘上,这样能保证数据的持久性. 2．      Memcache ...