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

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. 在VMware14上安装centos6.5

    打开vmware14  =>  创建新虚拟机(即再建一个linux),已有光盘映像文件,正常操作即可.

  2. BZOJ5479: tree

    Description 给出一棵树,根节点为1 给出两个集合,集合由树上节点组成 从两个集合分别选出一个元素,求其LCA 问LCA的最大深度是多少 Input 第一行给出数据组数T 对于每组数据 第一 ...

  3. 论文阅读：Learning Visual Question Answering by Bootstrapping Hard Attention

    Learning Visual Question Answering by Bootstrapping Hard Attention Google DeepMind  ECCV-2018   2018 ...

  4. 【转载】SeleniumIDE入门

    http://www.open-open.com/lib/view/open1452488109558.html

  5. CSDN-markdown编辑器语法——字体、字号与颜色

     Markdown是一种可以使用普通文本编辑器编写的标记语言,通过类似HTML的标记语法,它可以使普通文本内容具有一定的格式.但是它本身是不支持修改字体.字号与颜色等功能的!   CSDN-markd ...

  6. android:ems="10"是什么意思

    android:ems = " 设置TextView或者Edittext的宽度为10个字符的宽度.当设置该属性后,控件显示的长度就为10个字符的长度,超出的部分将不显示. xml中 andr ...

  7. ThreadPoolExecutor最佳实践--如何选择线程数

    去年看过一篇<ThreadPoolExecutor详解>大致讲了ThreadPoolExecutor内部的代码实现. 总结一下,主要有以下四点: 当有任务提交的时候,会创建核心线程去执行任 ...

  8. 学习笔记22—PS小技巧

    1.将图片四角变弧形:菜单-->选择-->平滑-->设置参数: 2.画曲线的方法是: 1)选择钢笔工具, 2)工具属性选择路径:用钢笔点下路径的起点,点下即松开鼠标:在下一个锚点,点 ...

  9. Django框架中，使用celery实现异步

    作用:在使用框架时,在视图函数中实现异步构成: 任务task:一段耗时并与响应结果无关的代码,如发短信 工人worker:新进程,用于执行任务代码 代理人broker:调用任务时,将任务添加到队列中, ...

  10. Golang websocket

    环境:Win10 + Go1.9.2 1.先下载并引用golang的websocket库 ①golang的官方库都在https://github.com/golang下,而websocket库在/ne ...