2017.5.19(网页布局学习) 5.24改换完结彩民之家高手

2019-10-11 12:48 来源:未知

常见定位拓展:

以下的代码我都亲测过,均可以达到效果,就不在展示效果图(如果对代码有疑问可以留言):

三、position:relative

relative表现和static一样,除非添加了top|right|bottom|left属性。//lxy可以理解为relative是从static到absolute的一个过渡属性状态。就像在inline和block中间过渡有一个inline-block。

相对定位元素属性设置top|right|bottom|left偏离正常位置后,其他元素不会调整位置来弥补偏离后剩下的空间。也可以理解为仍然占据原来空间,所以不影响其他元素布局,可能会覆盖别的元素。

总结:relative元素仍然处于正常流,且不改变display属性,可能会覆盖页面其他元素。

举例:

<style>
div{
    display: inline-block;
}
.red{
    width: 100px;
    height: 100px;
    border:1px solid red;
    position: relative;
    background-color: yellow;
}
.green{
    width: 100px;
    height: 100px;
    border:1px solid green;
}
/*.left{
    left: -50px;
}*/
</style>
<body>
    <div class="red left">第一个元素</div>
    <div class="green">第二个元素</div>
    <div class="red left">第三个元素</div>
</body>

取消注释查看设置偏移后的对比效果:

彩民之家高手论坛 1

盒子模型3D结构

第一层:border
第二层:content paddin
第三层:background-image
第四层:background-color
第五层:margin

1.3多个块级元素水平居中

CSS

/*多个块级元素水平居中*/ #body-div{ text-align:center; } ##body-div-container{ display:inline-block; }

1
2
3
4
5
6
7
/*多个块级元素水平居中*/
        #body-div{
            text-align:center;
        }
        ##body-div-container{
            display:inline-block;
        }

1、包裹性

设置了position:absolute的元素,其尺寸会收缩正好容纳内容。

因为position:absolute会改变元素的display属性【类似浮动】,inline变成block,比如下面例子。

<style>
.container{
    border: 1px solid green;
    padding: 30px;
    background-color: green;
    background-clip: content-box;/*将背景裁剪到内容框,方便看绝对定位元素效果*/
    position: absolute;
}
</style>
<div class="container">内容</div>

彩民之家高手论坛 2

块状元素设置position:absolute后,chrome下top,right,bottom,left变为auto,而ff下直接是计算出的宽度。

绝对定位布局

通过position属性来实现
CSS中规定的第三中定位机制,能够实现横向多列布局等较为复杂的布局。如:带有遮罩效果的提示框、固定层效果、全屏广告等

position属性拥有三种定位机制:1.静态定位 2.相对定位 3.绝对定位
可以设置四个属性:
1.static 静态定位

2.relative 相对定位
3.absolute 绝对定位
4.fixed固定定位(3.4.同属于绝对定位)

relative:
相对于自身原有位置进行偏移

仍处于标准文档流当中
随即拥有偏移属性和z-index属性

absolute
建立了以包含块为基准的定位,完全脱离了标准文档流
(1)未设置偏移量的时候:
· 无论是否存在已经定位的祖先元素,都保持在元素初始位置
· 脱离了标准文档流
(2)设置了偏移量的时候:偏移参照标准
· 无已定位祖先元素,以<html>为偏移参照标准;
· 有已定位祖先元素,以距离其最近的已定位祖先元素为偏移参照标准;
当一个元素设置了绝对定位没有设置宽度的时候,元素的宽度根据内容进行调节

使用绝对定位进行横向两列布局的情况比较少,一般适用于这种情况:
一列固定宽度,另一列宽度自适应;

