1、position：fixed

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

例：

 <head>

 <title>123</title>

 <style type="text/css">

 #a

 {

 　　border:5px solid blue;

 　　width:100px;

 　　height:100px;

 　　margin:10px;

 　　background-color:#0F3;

 　　left:30px;

 　　bottom:20px;

 　　position:fixed;

 }

 </style>

 </head>

 <body>

 　　<div id="a">a

 　　</div>

 </body>

显示如下
<!--[endif]-->

2、position：absolute

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

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

代码：

 <head>

 <title>123</title>

 <style type="text/css">

 .b

 {

 　　border:5px solid blue;

 　　width:100px;

 　　height:100px;

 　　margin:10px;

 　　background-color:#0F3;

 　　right:50px;

 　　bottom:20px;

 　　position:absolute; /**/

 }

 .c

 {

 　　border:2px solid red;

 　　width:400px;

 　　height:200px;

 }

 </style>

 <style type="text/css">

 .d

 {

 　　border:2px solid red;

 　　width:400px;

 　　height:200px;

 　　position:absolute;

 }

 </style>

 </head>

 <body>

 <div class="c">c

 　　<div class="b">b

 　　</div>

 </div>

 <div class="d">d

 　　<div class="b">bb

 　　</div>

 </div>

 </body>

显示如下：

3、position：relative

　　相对于默认位置的移动。如下图，a在用relative移动前的位置，aa为用relative移动后的位置，aa距原位置上部间距50像素，距原位置左边距20像素。

代码：

<

 head>

 <title>123</title>

 <style type="text/css">

 #a

 {

 　　border:5px solid blue;

 　　width:100px;

 　　height:100px;

 　　margin:10px;

 　　background-color:#0F3;

 　　position:fixed;

 }

 #aa

 {

 border:5px solid blue;

 width:100px;

 height:100px;

 margin:10px;

 background-color:#0F3;

 left:20px;

 top:50px;

 position:relative;

 }

 </style>

 </head>

 <body>

 <div id="a">a

 </div>

 <div id="aa">aa

 </div>

 </body>

显示如下:

4、分层（z-index）

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

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

 <head>

 <title>123</title>

 <style type="text/css">

 .a

 {

 　　border:5px solid blue;

 　　width:100px;

 　　height:100px;

 　　margin:10px;

 　　background-color:#0F3;

 　　position:fixed;

 　　z-index:2;    /*这里做一下修改，默认情况下，都是第1层*/

 }

 .aa

 {

 　　border:5px solid blue;

 　　width:100px;

 　　height:100px;

 　　margin:10px;

 　　background-color:#0F3;

 　　left:20px;

 　　top:50px;

 　　position:relative;

 }

 </style>

 </head>

 <body>

 <div class="a">a

 </div>

 <div class="aa">aa

 </div>

 </body>

 显示如下:

5、float：left，right

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

附：

overflow:hidden;    /*超出范围时隐藏；scroll，超出范围时出滚动条。*/

超链接样式：

<style type="text/css">

a:link    /*一般链接*/

{

　　　　　　color:blue;

}

a:visited    /*访问过的链接的格式*/

{

　　color:green;

}

a:hover    /*设置鼠标指向链接时的形式*/

{

　　color:red;

}

</style>

cursor:pointer    鼠标指到上面时的形状。

&copy;    版权符号©

半透明效果

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

//样式表中代码：

.box

{

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

}

布局的三种方式：

1.自然布局
没有任何修饰的布局是自动靠左的。
2.流动布局
上面讲的float:left的情况。
3.定位布局
相对定位和绝对定位都是相对于父div标签的。
相对------以这个元素的本来应该在的位置为参照点
绝对——以父div标签的原点（左上角）为参照点。

由于外层是position:relative，所以里层是absolute的话，则会以外层的左上角为位移参考对齐。当然外层只写position:relative，写上left,top这两个值，则表示以：以这个元素的本来应该在的位置为布局参照原点进行left,top对齐。

还有一种情况是，只是一个position:absolute;外层没有position:relative，这时会找寻那个点为参考呢？这时候的原则是：如果某父级元素中有relative者，则以某父级元素为参考原点，如果没有position:relative，则以body为参考原点。如果position:absolute外层没有relative时，这两个布局上是没有区别的。

当然最后一种情况是：外层是：position:absolute;里边是position:relative，那会是什么情况？按着原来的原则，absolute会参考body为布局原点，relative会参考他本来应该在的位置为布局原点，这时候其实就是参考外层左上角为布局原点。
其它的要看实际情况而定。

