绝对定位布局:
使用position属性实现的网页布局CSS中规定的第三种定位机制能够实现横向多列布局以及较为复杂的定位:比如:带有遮罩层效果的提示框;固定层效果;全屏广告position拥有三种形式四种值:1、静态定位 static2、相对定位 relative3、绝对定位 absolute固定定位 fixed3和4都属于绝对定位,静态定位是元素默认状态,处于标准文档流中
相对定位特点:
1、相对于自身原有位置进行偏移2、仍旧处于标准文档流中3、随即拥有偏移属性和z-index属性z-index:空间的层堆叠设置底层:距离观察者最远……-3 层-2 层-1 层0 层 (默认)1 层2 层3 层……顶层:最接近观察者
绝对定位特点:
建立了以包含块为基准的定位完全脱离了标准文档流(块级元素不再独占一行)设置绝对定位之后,如果没有设置固定宽度,宽度随内容变化而变化随即拥有偏移属性和z-index属性
绝对定位特点:
建立了以包含块为基准的定位完全脱离了标准文档流(块级元素不再独占一行)设置绝对定位之后,如果没有设置固定宽度,宽度随内容变化而变化随即拥有偏移属性和z-index属性未设置偏移量:无论是否存在已定位上级元素,都保持在元素初始位置。:脱离标准文档流设置参照基准:无已定位上级元素:以<html>为偏移参照基准有已定位上级元素(绝对或者相对):以距其最近的已定位上级元素为偏移参照基准
使用absolute(绝对定位)实现横向两列布局——常用于一列固定宽度,另一列宽度自适应的情况。
主要技能:relative——父元素相对定位absolute——自适应宽度元素绝对定位。(绝对定位的元素在相对定位元素的里面 )注意:固定宽度列的高度>自适应宽度的列。绝对定位实现布局 前端开发教程CSS 简介
你应该知道这些知识
在继续之前,你应该有一个以下基本认识:
· HTML / XHTML
如果您希望首先学习这些项目,我们的主页上可以找到教程。
什么是CSS?
CSS即级联样式表。 它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
基本信息
CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。
发展历史
- CSS1
- 作为一项W3C推荐,CSS1发布于 1996年12月17 日。1999 年1月11日,此推荐被重新修订。
- CSS2
- 作为一项 W3C 推荐,CSS2发布于 1999年1月11日。CSS2添加了对媒介(打印机和听觉设备)和可下载字体的支持。
CSS3
- CSS3 计划将 CSS 划分为更小的模块。
- 亲自体验一下!
本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。
编程实践
无标题文档 欢迎使用金山软件出品的爱词霸,在线查询你英语词汇、句子释义
来源:http://www.imooc.com/code/1426