1）文档类型

代码最上部有如下这句话：

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

这句话标明本文档是过渡类型，另外还有框架和严格类型，目前一般都采用过渡类型，因为浏览器对XHTML的解析比较宽松，允许使用HTML4.01中的标签，但必须符合XHTML的语法。许多朋友在制作页面时，往往喜欢把这句删除掉，在这里建议大家一定要保留这句话，删除它后可能引起某些样式表失效或其它意想不到的问题。

2）语言编码
接下来我们还会发现这样一句话：

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

它标示文档的语言编码。就像我们平时所说的汉语、英语一样。这里的gb2312告诉浏览器，本文档采用简体中文编码；还有一种常用的编码是UTF-8编码，它是国际通用的编码。不管我们采用哪种编码，有一点就是包含的css样式表和其它文件也必须和本文档的编码一样，要不就会出现乱码。

@import url("/css/global.css");

链接样式是以@import url标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个global.css的文件中，然后在layout.css中以@import url("/css/global.css")的形式链接全局样式，这样就使代码达到很好的重用性。

5）css优先级
id优先级高于class
后面的样式覆盖前面的
指定的高于继承
行内样式高于内部或外部样式
总结：单一的(id)高于共用的(class)，有指定的用指定的，无指定则继承离它最近的

所以整个盒模型在页面中所占的宽度是由左边界+左边框+左填充+内容+右填充+右边框+右边界组成，而css样式中width所定义的宽度仅仅是内容部分的宽度，这是许多朋友容易搞混的地方

一般的块级元素诸如段落<p>、标题<h1><h2>...、列表,<ul><ol><li> 、表格<table>、表单<form>、DIV<div>和BODY<body>等元素。而内联元素则如: 表单元素<input>、超级链接<a>、图像<img>、<span> ........ 块级无素的显著特点是：每个块级元素都是从一个新行开始显示，而且其后的无素也需另起一行进行显示。

如果没有css的作用，块元素会顺序以每次另起一行的方式一直往下排。而有了css以后，我们可以改变这种html的默认布局模式，把块元素摆放到你想要的位置上去。而不是每次都愚蠢的另起一行。也就是说，可以用css的display:inline将块级元素改变为内联元素，也可以用display:block将内联元素改变为块元素。

float属性

float是个重点，希望大家都能理解。上例中用float让元素向左浮动，在 CSS 中，任何元素都可以浮动。浮动元素会生成一个块级框，而不论它本身是何种元素；且要指明一个宽度，否则它会尽可能地窄；另外当可供浮动的空间小于浮动元素时，它会跑到下一行，直到拥有足够放下它的空间。

六、相对定位和绝对定位
定位标签：position
包含属性：relative（相对） absolute（绝对）
1.position:relative; 如果对一个元素进行相对定位，首先它将出现在它所在的位置上。然后通过设置垂直或水平位置，让这个元素"相对于"它的原始起点进行移动。（再一点，相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其他框）

2.position:absolute; 表示绝对定位，位置将依据浏览器左上角开始计算。 绝对定位使元素脱离文档流，因此不占据空间。普通文档流中元素的布局就像绝对定位的元素不存在时一样。（因为绝对定位的框与文档流无关，所以它们可以覆盖页面上的其他元素并可以通过z-index来控制它层级次序。z-index的值越高，它显示的越在上层。）

3.父容器使用相对定位，子元素使用绝对定位后，这样子元素的位置不再相对于浏览器左上角，而是相对于父窗口左上角

4.相对定位和绝对定位需要配合top、right、bottom、left使用来定位具体位置，这四个属性只有在该元素使用定位后才生效，其它情况下无效。另外这四个属性同时只能使用相邻的两个，不能即使用上又使用下，或即使用左，又使用右

超链接伪类

