主要是针对格式布局的一些内容:

1:position:fix

锁定位置（相对于浏览器的位置），例如网上弹出的一些广告

<style type="text/css">

#a

{

    border:2px solid blue;

    height:100px;

    width:100px;

    background-color:#0F6;

    right:60px;

    bottom:70px;

    position:fixed;}

</head>

<body>

<div id="a">今天是个好日子，后面打上n个回车可以明显看出</div>

2.position :absolute

1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，

2.外层有position：absolute（或relative）；那么div相对于外层边框定位，

.b

{

    border:2px solid blue;

    height:100px;

    width:100px;

    background-color:#0F6;

    right:0px;

    bottom:0px;

    position:absolute;}

.c

{

    border:2px solid red;

    width:400px;

    height:200px;}

.d

{

    border:2px solid red;

    width:400px;

    height:200px;

    position:absolute;}    

</style>

</head>

<body>

<div class="b">.b的器相对于整个页面的bc和下面效果相仿</div>

<div class="c">.c的相对于这么多空格结束后的</div>

<div class="c">ccc<div class="b">bbb</div></div>

<div class="d">dddd又来一个</div>

<div class="d">d<div class="b">b</div></div>

3.position: relative

相对位置

相对于把此div包含住的div的某个位置进行固定。如果外层没有包含他的，那就相对于浏览器进行相对位置的固定。

#aaa

{

    border:2px solid yellow;

    background-color:#9F3;

    height:100px;

    width:100px;

    left:30px;

    top:30px;

    position:fixed;}

#bbb

{

    border:2px solid yellow;

    background-color:#9F3;

    height:100px;

    width:100px;

    left:30px;

    top:30px;

    position:relative;}

</style>

</head>

<body>

<div id="aaa">aaaaaa</div>

<div id="bbb">bbbbbb</div>

<div id="aaa">aiyou<div id="bbb">ganha是b相对a</div></div>

两种情况都试了看一下不同

（二）分层（Z-index）

在z轴方向分层，可以理解为分成一摞纸，层数越高越靠上。

　　在上面relative的示例中，我们看到了aa遮住了a，这是因为后写代码的显示级别越靠前，那么在不改变代码顺序的情况下如何让a盖住aa？

只需要把添写上z-index:2就可以了

（三）float：left、right

Left、right时不用给他规定位置（left、top），直接相对于浏览器。若外部被包裹，相对于外部div的除去一行的位置的左上或右上显示。

#cc

{

    border:#0C0 solid 2px;

    height:300px;

    width:100px;

    float:right;}

#dd

{

    border:#0C0 solid 2px;

    height:300px;

    width:100px;

    float:right;}

#ee

{

    border:#0C0 solid 2px;

    height:300px;

    width:100px;

    float:left;}

#ff

{

    border:#0C0 solid 2px;

    height:300px;

    width:100px;

    float:left;}        

</style>

</head>

<body>

<div id="cc">没吃饭 相对游览器</div>

<div id="dd">吃饭了吗</div>

<div id="ee">你好</div>

<div id="ff">我很好</div>

</body>

</html>

　　overflow：hidden；    //超出部分隐藏；scroll，显示出滚动条；

　　<div style="clear:both"></div>   //截断流

