float浮动,定位

1 浮动定位
    1、普通流定位
        普通流,由称为文档流
        块级元素:从上到下一个一个的排列
        行内元素:一行内从左到右的排列
    2、浮动定位
        2.1、什么是浮动定位
        将元素排列在普通流之外,即脱离文档流
        浮动元素不会占据页面空间
        浮动元素会放置在“包含框”的左边或右边
        浮动元素依旧位于包含框之内
        浮动元素可以向左或向右浮动,知道碰见包含框的边缘或另一个已浮动的元素框为止
        2.2、特点
            1、浮动元素边缘不会超过器父元素的边缘
            2、浮动元素不会重叠
            3、浮动知道左右浮动,不会上下浮动
            注意:非块级元素浮动的话, 将会变成块级元素,允许修改width和height
        2.3、处理问题
            1、让块级元素在同一行内显示
            2、修改行内元素的width和height
        2.4、浮动属性
            属性:float
                取值:
                none
                left
                right
            清除浮动所带来的影响:
            属性:clear
            取值:left
                right
                both
        2.5、子级元素的浮动,伪复层元素所带来的影响
            如果一个元素的所有子级内容都是浮动的,那么他的高度就会变成0
            解决方案
            1、设置父容器高度
            2、设置父元素的overflow:hidden;
            3、在父元素中,增加一个空元素,添加clear:both;
2、显示方式
    2.1、display
        none:生成元素没有框,不占据页面空间,隐藏
        block:按块级显示
        inline:按行内方式显示
        inline-block:行内快,所有的元素在一行内显示,允许修改width和height
    使用场合:
        1、控制元素的显示与隐藏
            隐藏:display:none
            显示:
                块级:display:block;
                行内:display:inline;
        2、将行内元素变成块级或行内块
        目的:修改行内元素的宽和高
    2、显示效果
        2.1、visibility
        可见性
        取值:
        visible:默认的,可见的
        hidden:元素不可见,占据页面空间

        问题:visibility:hidden 占据页面空间与display:none的区别 不占据页面空间
        2.2、opacity
            透明度
            取值:0-1
            opacity:0.5;
        3、vertical-align
        垂直方向对齐
        td
        img
            取值:
            baseline:默认,基线对齐
            top:顶部对齐
            bottom:底部对齐
            middle:居中对齐
            放在img上,控制的是img左右两端文本的垂直对齐方式
        4、光标
            改变鼠标的显示效果
            属性:cursor
            取值:
            default
            pointer:小手
            crosshair:+
            text:I
            wait:等待
3、相对定位
    3.1、什么是相对定位
    元素框会相对与他原来的位置偏移某个距离
    3.2、如何用
     position:relative
    left:尺寸
    right:尺寸
    3.3、什么时候用
    元素本身位置的微调
    配合绝对定位使用
4、绝对定位
    4.1、定义:脱离文档流 不占据页面空间
    4.2、初始位置
    相对与最近的已经定位的元素 那么参考位置相对于body进行定位
    4.3、如何使用
    position:absolute;
    4.4、使用场合
    弹出菜单
        
        

转载于:https://www.cnblogs.com/Zs-book1/p/10420594.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/264721.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Visual Studio 2005中编译调试新功能

在日常的编程中,程序员经常离不开的工作之一,就是调试。当写好一段代码或程序后,在运行后总会出现这样那样的问题,比如各样的错误,程序员就必须进行调试,将这些错误排除。在最新出炉的Visual Studio 2005中…

windows7 系统优化大技巧

1. 加快win7系统启动速度首先,打开win7开始菜单在搜索程序框中输入“msconfig”命令,打开系统配置窗口后找到“引导”选项(英文系统是Boot)。win7拥有强大便捷的搜索栏,记住一些常用命令,可以让你操作起来更快捷。 点击“高级选项…

新快现类似产品_小米全新折叠屏产品曝光,预计今年还有更多折叠屏产品亮相...

虽然目前小米并未正式推出旗下的折叠屏设备,但这并不意味着小米放弃了这方面的研究。相反,近日的一些爆料显示了小米在折叠屏设备领域有着多种不同的设想和思路。上个月的相关爆料曾提到过,小米2021年有望推出外折型、内折型和翻盖式三种不同…

全虚拟化和半虚拟化的区别 cpu的ring0~ring3又是什么概念?

ring0是指CPU的运行级别,ring0是最高级别,ring1次之,ring2更次之…… 拿Linuxx86来说, 操作系统(内核)的代码运行在最高运行级别ring0上,可以使用特权指令,控制中断、修改页表、访问…

设置span的宽度

在默认的情况下,利用 css 样式对 span 进行宽度设定是无效,但有时为了某种排版的要求,需要对 span 进行宽度设定,那么如何在 html 中利用 css 样式设定 span 的宽度?思路:这看上去是个很简单的问题&#xf…

dual mysql 获取序列_MySQL JDBC客户端反序列化漏洞

标题: MySQL JDBC客户端反序列化漏洞☆ 背景介绍☆ 学习思路☆ 搭建测试环境☆ 恶意MySQL插件 1) 获取MySQL 5.7.28源码 2) 在rewrite_example基础上修改出evilreplace☆ 测试rewriter插件 1) 安装rewriter.so 2) 在服务端替换SQL查询语句 3) 卸载rewriter.so …

