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 的定位方式和含义的更多相关文章

  1. CSS特例定位方式

    同级向下一个元素定位,一个+表示下一个元素,++表格下下个元素 input[name='name1'] +input td:eq(0)表示第一个td元素,此定位方式限于执行js,在selenium时用 ...

  2. CSS 中定位方式有几种,说明他们的意义

    1.static  默认定位方式 显示为没有设置定位时的位置 2.fixed(固定定位)  他所相对固定的对象是可视窗口,与其他无关.以浏览器窗口作为参考进行定位 3.relative(相对定位) 元 ...

  3. css中对position的几种定位方式的最佳诠释

    关于元素的position定位的理解,牛客网的hardy给出了一个比较好的理解: 在html中网页可以看成一个立体的空间,一个完整的页面是由很多个页面堆积形成的,如上图所示   CSS中Positio ...

  4. css定位方式有哪几种?

    复杂的网页布局都是通过各种网页元素灵活定位实现的,网页中的各种元素定位都有自己的特点.下面我们来看一下css的几种定位方式. float定位(即浮动定位): 这种定位方式很简单,只需规定一个浮动的方向 ...

  5. 定位方式 及CSS高级技巧

    定位 background-position 背景位置 浮动,在一个浮字上面,我们的定位,在一个位上.CSS离不开定位,特别是后面的JS特效,天天和定位打交道. 为什么要使用定位? 元素的定位属性 元 ...

  6. 使用CSS进行定位

    CSS中通过使用position属性,有4种不同类型的定位方式,这会影响元素框生成的方式. position属性值的含义: static:静态定位 元素框正常生成.块级元素生成一个矩形框,作为文档流的 ...

  7. 【WEB自动化】【第一节】【Xpath和CSS元素定位】

    目前自动化测试开始投入WEB测试,使用RF及其selenium库,模拟对WEB页面进行操作,此过程中首先面对的问题就是对WEB页面元素的定位,几乎所有的关键字都需要传入特定的WEB页面元素,因此掌握常 ...

  8. CSS Position 定位属性

    本篇文章主要介绍元素的Position属性,此属性可以设置元素在页面的定位方式. 目录 1. 介绍 position:介绍position的值以及辅助属性. 2. position 定位方式:介绍po ...

  9. htnl中的遮罩层以及定位方式

    在页面显示遮罩层,例如:一个div的css样式: $msk.css({ "top":"0", "left":"0", & ...

随机推荐

  1. HTML行为元素和块级元素及语义化

    块级元素 div - dl - form 交互表单h1 - h6 标题 hr 水平分割线p 段落ul 非排序列表table 表格 行内元素 a 链接br 换行em 强调i 斜体img 图片input ...

  2. 创建好Android Application Project 后运行就报错。

    如图: 这个问题有可能是有可能是没导入Android support库,简单了解一下: google提供了Android Support Library package 系列的包来保证来高版本sdk开 ...

  3. uboot的编译

    在我拿到开发板以后,uboot都是编译好的,但是我不知道它是如何生成uboot.bin文件的.经过一番摸索.我也会编译uboot了. #cd /home #mkdir study //创建工作目录 * ...

  4. iOS存储的三种方式

    iOS中存储的3中方式: 1.NSUserDefaults 注意存储基本对象类型是没有问题的,但是要存储自定义对象,则要将对象内所有的属性(或是需要存储的属性)序列化,实现NSCoding协议序列化. ...

  5. Linux Mysql 忘记用户密码

    1.停止mysql 服务 /etc/init.d/mysqld stop 2.启动mysql服务跳过授权表并在后台运行  /etc/init.d/mysqld  start  -u root --sk ...

  6. 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[ ...

  7. 基于socket的TCP和UDP编程

    一.概述 TCP(传输控制协议)和UDP(用户数据报协议是网络体系结构TCP/IP模型中传输层一层中的两个不同的通信协议. TCP:传输控制协议,一种面向连接的协议,给用户进程提供可靠的全双工的字节流 ...

  8. linux服务器使用

    1.在widows系统下,下载putty.exe 配置默认的服务器IP + 端口 添加名称.点击save即可 参考:http://jingyan.baidu.com/article/c74d60004 ...

  9. myBatis oracle 与mysql自增问题

    mysql <insert id="insert" parameterType="Person" useGeneratedKeys="true& ...

  10. 通过IP地址屏蔽各种“推广”

    事情的起因是这样的:最近老是发现iPhone应用的底部出现各种横条广告,一开始以为是Google的广告推广,所以没管它,但是最近这些广告越来越猖狂,里面的内容越来越垃圾.今天仔细一看,原来不是Goog ...