学习前端页面css定位
css元素框定位
一、相对定位:
相对定位是一个非常容易掌握的概念。如果对一个元素进行相对定位,它将出现在它所在的位置上。然后,可以通过设置垂直或水平位置,让这个元素“相对于”它的起点进行移动。position:relative;同时可以设置上下左右位置偏移;relative是让元素框和父级显示在同一层,只是相对位置发生变化;
二、绝对定位:
设置为绝对定位的元素框从文档流完全删除,并相对于其包含块定位,包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样。元素定位后生成一个块级框,而不论原来它在正常流中生成何种类型的框。position:absolute;让元素框显示单独的一层,绝对定位使元素的位置与文档流无关,因此不占据空间。这一点与相对定位不同,相对定位实际上被看作普通流定位模型的一部分,因为元素的位置相对于它在普通流中的位置。而其他元素的布局就好像改元素不存在一般。可以使用z-index:的具体数值改变它的相对是覆盖还是被覆盖。绝对定位在相对定位的基础上,可以固定住在相对元素的某一位置不变。
三、浮动:
元素堆叠,向某一方向对齐,空间不够就会换行对齐。float:属性。
学习前端页面css定位的更多相关文章
- 李洪强和你一起学习前端之(7)定位盒子 css可见性 滑动门案例
今天是2017年3月23日 1 复习昨天知识 1.1浮动 Float:left | right 特点: ->浮动的元素不占位置(脱标) ->可以将行内元素转化为行内块元素 ->块级元 ...
- [Web 前端] 020 css 定位之绑定定位
绑定定位 少废话,上例子 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> ...
- [Web 前端] 019 css 定位之绝对定位与相对定位
1. 关于定位 我们可以使用 css 的 position 属性来设置元素的定位类型 postion 的设置项如下 设置项 释义 relative 生成相对定位元素元素所占据的文档流的位置不变元素本身 ...
- vue—你必须知道的 js数据类型 前端学习 CSS 居中 事件委托和this 让js调试更简单—console AMD && CMD 模式识别课程笔记(一) web攻击 web安全之XSS JSONP && CORS css 定位 react小结
vue—你必须知道的 目录 更多总结 猛戳这里 属性与方法 语法 计算属性 特殊属性 vue 样式绑定 vue事件处理器 表单控件绑定 父子组件通信 过渡效果 vue经验总结 javascript ...
- web前端学习(三)css学习笔记部分(2)-- css定位+盒子操作
3.CSS定位 3.1定位 1.CSS定位: 改变元素在页面上的位置 2.CSS定位机制 普通流:元素按照其在HTML中的位置顺序决定排布的过程 浮动 绝对布局 属性 描述 position 把元素放 ...
- 李洪强和你一起学习前端之(3)Css基础和选择器
大家好! 经过了前面的学习,是不是对前端的学习有了初步的了解.虽然我之前有iOS开发的经验,现在接触一门新的语言,对我来说 有一定的优势,但是一门技术对于谁来说都是公平的,我承认,我在接触新知识的时候 ...
- 前端学习:学习笔记(CSS部分)
前端学习:学习笔记(CSS部分) CSS的学习总结(图解) CSS的引入方式和书写规范 CSS的插入方式_内嵌样式 <!DOCTYPE html> <html> <hea ...
- 前端学习之路-CSS介绍,Html介绍,JavaScript介绍
CSS介绍 学前端必备掌握CSS样式,css为层叠样式表,用来定义页面的显示效果,加强用户的体验乐趣,那么如何用css到html中呢? style属性方式 利用标签中的style属性来改变显示样式 & ...
- 李洪强和你一起学习前端之(6)css行高,盒模型,外边距
李洪强和你一起学习前端之(6)css行高,盒模型,外边距 复习昨天的知识 1.1css书写位置: 内嵌式写法 外联式写法 <link href = "1.css" rel = ...
随机推荐
- jqzoom插件图片放大功能的一些BUG
建议使用cloud-zoom插件,jqzoom插件就不要使用了 点击查看——图片放大镜——jQuery插件Cloud Zoom 刚开始使用的是jqzoom插件,但问题太多了,就不说插入到页面中使用了, ...
- 移动直播app怎么做
今年移动直播行业的兴起,诞生了一大批网红,甚至明星也开始直播了,因此不得不跟上时代的步伐,教你从零开始搭建一个完整的iOS直播app,希望能帮助到更多的人更快的了解直播. 了解直播 1 热门直播产品: ...
- Oracle学习笔记(十三)
十四.触发器(监听数据操作的工具) 1.什么是触发器? 数据库触发器是一个与表相关联的.存储的PL/SQL程序 作用: 每当一个特定的数据操作语句(insert.update.delete)在指定的表 ...
- spring常用接口 InitializingBean的作用
工作中遇到spring接口中的InitializingBean接口.浅浅的解说一下. --------------------------------------------------------- ...
- OpenGL中的需要注意的细节问题
OpenGL中的需要注意的细节问题 1. 虽然我们使用Windows的BMP文件作为纹理时,一般是蓝色的像素在最前,其真实的格式为GL_BGR而不是GL_RGB,在数据的顺序上有所 不同,但因为同样是 ...
- kali下搭建WiFi钓鱼热点
在linux下建立无线热点并不像在windows下开启网络共享或者使用无线网卡驱动设置AP模式即可. linux下的无线共享要用到两个软件:hostapd(创建无线热点).dnsmasq(dns服务和 ...
- linux 用户/用户组添加修改删除(ubuntu/centos)
一.LINUX(UBUNTU/CENTOS)用户添加删除修改 1.建用户: adduser web //新建web用户 useradd web ...
- 微服务中的健康监测以及其在ASP.NET Core服务中实现运行状况检查
1 .什么是健康检查? 健康检查几乎就是名称暗示的.它是一种检查您的应用程序是否健康的方法.随着越来越多的应用程序转向微服务式架构,健康检查变得尤其重要(Health Check).虽然微服务架构有很 ...
- java-01 JAVA三大版本比较&JDK、JRE、JVM 的关系
1. java三大版本比较 1.1 java SE javaSE 是java标准版的简称,其定位是个人计算机应用(应用原生界面比较ugly) 全称:Java Platform Standard Edi ...
- tomcat7-maven-plugin 端口
不知道有没有人像我这样,在pom配置了下面这段之后, <plugins> <plugin> <groupId>org.apache.tomcat.maven< ...