CSS中,存在3种定位机制:
标准文档流(Normal flow)
* 特点:从上到下,从左导游,输出文档内容
* 由块级元素和行级元素组成

浮动(Floats)
* 能够实现横向多列布局
* 设置了浮动的元素,仍旧处于标准文档流中
* 注意:当元素没有设置宽度值,而设置了浮动属性,
元素的宽度随内容的变化而变化,
同时,高度也没办法扩展了,所以要清除浮动的影响
* 清除浮动常用方法:
* clear:both; 对于紧邻的元素有效
* 设置width:100%(或固定宽度)+overflow:hidden;

绝对定位(Absolute positioning)
* 注意:当元素没有设置宽度值,而设置了定位属性,
元素的宽度随内容的变化而变化,
* 实现横向两列布局
* 常用于一列固定宽度,另一列宽度自适应的情况
* 父元素relative
自适应宽度元素绝对定位
注意:固定宽度列的高度 > 自适应宽度的列

CSS定位机制的更多相关文章

  1. CSS定位机制总结

    1,CSS 有三种基本的定位机制:普通流.浮动和绝对定位.除非专门指定,否则所有框都在普通流中定位.2,普通流定位:块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来.行内框在 ...

  2. CSS定位机制:浮动 float及清除浮动的常用方法

    CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列 块元素的特征: 独占一行 可以设置宽高 如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ...

  3. CSS定位机制之浮动定位float

    一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果   (一).块元素(div)在文档流中默认垂直排列,如果 ...

  4. CSS 定位机制 position

    position属性W3School有详细介绍 1.(position:relative;)相对定位会按照元素的原始位置对该元素进行移动.relative 2.(position:absolute;) ...

  5. CSS中的三种基本的定位机制

    CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...

  6. css定位

    文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...

  7. (七)CSS定位(Positioning)

    CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...

  8. CSS 定位 (Positioning) 实例

    CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...

  9. CSS学习总结3:CSS定位

    CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...

随机推荐

  1. Android UI开发第三十四篇——SlidingPaneLayout

    SlidingPaneLayout也是系统支持的高级控件,是Android团对在2013 google IO大会期间更新的Support库(Version 13)中新加入的重要的功能.它支持左右滑动菜 ...

  2. Activity 的启动模式

    好久没用过那几种activity的启动模式了,如今看到singletop竟然傻了眼,完全忘记了这几种启动模式的区别!隧将两年前的总结翻出来,通读一遍那晦涩难懂的记录,又理解了一遍,在以前记录的基础上, ...

  3. 自定义Dictionary支持线程安全

    本文转载:http://www.cnblogs.com/kiddo/archive/2008/09/25/1299089.html 我们说一个数据结构是线程安全指的是同一时间只有一个线程可以改写它.这 ...

  4. Chapter 1 Securing Your Server and Network(6):为SQL Server訪问配置防火墙

    原文出处:http://blog.csdn.net/dba_huangzj/article/details/38082123,专题文件夹:http://blog.csdn.net/dba_huangz ...

  5. 用sp_addlinkedserver建立链接服务器(sql server2008中通过测试)

    --在SQL SERVER 2008里,可以按以下的方式建立链接服务器 ? EXEC  sp_addlinkedserver          @server='Test',--这里是给链接服务器取的 ...

  6. HDU - 1693 Eat the Trees(多回路插头DP)

    题目大意:要求你将全部非障碍格子都走一遍,形成回路(能够多回路),问有多少种方法 解题思路: 參考基于连通性状态压缩的动态规划问题 - 陈丹琦 下面为代码 #include<cstdio> ...

  7. 数扰结构-visualization

    http://www.cs.usfca.edu/~galles/visualization/Algorithms.html?url_type=39&object_type=webpage&am ...

  8. 整理 iOS 9 适配中出现的坑

    本文主要是说一些iOS9适配中出现的坑,如果只是要单纯的了解iOS9新特性可以看瞄神的开发者所需要知道的 iOS 9 SDK 新特性.9月17日凌晨,苹果给用户推送了iOS9正式版,随着有用户陆续升级 ...

  9. 深入理解计算机系统第二版习题解答CSAPP 2.6

    使用打印字节的方式可以知道十进制数12345的十六进制为0x00003039,十进制浮点数12345.0的十六进制为0x4640E400. 转换为二进制为 /* 0 0 0 0 3 0 3 9 *** ...

  10. IDispose(), Finalize()

    C#  using 用法: 1. 作为指令,用于为命名空间创建别名或导入其他命名空间中定义的类型.(见例1-1) 2. 作为语句,用于定义一个范围,在此范围的末尾将释放对象.(见例1-2) (例子1- ...