布局和定位:搭建一个可视框架,框架在页面的显示位置和浮动方式。
CSS布局方式有两种:浮动布局和定位布局
了解Div
Div是XHTML中指定的、专门用于布局设计的容器对象。
Div对象本身是占据整行的一种对象,不允许其它对象与之共存一行中;
PS:XHTML中的对象类型:
block块状对象-当前对象显示为一个方块。默认显示状态下,它将占据整行,其它的对象只能在下一行显示。
in-line行间对象(内联对象)-它允许下一个对象与之共享一行显示。
一列固定宽度、一列宽度自适应
#layout{background-color:#cccccc;border:2px solid #333333;width:300px;height:300px;margin:0px auto;}
#layout{background-color:#cccccc;border:2px solid #333333;width:80%;height:300px;}
二列固定宽度、二列宽度自适应
#left{background-color:#cccccc;border:2px solid #333333;width:300px;height:300px;float:left;}
#right{background-color:#cccccc;border:2px solid #333333;width:300px;height:300px;float:left;}
#left{background-color:#cccccc;border:2px solid #333333;width:20%;height:300px;float:left;}
#right{background-color:#cccccc;border:2px solid #333333;width:70%;height:300px;float:left;}
两列右列宽度自适应
#left{background-color:#cccccc;border:2px solid #333333;width:100px;height:300px;float:left;}
#right{background-color:#cccccc;border:2px solid #333333;height:300px;}
二列固定宽度居中
#layout{margin:0px auto;width:408px;}
#left{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;}
#right{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;}
<div id="layout">
<div id="left">Left</div>
<div id="right">Right</div>
</div>
三列浮动中间列宽度自适应
#left{background-color:#cccccc;border:2px solid #333333;width:100px;height:300px;positon:absolute;top:0px;left:0px;}
#right{background-color:#cccccc;border:2px solid #333333;width:100px;height:300px;right:0px;top:0px;}
#center{background-color:#cccccc;border:2px solid #333333;height:300px;margin-left:104px;margin-right:104px;}
<div id="left">Left</div>
<div id="center">center</div>
<div id="right">right</div>
Clear 浮动:
#left{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;}
#right{background-color:#cccccc;border:2px solid #333333;width:200px;height:300px;float:left;clear:float;}
高度自适应
一个对象的高度是否可以使用百分比显示,取决于对象的父级对象。
#left{background-color:#cccccc;width:300px;height:100px;float:float;}
盒模型详解(Box Model)
盒模型-是由一组属性值组合而成;包括:高度、宽度、内边距(padding)、外边距(margin)、边框(border)
ie6/ie7/firefox的最终宽度=左外边距 + 左边框宽 + 左内边距 + 宽度 + 右内边距 + 右边框宽 + 右外边距
深入浮动(Float)
一种常用的布局方式,能够改变页面中对象的前后流动顺序,使排版更具有良好的伸缩性
文档流-对于一个HTML网页,body元素下的任意元素,根据其前后顺序,组成一个个上下关系
浮动布局打破“文档流”模式;
何时选用浮动定位:对分辨率及内容大小的适应能力有较强要求。
绝对定位与相对定位
绝对定位-通过设置对象的top、right、bottom和left四个方向的边距值来实现
#a,#b,#c,#d{background-color:#cccccc;border:2px solid #333333;width:100px;height:100px;margin:2px 2px 2px
0px;float:left;}
#b{position:absolute;top:80px;left:100px;z-index:1;}
#d{position:absolute;top:80px;left:210px;z-index:0;}
相对定位使得被设置元素保持与其原始位置相对,并不破坏其原始位置的信息
占位相对定位
#a,#b,#c,#d{background-color:#cccccc;border:2px solid #333333;width:100px;height:100px;margin:2px 2px 2px
0px;float:left;}
#b{position:relative;left:50px;top:50px;}
不占位的相对定位
#divGroup{margin:50px 0 0 50px;position:relative;border:1px solid #000;width:400px;height:200px;}
#a,#b,#c,#d{background-color:#cccccc;border:2px solid #333333;width:100px;height:100px;margin:2px 2px 2px
0px;float:left;}
#b{position:absolute;left:100px;right:100px;}
分享到:
相关推荐
CSS布局实例[绝对定位:一栏固定,一栏自适应]
HTML页面简单布局,页面布局分布与定位浮动
单元二 CSS3样式表端基础前Web单元2-7 定位之Flex布局2009年,W3C提出了一种新的方案—-Flex布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用...
汽车前瞻布局研究报告:寻求下一个百年定位(62页),资源名称:汽车前瞻布局研究报告:寻求下一个百年定位(62页)汽车前瞻布局,寻求下一个百年定位.zip...
但是他们都是基于一个二维平面的,如果我们想在布局中有遮挡,重叠之类的更丰富效果,我们就需要使用到定位和浮动的相关知识。 1.1 文档流 文档流就是按照页面元素书写的顺序,将页面元素按从左到右,从上至下的一般...
定位布局 相对定位和绝对定位都是相对于父div标签的。 相对——以这个元素的本来应该在的位置为参照点 绝对——以父div标签的原点(左上角)为参照点。 由于外层是position:relative,所以里层是absolute的话,则会...
WPF布局全接触,多种布局分析,有助于理解wpf定位。很有益处
可能你的第一反应是不希望在网格布局中使用定位的网格项,但是可能在某些使用案例中必须要使用它们。这篇文章主要用来解释定位网格项在网格容器(gridcontainer)中的特殊性。实际上,定位网格项跟普通网格项...
table布局网页转换为div+CSS布局的转换软件. 非常快捷方便,一转眼一个老式样table布局网页的网页就转换成div+CSS布局的了,支持绝对定位和流定位.
为实现综掘工作面悬臂式掘进机位姿无人化、高精度检测,提出了一种基于超宽带测距技术的掘进机位姿检测系统,推导了基于该系统的掘进机定位坐标及机身姿态角计算方法,通过Matlab仿真分析了基站布局间距、角度对定位...
jQuery完美布局平滑滚动是一款单页面平滑滚动的Scrolld.js插件。
Qt Quick编程之Qt Quick元素布局,在Qt Quick中有两套与元素布局相关的类库,一套叫作Item Positioner(定位器),一套叫作Item Layout(布局)。其实我们前面还讲了一个锚布局,它...这里主要介绍定位器和布局管理器。
一、定位属性的基本情况 使用position属性对元素进行定位: position属性 值:static | absolute | fixed | relative 初始值:static运用范围:所有元素继承值:无计算值:根据指定确定 static:元素框正常生成。...
第三章 CSS网页布局与定位 3.1 div 几乎XHTML中的任何标签都可以用于浮动与定位,而div首当其冲。对于其他标签而言,往往有它自身存在的目的,而div元素存在的目的就是为了浮动与定位。 3.1.1 div是什么 div是XHTML...
在android开发中,需要用到的一种布局方式,那就是绝对定位。
README A debug tool to inspect used layout files of current Activity. This tool is helpful when you want to find out layout xml files used in current Activity from a large amount of resource files. ...
资源中包含html+CSS+div的布局练习,其中包括固定布局、流式布局、浮动布局、定位布局等布局方式的练习Demo,另外还对CSS中的一些特殊的属性进行了练习,包括position、float、display等属性,对每一个属性和布局的...
行业分类-设备装置-一种具有移动定位关节的单孔手术机器人的整体布局结构