CSS基础-4 定位
CSS定位和浮动
css定位：改变页面的位置
定位机制有以下三种
普通流
浮动
绝对布局
定位的属性：
position：把元素放在一个静态的、相对的、绝对的、或固定的位置中
top 元素向上偏移
left 元素向左偏移
right 元素向右偏移
bottom 元素向下偏移
overflow 设置元素溢出其区域发生的事情
clip 设置元素的显示的形状
vertical-align 设置元素的垂直对齐方式
z-index 设置元素的堆叠顺序 （和图片的至于顶层和顶层效果 相同，数字越大， 就越处于顶层）
position属性
static （静态的）偏移量对static无效
absolute （绝对定位）
脱离了文本流（即在文档中已经不占据位置），参照浏览器的左上角通过top,right,bottom,left（简称TRBL） 定位。可以选取具有定位的父级对象（下文将说到relative与absolute的结合使用）或者body坐标原点进行定位，也可以通过z-index进行层次分级。absolute在没有设定TRBL值时是根据父级对象的坐标作为始点的，当设定TRBL值后则根据浏览器的左上角作为原始点
relative（相对定位）
relative是相对的意思，顾名思义就是相对于元素本身在文档中应该出现的位置来移动这个元素，可以通过TRBL来移动元素的位置，实际上该元素依然占据文档中原有的位置，只是视觉上相对原来的位置有移动。具体案例如下：
fixed （固定定位）
例子:
absolute 绝对定位例子
定义好样式
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.juedui {
width:100px;
height:100px;
background:blue;
}
</style>
<body >
<div class="juedui">
</div>
</body>
效果如下: 左上都处于浏览器的最边缘
然后我们在css样式中加入绝对定位。
.juedui {
width:100px;
height:100px;
background:blue;
position:absolute;
top:100px;
left:100px;
}
这种绝对定位是单个盒子的时候，没有div嵌套。那么盒子的绝对位置是跟据浏览器为基准定位的。
例子2：
在div嵌套中，如果一个元素的父元素设置了定位，那么子元素设置定位以父元素左上角为基准设置定位。
<style type="text/css">
* {
margin:0px;
padding:0px;
}
.waibu {
width:400px;
height:400px;
background:aqua;
position:absolute;
top:100px;
left:100px;
}
.juedui {
width:100px;
height:100px;
background:blue;
position:absolute;
top:100px;
left:100px;
}
</style>
<body>
<div class="waibu">
<div class="juedui">
</div>
</div>
</body>
效果如下图。
relative相对位置例子：
.xiangdui {
height:50px;
background:aqua;
}
.xiangdui2 {
height:100px;
width:100px;
background:blue;
position:relative;
top:100px;
left:100px;
}
<div class="xiangdui"></div>
<div class="xiangdui2"></div>
没有加相对位置标签以前的效果如下 添加完相对位置后效果如下：
div元素出现的位置是相对于自己应该出现位置移动的。
CSS基础-4 定位的更多相关文章
- CSS 基础：定位元素(3)<思维导图>
这段时间利用一下间隙时间学习了CSS的基础知识,主要目的是加深对CSS的理解,虽然个人主要工作基本都是后台开发,但是个人觉得系统学习一下CSS的基础还是很有必要的.下面我学习CSS时做的思维导图(全屏 ...
- CSS 基础 例子 定位及z-index
position 属性指定了元素的定位类型. position 属性的四个值: static 不设置默认为该值,即没有定位,元素出现在正常的流中.不能使用top,bottom,left,righ ...
- css基础回顾-定位：position
w3school 对position定义和说明是: 定义和用法: position 属性规定元素的定位类型. 说明: 这个属性定义建立元素布局所用的定位机制.任何元素都可以定位,不过绝对或固定元素会生 ...
- CSS浮动、定位
这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右 ...
- CSS基础篇之了解CSS和它的基本属性
CSS是什么? CSS英文全名是Cascading Style Sheets翻译过来就是层叠样式表,它主是把网页表现与内容分离的一种样式设计语言.这种语言能优化我们编程,把东西简化和优化写法,而且不同 ...
- 妙味课堂——HTML+CSS基础笔记
妙味课堂的课程讲得非常的清楚,受益匪浅.先把HTML和CSS基础课程部分视频的学习笔记记录如下: padding #PS基础 ##前端需要的PS技能 - PS技能(前端需要):切图.修图.测量 - P ...
- WEB前端开发CSS基础样式全面总结
Web前端开发css基础样式全面总结 颜色和单位的使用 颜色 用颜色的名字表示颜色,比如:red 用16进制表示演示 比如:#FF0000 用rgb数值表示颜色,rgb(红,绿,蓝),每个值都在0-2 ...
- css基础不扎实
写了两周的网页,发现自己的css基础还是很差的,当时培训学习的时候就发现了,我做的页面都特别的别扭和丑吧,在班级上应该是垫底的: 原先只知道用float,不会使用定位,网页连固定定位也不会,现在发现, ...
- （转）CSS+DIV float 定位
来自:http://www.cnblogs.com/iyangyuan/archive/2013/03/27/2983813.html 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能 ...
随机推荐
- Mave 下载与安装
一,Maven 介绍 我们在开发中经常需要依赖第三方的包,包与包之间存在依赖关系,版本间还有兼容性问题,有时还需要将旧的包升级或降级,当项目复杂到一定程度时包管理变得非常重要.Maven是当前最受欢迎 ...
- 莫烦python教程学习笔记——总结篇
一.机器学习算法分类: 监督学习:提供数据和数据分类标签.--分类.回归 非监督学习:只提供数据,不提供标签. 半监督学习 强化学习:尝试各种手段,自己去适应环境和规则.总结经验利用反馈,不断提高算法 ...
- PowerDotNet平台化软件架构设计与实现系列（06）：定时任务调度平台
定时任务是后端系统开发中少不了的一个基本必备技能. 传统的实现定时任务的方式有很多种,比如直接使用操作系统的Timer和TaskSchedule,或者基于Quartz.HangFire.xxl-job ...
- JS21. 使用原生JS封装一个公共的Alert插件（HTML5: Shadow Dom）
效果预览 Shadow DOM Web components 的一个重要属性是封装--可以将标记结构.样式和行为隐藏起来,并与页面上的其他代码相隔离,保证不同的部分不会混在一起,可使代码更加干净.整 ...
- drone使用git tag作为镜像tag
官方自动tag plugin/docker 已支持自动标签,使用方法如下 steps: - name: docker image: plugins/docker settings: repo: foo ...
- java 注解的几大作用及使用方法详解
初学者可以这样理解注解:想像代码具有生命,注解就是对于代码中某些鲜活个体的贴上去的一张标签.简化来讲,注解如同一张标签. 在未开始学习任何注解具体语法而言,你可以把注解看成一张标签.这有助于你快速地理 ...
- ios self.和_区别
- "self."调用该类的setter或getter方法,"_"直接获取自己的实例变量.property 和 instance variable 是有区别的. ...
- HSPICE 电平触发D触发器仿真
一. HSPICE的基本操作过程 打开HSPICE程序,通过OPEN打开编写好的网表文件. 按下SIMULATE进行网表文件的仿真. 按下AVANWAVES查看波形图(仿真结果). 二. 网表文件结构 ...
- java 数据类型：集合接口Collection之 Stream 的reduce方法
Stream 的reduce递归计算 import java.util.ArrayList; import java.util.Arrays; import java.util.List; impor ...
- react Input 表单
input react 表单 input 密码框在谷歌浏览器下 会有黄色填充 官网的不太用,这个比较好用 type="password" autoComplete=" ...