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. sql优化详细介绍学习笔记

    因为最近在面试,发现sql优化这个方面问的特别特别的多.之前都是零零星星,不够全面的了解一点,刚刚在网上查了一下,从 http://blog.csdn.net/zhushuai1221/article ...

  2. sass：常用备忘

    一.变量 所有变量以$开头 $font_size: 12px; .container{ font-size: $font_size; } 如果变量嵌套在字符串中,需要写在#{}中 $side : le ...

  3. mount命令详解及常见问题汇总

    一 .mount命令(用来挂载硬盘或镜像等) 用法:mount [-t vfstype] [-o options] device dir1.-t vfstype 指定文件系统的类型,通常不必指定.mo ...

  4. pyinstaller将python编写的打卡程序打包成exe

    编写了一个简易的定时提醒下班打卡程序,python代码如下: #coding:utf-8 import time import datetime from tkMessageBox import * ...

  5. 蓝牙BLE实用教程（转载）

    欢迎使用 小书匠(xiaoshujiang)编辑器,您可以通过 设置 里的修改模板来改变新建文章的内容. 1.蓝牙BLE常见问答 Q: Smart Ready 和 Smart 以及传统蓝牙之间是什么关 ...

  6. 20181204-4 互评Final版本

    此次作业要求参见https://edu.cnblogs.com/campus/nenu/2018fall/homework/2478 互评 一.互评Final版本——杨老师粉丝群<PinBall ...

  7. Notes of Daily Scrum Meeting（12.17）

    我们会尽量安排好时间,在其他作业不受影响的情况下加快项目的进度,在Deadline之前完成Beta阶段的工作. 今天的团队工作总结如下: 团队成员 今日团队工作 陈少杰 调试网络连接,补充后端代码 王 ...

  8. 20135202闫佳歆--week2 操作系统是如何工作的--学习笔记

    此为个人学习笔记存档 week 2 操作系统是怎么工作的 一.计算机是如何工作的?--三个法宝 (一)三个法宝 1.存储程序计算机 所有计算机的基础性的逻辑框架. 2.函数调用堆栈 在低级语言中并不很 ...

  9. 第一个spring冲刺总结及后诸葛亮报告（附团队贡献分）

    眨眼就完结了第一阶段的冲刺了,之前因为学校停电停水等诸多原因而导致冲刺完毕时间的推迟. 第一阶段总体是做到了运算的功能,只是一些基本的功能实现,但能保证的容错性能较高. 1.在普遍的四则运算中都能见到 ...

  10. [UWP 开发] 一个简单的Toast实现

    Toast简介 在安卓里Toast是内置原生支持,它是Android中用来显示显示信息的一种机制.它主要用于向用户显示提示消息,没有焦点,显示的时间有限,过一定的时间就会自动消失.在UWP中虽然没有原 ...