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浮动、定位到底什么鬼?的更多相关文章

  1. 18 12 28 css 浮动 定位

    浮动 浮动特性 1.浮动元素有左浮动(float:left)和右浮动(float:right)两种 2.浮动的元素会向左或向右浮动,碰到父元素边界.其他元素才停下来 3.相邻浮动的块元素可以并在一行, ...

  2. css 浮动 定位

    浮动 元素的浮动是指设置了浮动属性的元素会脱离标准普通 流的控制,移动到其父元素中指定位置的过程.  语法: float   . left    . right . none(默认) 注意:    1 ...

  3. css浮动(float)及清除浮动的几种实用方法

    CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float) (1)html文档流 自窗体自上而下分成一行一行,并 ...

  4. css浮动(float)及如何清除浮动

    前言: CSS浮动是现在网页布局中使用最频繁的效果之一,而浮动可以帮我们解决很多问题,那么就让我们一起来看一看如何使用浮动. 一.css浮动(float)(1)html文档流 自窗体自上而下分成一行一 ...

  5. CSS浮动、定位

    这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...

  6. css清除浮动定位造成的异常

    清除浮动是为了解决高度塌陷的问题:内层有好几个div有宽有高,并且选择了浮动定位,但是外层的div却并没有设置宽高.在非IE浏览器(如Firefox)下,当容器的高度为auto,且容器的内容中有浮动( ...

  7. CSS浮动属性Float到底什么怎么回事,下面详细解释一下

    float 是 css 的定位属性.在传统的印刷布局中,文本可以按照需要围绕图片.一般把这种方式称为“文本环绕”.在网页设计中,应用了CSS的float属性的页面元素就像在印刷布局里面的被文字包围的图 ...

  8. CSS彻底研究(3) - 浮动,定位

    Github pages 博文 CSS彻底研究(3)-浮动,定位 一 . 浮动float I . 定义及规则 float默认为none,对应标准流的情况.当float : left;时,元素就会向其父 ...

  9. css区块定位之浮动与清除属性

    float属性将所属标记的显示空间指定为一个浮动元素,并使其周围对象按一定的方式环绕它排列. float属性的作用就象图像和表格的align属性一样,但可以用到任何元素上. clear属性的作用是禁止 ...

随机推荐

  1. tf.expand_dims

    想要增加一维,可以使用tf.expand_dims(input, dim, name=None)函数 t = np.array(np.arange(1, 1 + 30).reshape([2, 3, ...

  2. 利用已控的标边界一台机器的 beacon对目标内网进行各种存活探测

    本节的知识摘要: 基于常规 tcp / udp 端口扫描的内网存活探测 基于 icmp 的内网存活探测 基于 arp 的内网存活探测 加载外部脚本进行的各种存活探测 基础环境说明:: WebServe ...

  3. [LeetCode] 53. Maximum Subarray 最大子数组 --动态规划+分治

    Given an integer array nums, find the contiguous subarray (containing at least one number) which has ...

  4. ht-7 treeSet特性

    TreeSetTreeSet可以对set集合中的元素进行排序,默认按照asic码表的自然顺序排序,之所以treeset能排序是因为底层是二叉树,数据越多越慢,TreeSet是依靠TreeMap来实现的 ...

  5. php strtr()函数 语法

    php strtr()函数 语法 作用:转换字符串中的某些字符直线电机生产厂家 语法:strtr(string,from,to)或者strtr(string,array) 参数: 参数 描述 stri ...

  6. mybatisplus中使用SqlRunner出错

    错误描述: SqlSession [org.apache.ibatis.session.defaults.DefaultSqlSession@739488d7] was not registered ...

  7. 批量搞机(二):分布式ELK平台、Elasticsearch介绍、Elasticsearch集群安装、ES 插件的安装与使用

    一.分布式ELK平台 ELK的介绍: ELK 是什么? Sina.饿了么.携程.华为.美团.freewheel.畅捷通 .新浪微博.大讲台.魅族.IBM...... 这些公司都在使用 ELK!ELK! ...

  8. 【HDOJ6651】Final Exam(贪心)

    题意:有n门课,价值之和为m,每门课的价值可能是0到m 一门价值为x的课需要花至少x+1时间准备才能通过 问不管价值如何分配都能通过至少k门课的最小总准备时间 m,n,k<=1e9 思路: #i ...

  9. 2、投资之基金 - IT人思维之投资

    笔者曾经对基金进行投资,但是当时对基金不是很了解,只是为了投资而去投资.现在,笔者对基金的投资有了更深入的了解认识,所以就有了本文. 基金投资在国内还是挺流行的,虽然其是从国外引进来的概念经验,但是国 ...

  10. js不区分大小写匹配并代码高亮,且不改变原来文本大小写格式

    //高亮字符串 string: 需要处理的字符串,keyword:键盘输入的内容 function heightLight(string, keyword) { var reg = new RegEx ...