css元素框定位

一、相对定位:

  相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。position:relative;同时可以设置上下左右位置偏移;relative是让元素框和父级显示在同一层,只是相对位置发生变化;

二、绝对定位:

  设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。position:absolute;让元素框显示单独的一层,绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。而其他元素的布局就好像改元素不存在一般。可以使用z-index:的具体数值改变它的相对是覆盖还是被覆盖。绝对定位在相对定位的基础上,可以固定住在相对元素的某一位置不变。

三、浮动:

  元素堆叠,向某一方向对齐,空间不够就会换行对齐。float:属性。

学习前端页面css定位的更多相关文章

  1. 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例

    今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...

  2. [Web 前端] 020 css 定位之绑定定位

    绑定定位 少废话,上例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...

  3. [Web 前端] 019 css 定位之绝对定位与相对定位

    1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身 ...

  4. vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结

    vue—你必须知道的   目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...

  5. web前端学习(三)css学习笔记部分(2)-- css定位+盒子操作

    3.CSS定位 3.1定位 1.CSS定位: 改变元素在页面上的位置 2.CSS定位机制 普通流:元素按照其在HTML中的位置顺序决定排布的过程 浮动 绝对布局 属性 描述 position 把元素放 ...

  6. 李洪强和你一起学习前端之(3)Css基础和选择器

    大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...

  7. 前端学习:学习笔记(CSS部分)

    前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...

  8. 前端学习之路-CSS介绍,Html介绍,JavaScript介绍

    CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...

  9. 李洪强和你一起学习前端之(6)css行高,盒模型,外边距

    李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...

随机推荐

  1. shell如何传递变量到另一个脚本文件中

    http://www.jbxue.com/article/shell/20707.html本文介绍了shell脚本传递变量到另一个脚本文件中的方法,在脚本中调用另一脚本,即创建了一个子进程,感兴趣的朋 ...

  2. SQL获取当前日期的年、月、日、时、分、秒数据

    SQL Server中获取当前日期的年.月.日.时.分.秒数据: SELECT GETDATE() as '当前日期',DateName(year,GetDate()) as '年',DateName ...

  3. iOS6后的内存警告处理

    [iOS6后的内存警告处理] The memory used by a view to draw itself onscreen is potentially quite large. However ...

  4. mongon命令(转)

    原文:http://www.cnblogs.com/blueness-sunshine/p/6139092.html   连接mongodb: mongo -u --authenticationDat ...

  5. BASE64Encoder及BASE64Decoder编译器找不到问题

    编译器自带这两个类,但是会报错找不到,需要手动让编译器识别这个类 第一步.右键项目,然后选择properties 第二步,打开如图位置 第三部,选择如图位置,双击 第四部,add添加 更改值 改为如图 ...

  6. pthread_rwlock_rdlock和“No such file or directory”

    pthread_rwlock_rdlock和"No such file or directory" 调用pthread_rwlock_rdlock时,如果失败报错"pth ...

  7. 服务器如何打开ping命令

    服务器禁止ping后忘记是用什么方法禁止的了.只知道不是使用ip策略现在需要再开启ping...请问该怎么弄? 是不是windows防火墙开启了啊,到控制面板里的windows防火墙中看看,把防火墙关 ...

  8. awk基础02-变量-分隔符-数组

        对任意一门语言都会有变量,在awk中变量分为内置变量和自定义变量. 内置变量:就是预先在awk中定义好的,用户可以直接使用 自定义变量:这种变量为用户自己定义的变量,需要先定义后再使用. 内置 ...

  9. 使用VMWare12.0安装Ubuntu系统

    使用VMWare12.0安装Ubuntu系统 Vmware12的虚拟机的文档说明: http://pubs.vmware.com/workstation-12/index.jsp#com.vmware ...

  10. delphi 拆分字符串

    最近在使用Delphi开发一种应用系统的集成开发环境.其中需要实现一个字符串拆分功能,方法基本原型应该是:procedure SplitString(src: string ; ch: Char; v ...