博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
网页布局基础 第四次
阅读量:6238 次
发布时间:2019-06-22

本文共 5194 字,大约阅读时间需要 17 分钟。

绝对定位布局:

使用position属性实现的网页布局
CSS中规定的第三种定位机制
能够实现横向多列布局以及较为复杂的定位:比如:带有遮罩层效果的提示框;固定层效果;全屏广告
position拥有三种形式四种值:
1、静态定位 static
2、相对定位 relative
3、绝对定位 absolute
固定定位 fixed
3和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 划分为更小的模块。
亲自体验一下

本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。

View Code

 

 

编程实践

无标题文档
View Code

来源:http://www.imooc.com/code/1426

转载于:https://www.cnblogs.com/XDJjy/p/4671848.html

你可能感兴趣的文章
【工具使用系列】关于 MATLAB 遗传算法与直接搜索工具箱,你需要知道的事
查看>>
Kali-linux Arpspoof工具
查看>>
PDF文档页面如何重新排版?
查看>>
基于http协议使用protobuf进行前后端交互
查看>>
bash腳本編程之三 条件判断及算数运算
查看>>
php cookie
查看>>
linux下redis安装
查看>>
量子通信和大数据最有市场突破前景
查看>>
如何申请开通微信多客服功能
查看>>
Sr_C++_Engineer_(LBS_Engine@Global Map Dept.)
查看>>
非监督学习算法:异常检测
查看>>
jquery的checkbox,radio,select等方法总结
查看>>
Linux coredump
查看>>
Ubuntu 10.04安装水晶(Mercury)无线网卡驱动
查看>>
我的友情链接
查看>>
ElasticSearch 2 (32) - 信息聚合系列之范围限定
查看>>
VS2010远程调试C#程序
查看>>
[MicroPython]TurniBit开发板DIY自动窗帘模拟系统
查看>>
从Handler.post(Runnable r)再一次梳理Android的消息机制(以及handler的内存泄露)
查看>>
windows查看端口占用
查看>>