(四)学习CSS之position、bottom、left、right和top属性
参考:http://www.w3school.com.cn/cssref/pr_class_position.asp
position 属性规定元素的定位类型。
这个属性定义建立元素布局所用的定位机制。任何元素都可以定位,不过绝对或固定元素会生成一个块级框,而不论该元素本身是什么类型。相对定位元素会相对于它在正常流中的默认位置偏移。
值 描述
absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
fixed 生成绝对定位的元素,相对于浏览器窗口进行定位。元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。
relative 生成相对定位的元素,相对于其正常位置进行定位。因此,"left:20" 会向元素的 LEFT 位置添加 像素。
static 默认值。没有定位,元素出现在正常的流中(忽略 top, bottom, left, right 或者 z-index 声明)。
inherit 规定应该从父元素继承 position 属性的值。
默认值:static。
参考:http://www.w3cschool.cn/pr_pos_bottom.html
bottom 属性规定元素的底部边缘。该属性定义了定位元素下外边距边界与其包含块下边界之间的偏移。
参考:http://www.jb51.net/w3school/css/pr_pos_left.htm
left 属性规定元素的左边缘。该属性定义了定位元素左外边距边界与其包含块左边界之间的偏移。
参考:http://www.w3school.com.cn/cssref/pr_pos_right.asp
right 属性规定元素的右边缘。该属性定义了定位元素右外边距边界与其包含块右边界之间的偏移。
参考:http://www.w3school.com.cn/cssref/pr_pos_top.asp
top 属性规定元素的顶部边缘。该属性定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
注释:如果 "position" 属性的值为 "static",那么设置"left" ,"bottom","right","top" 属性不会产生任何效果。
默认值都为:auto。
(四)学习CSS之position、bottom、left、right和top属性的更多相关文章
- 学习CSS布局 - position例子
position例子 通过具体的例子可以帮助我们更好地理解“position”.下面是一个真正的页面布局. 结果: 代码如下: <!DOCTYPE html> <html lang= ...
- 学习CSS布局 - position
position 为了制作更多复杂的布局,我们需要讨论下 position 属性. 它有一大堆的值,名字还都特抽象,别提有多难记了. 让我们先一个个的过一遍,不过你最好还是把这页放到书签里. 先看下运 ...
- css的基本操作学习--css样式,选择器,hover,文字属性,文本属性,背景
什么是css? 通配符选择器 <head> /* *通配符选择器 匹配任何元素 */ *{ margin: 0; padding: 0; } </head> css样式有三种 ...
- css中的四个不同的position设置
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- CSS学习笔记——定位position属性的学习
今天学习之前剩下的一个问题:CSS的position属性.首先归纳出和position相关的问题: position作为一个属性,它一共有哪几个属性值? position常用的属性值有哪几个?分别有什 ...
- 轻轻松松学CSS:position
position属性表示元素的定位类型,在CSS布局中,position发挥着非常重要的作用,一些元素的布局就是用position完成的,鉴于此,本文结合一些小实例详细讲解一下. position属性 ...
- 深入理解css中position属性及z-index属性
深入理解css中position属性及z-index属性 在网页设计中,position属性的使用是非常重要的.有时如果不能认识清楚这个属性,将会给我们带来很多意想不到的困难. position属性共 ...
- 十步图解CSS的position
CSS的positon,我想做为一个Web制作者来说都有碰到过,但至于对其是否真正的了解呢?那我就不也说了,至少我自己并不非常的了解其内核的运行.今天在Learn CSS Positioning in ...
- 分享一下学习css,js心得
简化代码,使页面简洁! web前端开发——将界面更好呈现给用户! 要了解在不同浏览器上的兼容情况.渲染原理和存在的bug! 网站性能优化.SEO: 代码的可维护性.性能: 网站重构的本质:建立一个前端 ...
随机推荐
- 10个优秀的Objective-C和iOS开发在线视频教程
如果你自己开发iOS应用,你肯定会发现网上有很多资源.学习编程的一个最好的方法就是自己写代码,而开始写代码的最快的方式就是看其他人怎么写.我们从海量视频和学习网站中整理出了我 如果你自己开发iOS应用 ...
- EXTJS 4.2 资料 控件之textfield文本框加事件的用法
{ xtype: "textfield", width: 100, id: "txtGroupName", name: "txtGroupName&q ...
- ITaCS Change Password web part
http://changepassword.codeplex.com/ A webpart is used to change your sharepoint AD password.
- Begin Andriod -- 安装android开发环境
很久以前学过Andriod,现在已经忘的快没有了,重新捡起来练练,顺带写写博客,感受下写博的乐趣. 第一步:安装java jdk.jre(jdk:开发环境,jre:运行环境). (一)java jdk ...
- vs2008+cmake2.8+OpenCV2.8.4配置过程中OpenCV.sln重编译部分工程失败
解决方法来自此链接 http://www.tuicool.com/articles/qiQBb2N vs2008+cmake2.8+OpenCV2.8.4配置过程 1.解压opencv2.4.8 2. ...
- jquery bind()方法与live()方法的区别
jquery bind() 方法和 live() 方法都可以绑定元素事件. <!DOCTYPE html> <html> <head> <meta chars ...
- 1874: [BeiJing2009 WinterCamp]取石子游戏 - BZOJ
Description小H和小Z正在玩一个取石子游戏. 取石子游戏的规则是这样的,每个人每次可以从一堆石子中取出若干个石子,每次取石子的个数有限制,谁不能取石子时就会输掉游戏. 小H先进行操作,他想问 ...
- yum安装gcc
如果服务器是自己的,并且机器就在身边,那什么都不用说了,缺少gcc顶多就是重新放入安装盘,把开发工具包安装上.但是如果是租的服务器,托管服务 方那帮人又搞不懂你说的啥子gcc,要安装gcc实在是太麻烦 ...
- hibernate多对一单向外键
hibernate多对一单向外键: 描述:
- TaskTracker获取并执行map或reduce任务的过程(一)
我们知道TaskTracker在默认情况下,每个3秒就行JobTracker发送一个心跳包,也就是在这个心跳包中包含对任务的请求.JobTracker返回给TaskTracker的心跳包中包含有各种a ...