浮动

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 条评论
登录 后参与评论

相关文章

  • 边框阴影

    十月梦想
  • 框模型

         元素框的实际宽度:width+左右外边距+左右border边框+左右内边距

    十月梦想
  • CSS边框

    border-方向:width style color(border对应分别是宽度 样式 颜色中间空格隔开。)

    十月梦想
  • css3的学习笔记

    适合初学者以及没看过css3的人快速了解css3的主要内容。 1.opacity ----------------------取值0-1之间,给整个元素和...

    IMWeb前端团队
  • css3的学习笔记

    1.opacity ----------------------取值0-1之间,给整个元素和其所有子元素设置透明度级别

    IMWeb前端团队
  • 前端课程——颜色与单位

    CSS 中的前景色和背景色就是 color 和 backgorund-color 两个属性,其中 color 属性表示前景色,background-color ...

    Dreamy.TZK
  • Zabbix监控(十七):巧妙使用Simple check ping 原

    说明:Simple check一般用于被监控的对象上无法安装客户端的情况,通过检测网络通讯状态及端口状态来监控对象的存活情况。

    拓荒者
  • Window环境下搭建Vue.js开发环境

    笔者最近在进行前端的学习,在点完了HTML5、CSS3、JavaScript等技能树之后,是时候开始框架的学习了。目前为止前端框架呈现出React、Angula...

    Steve Wang
  • 电商数据分析时的excel的基本操作(吐血总结)

    一般的使用Excel的工作习惯 1.保留原始文件,新建一个Sheet进行处理数据存放,或者另外COPY一份新的文档,尽量保持原始数据的原貌,因为我们都不知道啥时...

    CDA数据分析师
  • Codewarrior 中的 .prm

    例1 RAM = READ_WRITE DATA_NEAR 0x2000 TO 0x3FFF;

    py3study

扫码关注云+社区

领取腾讯云代金券