主要应用技能:
1.relative—父元素相对定位
2.absolute—自适应宽度元素绝对定位
注意:固定宽度列高度一定要大于宽度自适应列的高度。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>绝对定位实现布局</title>
<style type="text/css">
* {
    margin:0;
    padding:0;
    font-size:12px;
    color:#333;
    font-family:Verdana, Geneva, sans-serif, "宋体";
    list-style:none;
}
a {
    text-decoration:none;
}
a:hover {
    text-decoration:underline;
    color:#ff0000;
}
p {
    line-height:24px;
}
#wrap {
    width:780px;
    margin:0 auto;
    padding:0 10px 10px;
    border-left:1px solid #e7e7e7;
    border-right:1px solid #e7e7e7;
}
#header {
    width:100%;
    overflow:hidden;
}
.logo {
    width:100%;
    height:80px;
    line-height:80px;
    font-size:30px;
    font-family:"微软雅黑";
    background:#3399cc;
    color:#fff;
    text-indent:30px;
}
.nav {
    width:100%;
    margin-top:10px;
}
.nav li {
    margin:0 32px;
    float:left;
}
.nav li a {
    color:#7f7f7f;
    font-size:16px;
    display:block;
    padding-bottom:2px;
}
.nav li a:hover {
    border-bottom:3px solid #cc0000;
    text-decoration:none;
}
.nav li.current {
    border-bottom:3px solid #cc0000;
}
.nav li.current a:hover {
    border-bottom:none;
}
#mainbody {
         width:100%;
         position:relative;
         margin-top:20px;
}
#sidebar {
    width:180px;
    padding-bottom:10px;
}
#sidebar dl {
    padding:0 0 5px;
}
#sidebar dt {
    font-weight:bold;
    line-height:22px;
    font-family:"微软雅黑";
    font-size:14px;
    color:#fff;
    background:#3399cc;
    padding:5px 0 5px 15px;
    font-weight:normal;
    margin-bottom:10px;
}
#sidebar dd {
    line-height:20px;
    padding-left:15px;
}
#sidebar dd.current a {
    color:#f00;
}
#content {
    position:absolute;
    top:0px;
    left:200px;
}
#content h1 {
    color:#000;
    font-size:24px;
    font-family:"微软雅黑";
    font-weight:normal;
}
#content  h3 {
    margin-top:10px;
    line-height:26px;
}
#content  dl {
    margin-bottom:10px;
}
#content  dt {
    font-weight:bold;
    line-height:26px;
}
#content  dd {
    line-height:22px;
}
.learn a {
    color:#900b09;
    text-decoration:underline;
    padding-bottom:2px;
}
.learn a:hover {
    text-decoration:none;
}
.tips {
    color:#999;
    margin-top:20px;
}
.pageto {
    border-top:1px solid #aaa;
    border-bottom:3px solid #aaa;
    margin-top:5px;
    padding:15px 0;
}
.pageto a {
    margin:0 10px;
    background:#f3f3f3;
    padding:5px 20px;
    border:1px solid #dfdfdf;
    color:#555;
}
.pageto a:hover {
    color:#000;
    text-decoration:none;
}
.disline {
    border-bottom:1px dashed #ccc;
    margin-top:10px;
}
#footer {
    width:100%;
    margin-top:15px;
    padding:15px 0;
    text-align:center;
    color:#999;
    background:#ddd;
}
</style>
</head>

