CSS position &居中（水平，垂直）
css position是个很重要的知识点：
知乎Header部分：
知乎Header-inner部分：
position属性值：
fixed：生成绝对定位的元素，相对浏览器窗口进行定位（位置可通过：left,right,top,bottom改变）;与文档流无关，不占据空间（可能与其它元素重叠）
relative：生成相对定位的元素（相对于元素正常位置）（left，right，top，bottom）；relative的元素经常用作absolute的元素的容器块;原先占据的空间依然保留
absolute：生成绝对定位的元素（相对第一个已定位的父元素进行定位；若没有则相对<html>）（left,right,top,bottom）；与文档流无关，不占据空间（可能与其它元素重叠）
static：默认值。没有定位，元素出现在正常的文件流中（left,right,top,bottom,z-index无效！）
inherit：继承从父元素的position值
fixed示例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>cascading style sheet</title>
<style>
#test{
width: 500px;
height: 100px;
position: fixed;
top: 0px;
left: 500px;
border: 1px solid burlywood;
background-color: #F2F2F2;
z-index: 2;
}
.test1{
margin-top: 100px;
}
.test1, .test2, .test3, .test4, .test5{
width: 200px;
height: 300px;
border: 1px solid black;
position: relative;
left: 500px;
background-color: gray;
}
</style>
</head>
<body>
<div id="test"></div>
<div class="test1">1</div>
<div class="test2">2</div>
<div class="test3">3</div>
<div class="test4">4</div>
<div class="test5">5</div> </body>
</html>
#test部分始终固定在上方，不发生移动。
relative示例：（原先占据的空间依然保留！）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>position:relative</title>
<style>
.test1, .test2, .test3{
width: 200px;
height: 200px;
border: 1px solid orange;
}
.test2{
border-color: black;
position: relative;
top:-100px;
left: 10px;
}
</style>
</head>
<body>
<div class="test1">this is part 1</div>
<div class="test2">this is part 2</div>
<div class="test3">this is part 3</div>
</body>
</html>
运行结果：（箭头所指这部分区域空间依然保留！！！）
凡是可能发生重叠的position属性，均能使用z-index!
- 没有指定z-index：代码后面的在上面（“后来者居上”）；
- z-index越大的在上面！
注意：当使用position或者float属性时，通常<body>要预设定义margin和padding。这样可以避免在不同的浏览器中出现差异！
如果省略<!DOCTYPE>声明，IE8及以下版本会在右侧增加17px的外边距！这似乎是为了滚动条预留的空间！所以，请始终设置<!DOCTYPE>声明！！！
布局之水平居中：
1.元素居中对齐（比如<div>）：
使用margin:0 auto;（上下margin为0，左右自动分配（居中！））！注意：此方法元素需设置width属性（除了width:100%）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>居中</title>
<style>
/* 预设置样式 */
body{
margin: 0;
padding: 0;
}
.test1{
border: 1px solid gold;
width: 150px;
height: 150px;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="test1">this is test1</div>
</body>
</html>
2.图像居中对齐（先设置display:block;再margin:0 auto）；
3.文本居中对齐（text-align:center;）
4.左右对齐：（①position:absolute;再设置left或right属性值②float:left;或者float:right）
布局之垂直居中：
方法一：line-height：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>居中</title>
<style>
/* 预设置样式 */
body{
margin: 0;
padding: 0;
}
.test1{
border: 1px solid gold;
width: 150px;
height: 150px;
line-height: 150px;
}
</style>
</head>
<body>
<div class="test1">this is test1</div>
</body>
</html>
这个方法有一个缺陷，适用于：“只有一行话”。原理：就是块元素（div）高度有多高，（行高）line-height就有多高！
不止一行话：
方法二：使用padding：
这种方法不会有上面line-height的“缺陷”，原理：好像就是"撑开"来一样！（个人比较推荐！）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>居中</title>
<style>
/* 预设置样式 */
body{
margin: 0;
padding: 0;
}
.test1{
border: 1px solid gold;
width: 200px;
padding: 100px 0px;
text-align: center;
}
</style>
</head>
<body>
<div class="test1">this is test1 this is test1 this is test1 this is test1 this is test1 </div>
</body>
</html>
方法三：使用display:flex;align-items:center;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>居中</title>
<style>
/* 预设置样式 */
body{
margin: 0;
padding: 0;
}
.test1{
border: 1px solid gold;
width: 200px;
height: 200px;
display: flex;
align-items: center;
text-align: center;
margin: 0 auto;
}
</style>
</head>
<body>
<div class="test1">this is test1 this is test1 this is test1 this is test1 this is test1 </div>
</body>
</html>
方法四：使用position和transform
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>居中</title>
<style>
/* 预设置样式 */
body{
margin: 0;
padding: 0;
}
.test1{
border: 1px solid gold;
width: 200px;
height: 200px;
position: relative;
}
.test1 p{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
}
</style>
</head>
<body>
<div class="test1"> <p>this is test1</p> </div>
</body>
</html>
CSS position &居中（水平，垂直）的更多相关文章
- 解读CSS布局之-水平垂直居
对一个元素水平垂直居中,在我们的工作中是会经常遇到的,也是CSS布局中很重要的一部分,本文就来讲讲CSS水平垂直居中的一些方法.由于我们大搜车的日常工作中已经不再需要理会低版本IE,所以本文所贴出的方 ...
- CSS 基础 例子 水平 & 垂直对齐
一.元素居中对齐 margin:auto 水平居中对齐一个元素(如 <div>),即div本身在容器中的对齐,用margin:auto,而且,需要设置 width 属性(或者设置 100% ...
- CSS 中的各种居中 (水平、垂直)
导读: CSS 的居中有水平居中和垂直居中,这两种居中又分为行内元素居中和块级元素居中.根据父.子元素的高度是否清楚,又会使得不同的居中用不同方法.本文就其中一些情况做下简单说明,以作笔记之用,仅供大 ...
- CSS 各类 块级元素 行级元素 水平 垂直 居中问题
元素的居中问题是每个初学者碰到的第一个大问题,在此我总结了下各种块级 行级 水平 垂直 的居中方法,并尽量给出代码实例. 首先请先明白块级元素和行级元素的区别 行级元素 一块级元素 1 水平居中: ( ...
- css3-7 如何让页面元素水平垂直都居中（元素定位要用css定位属性）
css3-7 如何让页面元素水平垂直都居中(元素定位要用css定位属性) 一.总结 一句话总结:元素定位要用css定位属性,而且一般脱离文档流更加好操作.先设置为绝对定位,上左都50%,然后margi ...
- CSS实现水平垂直同时居中的5种思路
× 目录 [1]水平对齐+行高 [2]水平+垂直对齐 [3]margin+垂直对齐[4]absolute[5]flex 前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的5种思路 ...
- CSS实现水平垂直同时居中的6种思路
前面的话 水平居中和垂直居中已经单独介绍过,本文将介绍水平垂直同时居中的6种思路 水平对齐+行高 [思路一]text-align + line-height实现单行文本水平垂直居中 <style ...
- （前端）面试300问之（2）CSS元素居中【水平、垂直、2者同时居中】
一 仅水平居中 1 行内元素 1)给父元素添加 text-align:center 即可 <div class="parent"> <span class=&qu ...
- CSS 布局 - 水平 & 垂直对齐
CSS 布局 - 水平 & 垂直对齐 一.元素居中对齐 要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;. 设置到元素的宽度将防止它溢出到容器的边缘 ...
随机推荐
- Flash and Scalform CLIK
Flash shift + f7 打开组件检查面板 Scaleform As bit define bool Unrolling :1; // indi ...
- 使用Python + Selenium破解滑块验证码
在前面一篇博客<使用 Python + Selenium 打造浏览器爬虫>中,我介绍了 Selenium 的基本用法和爬虫开发过程中经常使用的一些小技巧,利用这些写出一个浏览器爬虫已经完全 ...
- unity插件，从一段文字中提取中文并去重
using System.Collections.Generic; using System.Text.RegularExpressions; using UnityEditor; using Uni ...
- TensorFlow环境
vps cenots7自带的python2.7各种毛病,浪费了不少时间,装了pyhton3一下就搞定了 mac上有些依赖库需要sudo安装 vps上是基于Anaconda搭建的,感谢极客学院的教程ht ...
- oracle常见的执行计划
访问表的执行计划: 全表扫描:TABLE ACCESS FULL ROWID扫描:TABLE ACCESS BY USER ROWID (ROWID来源于用户在where条件中的指定)或 TABLE ...
- （4.22）Microsoft 管理控制台启用 SSL 加密的 SQL Server 实例
如何通过使用 Microsoft 管理控制台启用 SSL 加密的 SQL Server 实例 关键词:MSSQL加密,sql server加密,sql server客户端与服务器传输内容加密 转自:h ...
- 012-Future、FutureTask、CompletionService 、CompletableFuture
一.概述 创建线程的两种方式,一种是直接继承Thread,另外一种就是实现Runnable接口.这两种方式都有一个缺陷就是:在执行完任务之后无法获取执行结果.如果需要获取执行结果,就必须通过共享变量或 ...
- JAVA基础——集合——ArrayList
ArrayList集合 ArrayList的一些方法(JDK1.8): 将指定的元素附加到列表的末尾,true:添加成功,false:添加失败: public boolean add(E e) ...
- Spark SQL读取Oracle的number类型的数据时精度丢失问题
Spark SQL读取数据Oracle的数据时,发现number类型的字段在读取的时候精度丢失了,使用的spark版本是Spark2.1.0的版本,竟然最后经过排查和网上查资料发现是一个bug.在Sp ...
- 给下拉列表添加options
var myOptions = { val1 : 'text1', val2 : 'text2' }; var mySelect = $('#mySelect'); $.each(myOptions, ...