一、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. JS版百度地图API

    地图的构建非常简单,官方的API文档也写得很清晰,我只做一总结: 一起jquery,17jquery 一.引入JS :这个很容易理解,既然是调用JS版的百度地图,肯定得引用外部的JS文件了,而这个文件 ...

  2. POJ-1655 Balancing Act

    题目大意:一棵n个节点的树,找出最大子树最小的节点. 题目分析:过程类似求重心. 代码如下: # include<iostream> # include<cstdio> # i ...

  3. 【NOIP2010】关押罪犯

    一开始看错题了,然后怎么想都想不明白--原题: S 城现有两座监狱,一共关押着 N 名罪犯,编号分别为 1~N.他们之间的关系自然也极不和谐.很多罪犯之间甚至积怨已久,如果客观条件具备则随时可能爆发冲 ...

  4. Java——java多态

     /* * 多态: * 成员的特点: * 1.成员变量. *  编译时:参开引用型变量所属类中的是否有调用的成员变量,  有:编译通过,  没有  编译失败. *  运行时: 参考引用变量所属的类 ...

  5. firework便捷截LOGO

    1.魔术棒选空白部分 2.按delete键 3.符合画布

  6. 网络-CIDR地址分类介绍

    CIDR(Classless Inter Domain Routing)改进了传统的IPv4地址分类.传统的IP分类将IP地址直接对应为默认的分类,从而将Internet分割为网络.CIDR在路由表中 ...

  7. Linux-Memcache分布式部署方案（magent代理解决单点故障）

    Memcached的特点 Memcached作为高速运行的分布式缓存服务器具有以下特点. 1. 协议简单:memcached的服务器客户端通信并不使用复杂的MXL等格式, 而是使用简单的基于文本的协议 ...

  8. BP神经网络——交叉熵作代价函数

    Sigmoid函数 当神经元的输出接近 1时,曲线变得相当平,即σ′(z)的值会很小,进而也就使∂C/∂w和∂C/∂b会非常小.造成学习缓慢,下面有一个二次代价函数的cost变化图,epoch从15到 ...

  9. kubernetes集群部署

    鉴于Docker如此火爆,Google推出kubernetes管理docker集群,不少人估计会进行尝试.kubernetes得到了很多大公司的支持,kubernetes集群部署工具也集成了gce,c ...

  10. javascript中in和hasOwnProperty区别

    in操作符只要通过对象能访问到属性就返回true.hasOwnProperty()只在属性存在于实例中时才返回true. function Person(){ } Person.prototype.n ...