<body>
<div id="wrap">
  <div id="header">
    <div class="logo">前端开发教程</div>
    <div class="nav">
      <ul>
        <li class="current"><a href="#">CSS</a></li>
        <li><a href="#">HTML</a></li>
        <li><a href="#">JavaScript</a></li>
        <li><a href="#">jQuery</a></li>
        <li><a href="#">Ajax</a></li>
      </ul>
    </div>
  </div>
  <div id="mainbody">
    <div id="sidebar">
      <dl>
        <dt>CSS 基础教程</dt>
        <dd class="current"><a href="#">CSS 简介</a></dd>
        <dd><a href="#">CSS 基础语法</a></dd>
        <dd><a href="#">CSS 高级语法</a></dd>
        <dd><a href="#">CSS 派生选择器</a></dd>
        <dd><a href="#">CSS id 选择器</a></dd>
        <dd><a href="#">CSS 类选择器</a></dd>
        <dd><a href="#">CSS 属性选择器</a></dd>
        <dd><a href="#">CSS 创建</a></dd>
      </dl>
      <dl>
        <dt>CSS 样式</dt>
        <dd><a href="#">CSS 背景</a></dd>
        <dd><a href="#">CSS 文本</a></dd>
        <dd><a href="#">CSS 字体</a></dd>
        <dd><a href="#">CSS 链接</a></dd>
        <dd><a href="#">CSS 列表</a></dd>
        <dd><a href="#">CSS 表格</a></dd>
        <dd><a href="#">CSS 轮廓</a></dd>
      </dl>
      <dl>
        <dt>CSS 盒子模型</dt>
        <dd><a href="#">CSS 盒子模型概述</a></dd>
        <dd><a href="#">CSS 内边距</a></dd>
        <dd><a href="#">CSS 边框</a></dd>
        <dd><a href="#">CSS 外边距</a></dd>
        <dd><a href="#">CSS 外边距合并</a></dd>
      </dl>
      <dl>
        <dt>CSS 定位</dt>
        <dd><a href="#">CSS 定位概述</a></dd>
        <dd><a href="#">CSS 相对定位</a></dd>
        <dd><a href="#">CSS 绝对定位</a></dd>
        <dd><a href="#">CSS 浮动</a></dd>
      </dl>
      <dl>
        <dt>CSS 选择器</dt>
        <dd><a href="#">CSS 元素选择器</a></dd>
        <dd><a href="#">CSS 选择器分组</a></dd>
        <dd><a href="#">CSS 类选择器详解</a></dd>
        <dd><a href="#">CSS ID 选择器详解</a></dd>
        <dd><a href="#">CSS 属性选择器详解</a></dd>
        <dd><a href="#">CSS 后代选择器</a></dd>
        <dd><a href="#">CSS 子元素选择器</a></dd>
        <dd><a href="#">CSS 相邻兄弟选择器</a></dd>
        <dd><a href="#">CSS 伪类</a></dd>
        <dd><a href="#">CSS 伪元素</a></dd>
      </dl>
      <dl>
        <dt>CSS 高级</dt>
        <dd><a href="#">CSS 对齐</a></dd>
        <dd><a href="#">CSS 尺寸</a></dd>
        <dd><a href="#">CSS 分类</a></dd>
        <dd><a href="#">CSS 导航栏</a></dd>
        <dd><a href="#">CSS 图片库</a></dd>
        <dd><a href="#">CSS 图片透明</a></dd>
        <dd><a href="#">CSS 媒介类型</a></dd>
        <dd><a href="#">CSS 注意事项</a></dd>
        <dd><a href="#">CSS 总结</a></dd>
      </dl>
    </div>
    <div id="content">
      <h1>CSS 简介</h1>
      <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
      <h3>你应该知道这些知识</h3>
      <p>在继续之前,你应该有一个以下基本认识:</p>
      <p>· HTML / XHTML</p>
      <p class="learn">如果您希望首先学习这些项目,我们的<a href="#">主页</a>上可以找到教程。</p>
      <div class="disline"></div>
      <h3>什么是CSS?</h3>
      <p>CSS即级联样式表。
        它是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。</p>
      <div class="disline"></div>
      <h3>基本信息</h3>
      <p>CSS目前最新版本为CSS3,是能够真正做到网页表现与内容分离的一种样式设计语言。相对于传统HTML的表现而言,CSS能够对网页中的对象的位置排版进行像素级的精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力,并能够进行初步交互设计,是目前基于文本展示最优秀的表现设计语言。CSS能够根据不同使用者的理解能力,简化或者优化写法,针对各类人群,有较强的易读性。</p>
      <div class="disline"></div>
      <h3>发展历史</h3>
      <dl>
        <dt>CSS1</dt>
        <dd>作为一项W3C推荐,CSS1发布于 1996年12月17 日。1999 年1月11日,此推荐被重新修订。</dd>
      </dl>
      <dl>
        <dt>CSS2</dt>
        <dd>作为一项 W3C 推荐,CSS2发布于 1999年1月11日。CSS2添加了对媒介(打印机和听觉设备)和可下载字体的支持。</dd>
      </dl>
      <h3>CSS3</h3>
      <dl>
        <dt>CSS3 计划将 CSS 划分为更小的模块。</dt>
        <dd class="learn"><a href="#">亲自体验一下</a>!</dd>
      </dl>
      <div class="pageto"><a href="#">上一章</a> <a href="#">下一章</a></div>
      <p class="tips">本站提供的内容仅用于学习培训。我们不保证内容的正确性。通过使用本站内容随之而来的风险与本站无关。</p>
    </div>
  </div>
  <div id="footer">慕课©版权所有</div>
</div>
</body>
</html>```
2.1已知宽度高度的垂直水平居中

CSS

/*已知高度和宽度的水平垂直居中*/ #body-div{ position:relative; } #body-div-container{ width:100px; height:100px; position:absolute; top:50%; left:50%; margin:-50px 0 0 -50px; }

1
2
3
4
5
6
7
8
9
10
11
12
/*已知高度和宽度的水平垂直居中*/
        #body-div{
            position:relative;
        }
        #body-div-container{
            width:100px;
            height:100px;
            position:absolute;
            top:50%;
            left:50%;
            margin:-50px 0 0 -50px;
        }

七、资源链接

8 Box model

9 Visual formatting model

中文版CSS2/visuren

中文版CSS2/visudet/zh-hans

KB012: 绝对定位( Absolute positioning )

 

本文作者starof,因知识本身在变化,作者也在不断学习成长,文章内容也不定时更新,为避免误导读者,方便追根溯源,请诸位转载注明出处:

 

block,positionfixed 一、包含块(Containing Block) 要讲position,首先就涉及到一个概念:包含块。 1、包含块介绍 包含块简单理解就是...

header {

background:#FF3300;
width:100%;

}

2.3当被居中的元素是inline或者是inline-block

CSS

#body-div{ display:table-cell; text-align:center; vertical-align:middle; } ##body-div-container{ }

1
2
3
4
5
6
7
8
#body-div{
            display:table-cell;
            text-align:center;
            vertical-align:middle;
        }
        ##body-div-container{
 
        }

打赏支持我写出更多好文章,谢谢!

打赏作者

二、position:static

static是默认值,表示元素没有别"positioned",position其它值表示元素被"positioned"。所以"已定位元素"表示的就是设置position属性为除static之外的值的元素。position:static元素的布局就是按照盒子模型在正常流中来布局。

使用:

一般不用显示指定,除非想要覆盖之前设置的定位,让元素回归到正常流。

footer {

background:#639;
width:100%;

}
</style>
</head>

<body>
<div id="wrap">
<div id="header">头部</div>
<div id="mainbody">
<div class="left"></div>
<div class="right"></div>
</div>
<div id="footer">版权部分</div>
</div>
</body>
</html>```

