一、position：fixed

锁定位置（相对于浏览器的位置），例如有些网站的右下角的弹出窗口。

<head>

<title>123</title>

<style type="text/css">

#a

{

border:5px soild blue;...........边线为5像素

width:100px;                     宽度与高度为5像素

height:100px;

margin:10px;

background-color:#0F3;

left:30px;

bottom:20px;      距离左边30像素，距离下边20像素

position:fixed;

}

</style>

</head>

<boad>

<div id="a">a</div>

</boad>

二、position：absolute

1.外层没有position：absolute（或relative）；那么div相对于浏览器定位，如下图中b（距离浏览器右边框为50像素，距离下边框为20像素）。

2.外层有position：absolute（或relative）；那么div相对于外层边框定位，如下图中bb（距离d的右边框50像素，距离d的下边框为20像素）。

三、position：relative

相对位置。

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

四、分层（z-index）

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

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

五、float：left、right

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

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

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

设置超链接的样式示例：

附：cursor：pointer    鼠标指到上面时的形状

&copy                  版权符号©

半透明效果：

<div class="box">透明区域<div>

在样式表中的代码为：

.box

{

opacity:0.5; -moz-opacity:0.5 ; filter:alpha(opacity=50)

}

absolute:当使用时，表示在文档流中没有实际存在位置（浮动），在不设置任何方位值时，只能按兵不动，当设置了方位值之后，会紧接着去寻找距离最近的能够将它包含住的父级元素，然后进行定位。

relative:当使用时，表示在文档中确实占有一定的空间，在不设置任何方位值时，会出现在应该出现的位置（空间），当设置了方位值之后，会在应该出现的位置上进行上、下、左、右的形状位移，而实际上还是占有应该占有的位置（空间）

HTML格式与布局的更多相关文章

  1. 9月11日上午HTML有序列表、无序列表、网页的格式和布局

    样式表 六.列表方块 1.有序列表变无序列表 <ol> <li>张店</li> <li>桓台</li> <li>淄川</l ...

  2. 一起学HTML基础-格式与布局fixed/absolute/relative/z-index/float

    很多网页都存在一个悬浮的操作条或者广告区,无论如何上下滚动网页,操作条或广告区都不会动,这个就是div制作,位置锁定在屏幕指定位置,现在我们就学习下网页的格式与布局. position 位置,来给di ...

  3. css样式表 格式与布局

    1 样式表  内联样式表  内嵌样式表  外部样式表 2 选择器 标签选择器 <style type="text\css" class 选择器  以.开头 ID选择器 以#开 ...

  4. css样式表：样式分类，选择器。样式属性，格式与布局

    样式表分类: 1.内联样式表, 和html联合显示,例:<p style="font-size:14px;">内联样式表</p> 2.内嵌样式表 作为一个独 ...

  5. css样式，边界和边框，格式和布局

    1.大小:width:宽:heigh:高 2.背景:1)background-color:背景颜色 2)background-image:背景图片url路径 3)background-repeat:图 ...

  6. 关于CSS格式与布局中的基础知识的简单操作

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. css样式表----------样式属性（背景与前景、边界和边框、列表与方块、格式与布局）

    一.背景与前景 (1).背景 line-height: 1.5 !important;">90; /*背景色(以样式表为主,样式表优先.)*/ background-image:url ...

  8. HTML基础（五）——-css样式表——样式属性——格式与布局

    一.position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角的弹出窗口. 示例: 二.position:absolute     绝对位置: 1.外层没有position:a ...

  9. 从图片中提取html格式的布局

    制作界面的自动化 意义:对于程序设计人员来说,比较痛苦的是制作界面.从设计人员发送的稿件(通常为jpg格式),到完成html的布局,需要将图像转化为div标记,自动化这一过程十分有意义 1.设计一个工 ...

  10. HTML--CSS样式表--格式与布局

    一:position:fixed 锁定位置(相对于浏览器的位置),例如有些网站的右下角弹窗 例如: <head> <title>网页标题</title> <s ...

随机推荐

  1. Mac上因磁盘格式导致gulp无限刷新问题

    今天遇到个超奇葩的问题,使用gulp.watch监控文件变化,但是并没有修改文件,却一直执行change,导致浏览器无限刷新 调试了10小时,代码各种删改,一直不得其解.切换到Windows运行,又正 ...

  2. JS数组随机排序

    var arr=[1,2,3,4,5]; arr.sort(function(a,b){ var v=Math.random()>0.5?1:-1; console.log(a,b,v); re ...

  3. (转) SLAM系统的研究点介绍 与 Kinect视觉SLAM技术介绍

          首页 视界智尚 算法技术 每日技术 来打我呀 注册     SLAM系统的研究点介绍 本文主要谈谈SLAM中的各个研究点,为研究生们(应该是博客的多数读者吧)作一个提纲挈领的摘要.然后,我 ...

  4. What are the main disadvantages of Java Server Faces 2.0?

    http://stackoverflow.com/questions/3623911/what-are-the-main-disadvantages-of-java-server-faces-2-0/ ...

  5. 二十四种设计模式：中介者模式(Mediator Pattern)

    中介者模式(Mediator Pattern) 介绍用一个中介对象来封装一系列的对象交互.中介者使各对象不需要显式地相互引用,从而使其耦合松散,而且可以独立地改变它们之间的交互. 示例有一个Messa ...

  6. Linux 下SVN自动更新

    1.找到svn的所在目录: 我的目录在/usr/local/svn/myproject 2.新建post-commit vim hooks/post-commit #!/bin/shexport LA ...

  7. 转载： scikit-learn学习之回归分析

    版权声明:<—— 本文为作者呕心沥血打造,若要转载,请注明出处@http://blog.csdn.net/gamer_gyt <—— 目录(?)[+] ================== ...

  8. 制作OS X 10.10.3启动安装U盘

    http://www.cnblogs.com/Bob-wei/p/4471407.html 1.获得“Install OS X Yosemite.app” 2.准备一个8GB的U盘,用磁盘工具“抹掉” ...

  9. SQLSERVER 脚本转MYSQL 脚本的方法总结

    1.MYSQL(版本为5.6)中SQL脚本必须以分号(;)结尾,这点比SQLSERVER要严谨:关键字与函数名称全部大写:数据库名称.表名称.字段名称全部小写. 2.所有关键字都要加上``,比如 St ...

  10. CryptoAPI与openssl RSA非对称加密解密(PKCS1 PADDING)交互

    (以下代码中都只做测试用,有些地方没有释放内存...这个自己解决下) 1.RSA非对称的,首先提供一个供测试用的证书和私钥的数据 1)pem格式的证书和私钥(公私钥是对应的)的base64编码 voi ...