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. A Tour of Go For is Go's "while"

    At that point you can drop the semicolons(分号): C's while is spelled for in Go. package main import & ...

  2. [一]初识Poi

    示例代码: package com.lxl.poi; import java.io.FileOutputStream; import org.apache.poi.hssf.usermodel.HSS ...

  3. php中的$_SERVER从哪来

    前几个月学了个tcpdump抓包命令,遇到任何问题总想试试,真是程序员的终级武器呀,它像显微镜一下,把任何的丑陋的bug都显示在你的面前. 为什么有题目中所说的疑问呢?因为我发现在不同的环境下面,我获 ...

  4. C#- 基于Lumisoft.NET组件的POP3邮件接管和删除操纵

    Lumisoft.NET组件是一个很是强大的邮件发送.邮件接管等功能的开源组件,一般用它来处理惩罚邮件的相干操纵,是很是合适的.之前也写过一些该组件的漫笔文章,不过主如果哄骗来发送邮件居多,比来因为项 ...

  5. [置顶] 单机版hadoop实例安装

    目标:运行单机版hadoop http://localhost:50030mapredule监控界面 http://localhost:50070HDFS监控页面 -->安装linux系统 -- ...

  6. URAL 1992 CVS 链表

    不更改链表结构,只是添加节点,没有删除节点.通过记录和更改标记来模拟题意的插入和删除,复制 指针模拟链表: 预开指针,存在M[]中,可以提高效率 #include<functional> ...

  7. 在Visual Studio中使用Pseudovariables来帮助调试

    博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在Visual Studio中使用Pseudovariables来帮助调试.

  8. java web知识点总结

    创建与销毁 ServletContext HttpRequest HttpSession 1.ServletContext 创建:启动服务器时就创建,服务为每个web应用创建该项目的ServleCon ...

  9. HttpClientUtil

    package com.uniubi.management.util; import java.io.IOException; import java.io.InterruptedIOExceptio ...

  10. linux下.run文件的安装与卸载

    linux下.run文件的安装与卸载   .run文件的安装很简单,只需要为该文件增加可执行属性,即可执行安装 以 virtualbox 的安装文件 virtualbox-3.1.6-59338-Li ...