CSS3-05 样式 4
前言
关于 CSS 的介绍，基本上告一段落了。在该博客中将介绍如何通过 CSS 去设置一个 HTML 元素，显示在 Web 页面的位置。
定位
概述
- 定义元素位置的基准，即：该元素与 HTML 文档流 和 其他 HTML 元素的关系。
四种定位方式
- Static（静态定位）
- 默认值（没有定位），元素出现在正常的 HTML 文档流中
- 静态定位的元素不会受到 top、bottom、left、right 的影响
- Fixed（固定定位）
- 元素相对于浏览器窗口的位置固定，即：固定在浏览器窗口的固定位置，即使窗口滚动也不会移动
- 与 HTML 文档流无关，不占据空间
- Relative（相对定位）
- 相对于元素正常位置的定位，其原本所占的空间不会改变
- Absolute（绝对定位）
- 相对于最近已定位的父元素；若没有已定位的父元素，那么将相对于 <html>
- 与 HTML 文档流无关，不占据空间
- Static（静态定位）
四种定位方式比较
|定位方式|是否与文档流有关|是否占据空间|是否可以重叠|是否受到 top、right、bottom、left 的影响|
|---|:---CSS3-05 样式 4的更多相关文章
- CSS/CSS3常用样式小结
1.强制文本单行显示: white-space:nowrap; 多行文本最后省略号: display: -webkit-box; -webkit-line-clamp:2; overflow: hid ...
- [总结]CSS/CSS3常用样式与web移动端资源
CSS/CSS3常用样式与知识点 IE条件注释 条件注释简介 IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力,是WEB设计中常用的hack方法.条 ...
- 炫酷的CSS3抖动样式:CSS Shake
CSS Shake是一个使用CSS3实现的动画样式,使用SASS编写,利用它我们可以实现多种不同样式的抖动效果(如下面的GIF图像): 炫酷的CSS3抖动样式:CSS Shake 这是一个很微小的动画 ...
- css3-4 css3边框样式
css3-4 css3边框样式 一.总结 一句话总结: 二.css3边框样式 1.相关知识 边框属性:1.border-width2.border-style3.border-color 边框方位:1 ...
- css3-3 css3背景样式
css3-3 css3背景样式 一.总结 一句话总结:网站页面上的小图标集成在一张大图上面,是因为降低服务器负载,网站上的那些图片都可以下载下来,源码那里,或者工具那里. 1.background:# ...
- 一些上流的CSS3图片样式
直接在图片元素上直接应用CSS3 inset box-shadow 或 border-radius时,浏览器并不能完美的渲染它们.不过,如果把这个图片用作背景图,你就可以可以给它添加任何样式了,浏览器 ...
- css3常用样式集锦
控制线显示0.5px .line:after{ content:""; display:block; position:absolute; width:200%; left:0; ...
- [CSS3] 学习笔记-CSS3盒子样式
1.盒子的类型 在CSS3中,使用display来定义盒子的类型,包括block,inline,inline-block类型.div元素和P元素,属于block类型,span元素和a元素,属于inli ...
- css3特效样式库
直接调用样式类即可: /* animation */ .a-bounce,.a-flip,.a-flash,.a-shake,.a-swing,.a-wobble,.a-ring{-webkit-an ...
- css3的样式讲解-css学习之旅（3）
css背景 属性:background-color:background-image:url("位置"):background-position:right等,px,百分数:bac ...
随机推荐
- 利用angular结合translate为项目实现国际化
前言 利用H5项目第一版本已经上线,话说有了第一期就有了第二期,这不要为第二期做准备了,老大发话第一件事就要利用Angular JS实现项目的国际化以及后续要借助这个框架来实现其他功能,好吧我表示没怎 ...
- 交叉验证(Cross Validation)原理小结
交叉验证是在机器学习建立模型和验证模型参数时常用的办法.交叉验证,顾名思义,就是重复的使用数据,把得到的样本数据进行切分,组合为不同的训练集和测试集,用训练集来训练模型,用测试集来评估模型预测的好坏. ...
- 如何用Perl对Excel的数据进行提取并分析
巡检类工作经常会出具日报,最近在原有日报的基础上又新增了一个表的数据量统计日报,主要是针对数据库中使用较频繁,数据量又较大的31张表.该日报有两个sheet组成,第一个sheet是数据填写,第二个sh ...
- [c++] Class
也是醉了,一个.h文件就有这么多细节问题: 初始化列表,使用{} 也可以. 类中的引用和const变量,必须立即在初始化列表中提前初始化. 常成员函数,const 放在函数后, 常成员函数即不能改变成 ...
- 用HTML5 CANVAS做自定义路径的动态效果图片！
最近对HTML5开始感兴趣了,实现的效果如下图,大家可以从代码里换掉图片 我用的是canvas里面的2d绘图,其中上图的路径是网上在线绘制的,我太懒了,哈哈 下面是网址: http://www.vic ...
- 【LeetCode】Increasing Triplet Subsequence（334）
1. Description Given an unsorted array return whether an increasing subsequence of length 3 exists o ...
- 4-MSP430定时器_定时器中断
一开始没写好就上传了,,,,,,,,这次来个全的 自己学MSP430是为了写一篇关于PID的文章,需要430在proteus上做仿真,一则认为在自动控制算法上PID真的很经典,PLC设备上大多是模块式 ...
- ASP.NET-Web项目运行缓慢-AjaxMin在搞鬼
AjaxMin 4.8版本是没问题,出现问题的时候是AjaxMin 5.3.xxxxx版本,起初我也不知道是AjaxMin出现问题一直以为是因为我大幅度修改Web项目架构,以及采用大量反射后所带来的后 ...
- 【C#】分享一个可携带附加消息的增强消息框MessageBoxEx
--------------201507160917更新--------------- 无意中发现标准消息框在Windows7是有声音的,只是在Windows server 2008(R2)无声,而我 ...
- linux命令大全之ln命令详解(创建软链接和硬链接)
ln是linux中又一个非常重要命令,它的功能是为某一个文件在另外一个位置建立一个同步的链接,分为软链接.硬链接.软链接相当于windows的快捷方式,下面是使用方法和示例 ln是linux中又一 ...
- CSS/CSS3常用样式小结