float浮动的一些基础常识

时间：2023-01-23 00:57:26

float浮动的一些基础常识

 <!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&vert; position定位和float浮动

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

  4. css之float&lpar;浮动&rpar;的特性

    详解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&colon;&sol;&sol;www&period;cnblogs&period;com&sol;cielzhao&sol;p&sol;5781462&period;html）

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

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

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

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

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

随机推荐

  1. winform（进程和线程）

    一.进程:需要有用Process类用法一:Process.Start("calc");(不好用)该方法弊端:有许多程序不知道它的运行名字到底是什么,如果写错了,就会出现程序崩溃错误 ...

  2. lua标签解析器

    lua 标签解析器 概述 一个类xml标签解析函数,将标签解析成Lua中的表结构它可以用来解析简单xml结构,可以作为RichLabel控件的字符串解析组件(其实它现在就是这么用的;-)) 原理 使用 ...

  3. 为什么都反对XML而支持使用json呢&quest;

    一个使用上的因素:JSON的结构更容易映射至一般语言的数据结构. XML和JSON的主要组成成分: XML是element.attribute和element content. JSON是object ...

  4. 《Django By Example》第十二章 中文 翻译 （个人学习，渣翻）

    书籍出处:https://www.packtpub.com/web-development/django-example 原作者:Antonio Melé (译者注:第十二章,全书最后一章,终于到这章 ...

  5. vb&period;net C&num; AtlAxGetControl 函数使用方法

    先省略一万字的坑坑坑 找遍了互联网既然没搜索到相关资料 一定是我搜索的方法有问题 下面简单几句代码 第一种方法 Public Declare Function AtlAxGetControl Lib ...

  6. 08 bash特性--shell脚本编程入门

    shell脚本编程入门 编程语言介绍 编程语言分为:机械语言.汇编语言和高级语言: 计算机能识别的语言为机械语言,而人类能学习的并且能够方便掌握的为高级语言,所以,我们所编写的程序就要通过编译来转换成 ...

  7. Flex与SSH集成

    Flex与SSH集成 -- ::| 分类: flex |举报|字号 订阅 Flex与SSH集成 ,下载blazeds_bin_3---.zip 包,将其解压 取下blazeds.war包 更改为bla ...

  8. 运行第一个MapReduce程序，WordCount

    1.安装Eclipse 安装后如果无法启动重新配置Java路径(如果之前配置了Java) 2.下载安装eclipse的hadoop插件 注意版本对应,放到/uer/lib/eclipse/plugin ...

  9. 第147天：web前端开发中的各种居中总结

    一.水平居中 方法① :行内元素 (父元素)text-align,(子元素)inline-block .parent{text-align: center;} .child{display: inli ...

  10. &lbrack;Leetcode&rsqb; pascals triangle ii 帕斯卡三角

    Given an index k, return the k th row of the Pascal's triangle. For example, given k = 3,Return[1,3, ...

相关文章