1.1行内元素的水平居中

CSS

/*行内元素水平居中*/ #body-div{ text-align:center; }

1
2
3
4
/*行内元素水平居中*/
        #body-div{
            text-align:center;
        }

4、无固定宽高容器内绝对定位元素拉伸

举例:实现遮罩效果

彩民之家高手论坛 3<style> body { background-color: #ddd; } img { vertical-align: bottom; } .container { display: inline-block; position: relative; } .cover { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: blue; opacity: .5; filter: alpha(opacity=50); } </style> <body> <span class="container"> <i class="cover"></i> <img src="img/wb.jpg"> </span> </body> View Code

彩民之家高手论坛 4

同样的原理实现:全屏自适应遮罩层效果,切加上margin:auto可实现水平且直居中。

彩民之家高手论坛 5<!doctype html> <html> <head> <meta charset="utf-8"> <title>没有宽度和高度声明实现的全屏自适应效果by starof</title> <style> html, body { height: 100%; } .overlay { display: none; position: absolute; left: 0; top: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.5); } .content { position: absolute; width: 300px; height: 200px; margin: auto; left: 0; top: 0; right: 0; bottom: 0; background-color: #fff; } </style> </head> <body> <div class="overlay" id="overlay"> <div class="content"> 弹出层内容 <a href="javascript:void(0);" id="close">关闭</a> </div> </div> <a href="javascript:void(0);" id="open">打开</a> <script> var openA=document.getElementById("open"); var overlay=document.getElementById("overlay"); var closeA=document.getElementById("close"); openA.onclick=function(){ overlay.style.display="block"; } closeA.onclick=function(){ overlay.style.display="none"; } </script> </body> </html> View Code

彩民之家高手论坛 6

自动居中一列布局

如果你想让页面自动居中,当设置margin属性为auto的时候,不能再设置浮动或绝对定位!
注意三个元素:
1.标准文档流
2.块级元素
3.margin属性

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>几米简介</title>
<style type="text/css">
*{margin:0; padding:0; font-size:12px; color:#346667; font-family:Arial, Helvetica, sans-serif,"宋体";}
a{text-decoration:none;}
a:hover{text-decoration:underline;}

h2{line-height:30px; font-size:14px; margin-bottom:5px;}
p{line-height:24px; text-indent:26px; margin-bottom:5px;}

#wrap{width:770px; 
margin:0 auto; //wrap中的header、mainbody、footer自动居中
}

#header{width:762px; border:4px solid #badbdb; background:url(..nner.gif) no-repeat; height:92px; text-align:right; color:#fff;}
#header a{color:#fff; margin:0 5px;}

#mainbody,#footer{
width:100%; //以父元素wrap的宽度自适应
}
#footer{text-align:center; padding:20px 0;}