kali linux之edb--CrossFire缓冲区溢出

漏洞的罪恶根源------变量,数据与代码边界不清,开发人员对用户输入没做过滤,或者过滤不严 如这个脚本,写什么,显示什么,但是加上;,|,&&,后面加上系统…

SQL连接查询深度探险

测试环境:Windows XP ProfessionMySQL 5.0.45Oracle 9iDB2 UDB 9.1测试的SQL脚本如下:此脚本适合MySQL、DB2,如果要在Oracle上执行,需要做个替换BIGINTINTEGER、VARCHARVARCHAR2。CREATETABLECUSTOMERS (ID BIGINT NOTNULL,NAME V…

[Bug]Object reference not set to an instance of an object.

引言 今天在客户这儿,由一个问题导致,需求的变化,不得不修改代码,在记录日志中出现该问题。 原因 通过id查找相关信息,没有判断是否为null,集合是否有数据。 Object reference not set to an instance of a…

自锁时间电路plc_1篇文章,4幅图,了解PLC接线和控制图就是这么简单

有网友留言说看不懂plc梯形图,不知道如何将电气控制原理图转化为plc接线图,今天就系统的来看一下plc的原理和接线,再转化为plc接线图,我们需要借助一个最简单的单向过载保护的自锁控制电路。来看一下电路元器件,FR热机…

Python~字典快速上手

目录 Key的重要性 一 创建字典{} 二 字典用key查找 in(遍历)和[]用key查找 keyerror in和[]的效率对比 三 字典的插入/修改/删除(先查找) ​编辑 四 字典增删查改/遍历的效率 五 字典的遍历 for遍历可迭代对象拿到key 与创建顺序相同 keys/values/items方法 六 可…

sql 相关子查询

相关子查询3个执行步骤 1.外部查询获得一个记录,然后将该记录传递到内部查询. 2.内部查询根据传递的值执行. 3.内部查询将结果值传回外部查询,外部查询利用这些值完成处理过程.转载于:https://www.cnblogs.com/Spinoza/p/10426904.html

常用的一些javascript小技巧

常用的一些javascript小技巧 [作者:oror,from蓝色理想] 事件源对象 event.srcElement.tagName event.srcElement.type ……………………………… 捕获释放 event.srcElement.setCapture(); event.srcElement.releaseCapture();事件按键event.keyCode …

活动目录服务器(windows server 2008)

1、在服务器管理器中添加角色,勾选Active Directory域服务、DNS服务器进行安装2、安装好后运行dcpromo进入域服务安装向导,选择高级模式安装3、出现部署配置时,勾选新林中新建4、在命名林输入域名称(ganen5.local)5、在…

漫步者蓝牙只有一边有声音_漫步者DreamPods半个月上手体验:谈谈那些好的和不好的地方...

随着手机逐渐取消了耳机孔,越来越多的人们开始使用上了蓝牙耳机。在当今这个飞速发展的时代,蓝牙耳机蓝无疑成为了新时代的宠儿。无论是上班族还是当代大学生等年轻化群体,蓝牙耳机无疑成为了一个不错的喜好选择。但是面对市面上如此多的蓝牙…

MySQL源码包编译安装

标题:MySQL数据库实例部署时间:2019年5月2日内容:MySQL源码包进行编译,然后部署MySQL单实例1. MySQL源码包编译1.1 安装编译环境# yum install -y gcc gcc-c# yum install -y ncurses-devel.x86_64# yum install -y libaio.x86_64…

moss 部署问题

(一) 编辑PostBuildActions.bat 在编译过程中如果你把vs安装在D盘那么你必须将%programfiles%\Microsoft Visual Studio 8\SDK\v2.0\Bin替换成D:\Program Files\Microsoft Visual Studio 8\SDK\v2.0\Bin否则找不到gacutil.exe,无法编译成功。…

c++ 输出控制iomanip

2019独角兽企业重金招聘Python工程师标准>>> 1输出精度控制 #include<iostream> #include <iomanip>//精度控制相关头文件 using namespace std;int main(){streamsize preccout.precision(); //获取默认精度 cout<<"default precisi…

c++ 可视化界面_这些算法可视化网站助你轻松学算法

作者&#xff1a;守望&#xff0c;Linux应用开发者&#xff0c;目前在公众号【编程珠玑】 分享Linux/C/C/数据结构与算法/工具等原创技术文章和学习资源。前言无疑&#xff0c;数据结构与算法学习最大的难点之一就是如何在脑中形象化其抽象的逻辑步骤。而图像在很多时候能够大大…

c#中的接口的定議以及接口與抽象类的區別

c#中的接口 目录 接口的定义 接口与抽象类 接口的的实现 接口的的多态性 一&#xff0e;接口的定义 定义&#xff1a;定义一个协定。实现接口的类或结构必须遵守其协定。 简单的说就是接口或者类之间交互时遵守的一个显示定义。最初接触“类与类之间通过接口交互”这个概念时&…