二十个最常用的CSS经典技巧
CSS样式的常见应用技巧
CSS样式的常见应用技巧CSS（层叠样式表）在网页设计中起着重要的作用，它可以用来为网页添加各种各样的样式和效果。
在这篇文章中，我将分享一些CSS样式的常见应用技巧，帮助您提升网页设计的能力。
一、背景样式1. 渐变背景：使用CSS渐变属性可以为元素添加平滑的背景色过渡效果。
通过设置起始颜色和结束颜色，可以创建水平、竖直或对角线的渐变背景效果。
2. 背景图像：利用CSS的background-image属性，可以将图像作为元素的背景。
您可以使用不同的背景图像来增加网页的视觉吸引力。
3. 背景定位：使用background-position属性可以控制背景图片的位置。
通过调整水平和垂直位置，可以实现更精细的背景图像布局效果。
二、字体样式1. 字体选择：通过CSS的font-family属性，可以选择不同的字体样式来使文本更加有吸引力。
您可以在字体名称后跟上备用字体，以确保在某些情况下仍然保持一致的字体样式。
2. 字体大小和行高：利用font-size和line-height属性可以控制文本的大小和行高。
合适的字体大小和行高可以提高网页的读取和理解性。
3. 字体加粗和斜体：通过font-weight和font-style属性，可以使文本加粗或斜体显示。
这些样式可以用来强调重要的内容。
三、盒子样式1. 边框样式：使用border属性可以为元素添加边框效果。
您可以通过设置边框的颜色、宽度和样式来创建各种边框效果。
2. 盒子阴影：利用box-shadow属性可以为元素添加阴影效果。
通过调整阴影的颜色、模糊度和偏移值，可以创建出更加逼真的阴影效果。
3. 盒子圆角：使用border-radius属性可以为元素创建圆角效果。
通过调整圆角的半径值，可以实现不同尺寸和形状的圆角。
四、动画效果1. 过渡效果：利用CSS的transition属性，可以为元素添加平滑的过渡效果。
通过设置过渡的属性和时长，可以实现元素在状态变化时的渐变效果。
CSS兼容常用技巧论述(整理)
CSS兼容常用技巧请尽量用xhtml格式写代码，而且DOCTYPE 影响 CSS 处置，作为W3C的尺度，必然要加 DOCTYPE声明。
v的垂直居中问题vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字，就垂直居中了。
错误谬误是要控制内容不要换行2. margin加倍的问题设置为float的div在ie下设置的margin会加倍。
这是一个ie6都存在的bug。
解决方案是在这个div里面加上display:inline;例如：<#div id=〞imfloat〞>相应的css为#imfloat{float:left;margin:5px;/*IE下理解为10px*/display:inline;/*IE下再理解为5px*/}3.浮动ie发生的双倍距离#box{ float:left; width:100px; margin:0 0 0 100px; //这种情况之下IE会发生200px的距离display:inline; //使浮动忽略}这里细说一下block与inline两个元素：block元素的特点是,总是在新行上开始,高度,宽度,行高,边距都可以控制(块元素);Inline元素的特点是,和其他元素在同一行上,不成控制(内嵌元素);#box{ display:block; //可以为内嵌元素模拟为块元素 display:inline; //实现同一行摆列的效果diplay:table;4 IE与宽度和高度的问题IE不认得min-这个定义，但实际上它把正常的width和height当作有min的情况来使。
这样问题就大了，如果只用宽度和高度，正常的浏览器里这两个值就不会变，如果只用min-width 和min-height的话，IE下面底子等于没有设置宽度和高度。
比方要设置布景图片，这个宽度是比较重要的。
要解决这个问题，可以这样：#box{ width: 80px; height: 35px;}html>body #box{ width: auto; height: auto; min-width: 80px; min-height: 35px;}5.页面的最小宽度min-width是个非常便利的CSS命令，它可以指定元素最小也不克不及小于某个宽度，这样就能包管排版一直正确。
CSS使用技巧
分享：CSS使用技巧20则-(0)1. CSS字体属性简写规则一般用CSS设定字体属性是这样做的：font-weight: bold;font-style: italic;font-varient: small-caps;font-size: 1em;line-height: 1.5em;font-family: verdana,sans-serif但也可以把它们全部写到一行上去：font: bold italic small-caps 1em/1.5em verdana,sans-serif真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family 属性时才起作用。
而且，如果你没有设定font-weight, font-style, 以及font-varient ，他们会使用缺省值，这点要记上。
2. 同时使用两个类一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。
事实上，你可以这样：<p class="text side">...</p>同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。
如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
3. CSS border的缺省值通常可以设定边界的颜色，宽度和风格，如：border: 3px solid #000这位把边界显示成3像素宽，黑色，实线。
但实际上这里只需要指定风格即可。
如果只指定了风格，其他属性就会使用缺省值。
一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。
如果这个值正好合适的话，就不用设那么多了。
4. CSS用于文档打印许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：<link type="text/css" rel="stylesheet"href="/htmldata/2006-06-14/stylesheet.css"media="screen" /><link type="text/css" rel="stylesheet"href="/htmldata/2006-06-14/printstyle.css" media="print" />第1行就是显示，第2行是打印，注意其中的media属性。
高手进阶第3章 CSS实用技巧
2 3
菜单设计的内容 ：
1.简单的导向菜单条 2.简单的标签菜单 3.推拉门式图片标签菜单
CSS基本语法
目录
CSS的常用技巧 CSS用于网页布局设计
CSS其他设计原则 CSS其他设计原则
CSS其他设计原则： 1．有效地定义样式名 2．尽量使用CSS的简写方式 3．有效地控制边距和间距 4．不要定义缺省值 5．尽量使用已有的HTML元素 6．尽量组合定义样式 7．使用正确的Doctype 8．验证CSS
Page 12
第3章 CSS实用技巧
1
CSS的常用技巧
2
CSS用于网页布局设计 CSS用于菜单设计
3 4
CSS其他设计原则
讲师：贾如春 QQ：460669467
CSS基本语法
目录
CSS的常用技巧 CSS用于网页布局设计 CSS其他设计原则
CSS的常用技巧
1.网页内容的居中对齐 2.网页内容的隐藏与显示 3.方框长度的计算 4.圆角边框 5.图片 6.定义外部样式表的选项
1、CSS的常用技巧
1 网页内容的居中对齐
在屏幕中水平居中的文本框
在定高元素中垂直居中一行文字内容
在屏幕中水平和垂直都居中的文本框
2
网页内容的隐藏与显示
3
方框长度的计算
4
圆角边框
5 图片
在文档中 插入图片
透明图片
叠加图片
阴影效果
6 定义外部样式表的选项
1.制作适合打印的网页 2.制作适合不同IE版本浏览器的网页 3.在外部样式表文件中包含其他样式表文件
CSS基本语法
目录
CSS的常用技巧 CSS用于网页布局设计 CSS其他设计原则
CSS渐变技巧大全打造炫酷的颜色渐变效果
CSS渐变技巧大全打造炫酷的颜色渐变效果在现代网页设计中，颜色渐变效果经常被用来为页面增添美感与层次感，CSS渐变技巧让我们能够轻松实现各种炫酷的颜色渐变效果。
本文将为大家介绍一些常用的CSS渐变技巧，帮助您打造出令人惊叹的网页设计。
一、线性渐变线性渐变是最基础也是最常用的渐变效果之一。
通过定义起点和终点的颜色或颜色停止点，我们可以在元素背景上实现从一种颜色过渡到另一种颜色的效果。
1. 使用线性渐变的简单语法要使用线性渐变，可以使用以下语法：background: linear-gradient(方向, 起点颜色, 终点颜色);例如，要创建从上到下渐变的背景，可以使用以下代码：background: linear-gradient(to bottom, #ff0000, #00ff00);2. 自定义线性渐变方向除了从上到下，我们还可以定义其他方向的线性渐变。
比如，以下代码可以实现从左到右的背景渐变效果：background: linear-gradient(to right, #ff0000, #00ff00);3. 添加多个颜色停止点为了创建更复杂的线性渐变，我们可以在渐变中添加多个颜色停止点。
例如，以下代码可以实现从左到右的渐变效果，但是颜色在中间会有一个停止点：background: linear-gradient(to right, red, yellow 50%, green);二、径向渐变径向渐变是另一种常用的渐变效果，它以一个中心点为起点，向四周渐变。
1. 使用径向渐变的简单语法要使用径向渐变，可以使用以下语法：background: radial-gradient(径向渐变类型, 起点颜色, 终点颜色);例如，以下代码可以实现从内向外的径向渐变效果：background: radial-gradient(circle, #ff0000, #00ff00);2. 自定义径向渐变的形状除了默认的圆形渐变，我们还可以定义其他形状的径向渐变。
前端开发必学的CSS技巧
前端开发必学的CSS技巧在前端开发中，CSS是一个必不可少的技术。
CSS可以解决网站或应用程序的外观和布局问题，并使其在不同设备和浏览器上看起来一致。
然而，CSS的学习曲线很陡峭，很多开发者容易陷入困境。
本篇文章将介绍一些前端开发者必须学习的CSS技巧，旨在帮助新手更好地理解和运用CSS。
1. 布局CSS布局是一个复杂的主题，需要掌握一些技巧才能实现复杂的布局。
下面是一些必知的CSS布局技巧：1.1. 盒子模型盒子模型是CSS布局的基础，非常重要。
它是指一个元素由四个部分构成：内边距、边框、外边距和内容。
1.2. 浮动浮动是将元素移到其他元素周围的一种CSS技术。
通过浮动元素，我们可以实现复杂的布局。
1.3. 定位定位是一种控制元素位置的CSS技术。
通过定位，我们可以将元素固定到页面上的特定位置。
2. 样式CSS样式是我们在网站上看到的外观。
下面是一些关于CSS样式的技巧：2.1. 颜色和文本颜色和文本是CSS中最常用的样式，在为网站创建任何CSS时都需要注意这些样式。
2.2. 列表列表是在网站中显示不同内容的常见方法。
在创建列表的CSS时，保持简单和通用性是很重要的。
2.3. 图像和图标图像和图标是网站中常见的视觉元素。
正确地调整CSS可以在网站中创建完美的视觉效果。
3. 响应式设计在当今的数字化时代，响应式设计是非常重要的。
一种响应式设计是指网站的设计在不同设备上可自动调整，以确保最佳的用户体验。
下面是一些关于响应式设计的CSS技巧：3.1. 媒体查询媒体查询是CSS中响应式设计的核心部分。
使用媒体查询，我们可以针对不同尺寸的屏幕和设备创建不同的CSS样式。
3.2. 弹性布局弹性布局是创建响应式网站的重要方法。
它是一种可以更好地适应页面大小和设备的布局方法。
3.3. 图像和细节响应式设计的一个重要问题是如何处理图像和细节。
通过使用CSS技巧，我们可以在不同的页面布局中正确地处理图像和细节。
结论以上是一些CSS技巧，可以帮助前端开发者更好地理解和实现CSS。
那些惊艳的css技巧
那些惊艳的css技巧CSS（层叠样式表）是一种用于描述HTML（超文本标记语言）或XML（包括HTML的标记语言，如SVG、XHTML等）文档样式的计算机语言。
以下是一些令人惊艳的CSS技巧：1. 3D变换：CSS3引入了3D变换，允许元素在页面上旋转、缩放和平移，创造出更加丰富的视觉效果。
例如，`transform: rotateY(70deg);`可以使元素围绕Y轴旋转70度。
2. 动画和过渡：CSS允许创建平滑的动画和过渡效果，使得元素可以在一段时间内改变颜色、位置或尺寸等属性。
例如，`transition: width 2s ease-in-out;`可以使元素的宽度在2秒内平滑地过渡变化。
3. CSS变量（Custom Properties）：CSS变量允许你定义可复用的样式规则，方便在页面上快速修改样式。
例如，`:root { --main-color: 007bff; }`定义了一个全局的CSS变量 `--main-color`，可以在整个页面中使用。
4. CSS Grid：CSS Grid 是一个二维的布局系统，适用于创建复杂的网页布局。
它提供了强大的网格系统和位置模型，可以轻松实现复杂的布局设计。
5. CSS Filter：CSS Filter 允许你应用各种效果到元素上，如模糊、亮度、对比度等。
例如，`filter: blur(10px);` 可以使元素变得模糊。
6. CSS Masking：CSS Masking 允许你隐藏或显示元素的某个部分，创造出一些独特的视觉效果。
例如，`mask-image: linear-gradient(to right, transparent, white);` 可以使元素左侧透明，右侧显示白色。
7. CSS Shapes：CSS Shapes 允许你定义元素的形状，使得你可以创建出更加独特和有趣的布局。
例如，`shape-outside: circle(50% at center);` 可以使元素具有圆形形状。
css100个必背知识点
css100个必背知识点CSS（层叠样式表）是一种用于描述网页样式的语言，它可以控制网页的布局、字体、颜色、背景等各个方面。
对于前端开发者来说，掌握CSS的基本知识是非常重要的。
下面是100个必背的CSS知识点，希望对大家有所帮助。
1. CSS是一种样式表语言，用于描述网页的外观和样式。
2. CSS可以通过选择器来选择HTML元素，并为其应用样式。
3. CSS样式可以通过内联样式、内部样式表和外部样式表来定义。
4. 内联样式是直接在HTML元素的style属性中定义的样式。
5. 内部样式表是在HTML文档的head部分中定义的样式。
6. 外部样式表是一个独立的CSS文件，通过link标签引入到HTML 文档中。
7. CSS选择器可以根据元素的标签名、类名、ID等属性来选择元素。
8. 标签选择器可以选择指定标签名的所有元素。
9. 类选择器可以选择具有指定类名的元素。
10. ID选择器可以选择具有指定ID的元素。
11. 后代选择器可以选择指定元素的后代元素。
12. 子元素选择器可以选择指定元素的直接子元素。
13. 相邻兄弟选择器可以选择指定元素的下一个兄弟元素。
14. 伪类选择器可以选择元素的特定状态或位置。
15. 伪元素选择器可以选择元素的特定部分。
16. CSS样式可以通过属性和值来定义。
17. 属性是用于描述元素的特性，如颜色、字体、边框等。
18. 值是属性的具体取值，如红色、宋体、1px等。
19. CSS样式可以通过简写属性来定义，如font、border等。
20. CSS样式可以通过继承来应用到子元素。
21. CSS样式可以通过层叠来决定最终的样式。
22. CSS样式可以通过优先级来决定应用的顺序。
23. 内联样式的优先级最高，其次是ID选择器、类选择器和标签选择器。
24. 伪类选择器的优先级比类选择器和标签选择器高。
25. 伪元素选择器的优先级比伪类选择器高。
26. !important关键字可以提高样式的优先级。
css常用技巧
CSS常用技巧CSS（层叠样式表）是一种用于定义网页的样式和布局的语言。
在网页开发中，掌握一些常用的CSS技巧可以帮助我们更好地设计和优化网页。
本文将介绍一些常用的CSS技巧，包括选择器、布局、动画、响应式设计等方面。
选择器选择器是CSS中用于选择HTML元素的一种方法。
以下是一些常见的选择器技巧：1. 元素选择器元素选择器是最基本的选择器，通过元素的标签名选择元素。
例如，p选择所有的<p>元素。
2. 类选择器类选择器通过元素的class属性选择元素。
例如，.red选择所有的class为”red”的元素。
3. ID选择器ID选择器通过元素的id属性选择元素。
例如，#header选择id为”header”的元素。
4. 属性选择器属性选择器通过元素的属性选择元素。
例如，[type="text"]选择所有type属性值为”text”的元素。
5. 后代选择器后代选择器可以选择某个元素的后代元素。
例如，div p选择所有在<div>元素内的<p>元素。
6. 伪类选择器伪类选择器用于选择特定状态的元素。
例如，:hover选择鼠标悬停在元素上的状态。
布局布局是网页设计中非常重要的一部分。
以下是一些常用的布局技巧：1. 盒模型盒模型是CSS中用于布局的基本概念。
每个HTML元素都被看作是一个矩形的盒子，包含内容、内边距、边框和外边距。
通过调整这些属性，可以实现不同的布局效果。
2. 浮动浮动是一种常用的布局技巧，通过设置元素的浮动属性，可以使元素脱离普通文档流，实现多列布局等效果。
3. 弹性布局弹性布局是一种响应式的布局技术，可以根据屏幕大小自动调整元素的大小和位置。
通过设置容器的display: flex属性，可以实现弹性布局。
4. 网格布局网格布局是一种二维布局技术，可以将页面划分为行和列，并将元素放置在网格中。
通过设置容器的display: grid属性，可以实现网格布局。
CSS的基本语法与使用技巧详解
CSS的基本语法与使用技巧详解CSS（层叠样式表）是一种用于描述网页元素样式的语言。
通过使用CSS，我们可以自定义网页的布局、颜色、字体、大小等各种样式效果。
本文将详细介绍CSS的基本语法和使用技巧，帮助读者更好地理解和运用CSS。
一、CSS的基本语法CSS的基本语法由选择器和声明块组成。
选择器用于选择需要样式化的元素，而声明块则包含了一个或多个声明，每个声明由属性和值构成，表示元素的样式。
选择器可以是HTML元素名称、类名、ID或其他属性等。
下面是一些常见的选择器示例：1、HTML元素选择器：用于选择特定的HTML元素，如p、h1、a等。
2、类选择器：用于选择具有相同类名的HTML元素，类名以.开头，如.class1、.class2等。
3、ID选择器：用于选择具有特定ID的HTML元素，ID以#开头，如#myElement。
4、属性选择器：用于选择具有特定属性的HTML元素，如[type="text"]。
一个基本的CSS规则由选择器和声明块组成，如下所示：```选择器{属性1:值1;属性2:值2;...}```例如，我们要选择class为"myDiv"的元素，并设置其文本颜色为红色，背景颜色为黄色，可以这样写CSS代码：```.myDiv{color:red;background-color:yellow;}```二、CSS的使用技巧1、继承和层叠CSS中的继承和层叠是两个重要的特性，可以帮助我们提高样式的复用和灵活性。
继承是指子元素会继承父元素的某些样式。
例如，如果我们将一个p元素的颜色设置为红色，那么其所有子元素的文本颜色都会继承这个属性值。
层叠是指当某个元素具有多个样式定义时，浏览器会根据一定的优先级规则选择使用哪个样式。
可以使用!important关键字来提升某个样式的优先级，但过度使用会导致代码难以维护，应谨慎使用。
2、盒模型和布局CSS的盒模型是指一个HTML元素被分为内容区、内边距、边框和外边距四个部分。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
1、CSS字体属性简写规则一般用CSS设定字体属性是这样做的：font-weight: bold;font-style: italic;font-varient: small-caps;font-size: 1em;line-height: 1.5em;font-family: verdana,sans-serif但也可以把它们全部写到一行上去：font: bold italic small-caps 1em/1.5em verdana,sans-serif真不错！只有一点要提醒的：这种简写方法只有在同时指定font-size和font-family属性时才起作用。
而且，如果你没有设定font-weight, font-style, 以及font-varient ，他们会使用缺省值，这点要记上。
2、同时使用两个类一般只能给一个元素设定一个类（Class），但这并不意味着不能用两个。
事实上，你可以这样：<p class="text side">...</p>同时给P元素两个类，中间用空格格开，这样所有text和side两个类的属性都会加到P元素上来。
如果它们两个类中的属性有冲突的话，后设置的起作用，即在CSS文件中放在后面的类的属性起作用。
3、CSS border的缺省值通常可以设定边界的颜色，宽度和风格，如：border: 3px solid #000这位把边界显示成3像素宽，黑色，实线。
但实际上这里只需要指定风格即可。
如果只指定了风格，其他属性就会使用缺省值。
一般地，Border的宽度缺省是medium，一般等于3到4个像素；缺省的颜色是其中文字的颜色。
如果这个值正好合适的话，就不用设那么多了。
4、CSS用于文档打印许多网站上都有一个针对打印的版本，但实际上这并不需要，因为可以用CSS来设定打印风格。
也就是说，可以为页面指定两个CSS文件，一个用于屏幕显示，一个用于打印：<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen" /><link type="text/css" rel="stylesheet" href="printstyle.css" media="print" />第1行就是显示，第2行是打印，注意其中的media属性。
但应该在打印CSS中写什么东西呢？你可以按设计普通CSS的方法来设定它。
设计的同时就可以把这个CSS设成显示CSS来检查它的效果。
也许你会使用display: none 这个命令来关掉一些装饰图片，再关掉一些导航按钮。
要想了解更多，可以看“打印差异”这一篇。
5、图片替换技巧一般都建议用标准的HTML来显示文字，而不要使用图片，这样不但快，也更具可读性。
但如果你想用一些特殊字体时，就只能用图片了。
比如你想整个卖东西的图标，你就用了这个图片：<h1><img src="widget-image.gif" alt="Buy widgets" /></h1>这当然可以，但对搜索引擎来说，和正常文字相比，它们对alt里面的替换文字几乎没有兴趣这是因为许多设计者在这里放许多关键词来骗搜索引擎。
所以方法应该是这样的：<h1>Buy widgets</h1>但这样就没有特殊字体了。
要想达到同样效果，可以这样设计CSS：h1{background: url(widget-image.gif) no-repeat;height: image heighttext-indent: -2000px}注意把image height换成真的图片的高度。
这里，图片会当作背景显示出来，而真正的文字由于设定了-2000像素这个缩进，它们会出现在屏幕左边2000点的地方，就看不见了。
但这对于关闭图片的人来说，可能全部看不到了，这点要注意。
6、CSS box模型的另一种调整技巧这个Box模型的调整主要是针对IE6之前的IE浏览器的，它们把边界宽度和空白都算在元素宽度上。
比如：#box{width: 100px;border: 5px;padding: 20px}这样调用它：<div id="box">...</div>这时盒子的全宽应该是150点，这在除IE6之前的IE浏览器之外的所有浏览器上都是正确的。
但在IE5这样的浏览器上，它的全宽仍是100点。
可以用以前人发明的Box调整方法来处理这种差异。
但用CSS也可以达到同样的目的，让它们显示效果一致。
#box{width: 150px}#box div{border: 5px;padding: 20px}这样调用：<div id="box"><div>...</div></div>这样，不管什么浏览器，宽度都是150点了。
7、块元素居中对齐如果想做个固定宽度的网页并且想让网页水平居中的话，通常是这样：#content{width: 700px;margin: 0 auto}你会使用<div id="content"> 来围上所有元素。
这很简单，但不够好，IE6之前版本会显示不出这种效果。
改CSS如下：body{text-align: center}#content{text-align: left;width: 700px;margin: 0 auto}这会把网页内容都居中，所以在Content中又加入了text-align: left;8、用CSS来处理垂直对齐垂直对齐用表格可以很方便地实现，设定表格单元vertical-align: middle 就可以了。
但对CSS来说这没用。
如果你想设定一个导航条是2em高，而想让导航文字垂直居中的话，设定这个属性是没用的。
CSS方法是什么呢？对了，把这些文字的行高设为2em：line-height: 2em ，这就可以了。
9、CSS在容器内定位CSS的一个好处是可以把一个元素任意定位，在一个容器内也可以。
比如对这个容器：#container{position: relative}这样容器内所有的元素都会相对定位，可以这样用：<div id="container"><div id="navigation">...</div></div>如果想定位到距左30点，距上5点，可以这样：#navigation{position: absolute;left: 30px;top: 5px}当然，你还可以这样：margin: 5px 0 0 30px注意4个数字的顺序是：上、右、下、左。
当然，有时候定位的方法而不是边距的方法更好些。
10、直通到屏幕底部的背景色在垂直方向是进行控制是CSS所不能的。
如果你想让导航栏和内容栏一样直通到页面底部，用表格是很方便的，但如果只用这样的CSS：#navigation{background: blue;width: 150px}较短的导航条是不会直通到底部的，半路内容结束时它就结束了。
该怎么办呢？不幸的是，只能采用欺骗的手段了，给这较短的一栏加上个背景图，宽度和栏宽一样，并让它的颜色和设定的背景色一样。
body{background: url(blue-image.gif) 0 0 repeat-y}此时不能用em做单位，因为那样的话，一旦读者改变了字体大小，这个花招就会露馅，只能使用px。
再来10个你可能不知道的CSS技巧11、Block和inline元素对比所有的HTML元素都属于block和inline之一。
block元素的特点是：总是在新行上开始；高度，行高以及顶和底边距都可控制；宽度缺省是它的容器的100%，除非设定一个宽度<div>, <p>, <h1>, <form>, <ul> 和<li>是块元素的例子。
相反地，inline元素的特点是：和其他元素都在一行上；高，行高及顶和底边距不可改变；宽度就是它的文字或图片的宽度，不可改变。
<span>, <a>, <label>, <input>, <img>, <strong> 和<em>是inline元素的例子。
用code class="inline">display: inline 或display: block命令就可以改变一个元素的这一特性。
什么时候需要改变这一属性呢？让一个inline元素从新行开始；让块元素和其他元素保持在一行上；控制inline元素的宽度（对导航条特别有用）；控制inline元素的高度；无须设定宽度即可为一个块元素设定与文字同宽的背景色。
12、再来一个box hack方法之所以有这么多box hack方法，是因为IE在6之前对box的理解跟别人都不一样，它的宽度要包含边线宽和空白。
要想让IE5等同其他浏览器保持一致，可以用CSS的方法：padding: 2em;border: 1em solid green;width: 20em;width/**/:/**/ 14em;第一个宽度所有浏览器都认得，但IE5.x不认得第2行的宽度设置，只因为那一行上有空白的注释符号（多么蠢的语法分析！），所以IE5.x就用20减掉一些空白，而其他浏览器会用14这个宽度，因为它是第2行，会覆盖掉第1行。
13、页面的最小宽度min-width是个非常方便的CSS命令，它可以指定元素最小也不能小于某个宽度，这样就能保证排版一直正确。
但IE不认得这个，而它实际上把width当做最小宽度来使。
为了让这一命令在IE上也能用，可以把一个<div> 放到<body> 标签下，然后为div指定一个类：<body><div class="container“>然后CSS这样设计：#container{min-width: 600px;width:expression(document.body.clientWidth < 600? "600px": "auto" );}第一个min-width是正常的；但第2行的width使用了Javascript，这只有IE才认得，这也会让你的HTML文档不太正规。