CSS+DIV 布局三种定位方式
一、普通流
普通流中元素框的位置由元素在HTML中的位置决定。块级元素从上到下依次排列,框之间的垂直距离由框的垂直margin计算得到。行内元素在一行中水平布置。
二、定位
1、相对定位
被看作普通流定位模型的一部分,定位元素的位置相对于它在普通流中的位置进行移动。使用相对定位的元素不管它是否进行移动,元素仍要占据它原来的位置。移动元素会导致它覆盖其他的框。相对定位不影响其父类元素和兄弟元素。
2、绝对定位
相对于已定位的最近的祖先元素(position 不为static的元素),如果没有已定位的最近的祖先元素,那么它的位置就相对于最初的包含块。绝对定位的框可以从它的包含块向上、下、左、右移动。
绝对定位的框脱离普通流,所以它可以覆盖页面上的其他元素,可以通过设置Z-Iindex属性来控制这些框的堆放次序。
3、固定定位
相对于浏览器窗口,其余的特点类似于绝对定位,也就是在移动窗口的时候,元素位置不变。
三、浮动
浮动的框可以在左右移动,直到它的外边框边缘碰到包含框或另一个浮动框的边缘。浮动的框脱离普通流。
如果包含块太窄,无法容纳水平排列的浮动元素,那么其他浮动块向下移动,直到有足够多的空间。如果浮动元素的高度不同,那么当它们向下移动时可能会被其他浮动元素卡住。
行内元素会围绕着浮动框排列。
CSS+DIV 布局三种定位方式的更多相关文章
- CSS文件的三种引入方式
CSS的引入方式共有三种:行内样式.内部样式表.外部样式表. 一.行内样式 使用style属性引入CSS样式. 示例:<h1 style="color:red;">st ...
- android 三种定位方式
http://www.cnblogs.com/oudi/archive/2012/03/22/2411509.html 最近在看android关于定位的方式,查了很多资料,也做了相关实验,在手机上做了 ...
- html(常用标签,标签分类),页面模板, CSS(css的三种引入方式),三种引入方式优先级
HTML 标记语言为非编程语言负责完成页面的结构 组成: 标签:被<>包裹的由字母开头,可以结合合法字符( -|数字 ),能被浏览器解析的特殊符号,标签有头有尾 指令:被<>包 ...
- Python 45 css三种引入方式以及优先级
一:css三种引入方式 三种方式为:行间式 | 内联式 | 外联式 行间式 1.在标签头部的style属性内 2.属性值满足的是css语法 3.属性值用key:value形式赋值,value具 ...
- css三种引入方式以及其优先级的说法
css 三种引入方式 方式一:行间式 1.在标签头部的style属性内 2.属性值满足css语法 3.属性值用key:value形式赋值,value具有单位 4.属性值之间用 分号 : ...
- 【css笔记】css中的盒模型和三种定位机制(固定定位,绝对定位,浮动)
html页面上的元素都可以看成是框组成的,框通过三种定位机制排列在一起就过程了我们看到的页面.而框就是盒模型. 盒模型 1.页面上的每个元素可以看成一个矩形框,每个框由元素的内容,内边距,边框和外边距 ...
- js介绍,js三种引入方式,js选择器,js四种调试方式,js操作页面文档DOM(修改文本,修改css样式,修改属性)
js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...
- python 中增加css样式的三种方式
增加css样式的三种方式: <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...
- CSS【03】:CSS 基础选择器与三种引入方式
基础选择器 选择器:css 选择 html 标签的一个工具,是将 css 与 html 建立起联系,那么 css 就可以控制 html 样式 选择器其实就是给 html 标签起名字 标签选择器 作用: ...
随机推荐
- 在.NET连接MySQL以及封装好的MySQLHelper.cs
1.首先上MySQL网站下驱动:http://www.mysql.com/products/connector/ 2.安装下载的安装包 3.我们在Visual Studio里创建一个Web Appli ...
- asp.net导出Excel 按照预定格式,以及解决导出乱码
protected void ToExcel() { //新建一个Gridview,原因:避免当前窗口GridView外层没有直接跟form标签,从而避免“gridview1未包含在run='serv ...
- Thinkphp C方法
C方法是ThinkPHP用于设置.获取,以及保存配置参数的方法,使用频率较高. 了解C方法需要首先了解下ThinkPHP的配置,因为C方法的所有操作都是围绕配置相关的.ThinkPHP的配置文件采用P ...
- 三类,23种设计模式,速记理解法!PHP
一,创建型设计模式 1.FACTORY—追MM少不了请吃饭了,麦当劳的鸡翅和肯德基的鸡翅都是MM爱吃的东西,虽然口味有所不同,但不管你带MM去麦当劳或肯德基,只管向服务员说“来四个鸡翅”就行了.麦当劳 ...
- IOS调用相机相册
#import "SendViewController.h" //只能打开,没有加载图片的代码,老代码,供参考 #import <MobileCoreServices/UT ...
- centos startx 进入桌面后使用中文输入法
(从runlevel 3进入桌面:英文 ,结果用不了中文输入法 囧) 但在中文桌面下可以输入中文 步骤: 由startx可以进入桌面 查看:which startx => /usr/bin/st ...
- aJax提交——服务端不能用request存储数据,session存数据客户端可以接收到
aJax提交与普通提交是两种迥异的提交方式,这两种提交方式决定了客户端与服务端交互时存储.传输数据的方式也不同. aJax提交,客户端的请求数据存储在data中,服务端用request.getPara ...
- SQL的表连接
每天给自己扫盲,让自己变得越博学. 继续学习<程序员的SQL金典>,这回我们来看看表连接相关的内容.表连接的相关知识在实际的项目开发当中,使用非常广. 所谓表连接,就是通过关联多张表,从而 ...
- asp.net MVC日志插件Log4Net学习笔记二:保存日志到sqlserver的配置
1.写到sqlserver的配置: <!--保存到SQLSERVER数据库日志--> <log4net> <appender name="AdoNetAppen ...
- WPF 视图分组排序
视图分组排序 效果: 实现步骤: 第一步:为分组做一个标题头,就是效果图中的浅蓝色部分: <DataGrid.GroupStyle>标签部分: <DataGrid x:Name=&q ...