CSS定位机制
CSS中,存在3种定位机制:
标准文档流(Normal flow)
* 特点:从上到下,从左导游,输出文档内容
* 由块级元素和行级元素组成
浮动(Floats)
* 能够实现横向多列布局
* 设置了浮动的元素,仍旧处于标准文档流中
* 注意:当元素没有设置宽度值,而设置了浮动属性,
元素的宽度随内容的变化而变化,
同时,高度也没办法扩展了,所以要清除浮动的影响
* 清除浮动常用方法:
* clear:both; 对于紧邻的元素有效
* 设置width:100%(或固定宽度)+overflow:hidden;
绝对定位(Absolute positioning)
* 注意:当元素没有设置宽度值,而设置了定位属性,
元素的宽度随内容的变化而变化,
* 实现横向两列布局
* 常用于一列固定宽度,另一列宽度自适应的情况
* 父元素relative
自适应宽度元素绝对定位
注意:固定宽度列的高度 > 自适应宽度的列
CSS定位机制的更多相关文章
- CSS定位机制总结
1,CSS 有三种基本的定位机制:普通流.浮动和绝对定位.除非专门指定,否则所有框都在普通流中定位.2,普通流定位:块级框从上到下一个接一个地排列,框之间的垂直距离是由框的垂直外边距计算出来.行内框在 ...
- CSS定位机制:浮动 float及清除浮动的常用方法
CSS的定位机制 1.普通流(标准流) 默认状态,元素自动从左往右,从上往下排列 块元素的特征: 独占一行 可以设置宽高 如果不设置宽度,宽度默认为容器的100% 常见的块元素:div p h1-h6 ...
- CSS定位机制之浮动定位float
一.浮动定位实现的效果 二.使用float实现浮动定位 三.使用clear属性清除浮动定位 四.浮动定位的应用(布局) 一.浮动定位实现的效果 (一).块元素(div)在文档流中默认垂直排列,如果 ...
- CSS 定位机制 position
position属性W3School有详细介绍 1.(position:relative;)相对定位会按照元素的原始位置对该元素进行移动.relative 2.(position:absolute;) ...
- CSS中的三种基本的定位机制
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
- css定位
文档流 所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版 ...
- (七)CSS定位(Positioning)
CSS定位属性允许对元素进行定位. 一切皆为框: div.h1或p元素常被称为块级元素,而span和strong等元素成为行内元素,但是可是使用 display 属性改变框的类型,将display设置 ...
- CSS 定位 (Positioning) 实例
CSS 定位和浮动CSS 为定位和浮动提供了一些属性,利用这些属性,可以建立列式布局,将布局的一部分与另一部分重叠,还可以完成多年来通常需要使用多个表格才能完成的任务. 定位的基本思想很简单,它允许你 ...
- CSS学习总结3:CSS定位
CSS 定位机制 CSS 有三种基本的定位机制:普通流.浮动和绝对定位. 一.普通流 除非专门指定,否则所有框都在普通流中定位.普通流中元素框的位置由元素在(X)HTML中的位置决定.块级元素从上到下 ...
随机推荐
- 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 & ...
- [一]初识Poi
示例代码: package com.lxl.poi; import java.io.FileOutputStream; import org.apache.poi.hssf.usermodel.HSS ...
- php中的$_SERVER从哪来
前几个月学了个tcpdump抓包命令,遇到任何问题总想试试,真是程序员的终级武器呀,它像显微镜一下,把任何的丑陋的bug都显示在你的面前. 为什么有题目中所说的疑问呢?因为我发现在不同的环境下面,我获 ...
- C#- 基于Lumisoft.NET组件的POP3邮件接管和删除操纵
Lumisoft.NET组件是一个很是强大的邮件发送.邮件接管等功能的开源组件,一般用它来处理惩罚邮件的相干操纵,是很是合适的.之前也写过一些该组件的漫笔文章,不过主如果哄骗来发送邮件居多,比来因为项 ...
- [置顶] 单机版hadoop实例安装
目标:运行单机版hadoop http://localhost:50030mapredule监控界面 http://localhost:50070HDFS监控页面 -->安装linux系统 -- ...
- URAL 1992 CVS 链表
不更改链表结构,只是添加节点,没有删除节点.通过记录和更改标记来模拟题意的插入和删除,复制 指针模拟链表: 预开指针,存在M[]中,可以提高效率 #include<functional> ...
- 在Visual Studio中使用Pseudovariables来帮助调试
博客搬到了fresky.github.io - Dawei XU,请各位看官挪步.最新的一篇是:在Visual Studio中使用Pseudovariables来帮助调试.
- java web知识点总结
创建与销毁 ServletContext HttpRequest HttpSession 1.ServletContext 创建:启动服务器时就创建,服务为每个web应用创建该项目的ServleCon ...
- HttpClientUtil
package com.uniubi.management.util; import java.io.IOException; import java.io.InterruptedIOExceptio ...
- linux下.run文件的安装与卸载
linux下.run文件的安装与卸载 .run文件的安装很简单,只需要为该文件增加可执行属性,即可执行安装 以 virtualbox 的安装文件 virtualbox-3.1.6-59338-Li ...