<!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. 拖拽进度条（SeekBar）

    拖拽进度条(SeekBar) 监听方法:setOnSeekBarChangeListener 监听器:SeekBar.OnSeekBarChangeListener 简单,直接上代码: 1.Activ ...

  2. Python 利用Python编写简单网络爬虫实例3

    利用Python编写简单网络爬虫实例3 by:授客 QQ:1033553122 实验环境 python版本:3.3.5(2.7下报错 实验目的 获取目标网站“http://bbs.51testing. ...

  3. 生成项目目录结构（based on windows system）

    描述: 作为程序员,在工作中,我们经常会有需求,需要罗列出项目的结构图:如果手工来整理的话,太过浪费时间,其实我们可以借助tree命令来快速生成目录结构. 本文主要介绍一下,基于windows系统,如 ...

  4. 那些年vue踩过的坑

    1.前言 学习Vue前端框架已经一个月了,作为一个web刚入门的菜鸟,在学习的过程中,网上有些技术博客往往没有什么可以借鉴的地方,在这里 我特意将我从开始一直到登录的过程记录下来.希望看到我的文章的朋 ...

  5. protobuf 源代码分析 (1)准备工作

    protobuf简介 protobuf是google开源的跨平台的一种数据序列化的代码自动生成器,支持c++.java和python语言,支持跨网络的传输数据,与平台类型无关.并且其生产的序列化数据具 ...

  6. 从零开始——MySql01

    注:如有侵权,请速联系,会速度删除!(都是同学分享的内容) 安装详解: 链接:http://pan.baidu.com/s/1skMQVgx 密码:z0xh Navicat安装包: 链接:http:/ ...

  7. Oracle EBS PO 接收事务处理查不到对应的数据

    1. 有一种情况是采购订单的借记账户不对 不匹配OU 2. 有可能是因为接口表卡住了 PENDING状态的把对应的数据删除掉即可  3. 接收时发生异常那个,丢失了接收头,rcv_shipment_h ...

  8. Vue2学习笔记:事件对象、事件冒泡、默认行为

    1.事情对象 <!DOCTYPE html> <html> <head> <title></title> <meta charset= ...

  9. Vue2学习笔记:v-for指令

    1.使用 <!DOCTYPE html> <html> <head> <title></title> <meta charset=&q ...

  10. cent7中kickstart

    一.基本环境 操作系统:CentOS7.4 内核版本:3.10.0-862.11.6.el7.x86_64 二.组件部署 yum安装tftp tftpd-server xinetd http dhcp ...