CSS(Cascading Style Sheet),中文翻译为层叠样式表,是用于控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。在css控制页面中,主要有四种样式:行内样式(style 属性将css嵌套在p 标记中)、内嵌式(在HTML部分,没采用任何css代码,而是在style中对css代码进行嵌套)、链接式(使用link语句,将外部css导入到页面中)和导入样式。
在样式设计中,有一个非常关键的属性——position
CSS中有不少属性是用来定位的,这也为我们采用DIV+CSS 布局,取代古老的tabel布局提供了基础支持。
bottom: 定义了定位元素下外边距边界与其包含块下边界之间的偏移。
clip: 设置元素的形状。元素被剪入这个形状之中,然后显示出来。
left: 定义了定位元素左外边距边界与其包含块左边界之间的偏移。
overflow: 设置当元素的内容溢出其区域时发生的事情。
position: 把元素放置到一个静态的、相对的、绝对的、或固定的位置中。
right: 定义了定位元素右外边距边界与其包含块右边界之间的偏移。
top: 定义了一个定位元素的上外边距边界与其包含块上边界之间的偏移。
vertical-align: 设置元素的垂直对齐方式。
z-index: 设置元素的堆叠顺序。
而这其中非常关键和初学者容易搞混的概念就是 position 属性:
static 默认:位置设置为 static 的元素,它始终会处于页面流给予的位置(static 元素会忽略任何 top、bottom、left 或 right 声明)。
relative:位置被设置为 relative 的元素,可将其移至相对于其正常位置的地方,因此 "left:20" 会将元素移至元素正常位置左边 20 个像素的位置。
absolute:位置设置为 absolute 的元素,可定位于相对于包含它的元素的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。
fixed:位置被设置为 fixed 的元素,可定位于相对于浏览器窗口的指定坐标。此元素的位置可通过 "left"、"top"、"right" 以及"bottom" 属性来规定。
不论窗口滚动与否,元素都会留在那个位置。工作于 IE7(strict
模式)。这些属性是DIV布局的奠基石。由于浏览器的不同,盒模式中也有差异,比如说对于宽度盒高度,在不同浏览器中定义是不同的,IE6是包含边框 、内边距,而FF的只是指内容的宽度。
细节上的差异,往往是我们在日常工作中能总结出来的。所以也不必太在意。了解简单的css的使用,在不断应用的过程中,进行改进和更加深入的了解。对position的简单总结,如有错误,欢迎指出,感激不尽!!
分享到:
相关推荐
HTML CSS——position学习终结者(二).zip 欢迎下载!!!
本次设计魅族官网主要运用了HTML和CSS,为方便检查代码,style...——position: absolute;使用了多个:hover效果来实现变化。能够巩固熟悉浮动、相对定位,绝对定位、下拉列表、hover效果、整体缩放等知识点的用法。
定位——position1.基本概念2.静态定位——static3.固定定位——Fixed Positioning4.相对定位——Relative Position5. 绝对定位——Absolute Position6.自我总结,代码效果 一.显示属性——display 1.块元素—
在开发移动端app时,经常会碰到需要这样一种情况 —— 网站滚动到一定高度的时候,让一部分内容作为navbar,也就是置顶显示,我们一般会使用js监听scroll事件来实现,但是新增的css属性position:sticky可以简单实现 ...
列表图像和位置—— List Image and Position3.列表样式(快速标记)——list-style二.样式表——Styling the Tables1.表属性——Tables Properties2.标题设置——caption-side2.空白单元格设置——empty-cells3....
关于css中的position这个属性,在使用的时候,有时很强大,有时又让人很无奈。 强大的时候,对于div中的一些小物件不方便使用margin或者padding的时候,给与position:absolute;再配备left、right、top和bottom,基本...
—————————————————————————————— 背景(background)是css中一个重要的的部分,也是需要知道的css的基础知识之一。这篇文章将会涉及css背景(background)的基本用法,包括诸如 ...
如下: ———————————————————— 头 ———————————————————— 身 ———————————————————— 脚 ———————————————————— 要求:1、头脚等高,...
一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局。前者适合布局首页,因为首页上的内容往往可以完全控制。后者适合布局模板,模板中填充的内容你没法控制——比如,在编辑wordpress模板时,你...
先上效果图: 【处理】 这里的图片...——-css—————- 代码如下: .gy-slide-scroll { position: relative; width: 320px; height: 200px; overflow: hidden; left: 50%; margin-left: -160px; }
/*——焦点图片的css——-*/ .imgFlash { height:230px;width:270px; position:relative; } .imgFlash dl { height:100%; overflow:hidden; position:absolute; width:100%; } .imgFlash img { height:100%
一、position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口。 示例: 二、position:absolute 绝对位置: 1.外层没有position:absolute(或relative);那么div相对于浏览器定位...
缩写规则 关于边距 margin(4边): 1px 2px 3px 4px (上、右、下、左) 1px 2px 3px (省略的左等于右) 1px 2px (省略的上等于下) 1px (四边都相同) 简化所有: */ body{margin:0}————表示网页内所有元素的...
——没办法,抠呗!(此处勿喷,着实无素材) ……最后效果变成这样子,这是移动端的例子!(gif图有卡顿现象,请凑合看吧,非喜勿喷…): OK,其实主要目的还是知识点的学习吧: 这个demo涉及的知识点有: p
如今,接触另一种布局方式——CSS布局。div正是这种布局方式的核心对象。仅从div的使用上说,做一个简单的布局只需要依赖两样东西:div与CSS。因此有人称CSS布局为div+css布局。 3.1.2 如何使用div 只需要应用<di
大家先运行代码试一试————————————-效果演示——————————————- 具体代码如下 <html> <head> <title>JS文字球状放大效果</title> <meta ...
相对——以这个元素的本来应该在的位置为参照点 绝对——以父div标签的原点(左上角)为参照点。 由于外层是position:relative,所以里层是absolute的话,则会以外层的左上角为位移参考对齐。当然外层只写position...
一、 善用css缩写规则 /*注意上、右、下、左的书写顺序*/ 1. 关于边距(4边): 1px 2px 3px 4px (上、右、下、左) 1px 2px 3px (省略的左等于右) 1px 2px (省略的上等于下) 1px (四边都相同) 2. ...
背景图片:浮云图片: ←——————————这里是有图片D~ 全选就能看见了(因为背景是白的,云也是白的嘛~)…… CSS代码: 代码如下: <style type=”text/css”> * { margin: 0; padding: 0; } body { ...