HTML&CSS基础-浮动

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.块元素在文档中默认垂直排列

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>浮动</title>

        <style type="text/css">

            /**

             *     块元素在文档流中默认垂直排列，所以这三个div自上至下一次排开

             */

            .box1{

                width: 200px;

                height: 200px;

                background-color: red;

            }

            .box2{

                width: 200px;

                height: 200px;

                background-color: yellow;

            }

            .box3{

                width: 200px;

                height: 200px;

                background-color: deeppink;

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

        <div class="box2"></div>

        <div class="box3"></div>

    </body>

</html>

2>.浏览器打开以上代码渲染结果

二.块元素之间的浮动

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>浮动</title>

        <style type="text/css">

            /**

             *     块元素在文档流中默认垂直排列，所以这三个div自上至下一次排开，如果希望块元素在页面水平排列，可用使块元素脱离文档流。

             *

             *     使用float来使元素浮动，从而脱离文档流，该属性有以下常用可选值:

             *         none:

             *             默认值，元素默认在文档流中排列。

             *         left:

             *             元素会立即脱离文档流，向页面的左侧浮动。

             *         right:

             *             元素会立即脱离文档流，向页面的右侧浮动。

             *

             *     当一个元素设置浮动时(foalt属性是一个非none的值)

             *         元素会立即脱离文档流，元素脱离文档流以后，它下边的元素会立即向上移动;

             *         元素浮动以后，会尽量向页面的左上或者是右上漂浮，直到遇到父元素的边框或者其它的浮动元素;

             *         如果浮动元素上边是一个没有浮动的块元素，则浮动元素不会超过块元素;

             *         浮动的元素不会超过他上边的兄弟元素，最多一边齐;

             *

             */

            .box1{

                width: 200px;

                height: 200px;

                background-color: red;

                float: right;

            }

            .box2{

                width: 200px;

                height: 200px;

                background-color: yellow;

                float: right;

            }

            .box3{

                width: 200px;

                height: 200px;

                background-color: deeppink;

                float: right;

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

        <div class="box2"></div>

        <div class="box3"></div>

    </body>

</html>

2>. 浏览器打开以上代码渲染结果

三.div元素浮动不会覆盖文字内容

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>浮动</title>

        <style type="text/css">

            /**

             *     使用通配符选择器去掉默认样式

             */

            *{

                margin: 0;

                padding: 0;

            }

            .box1{

                width: 100px;

                height: 100px;

                background-color: red;

                /**

                 *     浮动的元素不会盖住文字，文字会自动环绕在浮动元素的周围，所以我们可用通过设置浮动来设置文字环绕图片的效果

                 */

                float: left;

            }

            .p1{

                background-color: yellow;

            }

        </style>

    </head>

    <body>

        <div class="box1"></div>

        <p class="p1">

            噫吁嚱，危乎高哉！蜀道之难，难于上青天！蚕丛及鱼凫，开国何茫然！尔来四万八千岁，不与秦塞通人烟。西当太白有鸟道，可以横绝峨眉巅。地崩山摧壮士死，然后天梯石栈相钩连。上有六龙回日之高标，下有冲波逆折之回川。黄鹤之飞尚不得过，猿猱欲度愁攀援。青泥何盘盘，百步九折萦岩峦。扪参历井仰胁息，以手抚膺坐长叹。问君西游何时还？畏途巉岩不可攀。但见悲鸟号古木，雄飞雌从绕林间。又闻子规啼夜月，愁空山。蜀道之难，难于上青天，使人听此凋朱颜！连峰去天不盈尺，枯松倒挂倚绝壁。飞湍瀑流争喧豗，砯崖转石万壑雷。其险也如此，嗟尔远道之人胡为乎来哉！剑阁峥嵘而崔嵬，一夫当关，万夫莫开。所守或匪亲，化为狼与豺。朝避猛虎，夕避长蛇；磨牙吮血，杀人如麻。锦城虽云乐，不如早还家。蜀道之难，难于上青天，侧身西望长咨嗟！

        </p>

    </body>

</html>

2>.浏览器打开以上代码渲染结果

四.内联元素浮动会变成块元素

1>.HTML源代码

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title>浮动</title>

        <style type="text/css">

            .box1{

                background-color: red;

                /**

                 *     在文档流中，子元素的默认宽度默认占父元素的全部;

                 *

                 *     当元素设置浮动以后，会完全脱离文档流，块元素脱离文档流以后，高度和宽度都被内容撑开;

                 */

                float: left;

            }

            .s1{

                /**

                 *     开启span的浮动,内联元素脱离文档流以后会变成块元素，即可用设置宽度和高度啦~

                 */

                float: left;

                width: 100px;

                height: 100px;

                background-color: yellow;

            }

        </style>

    </head>

    <body>

        <div class="box1">我是一个div标签</div>

        <span class="s1">我是一个span标签</span>

    </body>

</html>

2>. 浏览器打开以上代码渲染结果

JavaScript条件和循环以及异常处理的更多相关文章

  1. Python 条件、循环、异常处理

    一.条件语句 1.布尔值 条件语句中,判断条件的值一般是布尔值.即条件为真时,将执行什么,条件为假时,将执行什么. 下面的值在作为布尔表达式的时候,会被解释器看做假(false): False    ...

  2. JavaScript基础——实现循环

    循环是多次执行同一段代码的一种手段.当你需要在一个数组或对象集上重复执行相同的任务时,这是非常有用的. JavaScript提供执行for和while循环的功能. 1.while循环 JavaScri ...

  3. 你可能不知道的java、python、JavaScript以及jquary循环语句的区别

    一.概述 java循环语句分为四种形式,分别是 while, do/while, for, foreach: python中循环语句有两种,while,for: JavaScript中循环语句有四种, ...

  4. javascript里的循环语句

    前序:我一直对于for跟for..in存在一种误解,我觉得for都能把事情都做了,为啥还要for...in...这玩意了,有啥用,所以今天就说说JavaScript里的循环语句. 循环 要计算1+2+ ...

  5. JavaScript里面的循环方法小结

    一,原生JavaScript中的循环: for 循环代码块一定的次数,它有三个参数,来决定代码块的循环次数,第一个是初始值,第二个是终止值,第三个参数是变化规则: //for循环 for(var i ...

  6. javascript递归、循环、迭代、遍历和枚举概念

    javascript递归.循环.迭代.遍历和枚举概念 〓递归(recursion)在数学与计算机科学中,是指在函数的定义中使用函数自身的方法.递归一词还较常用于描述以自相似方法重复事物的过程.例如,当 ...

  7. JavaScript数组forEach循环

    JavaScript数组forEach循环 今天写JavaScript代码把forEach循环数组忘记写法了,在此记录一下以防止未来忘记. let a = [1, 2, 3]; a.forEach(f ...

  8. [译]Javascript中的循环

    本文翻译youtube上的up主kudvenkat的javascript tutorial播放单 源地址在此: https://www.youtube.com/watch?v=PMsVM7rjupU& ...

  9. js基础（条件语句 循环语句）

    条件语句 if语句块的语法形式如下: //只有两种情况下if(条件){要执行的语句块;}else{要执行的语句块;} //多种情况下if(条件){要执行的语句块;}else if(条件){要执行的语句 ...

随机推荐

  1. 记一次Spring的aop代理Mybatis的DAO所遇到的问题

    由来 项目中需要实现某个订单的状态改变后然后推送给第三方的功能,由于更改状态的项目和推送的项目不是同一个项目,所以为了不改变原项目的代码,我们考虑用spring的aop来实现. 项目用的是spring ...

  2. OD之破解密钥文件授权(三)

    除了上次的序列号验证以外,还有这种密钥授权模式,需要密钥文件授权才能打开文件; 老办法,先拖进OD中动态分析再说: 然后F8进行调试这时候发现了一个条件跳转函数jnz下面是说跳转未实现,那我们发现上面 ...

  3. SICP读书笔记 1.1

    SICP CONCLUSION 让我们举起杯,祝福那些将他们的思想镶嵌在重重括号之间的Lisp程序员 ! 祝我能够突破层层代码,找到住在里计算机的神灵! 目录 1. 构造过程抽象 2. 构造数据抽象 ...

  4. Async 异步转同步详细流程解释

      安装 npm install async --save 地址 https://github.com/caolan/async Async的内容主要分为三部分 流程控制: 简化九种常见的流程的处理 ...

  5. Linux内核分析-构造一个简单的Linux系统MenuOS

    构造一个简单的Linux系统MenuOS linux内核目录结构 arch目录包括了所有和体系结构相关的核心代码.它下面的每一个子目录都代表一种Linux支持的体系结构,例如i386就是Intel C ...

  6. Inside the Social Network’s (Datacenter) Network

    摘要: 大量服务提供商投资越来越多的更大数据中心来保证基础计算需求以支持他们的服务.因此,研究人员和行业从业者都集中了大量的努力设计网络结构有效互连和管理流量以保证这些数据中心的性能.不幸的是,数据中 ...

  7. Where To Buy -- proposed by Renqian Luo

    Need 周末在公司加班,公司食堂不开饭,就会想到点外卖.手机里好多外卖APP,同样的店家在不同平台的优惠活动可能不一样,A这边满20减10,B那边满20只减5,但是那边好像有优惠券可以用唉,等等,C ...

  8. Beta冲刺——day1

    Beta冲刺--day1 作业链接 Beta冲刺随笔集 github地址 团队成员 031602636 许舒玲(队长) 031602237 吴杰婷 031602220 雷博浩 031602134 王龙 ...

  9. Helm 安装 wordpress

    1. 前置需要安装 storageclass 然后 安装helm 客户端 helm tiller 服务端 2. 设置 当前的位阿里云的 repo 3. 查找 wordpress的镜像 helm sea ...

  10. POWERSHELL 计划任务的创建，收集DC中失败的登录信息并邮件通知

    (注:本文参考以下前辈文章修改而来,源文章连接:http://itadmindev.blogspot.hk/2011/07/powershell-ad-dc-failed-logins-report. ...