一、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. hihoCoder#1055 : 刷油漆 （树形DP+01背包）

    题目大意:给一棵带点权的树,现在要从根节点开始选出m个连通的节点,使总权值最大. 题目分析:定义状态dp(u,m)表示在以u为根的子树从根节点开始选出m个点连通的最大总权值,则dp(u,m)=max( ...

  2. ThinkPHP多表操作

    有以下三张表,分表为pl表(uid,content),user表(id,username),lyb表(uid,title) 多表查询操作有以下几种方法: ㈠视图模型(推荐) 定义视图模型,只需要继承T ...

  3. VS2013远程调试功能

    我跪了,我真的跪了. 实际证明这是不可行的. [开发机] Win10,64bits,VS2013 [目标机] Winxp VS2013的debug tool不能在xp上安装运行,卒! 如果有win7, ...

  4. 升级win10的理由

    微软也没给我钱,我免费给它打了次广告. 我还是非常喜欢linux的,无奈公司深度依赖windows. 废话不多说,直接进入主题: [开机速度] 这里先说句题外话,不那么缺钱的兄弟,一定要去换一块SSD ...

  5. Make和Makefile编写(详见GCC手册)

    Makefile和Make Rules 多模块软件.依赖树和Make 默认规则 Make使用程序对简单变量的支持 内建变量 虚目标 特殊目标 一般性语法错误及其纠正措施 命令行的使用和调试 Makef ...

  6. 由<a>标签的onclick影出来的问题

    今天做了一个 通过 document.getElementByName()的方法获得一个标签a的集合.tag_a=window.docu..... 接着需要给每个标签都加一个onclick事件. fo ...

  7. 论文阅读之：PRIORITIZED EXPERIENCE REPLAY

    PRIORITIZED EXPERIENCE REPLAY ICLR 2016 经验回放使得 online reinforcement learning agent 能够记住并且回放过去的经验.在先前 ...

  8. Dtrace for Linux 2016

    http://www.brendangregg.com/blog/2016-10-27/dtrace-for-linux-2016.html

  9. 高斯混合模型参数估计的EM算法

    # coding:utf-8 import numpy as np def qq(y,alpha,mu,sigma,K,gama):#计算Q函数 gsum=[] n=len(y) for k in r ...

  10. 类的扩展－－类目和延展－－ios

    person+money.h  这是类目类 #import "Person.h" //这是扩展person类的接口类,独立一个文件 @interface Person (Money ...