新接触的多几种定位方式(相对定位、绝对定位、固定地位和浮动)

本周学习了页面布局相关的东西,网页 布局中,几种定位是我们经常用到的一个知识点,现在罗列一下目前接触到的剧中定位 方式以及其具体解释:

1、relative(相对定位)

在static的基础上,让一个元素在他本来的位置做一些位移,可以将该元素定位设置为relative,同时指定相对位移(利用top,bottom,left,right)。有一点需要注意的是,相对定位的元素没有脱离文档流,仍然占据着他本来占据的位置空间。

2、absolute(绝对定位)

中将一个元素放至指定位置,可以使用absolute绝对定位来定位,将该元素的position设置为absolute,同时使用top,bottom,left,right来定位。

如果没有父元素,位置是相对于body来进行的。

绝对定位会脱离文档流,结果就是该元素原本占据的空间被其它元素所填充。

3、static(默认定位)

当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方。所以在不同的分辨率下,采用流式定位能很好的自适合,取得相对较好的布局效果。

一般来说,我们不需要指明当前元素的定位方式是static,因为这是默认的定位方式。除非你想覆盖从父元素继承来的定位系统。

left,top属性对static没有效果,static是靠margin这些定位的。

4、fixed(固定定位)

absolute定位的参照物是“上一个定位过的父元素(static不算)”,那么如果想让一个元素定位的参照物总是整个文档(viewport),就可以使用fixed定位,fixed定位的参照物总是当前的文档。利用fixed定位,我们很容易让一个div定位在浏览器文档的左上,右上等方位。

5、float(浮动)

对于浮动,需要了解的是:

1、浮动会将元素从文档流中删除,他的空间会被其它元素补上。

2、浮动的参数物是父元素,是在父元素这个容器中飘。

3、为了清除浮动造成的对浮动元素之后元素的影响,我们在浮动元素之后加一个div,并将这个div的clear设置为both。

4、如果两个元素都设置了浮动,则两个元素并不会重叠,第一个元素占据一定空间,第二个元素紧跟其后。如果不想让第二个元素紧跟其后,可以对第二个浮动的元素使用clear。

时间: 05-26

新接触的多几种定位方式(相对定位、绝对定位、固定地位和浮动)的相关文章

CSS的三种定位方式介绍(转载)

在CSS中一共有N种定位方式,其中,static ,relative,absolute三种方式是最基本最常用的三种定位方式.他们的基 本介绍如下. static默认定位方式relative相对定位,相对于原来的位置,但是原来的位置仍然保留absolute定位,相对于最近的非标准刘定位,原来的位置消失,被后边的位置所顶替 下面先演示相对定位的案例 [html] view plain copyprint? <!DOCTYPE html> <html> <head> <

android 三种定位方式

一共有三种定位方式,一种是GPS,一种是通过网络的方式,一种则是在基于基站的方式,但是,不管哪种方式,都需要开启网络或者GPS 首先添加权限 <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 在C

【转】HTML中的几种定位方式

http://www.cnblogs.com/Jerry-Chou/archive/2011/11/02/2233094.html 1,static(默认) 当你没有为一个元素(例如div)指定定位方式时,默认为static,也就是按照文档的流式(flow)定位,将元素放到一个合适的地方.所以在不同的分辨率下,采用流式定位能很好的自适合,取得相对较好的布局效果. 一般来说,我们不需要指明当前元素的定位方式是static——因为这是默认的定位方式.除非你想覆盖从父元素继承来的定位系统. 2,rel

css中三种定位详细介绍

在前台进行页面位置编辑时,时常碰到页面部分标签位置错乱,因此研究了一下通过css进行定位标签的方法. 定位方式:是指如何确定某个标签在页面中的位置. 1.固定定位:始终相对于浏览器窗口进行定位 1 <html> 2 <head> 3 <title>定位方式-固定定位</title> 4 <meta charset="utf-8"> 5 <style type="text/css"> 6 body

selenlum笔记,(定位方式,搜索,cookie)

driver.get_cookies() 获得cookie信息add_cookie(cookie_dict)  向cookie添加会话信息delete_cookie(name)   删除特定(部分)的cookiedelete_all_cookies()    删除所有cookie driver.quit()退出关闭所有程序及窗口driver.close()关闭当前窗口 driver.get(url)print(driver.title)打印页面title driver.maximize_wind

Css3之基础-11 Css定位(定位概念 、定位方式)

一.CSS 定位概述 定位概念 - 普通流定位 - 页面中的块级元素框从上到下一个接一个地排列 - 每一个块级元素都会出现在一个新行中 - 内联元素将在一行中从左到右排列水平布置 - 浮动 - 相对定位 - 绝对定位 - 固定定位 定位属性 - position属性: - position: static/relative/absolute/fixed; - 偏移属性:实现元素框位置的偏移 - top/bottom/right/left: value; - 堆叠顺序 - z-index: val

Selenium Webdriver元素定位的八种常用方式

在使用selenium webdriver进行元素定位时,通常使用findElement或findElements方法结合By类返回的元素句柄来定位元素.其中By类的常用定位方式共八种,现分别介绍如下. 1. By.name() 假设我们要测试的页面源码如下: <button id="gbqfba" aria-label="Google Search" name="btnK" class="gbqfba"><

js的6种继承方式

重新理解js的6种继承方式 注:本文引用于http://www.cnblogs.com/ayqy/p/4471638.html 重点看第三点 组合继承(最常用) 写在前面 一直不喜欢JS的OOP,在学习阶段好像也用不到,总觉得JS的OOP不伦不类的,可能是因为先接触了Java,所以对JS的OO部分有些抵触. 偏见归偏见,既然面试官问到了JS的OOP,那么说明这东西肯定是有用的,应该抛开偏见,认真地了解一下 约定 P.S.下面将展开一个有点长的故事,所以有必要提前约定共同语言: 1 2 3 4 5

Linux中的两种link方式

Linux系统中包括两种链接方式:硬链接(hard link)和符号链接(symbolic link),其中符合链接就是所谓的软链接(soft link),那么两者之间到底有什么区别呢? inode 在Linux系统中,内核为每一个新创建的文件分配一个inode,每个文件都有一个惟一的inode,这里将inode简单理解成一个指针,它永远指向本文件的具体存储位置同时,文件属性保存在inode里,比如owner等.在访问文件时,inode被复制到内存,从而实现文件的快速访问.系统是通过inode来