CSS深入理解之absolute（HTML/CSS）
absolute和float是同父异母的兄弟，因为它们具有相同点：包裹性与破坏性
absolute的特点
1、独立的，并且可以摆脱overflow的限制，无论是滚动还是隐藏；
2、无依赖，不受relative限制的，行为表现上是不使用top/right/bottom/left任何一个属性或使用auto作为值；
3、脱离文档流；
4、具有跟随性（依据这个特点，能省很多的relative，并且扩展性更强）。
骚操作：使用注释来消除空格
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>图标定位二三事</title>
<style>
body {
font: 14px/1.4 "Microsoft YaHei";
background-color: #EDEFF0;
}
body,
h3,
h5 {
margin: 0;
}
img {
border: 0 none;
vertical-align: bottom;
}
.l {
float: left;
}
.r {
float: right;
}
.constr {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.header {
background-color: #2A2C2E;
}
.nav {
height: 60px;
}
.nav-list {
float: left;
font-size: 14px;
font-weight: 400;
}
.nav-a {
display: inline-block;
line-height: 20px;
padding: 20px 35px;
color: #B5BDC0;
text-decoration: none;
}
.nav-a:hover {
color: #fff;
}
.course {
padding-top: 10px;
}
.course-list {
float: left;
width: 280px;
height: 240px;
margin: 5px 10px 15px;
border-radius: 0 0 1px 1px;
background-color: #F7FAF9;
background-color: rgba(255, 255, 255, 1);
box-shadow: 0 1px 2px #c5c5c5;
text-decoration: none;
}
.course-list-img {
background-color: #6396F1;
}
.course-list-h {
line-height: 50px;
font-size: 14px;
font-weight: 400;
color: #363d40;
text-align: center;
}
.course-list-tips {
margin: 0 14px;
font-size: 12px;
color: #b4bbbf;
overflow: hidden;
}
.icon-hot {
position: absolute;
width: 28px;
height: 11px;
margin: -6px 0 0 2px;
background: url(http://img.mukewang.com/545304730001307300280011.gif);
}
.icon-recom {
position: absolute;
line-height: 20px;
padding: 0 5px;
background-color: #f60;
color: #fff;
font-size: 12px;
}
.icon-vip {
position: absolute;
width: 36px;
height: 36px;
margin-left: -36px;
background: url(http://img.mukewang.com/5453048000015d8800360036.gif);
text-indent: -9em;
overflow: hidden;
}
</style>
</head> <body>
<div class="header">
<div class="constr">
<div class="nav">
<h3 class="nav-list">
<a href="http://www.imooc.com/course/list" class="nav-a">课程</a>
</h3>
<h3 class="nav-list">
<a href="http://www.imooc.com/wenda" class="nav-a">问答</a>
</h3>
<h3 class="nav-list">
<a href="http://www.imooc.com/seek/index" class="nav-a">
求课<i class="icon-hot"></i>
</a>
</h3>
</div>
</div>
</div> <div class="main">
<div class="constr">
<div class="course">
<a href="http://www.imooc.com/view/121" class="course-list">
<div class="course-list-img">
<span class="icon-recom">推荐</span>
<img width="280" height="160" alt="分享：CSS深入理解之float浮动" src="http://img.mukewang.com/53d74f960001ae9d06000338-300-170.jpg"><!--
--><i class="icon-vip">vip</i>
</div>
<h5 class="course-list-h">分享：CSS深入理解之float浮动</h5>
<div class="course-list-tips">
<span class="l">已完结</span>
<span class="r">3514人学习</span>
</div>
</a>
</div>
</div>
</div>
</body>
</html>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>文本图标对齐与定位二三事</title>
<style>
body {
margin: 0;
font: 14px/1.4 "Microsoft YaHei";
background-color: #EDEFF0;
}
a {
color: #50B6E5;
}
.constr {
width: 1200px;
margin-left: auto;
margin-right: auto;
}
.regist-head {
height: 60px;
line-height: 60px;
padding-left: 30px;
background-color: #be3948;
color: #fff;
font-size: 18px;
}
.regist-body {
min-height: 400px;
padding: 100px 0;
background-color: #fff;
}
.regist-main {
width: 600px;
margin-left: auto;
margin-right: auto;
}
.regist-group {
margin-top: 20px;
overflow: hidden;
}
.regist-label {
width: 70px;
padding-top: 10px;
float: left;
}
.regist-cell {
display: table-cell;
*display: inline-block;
}
.regist-input {
height: 18px;
line-height: 18px;
width: 260px;
padding: 10px 5px;
margin: 0 10px 0 0;
border: 1px solid #d0d6d9;
vertical-align: top;
}
.regist-code-input {
width: 130px;
}
.regist-btn {
display: inline-block;
width: 160px;
line-height: 40px;
background-color: #39b94e;
color: #fff;
text-align: center;
text-decoration: none;
}
.regist-btn:hover {
background-color: #33a646;
}
.icon-warn {
display: inline-block;
width: 20px;
height: 21px;
background: url(http://img.mukewang.com/5453084a00016ae300120012.gif) no-repeat center;
}
.regist-star {
position: absolute;
margin-left: -1em;
font-family: simsun;
color: #f30;
}
.regist-remark {
position: absolute;
line-height: 21px;
padding-top: 9px;
color: #666;
}
.regist-warn {
padding-left: 20px;
color: #be3948;
}
.regist-warn>.icon-warn {
position: absolute;
margin-left: -20px;
}
</style>
</head> <body>
<div class="constr">
<div class="regist-head">注册</div>
<div class="regist-body">
<div class="regist-main">
<div class="regist-group">
<label class="regist-label"><span class="regist-star">*</span>登录邮箱</label>
<div class="regist-cell">
<input type="email" class="regist-input"><span class="regist-remark regist-warn">
<i class="icon-warn"></i>邮箱格式不准确（演示）
</span>
</div>
</div>
<div class="regist-group">
<label class="regist-label"><span class="regist-star">*</span>登录密码</label>
<div class="regist-cell">
<input type="password" class="regist-input"><span class="regist-remark">
请输入6-16位密码，区分大小写，不能使用空格
</span>
</div>
</div>
<div class="regist-group">
<label class="regist-label"><span class="regist-star">*</span>用户昵称</label>
<div class="regist-cell">
<input type="password" class="regist-input">
</div>
</div>
<div class="regist-group">
<label class="regist-label">手机号码</label>
<div class="regist-cell">
<input type="tel" class="regist-input">
</div>
</div>
<div class="regist-group">
<label class="regist-label"><span class="regist-star">*</span>验 证 码</label>
<div class="regist-cell">
<input class="regist-input regist-code-input"><img src="http://img.mukewang.com/545308540001678401500040.jpg">
</div>
</div>
<div class="regist-group">
<label class="regist-label"> </label>
<div class="regist-cell">
<input type="checkbox" checked><label>我已阅读并同意<a href="##">慕课协议</a>。</label>
<p>
<a href="javascript:" class="regist-btn">立即注册</a>
</p>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
z-index无依赖
1、如果只有一个绝对定位元素，自然不需要z-index，自动覆盖普通元素；
2、如果两个绝对定位，控制DOM流的前后顺序达到需要的覆盖效果，依然无z-index；
3、如果多个绝对定位交错，非常非常少见，z-index：1控制；
4、如果非弹框类的绝对定位元素z-index>2，必定z-index冗余，请优化。
九宫格代码实现
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>高度自适应的九宫格效果</title>
<style>
html,
body {
height: 100%;
margin: 0;
}
.page {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
}
.list {
float: left;
height: 33.3%;
width: 33.3%;
position: relative;
}
.list:before {
content: '';
position: absolute;
left: 10px;
right: 10px;
top: 10px;
bottom: 10px;
border-radius: 10px;
background-color: #cad5eb;
}
.list:after {
content: attr(data-index);
position: absolute;
height: 30px;
left: 0;
right: 0;
top: 0;
bottom: 0;
margin: auto;
text-align: center;
font: 24px/30px bold 'microsoft yahei';
}
</style>
</head> <body>
<div class="page">
<div class="list" data-index="1"></div>
<div class="list" data-index="2"></div>
<div class="list" data-index="3"></div>
<div class="list" data-index="4"></div>
<div class="list" data-index="5"></div>
<div class="list" data-index="6"></div>
<div class="list" data-index="7"></div>
<div class="list" data-index="8"></div>
<div class="list" data-index="9"></div>
</div>
</body>
</html>
绝对定位整页布局演示
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">
<title>慕课网-绝对定位整页布局演示</title>
<style>
body {
font-family: 'microsoft yahei';
}
/* wechat.css */ body {
margin: 0;
-webkit-user-select: none;
user-select: none;
-ms-touch-action: none;
}
/* construction */ html, body, .page {
height: 100%;
width: 100%;
overflow: hidden;
}
.page {
position: absolute;
left: 0;
top: 0;
}
body {
background-color: #ebebeb;
font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}
a {
text-decoration: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
h1, h2, h3, h4, h5, h6 {
margin: 0;
font-weight: 400;
}
ul, ol {
margin: 0;
list-style-type: none;
}
.header, .footer, .content {
position: absolute;
left: 0;
right: 0;
}
.header {
height: 48px;
padding: 0 5px;
background-color: #21292B;
color: #fff;
top: 0;
z-index: 1;
}
.header>h1 {
line-height: 48px;
margin: 0 0 0 10px;
font-size: 18px;
float: left;
}
.header>a {
display: inline-block;
width: 48px;
height: 48px;
background-size: 48px 144px;
text-indent: -9em;
overflow: hidden;
}
.header>.icon-search, .header>.icon-add {
float: right;
}
.footer {
height: 52px;
border-top: 1px solid #dfdfdf;
background-color: #fcfcfc;
bottom: 0;
z-index: 1;
}
.footer>a {
width: 25%;
text-align: center;
color: #999;
float: left;
font-size: 14px;
}
.footer>a>i {
display: block;
height: 35px;
margin-bottom: -3px;
background-size: 35px 280px;
}
.footer>.active {
color: #45c018;
}
.content {
top: 48px;
bottom: 53px;
overflow: auto;
}
.icon-search, .icon-back, .icon-add {
background: url(http://img.mukewang.com/547d339b000188bb00960288.png) no-repeat;
}
.icon-back {
background-position: 0 -96px;
}
.icon-add {
background-position: 0 -48px;
}
.icon-wechat, .icon-contacts, .icon-finds, .icon-mes {
background: url(http://img.mukewang.com/547d33970001444d00700560.png) no-repeat center top;
}
.active .icon-wechat {
background-position: center -35px;
}
.icon-contacts {
background-position: center -70px;
}
.active .icon-contacts {
background-position: center -105px;
}
.icon-finds {
background-position: center -140px;
}
.active .icon-finds {
background-position: center -175px;
}
.icon-mes {
background-position: center -210px;
}
.active .icon-mes {
background-position: center -245px;
}
.icon-find {
background: url(icon-find.png) no-repeat;
background-size: 28px 210px;
}
.icon-find-2 {
background-position: 0 -30px;
}
.icon-find-3 {
background-position: 0 -60px;
}
.icon-find-4 {
background-position: 0 -90px;
}
.icon-find-5 {
background-position: 0 -120px;
}
.icon-find-6 {
background-position: 0 -150px;
}
.icon-find-7 {
background-position: 0 -180px;
}
.icon-me {
background: url(icon-me.png) no-repeat;
background-size: 28px 120px;
}
.icon-me-2 {
background-position: 0 -30px;
}
.icon-me-3 {
background-position: 0 -60px;
}
.icon-me-4 {
background-position: 0 -90px;
}
.wechat-list {
display: block;
height: 64px;
padding: 8px 12px;
box-sizing: border-box;
border-bottom: 1px solid #d7d7d7;
background-color: #fff;
}
.wechat-list:last-child {
border-bottom: 0;
}
.wechat-list>img {
width: 48px;
height: 48px;
float: left;
}
.wechat-list>.cell {
padding-left: 58px;
line-height: 24px;
color: #333;
}
.wechat-h-time {
overflow: hidden;
}
.wechat-h-time>h5 {
font-size: 100%;
float: left;
}
.wechat-h-time>time {
font-size: 12px;
color: #b9b9b9;
float: right;
}
.wechat-h-time .business {
color: #54688D;
}
.wechat-h-time+p {
margin: 0 20px 0 0;
font-size: 14px;
color: #a8a8a8;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
}
.wechat-detail {
position: relative;
z-index: 1;
}
}
</style>
</head> <body>
<div class="page">
<div class="header">
<h1>慕课网</h1>
<a href="javascript:" class="icon-add">添加</a>
<a href="javascript:" class="icon-search">搜索</a>
</div>
<div class="content">
<div class="">
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>早上09:51</time></div>
<p>CSS深入理解值绝对定位</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>早上09:38</time></div>
<p>如果高度不够，可以手动缩小浏览器高度</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>早上08:47</time></div>
<p>此demo是本系列最后一个demo</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>早上08:36</time></div>
<p>此demo需要在高级浏览器中查看</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>昨天</time></div>
<p>重在原理展示，结构可多变。例如，header放在page外面~~</p>
</div>
</a>
<a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>昨天</time></div>
<p>最近鄙人整了个名叫Mobilebone的开源项目</p>
</div>
</a>
<a href="https://github.com/zhangxinxu/mobilebone" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>星期三</time></div>
<p>就是依赖绝对定位整体布局，大家可以前去围观</p>
</div>
</a>
<a href="http://www.imooc.com/learn/192" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5 class="business">慕课网</h5><time>星期三</time></div>
<p><img src="http://img.mukewang.com/547d33a00001299b00320033.jpg" width="16" height="16"></p>
</div>
</a>
<a href="http://www.imooc.com/learn/121" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>星期三</time></div>
<p>CSS深入理解之浮动</p>
</div>
</a>
<a href="http://www.imooc.com/learn/121" class="wechat-list">
<img src="http://img.mukewang.com/547d338d00010ced01200120.jpg">
<div class="cell">
<div class="wechat-h-time">
<h5>张鑫旭</h5><time>上周</time></div>
<p>同样精彩，欢迎支持~</p>
</div>
</a>
</div>
</div> <div class="footer">
<a href="http://www.imooc.com/course/list">
<i class="icon-wechat"></i>课程
</a>
<a href="http://www.imooc.com/wenda">
<i class="icon-contacts"></i>问答
</a>
<a href="http://www.imooc.com/seek/index">
<i class="icon-finds"></i>求课
</a>
<a href="http://www.imooc.com/space/course" class="active">
<i class="icon-mes"></i>我的课程
</a>
</div>
</div>
</body>
</html>
CSS深入理解之absolute（HTML/CSS）的更多相关文章
- CSS深入理解学习笔记之absolute
1.absolute和float 拥有相同的特性表现: ①包裹性(容器应用之后,可以包裹里面的内容): <!doctype html> <html> <head> ...
- CSS深入理解之overflow
CSS深入理解之overflow 前言 这是跟着张鑫旭重学CSS的overflow篇 基本属性 overflow有以下五个基本属性: 1.visible : 默认值,具体表现为,应用此属性后,子元素超 ...
- CSS+DIV布局中absolute和relative区别
原文:http://developer.51cto.com/art/201009/225201.htm 这里向大家简单介绍一下CSS+DIV布局中absolute和relative属性的用法和区别,定 ...
- CSS深入理解之line-height
以下文字整理自慕课网——张鑫旭的<CSS深入理解之line-height>. line-height,又称行高,指的是两行文字基线之间的距离,又可以称为这行文字所占的高度. 定义三问: 什 ...
- 关于DIV+CSS和XHTML+CSS的理解
WEB标准是一系列标准的集合,并不是仅“DIV+CSS”布局就可以实现.以CSS网页布局只是标准的基础之一.“DIV+CSS”布局只是一种通俗的称呼罢了.而我们学习的目标在于以XHTML建立良好的语义 ...
- CSS初步理解
近期在学习牛腩的时候遇到了网页的制作.挺新奇的.其中涉及到了有关CSS的知识,于是乎自己也就花费两个小时的时间.找了本浅显易懂的书来看了一遍,从宏观上来了解CSS的相关内容.有关CSS的基础知识详见下 ...
- 课时59.体验css（理解）
我们想做这样一个样式,应该怎么做? 分析: 有一个标题(h1),还有一些段落(p) 标题是居中的,段落也是居中的,所以我们可以设置h标签和p标签居的align属性等于center来实现 标题和段落都有 ...
- 10 个 GitHub 上超火的 CSS 奇技淫巧项目，找到写 CSS 的灵感！
大家好,我是你们的 超级猫,一个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 如果 CSS 是女孩子,肯定如上图那样吧
- CSS样式----图文详解：css样式表和选择器
主要内容 CSS概述 CSS和HTML结合的三种方式:行内样式表.内嵌样式表.外部样式表 CSS四种基本选择器:标签选择器.类选择器.ID选择器.通用选择器 CSS三种扩展选择器:组合选择器.后代选择 ...
随机推荐
- 第6章—渲染web视图—使用Thymeleaf
使用Thymeleaf 长期以来,jsp在视图领域有非常重要的地位,随着时间的变迁,出现了一位新的挑战者:Thymeleaf,Thymeleaf是原生的,不依赖于标签库.它能够在接受原始HTML的地方 ...
- Eclipse-查看jar源码乱码问题解决
步骤1: 在eclipse菜单栏中,Window–>Preferences–>General–>Content types,将JAR Content , Java Class Fil ...
- python字符串中包含Unicode插入数据库乱码问题 分类： Python 2015-04-28 18:19 342人阅读 评论(0) 收藏
之前在编码的时候遇到一个奇葩的问题,无论如何操作,写入数据库的字符都是乱码,之后是这样解决的,意思就是先解码,然后再插入数据库 cost_str = json.dumps(cost_info) cos ...
- ASP.NET：EntityFramework实现Session
ASP.NET默认的InProc模式的Session既浪费内存又在网站重启时存在数据丢失问题,SQLServer模式的Session只支持SQL Server又需要命令行配置.使用EntityFram ...
- SQL中存储过程和函数的区别
转:https://www.cnblogs.com/jacketlin/p/7874009.html 本质上没区别.只是函数有如:只能返回一个变量的限制.而存储过程可以返回多个. 而函数是可以嵌入在s ...
- Linux -- 使用笔记
Linux新增分辨率1920x1080 sudo gedit /etc/default/grub 找到:#GRUB_GFXMODE=640x480 在这行下面加一行GRUB_GFXMODE=1920x ...
- springboot-11-servlet, listener, fitlter的添加
springboot中添加servlet, filter, listener有2种方式: 代码注册servlet 和自动注解注册(在使用druid监控有使用过) 代码注册通过ServletRegist ...
- mongodb中Gson和java##Bean对象转化类
此类使用感觉比较繁琐, 每个字段加注解才可以使用, 不如mongoTemplate使用方便, 但如果使用mongo客户端的话, 还是比手动拼接快一点, 所以贴在这儿 package com.iwher ...
- Linux-(chgrp,chown,chmod)
/etc/group Linux /etc/group文件与/etc/passwd和/etc/shadow文件都是有关于系统管理员对用户和用户组管理时相关的文件. Linux /etc/group文件 ...
- BI实战派：医疗BI项目落地方案
任何BI项目面临的两大难题是项目价值和基础数据,BI项目应该给企业带来管理优化.业绩增长.医院面临的两大难题,一:绩效管理(奖金分配):二:医患关系:在医院开始自负盈亏时日常基本运营管理显得非常重要. ...