浮动

1.定位概述

        元素应该出现在网页中的哪个位置

    2.定位的分类

        1.普通流定位(文档流定位)

           块元素:默认是从上往下排

           行元素:默认从左往右排序

        2.浮动定位

        3.相对定位

        4.绝对定位

        5.固定定位

    3.浮动定位(俯视)

        1.什么是浮动定位或者特点

            1.会将元素排除在文档流之外(脱离文档流)

            2.元素不再占据页面空间

            3.其他元素要向前补位

            4.浮动元素会停靠在父元素的左边或者右边

              或者

              停靠在已经浮动的元素的边缘上

        2.处理的处理(作用)

            1.让块元素在一行显示

        3.属性

            float:

            取值:

                right   右浮动

                left    左浮动

                none    默认 不浮动

#d1{
width:200px;
height:100px;
background-color: red;
float:left;
}
#d2{

width:200px;
height:100px;
background-color:green;
}
#d3{
background-color:purple;
width:200px;
height:100px;
}

    将红色背景的div想左边漂浮,则原来的绿色div不显示是红色被遮挡在面。 

将三块div全部想左漂浮,则全部展现。块元素浮动处理则展现在一行显示,排序body内div排布顺序按照顺序排列。

#d1{
width:200px;
height:100px;
background-color: red;
float:left;
}
#d2{

width:200px;
height:100px;
background-color:green;
float:left;
}
#d3{
background-color:purple;
width:200px;
height:100px;
float:left;
}

   4.特殊处理

            1.如果父元素的宽度已经

                装不下所有已经浮动的元素,

                那么最后一个将会换行

            2.浮动元素如果不设置宽的话,

               那么元素的宽度将会自适应

            3.所有浮动起来的元素都会变成块元素

                块元素:能设置宽和高

            4.浮动元素对 文字 行内元素 有特殊的影响

                 特殊的影响:文本环绕

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏闻道于事

CSS样式表

CSS样式表的样式主要可以分为大小,背景,字体,对齐方式,边界边框,列表方块,格式布局等。 元素的大小: #div1{ width:30...

4318
来自专栏Sorrower的专栏

界面无小事(五):自定义TextView

1123
来自专栏杂七杂八

css布局使用

目录 常用居中 垂直居中 水平居中 垂直水平居中 单列布局 双列&三列布局 ---- 常用居中 垂直居中 单行文本垂直居中 <div class="pare...

3179
来自专栏安富莱嵌入式技术分享

【安富莱二代示波器教程】第8章 示波器设计—测量功能

二代示波器测量功能实现比较简单,使用2D函数绘制即可。不过也专门开辟一个章节,为大家做一个简单的说明,方便理解。

1042
来自专栏我和未来有约会

Blend基础-布局控件

布局 什么是布局? Panels控件(其实就是容器控件) 对内部的子控件提供了自动布局功能 可以在容器控件内继续添加容器控件(一个复杂的界面往往是多种容器控件...

2406
来自专栏deed博客

Css代码

2292
来自专栏九彩拼盘的叨叨叨

学习纲要:CSS 常用选择器

1174
来自专栏CaiRui

CSS

CSS的四种引入方式: 一、行内样式 <div style="background-color: blue;color: brown">cairui</div>...

2086
来自专栏分享达人秀

TextView属性和方法大全

前面简单学习了一些Android UI的一些基础知识,那么接下来我们一起来详细学习Android的UI界面基本组件。 一、认识TextView 我们知道前面学习...

2575
来自专栏python3

tkinter -- Canvas(4)

先使用 PhotoImage 创建 GIF 图像,再将 image 属性来设置为新创建的 img

582

扫码关注云+社区

领取腾讯云代金券