已阅读5页,还剩3页未读, 继续免费阅读
版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
1. position:static所有元素的默认定位都是:position:static,这意味着元素没有被定位,而且在文档中出现在它应该在的位置。一般来说,不用指定 position:static,除非想要覆盖之前设置的定位。#div-1 position:static;2. position:relative如果设定 position:relative,就可以使用 top,bottom,left 和 right 来相对于元素在文档中应该出现的位置来移动这个元素。【意思是元素实际上依然占据文档中的原有位置,只是视觉上相对于它在文档中的原有位置移动了】#div-1 position:relative; top:20px; left:-40px;3. position:absolute当指定 position:absolute 时,元素就脱离了文档【即在文档中已经不占据位置了】,可以准确的按照设置的 top,bottom,left 和 right 来定位了。#div-1a position:absolute; top:0; right:0; width:200px;4. position:relative + position:absolute如果我们给 div-1 设置 relative 定位,那么 div-1 内的所有元素都会相对 div-1 定位。如果给 div-1a 设置 absolute 定位,就可以把 div-1a 移动到 div-1 的右上方。#div-1 position:relative;#div-1a position:absolute; top:0; right:0; width:200px;5. 两栏绝对定位现在就可以使用相对定位和绝对定位来做一个两栏布局了。#div-1 position:relative;#div-1a position:absolute; top:0; right:0; width:200px;#div-1b position:absolute; top:0; left:0; width:200px;6. 两栏绝对定位定高一种方案是给元素设定固定高度。但这种方案对大多数设计来说不太适合,因为一般我们不知道元素中会有多少文本,或者将要使用的精确的字号。#div-1 position:relative; height:250px;#div-1a position:absolute; top:0; right:0; width:200px;#div-1b position:absolute; top:0; left:0; width:200px;7. 浮动对于可变高度的列来说,绝对定位就不起作用了,以下是另外一个方案。我们可以浮动一个元素,使它移动到左边/右边,并且是文本环绕着它。这主要用于图像,但这里我们把它用于一个复杂的布局任务(因为这是我们唯一的工具)。#div-1a float:left; width:200px;8. 浮动列如果我们把一个元素向左浮动,并且把第二个元素也向左浮动,they will push up against each other。#div-1a float:left; width:150px;#div-1b float:left; width:150px;9. 清除浮动列在浮动元素之后,我们可以清除浮动来使其他元素正确定位。#div-1a float:left; width:190px;#div-1b float:left; width:190px;#div-1c clear:both;糖伴西红柿说:虽然我一
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 两位数乘一位数计算水平监控模拟题带答案
- 100以内三数加减法混合运算同步检测试题大全附答案
- 果园病害处理:苹果病虫害防治图谱
- 绿色长城:中国森林病虫害现状
- 杵针疗法在中医皮肤科的应用探讨
- 健康生活:香菇病虫害防治常识介绍
- 唐山房地产市场政策影响分析
- 绿色建筑在老旧小区改造中的应用策略
- 基于大数据的历史人物关系挖掘研究
- 幼儿园中班体育节活动方案
- 2024年简易劳动合同电子版(二篇)
- 日常保安服务投标技术方案(技术标)
- 行政复议法-形考作业1-国开(ZJ)-参考资料
- 2024年武定县欣武产业投资运营有限公司招聘笔试参考题库附带答案详解
- 2024中国雄安集团招聘106人公开引进高层次人才和急需紧缺人才笔试参考题库(共500题)答案详解版
- 中西文化鉴赏智慧树知到期末考试答案2024年
- 医院布草洗涤服务方案(技术方案)
- 化疗药物溢出处理流程图
- 大学教职工加班(值班)管理办法模版
- GA 1551.3-2019 石油石化系统治安反恐防范要求 第3部分:成品油和天然气销售企业
- 风险和机遇评估分析表范例
评论
0/150
提交评论