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. JavaScript- The Good Parts Chapter 5 Inheritance

    Divides one thing entire to many objects;Like perspectives, which rightly gazed uponShow nothing but ...

  2. oracle 表空管理方式(LMT)、ASSM段管理方式、一级位图块、二级位图块、三级位图块。

    今天是2013-12-16,今天和明天是我学习oracle生涯中一个特殊的日子.今天晚上进行了一下表空间管理方式的学习,在此记录一下笔记. 对于oracle数据库最小i/0单位是数据块,最想分配空间单 ...

  3. fastjson对Date的处理

    对日期的序列化: 一种方法是通过注解 Java代码 ? 1 2 @JSONField (format="yyyy-MM-dd HH:mm:ss")   public Date bi ...

  4. hibernate笔记加强版

    hibernate 一. hibernate介绍 hibernate事实上就是ormapping框架,此框架的作用就是简单话数据库的操作. hibernate就是将用户提交的代码.參照持久化类配置文件 ...

  5. jfinal文件上传和form表单值为null的解决方法

    今天使用jfinal做上传提交的时候,遇到一个问题:添加了上传功能,原来的form表单submit提交时所有值都为null了,研究了很长时间,终于发现 在jfinal上传时候,jsp加 enctype ...

  6. c# 可以有多个Main()函数

    可以有多个Main()函数,这样写:namespace ConsoleApp1{class Program{static void Main(string[] args){Console.WriteL ...

  7. Java开发之I/O读取文件实例详解

    在java开发或者android开发中,读取文件是不可避免的,以下对java开发中读取文件做了归纳和详解: 1.按字节读取文件内容2.按字符读取文件内容3.按行读取文件内容 4.随机读取文件内容 pa ...

  8. c#中[Flags] 枚举类型定义问题_百度知道

    [Flags]的微软解释是“指示可以将枚举作为位域(即一组标志)处理.”其实就是在编写枚举类型时,上面附上Flags特性后,用该枚举变量是既可以象整数一样进行按位的“|”或者按位的“&”操作了 ...

  9. oracle数据库入门sql语句

    数据库: 命名规范问题 依然是 _流.看来也确实应该抽空 来处理一下 今天吧,不行时间不能浪费.要更加专注.累了 就睡,醒来 就 好好 弄东西.白天 哪怕累一些,强度 大一些,晚上也可以抽空出去.溜溜 ...

  10. Java Interface and Abstraction

    本文引用资源申明: http://blog.csdn.net/xw13106209/article/details/6923556 http://www.cnblogs.com/dolphin0520 ...