1、第一篇初识 CSS第 1 课章 Web 设计基础1.1 因特网和万维网1.1.1 何为因特网由许多计算机连接在一起构成一个网络，彼此之间的文件可相互访问1.1.2 何为万维网因特网的组成部分，一般上网输入 www,多媒体的集合，各个部分由超级连接而成， 新浪首页，称为网页， web 页，或 web 文档 1.2Web 技术的未来Web1.0，是以编辑为特征，网站提供给用户的内容是网站编辑进行编辑处理后提供的，用户阅读网站提供的内容。这个过程是网站到用户的单向行为，web1.0 时代的代表站点为新浪，搜狐，网易三大门户。Web2.0 则是以加强了网站与用户之间的互动，网站内容基于用户提供，网站的
2、诸多功能也由用户参与建设，实现了网站与用户双向的交流与参与,web2.0 不同于 web1.0 的最大之处在于它的交互性。这个时期的典型代表有：博客中国、人人网，土豆网。应用：1、 Blog（from wiki）意思是网上日志。Blog 是个人或群体以时间顺序所作的一种记录，并且不断更新。blog 之间的交流主要是通过回溯引用（TrackBack）和回响/留言/评论（comment）的方式来进行的Blog 在美国和欧洲并不盛行，外国人不喜欢通过写网络日志来表达自己的思想感 情和政治抱负，所以 Blog 近 10 年来一直处于互联网的边缘地带。但是在中国，它因为 新浪的“名人博客”而名声大噪。
3、“美国社会缔造了形式各样的明星，但绝不会众多明星聚在某个网站写网络日志 。名人博客是对 Blog 概念的改写，或者说是 Blog 在太平洋彼岸遭遇了东方文化的洗礼 。 ”一位曾在美国生活多年的朋友向记者表示，中国人表达自己思想的途径太闭塞， 以至于在互联网上也必须去访问量最大的新浪开博客。 2、 Tag （from blogbus）什么是 Tag？Tag（标签）是一种更为灵活、有趣的日志分类方式，您可以为每篇日志添加一个或多个Tag（标签） ，然后您可以看到 BlogBus 上所有和您使用了相同 Tag 的日志，并且由此和其他用户产生更多的联系和沟通。不仅如此，我们还通过与 Technorat
4、i 的合作，把您的 Tag发送到全球 Blog 空间，和全世界的人们共同分享。3、SNSSocial Network Service，社会性网络软件，依据六度理论，以认识朋友的朋友为基础，扩展自己的人脉。并且无限扩张自己的人脉，在需要的时候，可以随时获取一点，得到该人脉的帮助。帮你运营朋友圈的朋友。国内的 SNS 已经逐渐爆发，除了人人网、腾讯空间、51、蚂蚁、占座和海内、开心网等，应该还会在涌现出来一批细分市场和用户需求导向的SNS 网站。像最近比较风靡的淘宝 SNS淘江湖就是在购物领域的一个突破和创新。4、 RSS（from wiki ）（1）订阅 BLOG可以订阅工作中所需的技术文章，也
5、可以订阅与你有共同爱好的作者的 Blog，总之，对什么感兴趣就可以订什么。 （2）订阅新闻无论是奇闻怪事、明星消息、体坛风云，只要你想知道的，都可以订阅。 你再也不用一个网站一个网站，一个网页一个网页去逛了。只要这将你需要的内容订阅在一个 RSS 阅读器中，这些内容就会自动出现你的阅读器里，你也不必为了一个急切想知道的消息而不断的刷新网页，因为一旦有了更新，RSS 阅读器就会自己通知你。Web3.0Web3.0 只是由业内人员制造出来的概念词语，最常见的解释是，网站内的信息可以直接和其他网站相关信息进行交互，能通过第三方信息平台同时对多家网站的信息进行整合使用；用户在互联网上拥有自己的数据，并
6、能在不同网站上使用；完全基于 web，用浏览器即可实现复杂系统程序才能实现的系统功能。用户数据审计后，同步于网络数据。13 浏览器发展国内大多数人使用的浏览器是以下三种：Internet Explorer 傲游 腾讯 TT 或许还有一些人用过：世界之窗浏览器14 网站前台开发人员必备技术必备技术：XHTML+CSS 高级技术：Photoshop+JavaScript 拓展技术：Ajax+UE+SEO+PHP+Mysql 前端这一行，入门并不困难，掌握 XHTML+CSS 之后，基本上就可以找到一份工作。 其他的东西，我们可以入职后再慢慢学习。第 2 章 Html 和 Xhtml 基础2.1 W
7、eb 设计技术21.11HTMLHTML 语言的目的是为了能把存放在一台电脑中的文本或图形与另一台电脑中的文本或图形方便地联系在一起，形成有机的整体人们不用考虑具体信息是在当前电脑上还是在网络的其它电脑上。我们只需使用鼠标在某一文档中点取一个图标，Internet 就会马上转到与此图标相关的内容上去，而这些信息可能存放在网络的另一台电脑中。HTML 只不过是组合成一个文本文件的一系列标签。它们很乐队的指挥,告诉乐手们哪里需要停顿,哪里需要激昂. 2.2.2 XML可以更容易的与 Windows、Mac OS, Linux 以及其他平台下产生的信息结合，事实上 XML与其他数据表现形式最大的不同
8、是：他极其简单。这是一个看上去有点琐细的优点，但正是这点使 XML 与众不同。 223 XHTMLXHTML 是 The Extensible HyperText Markup Language 可扩展标识语言的缩写。目前推荐遵循的是 W3C 于 2000 年 1 月 26 日推荐 XML1.0（参考 http:/www.w3.org/TR/xhtml1） 。XML 虽然数据转换能力强大，完全可以替代 HTML，但面对成千上万已有的站点，直接采用 XML 还为时过早。因此，我们在 HTML4.0 的基础上，用 XML 的规则对其进行扩展，得到了 XHTML。简单的说，建立 XHTML 的目的就
9、是实现 HTML 向 XML 的过渡。224CSS层叠样式表，作用控制布局和外观样式，使内容结构和表现完全分离2.2XHTML 页构成无标题文档其中红色部分为不显示页面的内容，显示的内容放在与之间22 标记、元素和属性221 标记标记是一些符号，用来区分文档中的不同部分，同时还能标识出内容的类型，标记由一对尖括号括起来，用于区分其它普通的文本。不区分大小写，大都成对出现，结束比开始多一个斜杠.2.2.2 元素起始标记和结束标记加上中间的内容就构成了元素23 文档元素231 页面头部元素标题编码样式 style 元素Meta 元素2.4Xhtml 书写规范1.所有标记必须有一个相应的结束标记:2
10、.元素和属性的名字都必须使用小写 :与 HTML 不一样，XHTML 对大小写是敏感的，和是不 同的标签。XHTML 要求所有的标签和属性的名字都必须使用小写。例如： 必须写成 。大小写夹杂也是不被认可的，通常 dreamweaver 自动生成的属性名字“onMouseOver“ 也必须修改成“onmouseover“。 3.所有的属性必须用引号“括起来: 在 HTML 中，你可以不需要给属性值加引号，但是在 XHTML 中，它们必须被加 错误 正确 4.给所有属性赋一个值 :XHTML 规定所有属性都必须有一个值，没有值的就重复本身。例如： 必须修改为： 5.JavaScript 写法 Ja
11、vascript 我们通常会写为 错误 W3C 标准必须为程式指定类型 type=text/javascript,所以要写为 正确 或者 载入外部.js 独立档案的写法 正确 6.正确使用 CSS 样式表 一定要放在之间 错误 正确 7.非标签一部分的符号以编码表示 表单内包含以下符号也必须用编码表示 以 表示 表示 程式中的连结 错误 正确 25DIV+CSS 网页制作开发流程：1、分析网页效果图、找出效果图结构规律；2、Photoshop 图片处理去掉无效果的文字、文章；3、在 Photoshop 把图片切成较小的 GIF、JPG 或 PNG 格式图片，根据网页效果来选择图片格式类型；4、
12、图片切完了紧接着就开始创建网页的文件夹、 CSS 文件、 HTML 文件（imges - 图片文件夹、CSS - CSS 文件夹、html 文件直接放到网站根目录下） ；5、开始创建 html 文件与 CSS 文件，这里可以用每次新开发的网页模板（ CSS 模板与 html模板） ；6、根据网页图片效果图制作开发网页(在制作中要调试和检查兼容) ；7、最后完工后重新检测和检查网页在各个浏览器兼容等。第 3 章 CSS 基本概念对于新手或入门者来说，往往会有这几方面的疑问：什么是 DIVCSS？实质是什么？DIV+CSS 的优势何在？新手学习 divcss，该如何入门？使用什么软件来布局页面和编
13、辑 css 呢？诸如此类的问题，是新手们最常问的。回答这些问题，也是仁者见仁，智者见智了。不过从严格的角度来讲，divcss 的叫法是不对，只不过像我们这些菜鸟级的都这样叫，习惯了而已。3.1、那么 DIVCSS 是什么意思呢？实质是什么？要弄懂这个意思，首先你要对网页有一定了解，对和 div 相对的 table 布局有很好的认识，这样理解起来就不难了。DIV+CSS 是网站标准（或称 “WEB 标准” ）中常用的术语之一，通常为了说明与 HTML网页设计语言中的表格（table）定位方式的区别，因为 XHTML 网站设计标准中，不再使用表格定位技术，而是采用 DIV+CSS 的方式实现各种定
14、位。 用 div 盒模型结构给各部分内容划分到不同的区块，然后用 css 来定义盒模型的位置、大小、边框、内外边距、排列方式等。CSS 是英语 Cascading Style Sheets（层叠样式表单）的缩写，它是一种用来表现 HTML 或 XML 等文件式样的计算机语言。在我们用 table 布局时，都曾接触和应用到 css。DIV 元素是用来为 HTML 文档内大块（block-level）的内容提供结构和背景的元素。DIV的起始标签和结束标签之间的所有内容都是用来构成这个块的，其中所包含元素的特性由DIV 标签的属性来控制，或者是通过使用样式表格式化这个块来进行控制。简单地说，div
15、用于搭建网站结构（框架） 、css 用于创建网站表现（样式 /美化） ，实质即使用 XHTML 对网站进行标准化重构，使用 CSS 将表现与内容分离，便于网站维护，简化html 页面代码，可以获得一个较优秀的网站结构便于日后维护、协同工作和搜索引擎蜘蛛抓取。当然不是所有的网页都需要用 div 布局，例如数据页面、报表之类的页面的时候还是会用table，web 标准里并没有说要摒弃 table。所谓 DIV+CSS 布局的叫法让人更为担心，不要让 DIV 成为 Table 的替代品，多层嵌套的 DIV 会严重影响代码的可阅读性，活用 HTML为我们提供的标签吧。3.2、DIV+CSS 的优势何在
16、？一 、 使 页 面 载 入 得 更 快 由 于 将 大 部 分 页 面 代 码 写 在 了 CSS 当 中 ， 使 得 页 面 体 积 容 量 变 得 更 小 。 相 对 于 表格 嵌 套 的 方 式 ， DIV+CSS 将 页 面 独 立 成 更 多 的 区 域 ， 在 打 开 页 面 的 时 候 ， 逐 层 加 载 。而 不 像 表 格 嵌 套 那 样 将 整 个 页 面 圈 在 一 个 大 表 格 里 ， 使 得 加 载 速 度 很 慢 。 二 、 降 低 流 量 费 用 页 面 体 积 变 小 ， 浏 览 速 度 变 快 ， 这 就 使 得 对 于 某 些 控 制 主 机 流 量 的
17、 网 站 来 说 是 最 大的 优 势 了 。 三 、 修 改 设 计 时 更 有 效 率 由 于 使 用 了 DIV+CSS 制 作 方 法 ， 在 修 改 页 面 的 时 候 更 加 容 易 省 时 。 根 据 区 域 内 容标 记 ， 到 CSS 里 找 到 相 应 的 ID， 使 得 修 改 页 面 的 时 候 更 加 方 便 ， 也 不 会 破 坏 页 面 其 他部 分 的 布 局 样 式 。 四 、 保 持 视 觉 的 一 致 性 DIV+CSS 最 重 要 的 优 势 之 一 ： 保 持 视 觉 的 一 致 性 ； 以 往 表 格 嵌 套 的 制 作 方 法 ， 会使 得 页 面
18、 与 页 面 ， 或 者 区 域 与 区 域 之 间 的 显 示 效 果 会 有 偏 差 。 而 使 用 DIV+CSS 的 制作 方 法 ， 将 所 有 页 面 ， 或 所 有 区 域 统 一 用 CSS 文 件 控 制 ， 就 避 免 了 不 同 区 域 或 不 同 页面 体 现 出 的 效 果 偏 差 。 五 、 更 好 地 被 搜 索 引 擎 收 录 由 于 将 大 部 分 的 HTML 代 码 和 内 容 样 式 写 入 了 CSS 文 件 中 ， 这 就 使 得 网 页 中 正文 部 分 更 为 突 出 明 显 ， 便 于 被 搜 索 引 擎 采 集 收 录 。 六 、 对 浏 览
19、 者 和 浏 览 器 更 具 亲 和 力 我 们 都 知 道 网 站 做 出 来 是 给 浏 览 者 使 用 的 ， 对 浏 览 者 和 浏 览 器 更 具 亲 和 力 ，DIV+CSS 在 这 方 面 更 具 优 势 。 由 于 CSS 富 含 丰 富 的 样 式 ， 使 页 面 更 加 灵 活 性 ， 它 可以 根 据 不 同 的 浏 览 器 ， 而 达 到 显 示 效 果 的 统 一 和 不 变 形 。3.3、新手学习 divcss ，该如何入门？学习任何东西都是一样，从小学、中学、大学，除了学习知识外就是去学习方法！要想学好网页标准化布局，要先摈弃传统的 table 布局时形成的固定思
20、维方式，用 div 布局，从内容出发。而且必须要对 html 标签有很好的认识，起码见了要知道它怎么用，干什么的。因为一个样式它是不可能脱离 HTML 页面的，HTML 不与样式结合的话 , CSS 就失去了存在的意义。接下来就是 css 了，必须能写出常用 css 的样式。另外推荐几本书：CSS 权威指南 网站重构 网站布局实录 HTML 参考大全 。阅读一本书，一般来说第一次要先把整个书通读一遍，不理解的也要往下看，在往下看的过程中你也许会找到那个问题的答案。看完后你有一个大概的印象，但一定有很多不明白的地方，没关系，继续往下看。第二遍你就要边看边做学习笔记了，把你认为是重点的部分写上，还
21、有，你觉得有疑问的部分也要记下，带着疑问看下去，如果没有答案，你可以去BBS 上发一个贴子，好心人还是很多的，提示一句： “一定要学会如何去问问题! ” 。你还要上机去练习书上的例子，最让你困惑的：“一是记不住，二是对概念的理解有误(这一条可能是书译的不好，另外就是你的理解不对)” ，对于第一条你就要树立信心，坚持再坚持下去。当你到达终点时你回发现一切都是顺理成章的事。因为你努力了，努力了就会有回报，有结果。3.4、使用什么软件来布局页面和编辑 css 呢？关于这个问题，只要已经能达到会手写的程度，用什么软件都可以，比如记事本。对于新手来说推荐使用 DreamWeaver（本站主页提供有下载入
22、口） 、微软出的 FrontPage 的替代品Microsoft Expression Web 或 TopStyle。）css 样式3.5、加载 css 样式有以下四种外部样式内部样式行内样式导入样式这种形式是把 css 单独写到一个 css 文件内，然后在源代码中以 link 方式链接。它的好处是不但本页可以调用，其它页面也可以调用，是最常用的一种形式。h2 color:#f00;这种形式是内部样式表，它是以和 结尾，写在源代码的 head 标签内。这样的样式表只能针对本页有效。不能作用于其它页面。内部样式这种在标签内以 style 标记的为行内样式，行内样式只针对标签内的元素有效，因其没有
23、和内容相分离，所以不建议使用。import url(“/css/global.css“);链接样式是以import url 标记所链接的外部样式表，它一般常用在另一个样式表内部。如layout.css 为主页所用样式，那么我们可以把全局都需要用的公共样式放到一个 global.css的文件中，然后在 layout.css 中以import url(“/css/global.css“)的形式链接全局样式，这样就使代码达到很好的重用性。3.6、css 优先级id 优先级高于 class后面的样式覆盖前面的指定的高于继承行内样式高于内部或外部样式总结：单一的(id)高于共用的(class)，有指定的
24、用指定的，无指定则继承离它最近的3.7、体验 CSS 之美三种方式综合使用 CSS3.8、CSS 语法3.8.1（1）基本写法选择符属性：值; 属性：值;选择符是用来调用样式的页面元素，CSS 定的具体内容放到 中，属性后面使用英文的冒号（：）区分属性与属性值。每个属性值后面使用英文的分号（；）例张飞身高：185cm;体重：60 公斤;性别：男；民族：汉；.mainWidth:400px;Height:200px;上述代码中，.main 为选择符，定义了两个属性，宽和高，值分别为：400px 和 200px382 选择符的类型及调用1、id 选择符由英文的#号加选择符号名称组成，使用相应 ID
25、 调用在一个 XHTML 文件中 id 是具有唯一性而不可以重复的。 在 div css 布局的网页中，可以针对不同的用途进行命名，如头部为 header、底部为 footer。 CSS 如下： #header font-size:14px; line-height:120%; XHTML 如下：2、class 选择符以英文点加选择符名称，使用相应的 class 属性来调用。使用频率较高，可以和 id 选择符一起使用。Calss 属性值不要求具有唯一性，多个元素可以拥有相同的 class 值。即与 id 不同，class 可以重复使用例：CSS 如下： .he margin:10px; bac
26、kground-color:red; Id 与 class 的区别？（1） 定义方式和调用方式不同，,点和#号，id 与 calass（2） 属性的优先级问题：ID 的优先级要高于 class，我们在下面的代码中有示例说明。（3） 在 web 标准中是不容许重复 ID 的，例如 div id=“a“ 不容许重复 2 次；而 class 所定义的是类，理论上可以无限重复。以根据需要多次引用。（4）可以同时调用多个 class ,而 id 不行3、类型选择符指网页中已有的标签类型作为名称的选择符。body 是网页中的一个标签类型，div,p,span都是。如下：body div p span 4、
27、群组选择符可以对一组同时进行了相同的样式指派。使用逗号对选择符进行了分隔，这样书写的优点在于同样的样式只需要书写一次即可，减少代码量，改善 CSS 代码结构。使用时应该注意“逗号“是在半角模式下，并非中文全角模式。如下：h1,h2,h6,p,spanfont-size:12px;color:#FF0000;font-family: arial;h1h2h6p5、包含选择符对某对象中的子对象进行样式指点定，这样选择方式就发挥了作用。需要注意的是，仅对此对象的子对象标签有效，对于其它单独存在或位于此对象以外的子对象，不应用此样式设置。这样做的优点在于，帮我们避免过多的 id、class 设置，直接
28、对所需的元素进行定义。如下：h2 spancolor:red;如下：body h1 span strongfont-weight:bold;3.9css 命名规范.(一)常用的 CSS 命名规则头：header内容：content/container尾：footer导航：nav侧栏：sidebar栏目：column页面外围控制整体布局宽度：wrapper左右中：left right center登录条：loginbar标志：logo广告：banner页面主体：main热点：hot新闻：news下载：download子导航：subnav菜单：menu子菜单：submenu搜索：search友情链
29、接：friendlink页脚：footer版权：copyright滚动：scroll内容：content标签页：tab文章列表：list提示信息：msg小技巧：tips栏目标题：title加入：joinus指南：guild服务：service注册：regsiter状态：status投票：vote合作伙伴：partner(2)导航导航：nav主导航：mainbav子导航：subnav顶导航：topnav边导航：sidebar左导航：leftsidebar右导航：rightsidebar菜单：menu子菜单：submenu标题: title摘要: summary(3)功能标志：logo广告：ban
30、ner登陆：login登录条：loginbar注册：regsiter搜索：search功能区：shop标题：title加入：joinus状态：status按钮：btn滚动：scroll标签页：tab文章列表：list提示信息：msg当前的: current小技巧：tips图标: icon注释：note指南：guild服务：service热点：hot新闻：news下载：download投票：vote合作伙伴：partner友情链接：link版权：copyright(四)class 的命名:(1)颜色:使用颜色的名称或者 16 进制代码,如.red color: red; .f60 color:
31、#f60; .ff8600 color: #ff8600; (2)字体大小,直接使用“font+字体大小“作为名称,如.font12 font-size: 12px; .font9font-size: 9pt; (3)对齐样式,使用对齐目标的英文名称,如.left float:left; .bottom float:bottom; (4)标题栏样式,使用“类别 +功能“ 的方式命名,如.barnews .barproduct 注意事项:1.一律小写;2.尽量用英文;3.不加中杠和下划线;4.尽量不缩写，除非一看就明白的单词.注意事项:1. 区分大小写：建议全部使用小写字母，单词首字母例外；2.
32、尽量用英文;3.尽量不缩写，除非一看就明白的单词.4、命名合法：一般要求以字母开头，后面可跟数字、下划线、连字符、和特殊字符，但建议尽量使用英文字母，而适当使用下划线和连接线；5.CSS 命名要词必达意，名称要反映用途和相关信息，同时也要简短，不要符加任何冗余信息。310 CSS 注释a、行间注释：直接写于属性值后面，如：.searchborder:1px solid #fff;/*定义搜索输入框边框*/background:url(/images/icon.gif) no-report #333;/*定义搜索框的背景*/B、整段注释：分别在开始及结束地方加入注释，如：/*=搜索条=*/.se
33、arch border:1px solid #fff;background:url(/images/icon.gif) no-repeat #333;/*=搜索条结束=*/以/*开始，以*/结束不可过多，增加不必要的字节，尽量用英文311 码风格1、DIV 书写格式Div 书写在 html 文件里，排列有序缩进有序将给开发和日后维护带来帮助。典型缩进范例：头部内容中部居左内容中部居右内容 底部版权内容注意以上代码缩进-父级与子级有相对缩进。一般缩进 4 个空格字符半角英文位置。2、CSS 书写格式好的 CSS 书写格式能给你带来维护和制作上方便。可以分析 CSS 命名的选择器之间个关系。#ma
34、in. .#main #header. .#main #centen. .#main #footer. .#centen .cent_left. .#centen .cent_right. .以上花括号内值省略这里不讲。这里主要是 CSS 派生关系，不同区域 DIV 块以空一行隔开。CSS 格式还有#main. .#main #header. .#main #centen. .#main #footer. .#centen .cent_left. .#centen .cent_right. .一般不推荐 CSS 的花括号分别占一行方式排列 CSS 选择器。同时这样会大大增加占用CSS 文件内行
35、数，维护也不好辨认第 2 篇 CSS 盒模型和决元素的定位第 4 章 CSS 控制元素的大小41 盒模型的概念什么是 CSS 的盒子模式呢？为什么叫它是盒子？先说说我们在网页设计中常听的属性名：内容(content)、填充(padding)、边框(border)、边界(margin)， CSS 盒子模式都具备这些属性。CSS 盒子模式这些属性我们可以把它转移到我们日常生活中的盒子（箱子）上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时
36、候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。在网页设计上，内容常指文字、图片等元素，但是也可以是小盒子（DIV 嵌套），与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子，否则盒子会被撑坏的，而 CSS 盒子具有弹性，里面的东西大过盒子本身最多把它撑大，但它不会损坏的。填充只有宽度属性，可以理解为生活中盒子里的抗震辅料厚度，而边框有大小和颜色之分，我们又可以理解为生活中所见盒子的厚度以及这个盒子是用什么颜色材料做成的，边界就是该盒子与其它东西要保留多大距离。在现实生活中，假设我们在一个广场上，把不同大小和颜色的盒子，以一定的间隙和顺序摆放好，最后从广场上空往下看，
37、看到的图形和结构就类似我们要做的网页版面设计了，如下图。由“盒子”堆出来的网页版面现在对 CSS 盒子模式理解多少了，如果还不够透彻，继续往下看，我会在后面举例，并延用盒子的概念来解释它。412 div 与 span 相区别div 与 span 两者最显著的区别在于 div 是块元素可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而 span 是行内（即内嵌）元素，span 的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用 span。如果不对div 元素定义任何 CSS 属性，其显示效果等于在前后各加一个换行。所谓块元素，是以另起一行开始渲染的元素
38、，行内元素则不需另起一行。下面给出一行代码，方便大家能更形象的理解 div 与 span 的区别。 代码如下：测试紧跟前面的“ 测试“显示 从这里开始会另起一行显示 块元素和行内元素也不是一成不变的，只要给块元素定义 display:inline，块元素就成内嵌元素，同样地，给内嵌元素定义了 display:block 就成块元素了。如以下代码：测试紧跟前面的“ 测试“显示这里会另起一行显示行内样式定义元素的基本语法：元素的首尾标记必须同时成对出现，且元素允许多重嵌套，也就是说，一个元素中可以嵌套任意多个元素。块级样式定义元素的基本语法： 元素的首尾标记必须同时成对出现，且 元素允许多重嵌套，
39、也就是说，一个 元素中可以嵌套任意多个 元素。4.1.3 元素宽度计算盒子本身的大小是这样计算的：Width width + padding-left + padding-right + border-left + border-right Height height + padding-top + padding-bottom + border-top + border-bottom值未声明的情况如果未声明 padding 或者 border，那他们或者值为零，或者为浏览器的默认值(很可能不是零，尤其是那些通常没有重置的表单元素)块级盒的默认宽度如果未声明宽度，并且盒子是静态或者相对定位的，
40、宽度会保持 100的 宽度，padding 和 border 会向内推动，而不是向外扩展。但是，如果明确设置盒子的宽度为 100，那么 padding 就会向外延展。42 元素的边框CSS 边框即 CSS border 是控制对象的边框边线宽度、颜色、线型等样式 CSS 属性。边框样式包括设置上边框：border-top ：设置下边框：border-bottom ：设置左边框：border-left ： 设置右边框：border-right ：边框显示样式：border-style : none | hidden | dotted | dashed | solid | double | gro
41、ove | ridge | inset | outset 参数值解释：none : 无边框。与任何指定的 border-width 值无关hidden : 隐藏边框。 IE 不支持dotted : 在 MAC 平台上 IE4+与 WINDOWS 和 UNIX 平台上 IE5.5+为点线。否则为实线dashed : 在 MAC 平台上 IE4+与 WINDOWS 和 UNIX 平台上 IE5.5+为虚线。否则为实线solid : 实线边框double : 双线边框。两条单线与其间隔的和等于指定的 border-width 值groove : 根据 border-color 的值画 3D 凹槽ri
42、dge : 根据 border-color 的值画菱形边框inset : 根据 border-color 的值画 3D 凹边outset : 根据 border-color 的值画 3D 凸边设置上边框为 1px 实线黑色边框。border-top-color:#000; border-top-style:solid; border-top-width:1px;或简写border-top:#000 solid 1px;(顺序可颠倒)可以根据以上实例举一反三，可以设置左、右、下的边框 CSS 样式。DIV CSS 边框技巧如果设置对象上、下、左、右边框相同样式，可以简写无需分别写出上下左右的属性
43、及对应值。例，设置上下左右边框为 1px 宽度、实线、黑色边框 CSS 代码如下：border:1px solid #000;三边有边而一边没有设置技巧如左右下有边框并且样式为黑色 1PX 宽度实线边框，而上边没有边框。CSS 代码： border:1px solid #000; border-top:none;注意 border:1px solid #000; 和 border-top:none;前后顺序不能调换。4.3 元素内容大小431 宽度属性1、CSS 宽度自适应常常我们看见一个网页宽度随浏览器宽度改变而自动改变，宽度是自适应宽度。这里运用了百分比即可实现自适应宽度。如果网页总宽度为
44、 80%即 width:80%;，将使此宽度知道自适应宽度为浏览器 80%。当然前提是设置最外层没有宽度限制条件下。DIV CSS 自适应宽度例子：CSS 样式代码：body margin:0 auto; text-align:center;.yangshi width:80%; border:1px solid #003; margin:0 auto;Html 中 body div 代码：我是 80%自适应宽度这样即设置内容居中，为了方便测试加上 1px 黑色边框。大家可以测试观察其内容是随浏览器拉大而宽度变宽而自适应宽度 80%，而左右两边始终有 10%宽度留着，因为设置此box 宽度为
45、80%。以上为 CSS 宽度（width）演示图解。2、CSS 宽度固定固定即设置宽度为固定值即可如很多时候需要对网页的宽度样式设置为固定，这时只需要设置宽度 width:300px，即设置对应固定宽度为 300 像素。3、最小固定宽度CSS 样式属性单词：min-width兼容支持：min-width 除 IE6 不支持为，IE7 以上浏览器、火狐、谷歌都支持常常用于设置宽度最小值，如设置对应 DIV 的样式最小宽度值限制。例：.yangshiborder:1px solid #003; min-width:300px;即设置最小宽度为 300px，当然一般很少设置最小宽度。如果要使用最小宽
46、度即，使用浮动（float）可使用最小宽度限制。最大固定宽度CSS 属性单词：max-width兼容支持：max-width 除 IE6 不支持为，IE7 以上浏览器、火狐、谷歌都支持最大固定宽度是对对应的样式 div 设置最大宽度限制，即内容不超过此设置最大宽度。最大宽度限制例子：.yangshiborder:1px solid #003;max-width:300px;即设置了最大宽度限制为 300px，以下为设置最大宽度限制演示图：4.3.2 高度属性1、CSS 自适应高度一般我们需要让宽度一定时高度随内容增加而增高。此时我们将无需设置高度即可实现此效果。同时也无需使用height:au
47、to 来实现高度自适应。通常默认情况下不设置高度，对象高度即是自适应高度。2、固定高度及隐藏超出固定高度的内容很多时候我需要设置对象固定高度同时让多余的内容不显示出来。解决办法：设置固定高度值，和设置内容不被溢出（隐藏超出内容）如设置一个高度为 50px；宽度为 50px，并禁止内容超出此高度宽度，为了观看效果同时设置对象为 1px 黑色边框演示，CSS 代码：.yangshi height:50px; width:50px; overflow:hidden; border:1px solid #666;Html body 内代码： 演示，内容测试内容高度超出演示实例，divcss5 实例CS
48、S 固定高度效果截图：说明观看此上图，看出设置固定高度宽度并设置 1px 的黑色边框，并且实现内容未超出设置高度宽度。禁止溢出设置 CSS 高度、CSS 宽度的 CSS 属性单词及值 overflow:hidden; 。3、设置最小高度使用 CSS 单词：min-height为什么要设置最小高度？有时特别是在文章页面里因为文章内容多少参差不齐，所以我们可以使用最小高度设置让左右结构的布局对齐，感觉饱和一点，但是我们又不能设置固定高度，因为内容可能多可能少，当多的时候自然设置固定高度就不会显示完整内容。这里有个问题就是 IE6 不支持最小高度设置（min-height ） ，解决办法使用 css
49、 hack 方法来解决，大家知道区别不同浏览器时候用的 css hack 中 IE6 可以使用“_”来区别其它浏览器。最小高度运用：.yangshimin-height:50px; _height:50px;这样就可以解决此问题，说明这里就不能再使用overflow:hidden;-CSS overflow 设置隐藏超出内容溢出。完整 CSS html 最小高度实例代码：CSS 高度实例 .yangshi min-height:50px; _height:50px;width:150px;border:1px solid #666; 演示，内容测试内容高度超出演示实例测试内容测试内容高度超出演示实例高度超出演示实例，divcss5 实例效果图：以上是超出内容自动适应高这里是内容够少，未能充满设置
