CSS 的定位方式和含义
CSS 的定位方式和含义
总结一下 CSS 的定位方式。CSS 的定位 position 是处理页面布局时非常重要的属性。
CSS 中有 3 种基本的定位机制:普通流、浮动和绝对定位。
在没有指定的情况下,所有的 CSS 元素都在普通流中定位,在这种模式下,元素的位置由于浏览器根据元素在 html 文档中的位置决定,块级元素从上到下排列,行内元素水平排列。
<style>
div {
padding: 0;
margin: 0;
}
#div0 {
width: 200px;
padding: 10px;
}
</style>
<div id="div0" style="background-color: gray">
div0
<div id="div1" style="background-color: red">div1</div>
<div id="div2" style="background-color: green">div2</div>
<div id="div3" style="background-color: blue">div3</div>
</div>
得到的结果为:
通过使用元素的 CSS 的 position 属性,常用 4 种定位:static、relative、absolute、fixed ,以及一个浮动定位属性 float。
static 是默认的定位方式,即不对元素进行特殊的定位,由浏览器按照文档的处理进行自动定位。
relative 相对定位,元素从原始位置偏移某个距离,但仍然占用原来的空间。 div1 使用 relative 定位,进行向下向右偏移,如下
#div1 {
position: relative;
top: 20px;
left: 20px;
}
div1 仍然占用原来的空间,但位置已在原来的位置上进行了偏移,得到的结果为:
fixed 定位总是相对视窗的位置来定位,并且从文档流中脱离,会在页面的滚动时保留在相对视窗的位置,如下
#div1 {
position: fixed;
top: 20px;
left: 20px;
}
得到的结果为:
absolute 绝对定位,会把元素从正常文档中所占的空间关闭,然后相对其最近的某个已经进行过定位的祖先元素进行定位。如果祖先元素中没有进行过 position 的定位,那么就会相对 body 进行定位。进行 absolute 定位之后,元素总是生存一个块级框,不论原来是什么类型的元素。修改原来的文档,加上 div container ,定位为 relative ,处理 div1 ,使用 absolute 定位,如下
<style>
div {
padding: 0;
margin: 0;
}
#container {
position: relative;
padding: 30px;
}
#div0 {
width: 200px;
padding: 10px;
}
#div1 {
position: absolute;
top: 20px;
left: 20px;
}
</style>
<div id="container" style="background-color: cadetblue">
<div id="div0" style="background-color: gray">
div0
<div id="div1" style="background-color: red">div1</div>
<div id="div2" style="background-color: green">div2</div>
<div id="div3" style="background-color: blue">div3</div>
</div>
</div>
得到 div1 相对 container 的偏移定位
float 会使框进行浮动,向左或向右,直到碰到它包含框的边缘,元素不占用文档流的空间。如下
<style>
div {
padding: 0;
margin: 0;
}
#div0 {
width: 200px;
padding: 10px;
}
#div1 {
width: 100px;
float: right;
}
</style>
<div id="div0" style="background-color: gray">
div0
<div id="div1" style="background-color: red">div1</div>
<div id="div2" style="background-color: green">div2</div>
<div id="div3" style="background-color: blue">div3</div>
</div>
结果如下
CSS 的定位方式和含义的更多相关文章
- CSS特例定位方式
同级向下一个元素定位,一个+表示下一个元素,++表格下下个元素 input[name='name1'] +input td:eq(0)表示第一个td元素,此定位方式限于执行js,在selenium时用 ...
- CSS 中定位方式有几种,说明他们的意义
1.static 默认定位方式 显示为没有设置定位时的位置 2.fixed(固定定位) 他所相对固定的对象是可视窗口,与其他无关.以浏览器窗口作为参考进行定位 3.relative(相对定位) 元 ...
- css中对position的几种定位方式的最佳诠释
关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示 CSS中Positio ...
- css定位方式有哪几种?
复杂的网页布局都是通过各种网页元素灵活定位实现的,网页中的各种元素定位都有自己的特点.下面我们来看一下css的几种定位方式. float定位(即浮动定位): 这种定位方式很简单,只需规定一个浮动的方向 ...
- 定位方式 及CSS高级技巧
定位 background-position 背景位置 浮动,在一个浮字上面,我们的定位,在一个位上.CSS离不开定位,特别是后面的JS特效,天天和定位打交道. 为什么要使用定位? 元素的定位属性 元 ...
- 使用CSS进行定位
CSS中通过使用position属性,有4种不同类型的定位方式,这会影响元素框生成的方式. position属性值的含义: static:静态定位 元素框正常生成.块级元素生成一个矩形框,作为文档流的 ...
- 【WEB自动化】【第一节】【Xpath和CSS元素定位】
目前自动化测试开始投入WEB测试,使用RF及其selenium库,模拟对WEB页面进行操作,此过程中首先面对的问题就是对WEB页面元素的定位,几乎所有的关键字都需要传入特定的WEB页面元素,因此掌握常 ...
- CSS Position 定位属性
本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...
- htnl中的遮罩层以及定位方式
在页面显示遮罩层,例如:一个div的css样式: $msk.css({ "top":"0", "left":"0", & ...
随机推荐
- HTML行为元素和块级元素及语义化
块级元素 div - dl - form 交互表单h1 - h6 标题 hr 水平分割线p 段落ul 非排序列表table 表格 行内元素 a 链接br 换行em 强调i 斜体img 图片input ...
- 创建好Android Application Project 后运行就报错。
如图: 这个问题有可能是有可能是没导入Android support库,简单了解一下: google提供了Android Support Library package 系列的包来保证来高版本sdk开 ...
- uboot的编译
在我拿到开发板以后,uboot都是编译好的,但是我不知道它是如何生成uboot.bin文件的.经过一番摸索.我也会编译uboot了. #cd /home #mkdir study //创建工作目录 * ...
- iOS存储的三种方式
iOS中存储的3中方式: 1.NSUserDefaults 注意存储基本对象类型是没有问题的,但是要存储自定义对象,则要将对象内所有的属性(或是需要存储的属性)序列化,实现NSCoding协议序列化. ...
- Linux Mysql 忘记用户密码
1.停止mysql 服务 /etc/init.d/mysqld stop 2.启动mysql服务跳过授权表并在后台运行 /etc/init.d/mysqld start -u root --sk ...
- HDU 3038 How Many Answers Are Wrong(种类并查集)
题目链接 食物链类似的题,主要是在于转化,a-b的和为s,转换为b比a-1大s.然后并查集存 此节点到根的差. 假如x的根为a,y的根为b: b - y = rank[y] a - x = rank[ ...
- 基于socket的TCP和UDP编程
一.概述 TCP(传输控制协议)和UDP(用户数据报协议是网络体系结构TCP/IP模型中传输层一层中的两个不同的通信协议. TCP:传输控制协议,一种面向连接的协议,给用户进程提供可靠的全双工的字节流 ...
- linux服务器使用
1.在widows系统下,下载putty.exe 配置默认的服务器IP + 端口 添加名称.点击save即可 参考:http://jingyan.baidu.com/article/c74d60004 ...
- myBatis oracle 与mysql自增问题
mysql <insert id="insert" parameterType="Person" useGeneratedKeys="true& ...
- 通过IP地址屏蔽各种“推广”
事情的起因是这样的:最近老是发现iPhone应用的底部出现各种横条广告,一开始以为是Google的广告推广,所以没管它,但是最近这些广告越来越猖狂,里面的内容越来越垃圾.今天仔细一看,原来不是Goog ...