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

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. HDU 5649 DZY Loves Sorting（二分答案+线段树/线段树合并+线段树分割）

    题意 一个 \(1\) 到 \(n\) 的全排列,\(m\) 种操作,每次将一段区间 \([l,r]\) 按升序或降序排列,求 \(m\) 次操作后的第 \(k\) 位. \(1 \leq n \le ...

  2. codeforce 886C Petya and Catacombs （map，思路）

    突然发现百度不到这题的单独题解(果然是因为这是水题么),那我就来写一个了~ 先把题给贴了. C. Petya and Catacombs time limit per test 1 second me ...

  3. 复习ing

    记不住啊,我能有什么办法,只好一遍又一遍看

  4. 给大家讲个故事，感受一下什么叫CF。不知道的请认真听。

    我朋友是个温柔.体贴.负责.做事认真和口才流利的好男人 他在大一时喜欢上别系的女同学,像他这样的好人我以为这段恋情是手到擒来 但并没有,女方只把它当工具人,一当就当了四年 身为室友的我每天看著她为女方 ...

  5. js中属性点.和中括号[]的关系。

    本来这里说的是 js 执行一个字符串形式函数的方法. 但是呢看到一个 window['test'] ,居然一下子转不过弯来.这就尴尬了. 不是说好了 [] 和 . 其他都是 “什么的什么” 关系吗?如 ...

  6. Spring依赖

    <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w3.org/20 ...

  7. WebBrowser获取完整COOKIE

    [DllImport("wininet.dll", CharSet = CharSet.Auto, SetLastError = true)] static extern bool ...

  8. 一: vue的基本使用

    一: vue的下载 vue.js是目前前端web开发最流行的工具库之一,由尤雨溪在2014年2月发布的. 另外几个常见的工具库:react.js /angular.js 官方网站: ​ 中文:http ...

  9. 关于Oracle 12C pdb用户无法登录的问题

    新装了oracle12c,对新的CDB和PDB用户如何登录一直一头雾水,经过一晚上的查找,终于解决. sqlplus /nolog -> conn /as sysdba 登录到oracle 将s ...

  10. MYSQL的基本函数 （加密函数）

    AES_ENCRYPT(str,key)  返回用密钥key对字符串str利用高级加密标准算法加密后的结果,调用AES_ENCRYPT的结果是一个二进制字符串,以BLOB类型存储 AES_DECRYP ...