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属性的作用是禁止 ...
随机推荐
- tf.expand_dims
想要增加一维,可以使用tf.expand_dims(input, dim, name=None)函数 t = np.array(np.arange(1, 1 + 30).reshape([2, 3, ...
- 利用已控的标边界一台机器的 beacon对目标内网进行各种存活探测
本节的知识摘要: 基于常规 tcp / udp 端口扫描的内网存活探测 基于 icmp 的内网存活探测 基于 arp 的内网存活探测 加载外部脚本进行的各种存活探测 基础环境说明:: WebServe ...
- [LeetCode] 53. Maximum Subarray 最大子数组 --动态规划+分治
Given an integer array nums, find the contiguous subarray (containing at least one number) which has ...
- ht-7 treeSet特性
TreeSetTreeSet可以对set集合中的元素进行排序,默认按照asic码表的自然顺序排序,之所以treeset能排序是因为底层是二叉树,数据越多越慢,TreeSet是依靠TreeMap来实现的 ...
- php strtr()函数 语法
php strtr()函数 语法 作用:转换字符串中的某些字符直线电机生产厂家 语法:strtr(string,from,to)或者strtr(string,array) 参数: 参数 描述 stri ...
- mybatisplus中使用SqlRunner出错
错误描述: SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@739488d7] was not registered ...
- 批量搞机(二):分布式ELK平台、Elasticsearch介绍、Elasticsearch集群安装、ES 插件的安装与使用
一.分布式ELK平台 ELK的介绍: ELK 是什么? Sina.饿了么.携程.华为.美团.freewheel.畅捷通 .新浪微博.大讲台.魅族.IBM...... 这些公司都在使用 ELK!ELK! ...
- 【HDOJ6651】Final Exam(贪心)
题意:有n门课,价值之和为m,每门课的价值可能是0到m 一门价值为x的课需要花至少x+1时间准备才能通过 问不管价值如何分配都能通过至少k门课的最小总准备时间 m,n,k<=1e9 思路: #i ...
- 2、投资之基金 - IT人思维之投资
笔者曾经对基金进行投资,但是当时对基金不是很了解,只是为了投资而去投资.现在,笔者对基金的投资有了更深入的了解认识,所以就有了本文. 基金投资在国内还是挺流行的,虽然其是从国外引进来的概念经验,但是国 ...
- js不区分大小写匹配并代码高亮,且不改变原来文本大小写格式
//高亮字符串 string: 需要处理的字符串,keyword:键盘输入的内容 function heightLight(string, keyword) { var reg = new RegEx ...