2016.3.14__CSS 定位__第六天
假设您认为这篇文章还不错。能够去H5专题介绍中查看很多其它相关文章。
CSS 定位机制
CSS中一共同拥有三种基本定位机制：普通流、浮动、绝对定位。
假设不进行专门指定。全部的标签都在普通流中定位。
块级元素从上到下一个接一个的排列，框之间的垂直距离是由框的垂直外边距计算出来。
行内框在一行中水平布置。
能够使用水平内边距、边框和外边距来调整它们之间的间距。
position属性
通过position属性。我们能够选择4种不同类型的定位，这会影响元素框生成的方式。
包括4个属性值：static、relative、absolute、fixed
static: 元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分。行内元素则会创建一个或多个行框。置于其父元素中。relative: 元素框偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍然保留。absoulte: 元素框从文档流中全然删除，并相对于其包括块定位。元素原先在正常文档流中所占的空间会关闭。就好像元素不存在一样。
元素定位后生成一个块元素，而不论原来它在正常文档流中生成何种类型的框。
fixed: 元素框的表现相似将position设置为absoulte，只是其包括块是浏览器窗体。
代码展示
position: static;
static是position属性的默认值。无特殊定位。均为正常定位。
position: reletive;
HTML代码:
<p class="p1">
我是p1
</p>
<p class="p2">
我是p2
</p>
<p class="p3">
我是p3
</p>
CSS代码:
.p1 {
position: relative;
left: 30px;
}
.p2 {
position: relative;
right: 30px;
}
效果图：
解释：
position: relative;參考的是自己原来得位置。- 第一行文字设置postion为relative，这并不会造成什么反应。可是我们还给p1设置了
left: 30px;。这就会使元素距离左側产生30px的间距。 - 相同。第二行文字设置
right: 30px，会使元素距离右側30px的间距。就产生了跑到屏幕外面的情况 - 第三方没有做不论什么处理。正常显示
- 注意，一定要设置好
position: relative;，否则top、right、bottom、left是不起作用的。
position: absoulte;
HTML代码:
啦啦啦啦啦
<h1 class="h1">我是h1大标题</h1>
CSS代码:
.h1 {
position: absolute;
top: 100px;
left: 100px;
}
没有设置CSS样式的样子：
设置了CSS样式后的样子：
解释：
postion: absolute;參考的是自身的包括块，也就是自己的父视图- 当设置了
position: absolute;属性之后，标签的位置就变得绝对了。这个时候我们设置top、right、bottom、left当中的不论什么一个属性。都能够设置标签的位置。 - 注意，一定要设置好
position: absolute;，否则top、right、bottom、left是不起作用的。
position: fixed;
HTML代码:
<p class="one">
我是p one
</p>
<p class="two">
我是p two
</p>
CSS代码:
.one {
position: fixed;
top: 100px;
left: 30px;
}
.two {
position: fixed;
top: 50px;
right: 30px;
}
效果展示：
解释：
position: fixed;參考系是浏览器的窗体- 当给标签设置了
position: fixed;属性之后。这些标签就仅仅会相对于浏览器窗体进行位置的设定。忽略网页的滚动 - 相同。假设不设置
postion: fixed;属性。而是直接设置top、right、bottom、left都不会起作用
參考文章：http://www.w3school.com.cn/css/css_positioning.asp
关于界面排布优先级的问题 z-index
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style media="screen">
div{
width: 100px;
font-size: 50px;
position: absolute;
height: 100px;
}
.a{
background-color: red;
left: 0;
top: 0;
/*设置优先级。数字越大，放置越靠前*/
z-index: 3;
}
.b{
background-color: blue;
left: 40px;
top: 40px;
z-index: 2;
}
.c{
background-color: green;
left: 80px;
top: 80px;
z-index: 100;
}
</style>
</head>
<body>
<div class="a">1</div>
<div class="b">2</div>
<div class="c">3</div>
</body>
</html>
关于界面元素框偏移
偏移前：
偏移后：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.wrap{
width: 300px;
height: 300px;
border: 1px solid red;
margin: 100px;
padding: 100px;
position: relative;
padding-left: 0;
}
.inner{
width: 200px;
height: 200px;
background-color: green;
padding: 50px;
position: relative;
}
.content{
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 0;
}
</style>
</head>
<body>
<!--
position:absolute;默认是相对于窗体进行定位
-->
<div class="wrap">
<div class="inner">
<div class="content"></div>
</div>
</div>
</body>
</html>
2016.3.14__CSS 定位__第六天的更多相关文章
- 2016.3.17__CSS3动画__第十一天
CSS3动画 假设您认为这篇文章还不错,能够去H5专题介绍中查看很多其它相关文章. 通过 CSS3,我们能够创建动画,这能够在很多网页中取代动绘图片.Flash 动画以及 JavaScript. 今日 ...
- 我的Python成长之路---第六天---Python基础（20）---2016年2月20日（晴）
一.面向对象基础 面向对象名词解释: 类(Class): 用来描述具有相同的属性和方法的对象的集合.它定义了该集合中每个对象所共有的属性和方法.对象是类的实例. 类变量:类变量在整个实例化的对象中是公 ...
- __x__(34)0908第五天__ 定位 position
position 定位 指将原始摆放到页面的任意位置. 继承性:no 默认值:static 没有定位,原始出现在正常的文档流中 可选值: static : 默认值,元素没有开启定位 ...
- [android学习]__使用百度地图开放api编写地图定位app
前言 在前面我已经记录关于如何使用百度地图api,以及如何配置相关的androidstudio配置了,接下来将记录如何使用百度地图api开发简单的地图定位apk,我将决定不定期持续更新本篇笔记,在每个 ...
- Appium入门（8）__控件定位
部分摘自:http://www.testclass.net/appium/appium-base-find-element/ appium 通过 uiautomatorviewer.bat 工具来查看 ...
- iOS 学习笔记五 【2016年百度地图定位详细使用方法】
具体介和配置绍在此就不详述了,详情请看百度地图API文档, 在这里具体讲解下,新版百度地图的定位与反地理编码的使用: 1.导入头文件 #import <BaiduMapAPI_Map/BMKMa ...
- 2016.3.16__HTML5新特性__第八天
HTML 5 + CSS 3 假设您认为这篇文章还不错,能够去H5专题介绍中查看很多其它相关文章. 今日代码非常冗杂,所以非常多内容直接摘自网上,假设造成您的不适.请留言告知. 非常感谢. 输入标签, ...
- 2016.3.15__H5页面实战__第七天
假设您认为这篇文章还不错,能够去H5专题介绍中查看很多其它相关文章. 个人简书地址: dhttp://www.jianshu.com/users/5a2fd0b8fb30/latest_article ...
- 第六天-css基础（css定位)
css定位 方位名称: left right top bottom position:absolute 绝对定位(脱离标准流 div{ width:100px; height:100p ...
随机推荐
- 快速傅里叶变换FFT(模板)
好不容易闲下来总结一下FFT.QAQ 1.DFT: 对于多项式的乘法,DFT给了我们新的思路(点值表达式的O(n)相乘) 对于我们习惯的多项式算法例如多项式A(x)=5x+1和B(x)=2x+2 C( ...
- 【hdu 4333】Revolving Digits
[链接]http://acm.hdu.edu.cn/showproblem.php?pid=4333 [题意] 就是给你一个数字,然后把最后一个数字放到最前面去,经过几次变换后又回到原数字,问在这些数 ...
- x264代码剖析（三）：主函数main()、解析函数parse()与编码函数encode()
x264代码剖析(三):主函数main().解析函数parse()与编码函数encode() x264的入口函数为main().main()函数首先调用parse()解析输入的參数,然后调用encod ...
- android设置Activity背景色为透明的3种方
方法一:这种方法比较简单,只有一个步骤,只需要在配置文件中把需要设置为透明的activity的样式设置为 Android:theme="@android:style/Theme.Transl ...
- 【Codeforces Round #450 (Div. 2) A】Find Extra One
[链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] 模拟. 看看Y左边或右边的点个数是否<=1 [代码] #include <bits/stdc++.h> using ...
- 魅族MX5和努比亚布拉格手机參数对照
想买个Android手机锁定魅族MX5和努比亚布拉格.两个官网翻来翻去的非常难取舍,自己列了一个表对比了一下參数,本人喜欢薄一点的手机.有feel.參数对比表例如以下: 手机 魅族MX5 努比亚布拉格 ...
- 关于在IISserver上执行asp.net Web程序出现以下 “Could not load file or assembly。。。”问题的
Could not load file or assembly 'System.EnterpriseServices, Version=4.0.0.0, Culture=neutral, Public ...
- php课程 11-37 类和对象的关系是什么
php课程 11-37 类和对象的关系是什么 一.总结 一句话总结:类生成对象,对象是类的实例化,一定是先有类,后有对象,一定是先有标准,再有个体. 1.oop的三大优势是什么? 重用性,灵活性.扩展 ...
- [React Intl] Install and Configure the Entry Point of react-intl
We’ll install react-intl, then add it to the mounting point of our React app. Then, we’ll use react- ...
- C#自定义配置文件节的实现
1.配置文件:(注意configSections必须放在最上面否则会报错) <?xml version="1.0" encoding="utf-8" ?& ...