.content{background:#eff9f9; 
padding:44px 15px 15px;
 border:4px solid #badbdb;}
.profile{background:url(..t_profile.gif) no-repeat #eff9f9;}
.book{background:url(..t_book.gif) no-repeat #eff9f9;}
.book img{
border:1px solid #b1adaa;
margin:10px 18px;}
</style>
</head>
<body>
<div id="wrap">
    <div id="header"><a href="#">联系我们</a>|<a href="#">站点地图</a></div>
    <div id="mainbody">
         <div class="content profile">
              <h2>:: 关于幾米 ::</h2>
              <p>幾米,一位用画笔描绘梦想、吸引无数读者画迷为之疯狂,知名度迅速窜升的当红绘本作家,同时却也是一个腼腆善良的中年男子,偏好简单的居家生活,低调而淡泊。</p>
              <p>幾米的个性害羞内向,不擅长用言语表达,他用敏锐细腻的心去感受周遭的人与事,将情感、思绪藉由「绘画」传达他对大千世界的看法,作品风貌多变,创作力源源不绝,因此看幾米的作品,就像是走入他的内在,幾米的故事引领着每一位欣赏他作品的人看到并相信世界上的美与善,同时也反应了现代人生活中的点点滴滴,因此每个人都能在他的故事找到一个映照和寄托,或许这就是幾米作品的迷人之处。</p>
              <p>幾米,绘本作家,文化大学美术系毕业,曾在广告公司工作十二年,后来为报纸、杂志等各种出版品画插画 。1998年开始创作,发表《森林里的秘密》和《微笑的鱼》,拿下当年度中国时报开卷最佳童书、
              民生报好书大家读年度最佳童书,以及联合报读书人最佳童书奖。 1999年出版《向左走.向右走》,开创出成人绘本的新型式,兴起一股绘本创作风潮。本书获选为1999年金石堂十大最具影响力的书,并已改
              编成电影、电视剧。之后陆续推出《听幾米唱歌》、《月亮忘记了》、《森林唱游》、《我的心中每天开出一朵花》等作品,展现惊人的创作力和多变的叙事风格。 2001年出版《地下铁》,获选2002年金鼎奖
              推荐优良图书,并改编成音乐剧和电影。次年《照相本子》、《1.2.3.木头人》和《我只能为你画一张小卡片》获选2002年行政院新闻局推介中小学生优良课外读物图书类推荐读物。2002年《布瓜的世界》甫上
              市便登上各大书店畅销排行榜第一名。 2003、2004年陆续出版《幸运儿》、《你们我们他们》、《又寂寞又美好》、《履历表》、《遗失了一只猫》等作品,内容风格上更形突破。2005年的《小蝴蝶小披风》
              和《失乐园》开始经营角色,多变的故事节奏有不同于以往的阅读趣味。 作品风靡两岸三地,美、法、德、希腊、韩、日、泰等国皆有译本。学界和媒体多次以「幾米现象」为主题分析评论。 2003年Studio Voice杂
              志选为亚洲最有创意的五十五人之一。 </p>
         </div>
         <div class="content book"> 
         <a href="#">![](http://upload-images.jianshu.io/upload_images/3878531-26659f0f45847631.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240)</a> 
         <a href="#">![](http://upload-images.jianshu.io/upload_images/3878531-c1ac1dc47a41eda8.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240)</a> 
         <a href="#">![](http://upload-images.jianshu.io/upload_images/3878531-a2754be4bbddb208.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240)</a> 
         <a href="#">![](http://upload-images.jianshu.io/upload_images/3878531-d56effaf15797bdd.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240)</a> 
         <a href="#">![](http://upload-images.jianshu.io/upload_images/3878531-0f75ae2de9a0edc5.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240)</a> 
         <a href="#">![](http://upload-images.jianshu.io/upload_images/3878531-1a41c67982b2205d.jpg?imageMogr2/auto-orient/strip|imageView2/2/w/1240)</a></div>
    </div>
    <div id="footer">copyright © 2004-2012 Jimmyspa.com All Rights Reserved.</div>
</div>
</body>
</html>```

#浮动布局float---实现块级元素横向布局
>3个属性:left、right、none
> | 设置了浮动的元素仍然属于标准文档流。
> | 当元素没有设置宽度值时,设置了浮动属性,元素的宽度就会随内容而变化;
> | 设置了浮动的元素会对紧跟其后的元素产生影响。

#清除浮动(一般是对受到浮动影响的元素设置这个属性)
>给紧随其后的元素设置clear both或者clear left/right;
或者
给它的父元素设置width:100%或(固定宽度) overflow:hidden;

#横向两列布局——网页中最常见的布局之一
>主要技能:
>1.float属性,使纵向分布的元素横向排列
>2.margin属性:设置两列之间的间距

**代码**

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ";
<html xmlns=";
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>float属性横向两列布局</title>
<style type="text/css">

  • {
    margin:0;
    padding:0;
    }

position属性的几个值的概念:

五、position:fixed

fixed是absolute的特例,相对于视窗来定位,所以页面滚动它还是停靠在相对位置。

所以fixed也会改变元素的display属性,会让元素脱离正常流。

mainbody {

    background:#FC0;
    width:100%;
    overflow:hidden;//消除浮动影响

}
.left {
width:800px;
height:200px;
background:#000;
float:left;//使用float属性
}
.right {
width:140px;
height:500px;
background:#690;
float:left;//使用float属性 margin属性
margin-left:12px;
}

1.水平居中

四、position:absolute

position:absolute相对于最近的"positioned" 祖先元素定位。如果没有“positioned”祖先元素,那么它是相对于文档的 body 元素,并且它会随着页面滚动而移动。

绝对定位元素的定位值发生冲突时的解决方法:

  • 如果同时指定 top 和 bottom(非 auto),优先采用 top
  • 如果同时指定 left 和 right,若 direction 为 ltr(英语、汉语等),则优先采用 left;若 direction 为 rtl(阿拉伯语、希伯来语等),则优先采用right

总结几点:

position:absolute和margin,padding都不冲突,可同时生效。

position:absolute会改变display值,所以会产生包裹性。

position:absolute的元素脱离正常流。所以会产生破坏性。

position:absolute存在时【不加top,right,bottom,left】,float不起作用,所以可以用来去浮动。

wrap {

background:#00C;
margin:0 auto;//设置自动居中
width:960px;

}

2.2未知宽度高度的垂直水平居中

CSS

/*未知高度和宽度的水平垂直居中*/ #body-div{ position:relative; } ##body-div-container{ position:absolute; margin:auto; top:0; right:0; bottom:0; left:0; }

1
2
3
4
5
6
7
8
9
10
11
12
/*未知高度和宽度的水平垂直居中*/
        #body-div{
            position:relative;
        }
        ##body-div-container{
            position:absolute;
            margin:auto;
            top:0;
            right:0;
            bottom:0;
            left:0;
        }

六、position和float的关系

1、position:static;position:relative和float属性可共存。

3、同时设置position:absolute和float,float无效。

4、设置position:absolute的元素可能会覆盖float元素。

举例:

彩民之家高手论坛 7<style> .float{ width: 300px; height: 150px; background: green; } .abs{ width: 150px; background-color: red; position: absolute; top:50px; } </style> </head> <body> <div class="float">我是float:left的DIV</div> <div class="abs">我是一个应用了position:absolute的DIV。</div> </body> View Code

彩民之家高手论坛 8

为什么绝对定位元素可能会覆盖浮动元素,因为浏览器渲染的时候相同堆叠上下文中,先渲染非定位元素,再渲染浮动元素,最后渲染已定位元素。

关键问题是,此时设置float元素的z-index来覆盖absolute无效。因为z-index值只适用于已经定位的元素(即position:relative/absolute/fixed),对浮动元素不起作用的。

可将float元素的position属性值设置为relative,然后设置z-index。因为已定位元素并且z-index不是默认的auto的话会生成一个新的堆叠上下文。

如果上面说的还不是很懂,或者想更深入了解z-index原理,可参考:z-index堆叠规则

CSS定位问题(3):相对定位,绝对定位

2016/04/30 · CSS · 4 评论 · 定位, 相对定位, 绝对定位

本文作者: 伯乐在线 - zhiqiang21 。未经作者许可,禁止转载!
欢迎加入伯乐在线 专栏作者。

position&containing block,positionfixed

1.2块级元素的水平居中

CSS

/*块级元素水平居中*/ #body-div{ margin:0 auto; }

1
2
3
4
/*块级元素水平居中*/
        #body-div{
            margin:0 auto;
        }

2、破坏性

举例:子元素absolute,父元素高度塌陷。

<style>
.father{
border:1px solid red;
}
.son{
background-color: green;
position: absolute;
/*float: left;*/
}
</style>
</head>
<body>
    <div class="father">
        <div class="son" >元素内容</div>
    </div>
</body>

彩民之家高手论坛 9

原理:和float一样,position:absolute让元素脱离正常流,而父元素还在正常流中,它们已经是两个世界的东东了,自然撑不起父元素高度。

Note:设置position:absolute后再设置float:left不生效,且最终计算的float值还是none而不是设置的值。

2.水平垂直居中

3、absolute和包含块

举例:direction:ltr,保护块的顶,左是祖先元素生成的第一个框的padding 框,右下同理。

<p style="border:1px solid red; width:200px; padding:20px;">
    TTT

        这段文字从左向右排列,红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。
 可以通过它们绝对定位的位置来判断它们包含块的边缘。 <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em>
        <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em>

</p>

彩民之家高手论坛 10

包含块的宽度可以为负,行内元素的第一个框的起始位置位于最后一个框结束位置的右侧,这时包含块为负值。

举例:direction:rtl,保护块的顶,右是祖先元素第一个框的顶,右padding框,下左同理。

彩民之家高手论坛 11<p style="border:1px solid red; width:200px; padding:20px; direction:rtl;"> T <span style="background-color:#C0C0C0; position:relative;padding:10px;"> 这段文字从右向左排列,红 XX 和 蓝 XX 和黄 XX 都是绝对定位元素,它的包含块是相对定位的SPAN。 可以通过它们绝对定位的位置来判断它们 <em style="position:absolute; color:red; top:0; left:0;">XX</em> <em style="position:absolute; color:yellow; top:20px; left:0;">XX</em> <em style="position:absolute; color:blue; bottom:0; right:0;">XX</em> </span> </p> View Code

彩民之家高手论坛 12

其他情况相对简单,不做介绍。接下来是position各取值细节。

3.z-index属性

z-index属性用于调整定位时重叠块的上下位置,与它的名称一样,如果页面为x-y轴,则垂直于页面的方向为z轴。z-index大的页面位于其值小的的上面。

看下面的代码:

CSS

.item1{ position:relative; z-index:3; } .item2{ position:absolute; top:0; right:0; z-index:1; }

1
2
3
4
5
6
7
8
9
10
.item1{
            position:relative;
            z-index:3;
        }
        .item2{
            position:absolute;
            top:0;
            right:0;
            z-index:1;
        }

彩民之家高手论坛 13

2、static和包含块

举例:没有设置postion,所以标签position都是默认的static。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>包含块 by starof</title>
</head>
<body>
    <div id="div1">
        <p id="p1">第一段内容</p>
        <p id="p2">
            这些文字是
            <em id="em1">第 <strong id="strong1">二</strong>段</em> 
            内容
        </p>
    </div>
</body>
</html>

产生盒子的元素——》包含块

body——》initial C.B.(UA-dependent)

div1——》body

p1——》div1

p2——》div1

em1——》p2

strong1——》p2

1.相对定位

有了以上的定义,来看一段代码:

XHTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .item1, .item2, .item3{ width:300px; height:100px; background-color:#123456; margin:20px; } .item2{ position:relative; /*top:40px; left:40px;*/ margin:40px 0 0 40px; } </style> </head> <body> <div> <div class="item1"></div> <div class="item2"></div> <div class="item3"></div> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
    .item1, .item2, .item3{
        width:300px;
        height:100px;
        background-color:#123456;
        margin:20px;
    }
        .item2{
            position:relative;
            /*top:40px;
            left:40px;*/
            margin:40px 0 0 40px;
        }
    </style>
</head>
<body>
    <div>
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>

效果如下图:
彩民之家高手论坛 14

当我们使用top right bottom left 这样的属性的时候,CSS代码如下:

CSS

<style type="text/css"> .item1, .item2, .item3{ width:300px; height:100px; background-color:#123456; margin:20px; } .item2{ position:relative; top:40px; left:40px; /*margin:40px 0 0 40px;*/ } </style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<style type="text/css">
    .item1, .item2, .item3{
        width:300px;
        height:100px;
        background-color:#123456;
        margin:20px;
    }
        .item2{
            position:relative;
            top:40px;
            left:40px;
            /*margin:40px 0 0 40px;*/
        }
    </style>

可以看到的效果图如下图:

彩民之家高手论坛 15

到这里可以验证当使用top right bottom left (这四个属性可以设置具体的像素数也可以设置百分比)这样属性改变元素的位置的时候,不会影响其他元素的位置。而使用margin 这样的属性改变元素的位置会影响其他元素的位置。

示意图如下(图片来自W3CSchool):
彩民之家高手论坛 16


3、不受relative控制的position:absolute举例

不使用top,right,bottom,left中任何一个属性或者使用auto作为值。

一般都是用absolute加margin调整位置。

举例:hot图片始终在求课文字右上角。

彩民之家高手论坛 17<style type="text/css"> .icon-hot { position: absolute; width: 28px; height: 11px; margin: -6px 0 0 2px; background-color: red; background: url(img/new.jpg); } </style> <body> <h3> <a href="#"> 新项目 <i class="icon-hot"></i> </a> </h3> <a href="#">新项目</a><img src="img/new.jpg" style="margin-bottom:15px;"> </body> View Code

彩民之家高手论坛 18

分析:因为position:absolute让<i>标签的display值从inline变成block,所以可以设置宽高。通过margin调整位置。

类似例子:

彩民之家高手论坛 19<!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; } .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-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(); text-indent: -9em; overflow: hidden; } </style> </head> <body> <div class="main"> <div class="constr"> <div class="course"> <a href="" class="course-list"> <div class="course-list-img"> <span class="icon-recom">推荐</span> <img width="280" height="160" alt="分享:CSS深入理解之float浮动" src=" --><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> View Code

彩民之家高手论坛 20

关于作者:zhiqiang21

彩民之家高手论坛 21

做认为对的事情,如果可能是错的,那就做认为自己承受得起的事情! 个人主页 · 我的文章 · 11 ·      

彩民之家高手论坛 22

1、包含块介绍

包含块简单理解就是一个定位参考块,就是大盒子里套小盒子中那个大盒子。元素有positon属性就必然涉及到包含块。先简单总结一下。

1、初始包含块(Initial containing block),即根元素的包含框。 在浏览器中是原点与 canvas 原点重合、大小与 viewport 相同的矩形。

2、position:static|relative元素包含块为最近的块级【block|list-item|table】父元素的内容框

3、positon:先找absolute最近已定位祖先元素【没有的话包含块就是初始包含块】

  • 如果祖先元素是块级元素,则包含块是祖先元素的padding框。
  • 如果祖先元素是内联元素,包含块取决于祖先元素的direction属性
    • dirrection:ltr,祖先元素的第一个盒子的上、左padding框边界是包含块的上和左,祖先元素最后一个盒子的下、右padding边界是包含块的下和右。
    • direction:rtl,祖先元素第一个盒子的上、右padding框边界是包含块的上右,祖先元素最后一个元素的下、左padding框边界是包含块的下、左。

4、positon:fixed元素的包含块是由viewport决定的,和根元素无关。

2.绝对定位

看下面的一段代码:

XHTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> body{margin:20px;} #body-div{ padding:15px; background-color:#a0c8ff; border:1px solid #000000; } #body-div div{ padding:10px; background-color:#fff0ac; border:1px solid #000000; } </style> </head> <body> <div id="body-div"> <div class="item1">Box-1</div> <div class="item2">Box-2</div> <div class="item3">Box-3</div> </div> </body> </html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        body{margin:20px;}
        #body-div{
            padding:15px;
            background-color:#a0c8ff;
            border:1px solid #000000;
        }
 
        #body-div div{
            padding:10px;
            background-color:#fff0ac;
            border:1px solid #000000;
        }
    </style>
</head>
<body>
    <div id="body-div">
        <div class="item1">Box-1</div>
        <div class="item2">Box-2</div>
        <div class="item3">Box-3</div>
    </div>
</body>
</html>

效果图如下:

我们为Box-2设置绝对定位属性

CSS

.item2{ position:absolute; }

1
2
3
.item2{
            position:absolute;
        }

此时Box-2脱离文档流,效果如下:

彩民之家高手论坛 23

这个时候Box-3的位置会占据之前Box-2的位置。且Box-2和Box-3的左边框会重合。且盒子的宽度会根据盒子内部的元素自适应。

当盒子设置了绝对定位但是没有使用top right bottom left设置盒子的偏移量的时候,它仍会占据原先的位置。

那么当设置top right bottom left这些属性的时候会是什么效果呢?

设置下面的代码:

CSS

.item2{ position:absolute; top:0; right:0; }

1
2
3
4
5
.item2{
            position:absolute;
            top:0;
            right:0;
        }

效果如下图:

彩民之家高手论坛 24

那么当我们把直接父级元素设置为已定位的元素会怎么样呢?

彩民之家高手论坛 25

由上可以得出两个结论:

1.使用绝对定位的盒子以它的“最近”的一个“已经定位”的“祖先元素”为基准进行偏移(定位)。如果没有已经定位的祖先元素,那么就会以浏览器窗口为基准进行定位。
2.决对定位的框从标准流中脱离,这意味着它们对其后的兄弟盒子的定位没有影响。其它的盒子好像就当这个盒子(绝对定位的盒子)不存在一样。

一、包含块(Containing Block)

要讲position,首先就涉及到一个概念:包含块。

引子:

开始的时候我想先要解决一个问题,怎么设置一个div盒子撑满整个屏幕?

看下面的html代码:

XHTML

<body> <div id="father-body"> <div class="item1"></div> </div> </body>

1
2
3
4
5
<body>
    <div id="father-body">
        <div class="item1"></div>
    </div>
</body>

实现方法一:

JavaScript

html, body,#father-body{ height:100%; width:100%; background-color:#123456; }

1
2
3
4
5
html, body,#father-body{
            height:100%;
            width:100%;
            background-color:#123456;
        }

这里主要解释下%(百分号)在CSS中使用的问题。% 主要是在父级元素或者是祖先元素定义了固定的widthheight 的时候才可以使用(或者说使用的时候才会有效果)。

实现方法二:

JavaScript

#father-body{ position:fixed; width:100%; height:100%; background-color:#123456; }

1
2
3
4
5
6
#father-body{
            position:fixed;
            width:100%;
            height:100%;
            background-color:#123456;
        }

这里为#father-body 设置position属性,触发自身的BFC。当对自身使用widthheight的时候才可以生效。

position的fixed值的含义:

对象脱离常规流,使用 toprightbottomleft等属性以窗口为参考点进行定位,当出现滚动条时,对象不会随着滚动。

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

彩民之家高手论坛 26 彩民之家高手论坛 27

1 赞 13 收藏 4 评论

TAG标签: 日记本 css
版权声明:本文由彩民之家高手论坛发布于前端知识,转载请注明出处:2017.5.19(网页布局学习) 5.24改换完结彩民之家高手