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

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. js字符串方法、数组方法整理

    push 向数组末尾添加一项 返回值为数组的长度: pop 删除数组最后一项: unshift 向数组开头增加一项: shift 删除数组第一项: splice 删除数组中的值:1 splice(n, ...

  2. awk - group adjacent rows by identical columns

    Liang always brings me interesting quiz questions. Here is one: If i have a table like below: chr1 1 ...

  3. SPOJ 694 DISUBSTR - Distinct Substrings

    思路 求本质不同的子串个数,总共重叠的子串个数就是height数组的和 总子串个数-height数组的和即可 代码 #include <cstdio> #include <algor ...

  4. CF375D Tree and Queries（dsu on tree）

    思路 dsu on tree的板子,可惜人傻把 for(int i=fir[u];i;i=nxt[i]) 打成 for(int i=fir[u];i<=n;i++) 调了两个小时 这题要求维护& ...

  5. codeforce gym/100495/problem/F Snake++——DFS应用

    emmmm.... 在被新生暴打后,我花了很久才补出这道DFS.由于WA1检查了半天,最后竟然是输出少了一个:   ,心态小崩. 这里普通的dfs算出的连通区域并不能直接当做最后的答案.所以需要类似模 ...

  6. Lintcode521-Remove Duplicate Numbers in Array-Easy

    Description Given an array of integers, remove the duplicate numbers in it. You should: Do it in pla ...

  7. JS相关重点知识 (概况)

    1.value和innerHTML没有联系,只是value是表单的一个特有属性,而innerHTML是通用的. 2.当从外部引入js文件时,该外部文件里面可以有多个方法,   html页面中的oncl ...

  8. 项目Alpha冲刺--1/10

    项目Alpha冲刺--1/10 1.团队信息 团队名称:基于云的胜利冲锋队 成员信息 队员学号 队员姓名 个人博客地址 备注 221500201 孙文慈 https://www.cnblogs.com ...

  9. nginx,uwsgi,部署django，静态文件不生效问题

    打开浏览器,然后访问服务器,如果能够正常访问,并且页面链接可以跳转,但是页面却是乱的,那一定是nginx.conf里面的静态文件配置不正确, location /static/ {#expires 3 ...

  10. 三: vue组件开发及自动化工具vue-cli

    一: 组件化开发 1 组件 1: 组件(Component)是自定义封装的功能.在前端开发过程中,经常出现多个网页的功能是重复的,而且很多不同的网站之间,也存在同样的功能. 2: 什么是组件 而在网页 ...