HTML+CSS布局
来源:互联网 发布:850网络捕鱼游戏作弊器 编辑:程序博客网 时间:2024/05/29 04:44
层模型
1、绝对定位 (position:absolute)
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用是将元素从文档流中拖出来,然后使用left,right,top,bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位,如果不存在这样的包含块,则相对于body元素,即相对于浏览器的窗口,
如下面的代码可以实现div元素相对于浏览器的窗口向右移动100px,向下移动50px:
div{ width:200px; height:200px; border:2px red solid; position:absolute; left:100px; top:50px;}<div id="div1"></div>
2、相对定位 (position:relative)
如果想为元素设置层模型中的相对定位,需要设置position:relative(表示相对定位),它通过left,top,right,bottom属性确定元素在正常文档流中的偏移位置,相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来),然后相对于以前的位置移动,移动的方向和幅度由left,right,top,bottom属性确定,偏移前的位置保留不动。
如下代码实现相对于以前位置向下移动50px,向右移动100px
#div1{ width:200px; height:200px; border:2px red solid; position:relative; left:100px; top:50px;}<div id="div1"></div>
3、固定定位 (position:fixed)
fixed:表示固定定位,与absolute定位类型类似,但它相对移动的坐标是视图(屏幕内的网页窗口)本身。由于视图本身是固定的,它不会随浏览器窗口的滚动条滚动而变化,除非你在屏幕中移动浏览器窗口的屏幕位置,或改变浏览器窗口的显示大小,因此固定定位的元素会始终位于浏览器窗口内视图的某个位置,不会收文档流动的影响,这与background-attachment:fixed;属性功能相同,一下代码可以实现相对于浏览器视图向右移动100px,向下移动50px,并且拖动滚动条时位置固定不变。
#div1{ width:200px; height:200px; border:2px red solid; position:fixed; left:100px; top:50px;}<p>文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本文本。</p>....
- HTML+CSS布局小节
- html css 布局心得
- html+css布局
- 【Html】css布局模型
- 【HTML&CSS】混合布局
- HTML+CSS布局
- HTML布局之CSS
- html css布局漂浮
- html +css 布局技巧
- html+css----css布局方式
- html DIV+CSS 页面布局
- html+div+css布局入门
- css+html简单布局demo
- html+css关于位置布局
- html css 响应式布局
- HTML- css多列布局
- HTML/CSS 简单布局01
- Html与CSS布局技巧
- HDU 5889 Barricade 2016 ACM/ICPC Asia Regional Qingdao Online 1011
- hdu 5879 分析
- C语言 插入排序
- PHP日记——Lavarel常用语句之View篇
- 写一个函数返回参数二进制中 1 的个数
- HTML+CSS布局
- localstorage 本地存储
- 选择困难症
- cocos2d::Vector(官网资料)
- hdu 3652 B-number (数位DP)
- context理解
- redis 五种数据类型的使用场景
- 课程设计——学生信息管理系统(顺序表 链表)
- HTML嵌套问题