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. jbpm4.4 demo3

    package cn.itcast.c_processinstance; import java.util.List; import org.jbpm.api.Configuration; impor ...

  2. 算法基础:最大递减数问题(Golang实现)

    给出一个非负整数,找到这个非负整数中包括的最大递减数.一个数字的递减数是指相邻的数位从大到小排列的数字. 如: 95345323,递减数有:953,95,53,53,532,32, 那么最大的递减数为 ...

  3. [caffe]深度学习之图像分类模型VGG解读

    一.简单介绍 vgg和googlenet是2014年imagenet竞赛的双雄,这两类模型结构有一个共同特点是go deeper.跟googlenet不同的是.vgg继承了lenet以及alexnet ...

  4. 微软正式提供Visual Studio 2013正式版下载(附直接链接汇总)

    转自 http://www.iruanmi.com/visual-studio-2013/ 微软已经向MSDN订阅用户提供了Visual Studio 2013正式版镜像下载,只是非MSDN用户能够在 ...

  5. 合并两个vectcor——2013-08-26

    vector<int> v1; vector<int> v2; for(int i=0; i<5; i++) { v1.push_back(i); if(i%2==1) ...

  6. phpcms 源码分析五:文件缓存实现

    这次是逆雪寒的文件缓存实现代码分析: /* [/php] PHPCMS的文本缓存实现: [php] <?php /* 这个文件里面全是有关生成文本缓存的函数.文本缓存是个好东西.一般的项目,我们 ...

  7. install lua client for redis-server on Mac

    1. lua client library for redis-server https://github.com/nrk/redis-lua 2. dependent luasocket https ...

  8. youku的js脚本的工具函数和初始化方法

    定义日志输出函数 (function(){ if(window['console']){ return; } window['console'] = { log: function(){} ,clea ...

  9. 安卓SQLite数据库操作,半小时开发新闻管理系统,纯干货

    本教程致力于可以快速的学习安卓软件开发,希望能通过一系列自己手写的教程,帮助正在学习或想要学习安卓开发的同仁. 本教程由今日头条-全栈攻城狮号首发,都是一个字一个字码的.请尊重劳动成果,转载请注明出处 ...

  10. "ORA-00054: 资源正忙, 但指定以 NOWAIT 方式获取资源, 或者超时失效"的快速解决方法

    引自:http://hi.baidu.com/fynaa/item/c2978952d8d542dfd48bacf6 讲了一大堆: 综合下: 解决方案:select session_id from v ...