一、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. Android TouchEvent事件传递机制

    本文转载自:http://blog.csdn.net/morgan_xww/article/details/9372285 跟touch事件相关的3个方法: public boolean dispat ...

  2. java编程之：org.apache.commons.lang3.text.StrTokenizer

    第一个api测试:按特殊符号进行分词,并遍历每一个分词部分 public static void main(String[] args) { String aString="AB-CD-EF ...

  3. JQuery之滑动幻灯片插件Easy Slider初体验

    Easy Slider 是一个滑动幻灯片插件,支持任何图片或内容,可以实现横向或纵向滑动.它拥有一系列丰富的参数设置,可通过CSS来进行完全的控制.基本上只需要引入这个插件后,设置好内容,然后样式化C ...

  4. Unity3D研究院之Android同步方法读取streamingAssets

    版本Unity5.3.3 Android 小米pad1 首先非常感谢 @守着阳光 同学在下面的留言.让我解决了一个大的谜团.. 开始我知道 StreamingAssets 路径是这个 path = & ...

  5. python_Day1_基础知识开篇

    一.python安装 1)windows上同时安装python2.0和python3.0配置 (1)在python官网下载windows版本python2.0和python3.0安装包 官网地址:ht ...

  6. risc与cisc

    RISC(精简指令集计算机)和CISC(复杂指令集计算机)是当前CPU的两种架构.它们的区别在于不同的CPU设计理念和方法. 早期的CPU全部是CISC架构,它的设计目的是要用最少的机器语言指令来完成 ...

  7. MongoDB 入门与实例

    一.准备工作 1. 下载mongoDB 下载地址:http://www.mongodb.org/downloads 选择合适你的版本 相关文档:http://www.mongodb.org/displ ...

  8. Spring MVC与Struts2的区别

    1. 机制:spring mvc的入口是servlet,而struts2是filter,这样就导致了二者的机制不同. 2. 性能:spring会稍微比struts快.spring mvc是基于方法的设 ...

  9. Jenkins入门系列之

    Jenkins入门系列之——00答疑解惑 Jenkins进阶系列之——11修改Jenkins用户的密码 Jenkins进阶系列之——12详解Jenkins节点配置 Jenkins进阶系列之——13修改 ...

  10. 类找不到异常 Caused by: java.lang.NoClassDefFoundError

    错误原因:在部署应用的时候,服务器报错,Caused by: java.lang.ClassNotFoundException: org.quartz.impl.JobDetailImpl,某个类找不 ...