网页制作之html基础学习4-格式与布局的更多相关文章

  1. 网页制作之html基础学习1-简介

    学习网页制作主要分为三大块 1.HTML    超文本标记语言( 全称:Hyper Text  Markup Language) 专门编辑静态网页 2.CSS      网页美化:是HTML控制的样式 ...

  2. 网页制作之html基础学习6-CSS浏览器兼容问题

    初学html和css时,每天切图,总会遇到很多浏览器兼容性问题.最近一直关注移动平台开发,就html和css来说,不用考虑那么多浏览器兼容性问题.到现在,以至于很多浏览器兼容性几乎忘光了.今天把以前总 ...

  3. 网页制作之html基础学习3-css样式表

    样式:CSS(Cascading Style Sheets,层叠样式表),作用是美化HTML网页. 在样式里面用 /*  */ 进行注释. 1.样式表的基本概念 1.1.样式表分类 1.内联样式表 和 ...

  4. 网页制作之html基础学习2-标签

    一.html结构组成 <html> --开始标签 <head> 网页上的控制信息 <title>页面标题</title> </head> & ...

  5. 网页制作之html基础学习5-background-position用法

    我们知道在用图片作为背景的时候,css要这样写,以div容器举例子,也可以是body.td.p等的背景,道理一样. 代码: div{ background:#FFF url(image) no-rep ...

  6. Html JavaScript网页制作与开发完全学习手册

    Html JavaScript网页制作与开发完全学习手册 篇 HTML技术章 HTML入门 1.1 什么是HTML 1.1.1 HTML的特点 1.1.2 HTML的历史 1.2 HTML文件的基本结 ...

  7. 零基础学习java------39---------json格式交互，Restful（不懂），静态资源映射，SSM整合（ssm整合思想，application.xml文件详解(声明式事务管理)，）

    一. json格式交互(知道) 1 . 回顾ajax基本语法 $.ajax({ url:"", // 请求的后台路径 data:{"":"" ...

  8. IT兄弟连 HTML5教程 HTML5的学习线路图 第一阶段学习网页制作

    学习HTML5技术可并不是简单学会几个新增的标签而已,HTML5现在可以说是前端所有技术的代名词.需要学习的语言和工具不仅多,对于刚接触他们的新人会感觉很乱.另外,前端开发也会细分很多个开发岗位,不同 ...

  9. 学会网页制作，web app开发，必须先从语法基础开始学习

    做软件开发,是从事编程开发工作,必须先从语法基础开始学习,通过语法组成产品效果.      前端开发的基础语法,由HTML+CSS+JavaScript组成,这是前端开发最基本的3个语言.       ...

随机推荐

  1. Objective-c 类实现 （@implementation）

    在用@interface声明类之后,可以使用@implementation进行实类的实现.类的实现的具体语法如下: @implementation 类名 方法实现代码; @end; 实例: @impl ...

  2. C#多线程编程简述

    NET将关于多线程的功能定义在System.Threading名字空间中.因此,要使用多线程,必须先声明引用此名字空间(using System.Threading;). a.启动线程顾名思义,“启动 ...

  3. Vmware中Ubuntu挂ISO到虚拟光驱

    Ubuntu 下挂ISO到虚拟光驱的方法 https://i.cnblogs.com/EditPosts.aspx?opt=1 如果要ubuntu找到rpm软件包,需要把iso挂载到/media/cd ...

  4. [LeetCode]题解（python）：012-Integer to Roman

    题目来源: https://leetcode.com/problems/integer-to-roman/ 题意分析: 这道题是要把在区间[1-3999]的数字转化成罗马数字. 题目思路: 只要知道了 ...

  5. poj 2661 Factstone Benchmark

    /** 大意: 求m!用2进制表示有多少位 m! = 2^n 两边同时取对数 log2(m!) = n 即 log2(1) + log2(2)+log2(3)+log2(4)...+log2(m) = ...

  6. poj 2965

    http://poj.org/problem?id=2965 本题要结合poj 1753 来看最好...又有了一点搜索的经验..加油... #include <iostream> #inc ...

  7. ubuntu ~/.bash_history

    sudo apt-get update sudo apt-get install python-pip sudo pip install Django==1.7.1 sudo apt-get inst ...

  8. sorl6.0+jetty+mysql

    sorl6.0+jetty+mysql搭建solr服务 1.下载solr 官网:http://lucene.apache.org/solr/ v2.目录结构如下 v3.启动solr(默认使用jetty ...

  9. 转: seajs手册与文档之 -- 模块标识

    目录 模块标识 相对标识 顶级标识 普通路径 文件后缀的提示 模块标识 模块标识是一个字符串,用来标识模块.在 require. require.async 等加载函数中,第一个参数都是模块标识.de ...

  10. PCB设计铜铂厚度、线宽和电流关系

    以下总结了网上八种电流与线宽的关系公式,表和计算公式,虽然各不相同(大体相近),但大家可以在实际的PCB板设计中,综合考虑PCB板的大小,通过电流,选择一个合适的线宽. 一.PCB电流与线宽 PCB载 ...