3月23 格式布局及relative的更多相关文章

  1. CSS样式表与格式布局

    样式表 CSS(Cascading Style Sheets  层叠样式表),作用是美化HTML网页. 内联样式表: 例:<p style="font-size:10px;" ...

  2. Linux自用指令——2019年10月23日

    1.ls ls命令是列出目录内容(List Directory Contents)的意思.运行它就是列出文件夹里的内容,可能是文件也可能是文件夹. ls -a 列出目录所有文件,包含以.开始的隐藏文件 ...

  3. 2016年12月23日 星期五 --出埃及记 Exodus 21:18

    2016年12月23日 星期五 --出埃及记 Exodus 21:18 "If men quarrel and one hits the other with a stone or with ...

  4. [分享] 从定制Win7母盘到封装详细教程 By BILL （ 10月23日补充说明 ）

    [分享] 从定制Win7母盘到封装详细教程 By BILL ( 10月23日补充说明 ) billcheung 发表于 2011-10-23 00:07:49 https://www.itsk.com ...

  5. 11月23日《奥威Power-BI报表集成到其他系统》腾讯课堂开课啦

    听说明天全国各地区都要冷到爆了,要是天气冷到可以放假就好了.想象一下大冷天的一定要在被窝里度过才对嘛,索性明天晚上来个相约吧,相约在被窝里看奥威Power-BI公开课如何?        上周奥威公开 ...

  6. 2016年11月23日 星期三 --出埃及记 Exodus 20:14

    2016年11月23日 星期三 --出埃及记 Exodus 20:14 "You shall not commit adultery.不可奸淫.

  7. 2016年10月23日 星期日 --出埃及记 Exodus 19:7

    2016年10月23日 星期日 --出埃及记 Exodus 19:7 So Moses went back and summoned the elders of the people and set ...

  8. 2016年6月23日 星期四 --出埃及记 Exodus 14:20

    2016年6月23日 星期四 --出埃及记 Exodus 14:20 coming between the armies of Egypt and Israel. Throughout the nig ...

  9. SWT中的布局之-----FormLayout(表格式布局)

    表格式(FormLayout类) 表格式布局管理器,通过创建组件各个边的距离来布局组件,和GridLayout一样强大. 用GridLayout与FormLayout都可以实现相同的界面效果,但有时使 ...

随机推荐

  1. P2057 [SHOI2007]善意的投票

    思路 简单的最小割模型 最小割的模型就是选出一些边,把点集划分成S和T两个部分,使得代价最小 到这题上就是板子了 代码 #include <cstdio> #include <alg ...

  2. SalGAN: Visual saliency prediction with generative adversarial networks

    SalGAN: Visual saliency prediction with generative adversarial networks 2017-03-17 摘要:本文引入了对抗网络的对抗训练 ...

  3. Latex citation using natbib and footnotesize

    References: Natbib bibliography styles How to change font size for bibliography? Latex citation usin ...

  4. 【译】第45节---EF6-索引属性

    原文:http://www.entityframeworktutorial.net/entityframework6/index-attribute-in-code-first.aspx Entity ...

  5. [UVA-11100] The Trip

    题目大意 大箱子能装小箱子,求在满足最少箱子的情况下,最小化每个箱子中最大的箱子个数. 解析 想到二分枚举箱子数,然后贪心的选择放进箱子的位置. 最优策略一定是将最大的 \(m\) 个先找出来,然后把 ...

  6. Linux 命令之sed

    简介 sed 是一种在线编辑器,它一次处理一行内容.在处理的时候,会先把当前处理的行存储在临时缓冲区,这被称之为 "末世空间", 然后再使用 sed 命令处理缓冲区的内容,处理完成 ...

  7. linux 进阶命令笔记(12月26日)

    1. df 指令 作用:查看磁盘空间 用法: #df -h       -h 表示以可读性较高的形式展示大小   2.free 指令 作用:查看内存使用情况 语法:#free -m       -m表 ...

  8. 怎样更新CentOS6.5的yum源

    将yum源设置为国内yum源,可以提升软件包安装和更新的速度,同时避免一些常见软件版本无法找到. 国内源:可以使用wget获取或者直接下载 网易: CentOS5: http://mirrors.16 ...

  9. 1.spring基础知识讲解

    引言:以下记录一些自己在使用时pringle框架时的一些自己心得合成体会时,如有侵权,请联系本博主. 1. spring基本都使用 spring是一个开源的轻量级框架,其目的是用于简化企业级应用程序开 ...

  10. java添加templates模板，httpServlet模板改写

    为了提高开发效率,通常将一些常用模板添加到快捷键,方法: window-prefrerences-java-editor-templates 代码复制进去apply应用即可 package com.l ...