css浮动、定位到底什么鬼?
css操作元素位置有以下几种方式:float、position、top等。
I float part
1.浮动首先会先将元素在正常文档流中删除,父容器无法获取元素高度,但是该元素依然影响布局。
2.任何元素被浮动后先生成一个块级框,然后为自己指定一个包含块。
3.浮动元素与正常元素重叠时,行内框自行置顶,块框只有内容置顶。
4.定位属性强于浮动属性。
5.clear清除是产生一个清除域,加在上外边距之外,域中不允许浮动元素的存在。
II position part
1.relative、static、absolute、fixed四种定位的定义比较简单,略过。
2.固定定位(fixed)与绝对定位(absloute)基本一样,只是fixed的包含块是视窗。
3.absolute定位元素自动将最近的一个relative定位的包含块作为父元素。
III top·· part
1.top等的偏移定义了浮动元素距离其包含块对应边的偏移。
2.除了bottom之外,设为auto的偏移项会相对于元素的静态位置定位。
3.左右外边距都是auto,但left、right、width不是auto。元素会保持绝对居中。
4.相对定位一个元素,它的子元素会拥有一个处于它本来所在位置的一个包含块。
css浮动、定位到底什么鬼?的更多相关文章
- 18 12 28 css 浮动 定位
浮动 浮动特性 1.浮动元素有左浮动(float:left)和右浮动(float:right)两种 2.浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 3.相邻浮动的块元素可以并在一行, ...
- css 浮动 定位
浮动 元素的浮动是指设置了浮动属性的元素会脱离标准普通 流的控制,移动到其父元素中指定位置的过程. 语法: float . left . right . none(默认) 注意: 1 ...
- css浮动(float)及清除浮动的几种实用方法
CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...
- css浮动(float)及如何清除浮动
前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- css清除浮动定位造成的异常
清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...
- CSS浮动属性Float到底什么怎么回事,下面详细解释一下
float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图 ...
- CSS彻底研究(3) - 浮动,定位
Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...
- css区块定位之浮动与清除属性
float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...
随机推荐
- [sql 注入] 注入类型
基于整型的注入: url:http://localhost/?id=12 拼接sql:$sql = "select * from user where id = {$_GET['id']}& ...
- 二、MyBatis-HelloWorld
环境准备 1.创建数据库表 create table tbl_employee ( id ) primary key AUTO_INCREMENT comment "ID", la ...
- 转Serial,Parallel,CMS,G1四大GC收集器特点小结
转 https://blog.csdn.net/u013812939/article/details/48782343 1.Serial收集器 一个单线程的收集器,在进行垃圾收集时候,必须暂停其他所有 ...
- robot framework 自动化框架环境搭建
win10 64位系统 1.安装python2.7.15 在官网https://www.python.org/downloads/下载对应版本 在同一台电脑上同时安装Python2和Python3参考 ...
- RMQ Message ACK
原创转载请注明出处:https://www.cnblogs.com/agilestyle/p/11808680.html 消息持久化机制 消息丢失了,需要将队列持久化,即将autoDelete设置成f ...
- 小记:web安全测试之——固定session漏洞
今天因为项目背景需要,需要检测web接口是否一些安全隐患. 无奈于从未掌握有系统的渗透性知识,只好根据个人对网络协议和 web 的理解,做一些探索,最终发现了一个session fixation at ...
- hud 4347 The Closest M Points(KD-Tree)
传送门 解题思路 \(KD-Tree\)模板题,\(KD-Tree\)解决的是多维问题,它是一个可以储存\(K\)维数据的二叉树,每一层都被一维所分割.它的插入删除复杂度为\(log^2 n\),它查 ...
- 制作自己的win7系统
每次安装完纯净版的系统,然后是漫长的打补丁,装驱动,装软件.不妨制作一个自己的系统光盘(也就是GHOST系统),再要重装系统时,直接用这个系统光盘,一键安装,方便省时. 制作GHOST系统,就是将本地 ...
- day14—jQuery UI 之dialog部件
转行学开发,代码100天——2018-03-30 今天主要展示jQuery UI 之dialog部件的用法, 参考文档:https://jqueryui.com/dialog/ 本文记录分享初始的引用 ...
- Openstack_SQLAlchemy 修改数据库的表结构
目录 目录 前言 更改数据库的方法 为数据库添加一张或多张新表 删除一张或多张表 为旧表添加一个字段 为旧表更新一个字段 为旧表初始化一条新的记录 最后 前言 SQLAlchemy 的使用方法和相关基 ...