a:link {color: #FF0000} /* 未访问的链接 */
a:visited {color: #00FF00} /* 已访问的链接 */
a:hover {color: #FF00FF} /* 鼠标移动到链接上 */
a:active {color: #0000FF} /* 选定的链接 */

css制作按钮

a { display: block; height: 34px; width: 107px; line-height: 2; text-align: center; background: url(images/2010-08/14/014304_btn_bg.gif) no-repeat 0px 0px; color: #d84700; font-size: 14px; font-weight: bold; text-decoration: none; padding-top: 3px; }
a:hover { background: url(images/2010-08/14/014304_btn_bg_hover.gif) no-repeat 0px 0px;}

浮动后父容器高度自适应

overflow:auto; zoom:1;

overflow:auto;是让高度自适应， zoom:1;是为了兼容IE6而写（此样式不能通过W3C验证）。

xhtml css 漏 整理的更多相关文章

  1. 学无止境的CSS(xHTML+CSS技巧教程资源大全)

    本文里面收集一些有关CSS的技巧.教程.工具和观点等,其中一些你也许早就运用的炉火纯青,也可能有的你听都没听说过.不管是新手还是高手,大家都继续学习吧. 一,Web 标准 要玩游戏,就得先了解规则.要 ...

  2. 使用XHTML+CSS构架的好处到底有哪些？

    使用XHTML+CSS构架好处不少,但也确实存在一些问题,不论是因为使用不熟练还是思路不清晰. 1.在mozilla firefox和IE中的BOX模型解释不一致导致相差2px解决方法: div{ma ...

  3. css hack整理：区别FF，IE8，IE7，IE6，SF，CH浏览器

    css hack整理:区别FF,IE8,IE7,IE6,SF,CH浏览器 2013年03月24日 ⁄ CSS ⁄ 共 716字 ⁄ 暂无评论         前端开发最要命的事就是处理浏览器的兼容性问 ...

  4. 关于DIV+CSS和XHTML+CSS的理解

    WEB标准是一系列标准的集合,并不是仅“DIV+CSS”布局就可以实现.以CSS网页布局只是标准的基础之一.“DIV+CSS”布局只是一种通俗的称呼罢了.而我们学习的目标在于以XHTML建立良好的语义 ...

  5. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

  6. XHTML CSS 常见问题和解决方案

    原文地址:XHTML CSS 常见问题和解决方案 作为前端开发人员,在日常的页面制作时,不可避免的会碰上这样那样的问题,我挑选了其中的一些进行总结归档,希望对大家会有所帮助: 1.如何定义高度很小的容 ...

  7. CSS精心整理的面试题

    CSS精心整理的面试题 1.设置边框的样式用border-style实现,设置边框的颜色用border-color实现 2.CSS的语法由选择器.属性.值三部分组成 3.设置一个div的最小宽度为50 ...

  8. div+css 和 xhtml+css是一回事么?

    div+css 和 xhtml+css是一回事.只是说法不一样,表达得意思都是通过CSS定义DIV 布局. 那为什么地方要说成XHTML +css 呢? 以为我们做网站用CSS布局得时候不光是用了DI ...

  9. DIV+CSS专题：第一天　XHTML CSS基础知识

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准.   学习本系列教程需有一定html和css基础 ...

随机推荐

  1. sql 规范

    https://www.cnblogs.com/jacktang/archive/2012/09/25/2701301.html http://blog.csdn.net/ethan_fu/artic ...

  2. 通用全局CSS样式

    PC全局样式 *{padding:0;margin:0;} div,dl,dt,dd,form,h1,h2,h3,h4,h5,h6,img,ol,ul,li,table,th,td,p,span,a{ ...

  3. CImage访问像素及其像素操作总结

    MSDN的代码 COLORREF pixel; int maxY = imgOriginal.GetHeight(), maxX = imgOriginal.GetWidth(); byte r,g, ...

  4. JAVA吃货联盟项目。

    1基础通过数组.选择结构.循环等实 现吃货联盟订餐系统. 1.我要订餐: 2.查看餐袋: 3.签收订单: 4.删除订单: 5.我要点赞: 6.退出系统: public class Doy001 { p ...

  5. sql server 时间查询

    select CONVERT(varchar, getdate(),8 )   --获取当前时间时分14:13:59 select CONVERT(varchar, getdate(),23 )  - ...

  6. debian使用apt安装时出现“更换介质，插入驱动器"/media/chrom/"再按回车键”的提示，无法从网络安装，解决？

    原文链接:https://www.zhihu.com/question/22132663 nano /etc/apt/sources.list把那出现的那行注释掉:含CD盘的一行:然后apt-get ...

  7. Android 仿微信朋友圈添加图片

    github地址(欢迎下载Demo) https://github.com/zhouxu88/WXCircleAddPic 老习惯,先上图,着急用的朋友,直接带走Demo,先拿来用吧,毕竟老板催的紧, ...

  8. Java jar包查询下载方法

    做过java开发的工程师,对java应用所需jar包一定不会陌生.特别是有需要搭建开发环境时,对各种jar包的需求量就会很大. 如何快速的找到自己想要的jar包,是蛮多java工程师所面临的一个难题. ...

  9. ycsb安装和使用介绍

    nosql性能测试工具ycsb0.1的使用 使用文档参考地址:https://www.cnblogs.com/SailorXiao/p/5808828.html ycsb地址:https://gith ...

  10. codevs 1742 爬楼梯（水题日常）

    时间限制: 1 s  空间限制: 128000 KB  题目等级 : 黄金 Gold 题目描述 Description 小明家外面有一个长长的楼梯,共N阶.小明的腿很长,一次能跨过一或两阶.有一天,他 ...