47个CSS提示和技巧让你的网站更高级

1. 水平居中

要在 CSS 中水平居中块级元素，需要三件事：在元素上显式设置宽度，将左右边距设置为自动，并包括适当的文档类型以防止旧版本的 IE 进入怪癖模式。

div#page {width: 960px; margin: 0 auto}

上面的代码将会使id 为page的元素在div标签中水平居中。

2. 通过设置line-height来垂直居中文本

如果想要在一个高度固定的包含块中垂直居中文本，只需将文本的行高设置为与包含块的高度相同。

<div id="container">some text here</div>
div#container {height: 35px; line-height: 35px}

3. 垂直居中块级元素

定位可用于垂直居中块级元素

<div id="content">your content here</div>

div#content {position: absolute; top: 50%; height: 500px; margin-top: -250px}

div 的左上角将从顶部定位 50%(即，div的左上角距离顶部50%)。由于我们希望 div 的中心从顶部定位 50%，因此需要设置一个等于 div 高度一半的负上边距。
同样的技巧也可用于水平居中，把上换成左，把上边距换成左边距，然后将负边距设置为元素宽度的一半。

div#content {position: absolute; top: 50%; left:50%; width:800px; height: 500px; margin-left: -400px;  margin-top: -250px}

以上代码会让元素在水平和垂直方向上均居中。

4. 流体图像

要创建流体图像，将图像的最大宽度设置为 100%。

img {max-width:100% }

不幸的是，IE不做最大宽度。但是，IE 将宽度属性视为最大宽度。对于 IE，请使用条件注释和设置

img{width:100%;}

5. 纯CSS实现3D按钮效果

3D CSS 按钮易于创建，诀窍是给你的元素边框不同的颜色。使光源发光的地方更亮，不发光的地方更暗。

div#button {background: #888; border: 1px solid; border-color: #999 #777 #777 #999 }

上面的 CSS 将创建一个按钮，其光源位于左上角。通常只需要一两种颜色变化，但您可以尝试不同的效果。（若是结果不明显可以把border-width设置的稍微宽一些。）

6. CSS 字体速记

在字体属性上使用速记时，您需要按以下顺序指定每个属性

body { font: font-style font-variant font-weight font-size line-height font-family; }

你不需要包括每个属性，但请注意，对于任何你不包括的属性，该属性将重置为其默认值。

7. 在 HTML 元素上设置多个类

容易忘记正确的语法。如果要在 html 元素上设置多个类，它应如下所示：

<div class="class-1 class-2 class-3">
</div>

所有类名都位于同一组双引号中，每个类名之间都有空格。CSS 特异性由 CSS 文件中的类顺序控制。如果您的 CSS 具有：

class-2 {color: blue}
class-3 {color: green}
class-1 {color: red}

那么，div中的文本将显示红色，因为class-1是CSS中最后一个声明的，与类名在html元素中的顺序无关。

8. 圆角

CSS3中实现圆角非常简单：

.element {border-radius:5px }

以上代码会在元素四个角设置一个5px的半径。现在，我们需要一些浏览器特定的CSS与一个小JavaScript相结合，使这项工作在所有浏览器中工作。

.element {
    border-radius: 5px
    -webkit-border-radius: 5px
    -moz-border-radius: 5px
}

Webkit 和 Mozilla 在指定一个角时使用不同的语法。

.element {
    border-top-left-radius: 5px
    -webkit-border-top-left-radius: 5px
    -moz-border-radius-top-left
}

对于非 Webkit 和 Mozilla 浏览器，一个小 jQuery 插件将模仿边框半径属性。

$(".element").corner("5px");

jQuery 角插件允许的不仅仅是设置角的半径。您还可以将拐角设置为显示为许多其他模式。

现在所有的浏览器都已经支持

9. 链接样式顺序

在不同链接状态上设置 CSS 时，需要按特定顺序设置链接状态。

a:link
a:visited
a:hover
a:active

一个简单的记忆方式是：LoVe HAte . LVHA - Link, Visited, Hover, Active

10. 清除和包含浮动

有两种基本的方式清除浮动，第一种是通过clear属性。

<div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="sidebar"></div>
<div id="footer"></div>
</div>

在上述 html 中，我们将内容和侧边栏 div 浮动到左侧，并且我们希望确保页脚 div 位于两者下方。因此将使用清除属性.

#content {float:left}
#sidebar{float:left}
#footer{clear:both}

还可以使用clear:left 或 clear:right, 这取决于内容和侧边栏的浮动方式。

如果另一方面，你的 html 是：

<div id="header">
    <img id="logo" src="" alt="">
<p id="tagline">
</p></div>

并且tagline 和 logo 都是浮动的，您的标题 div 将折叠并显示为具有 0 高度。（因为把元素设置为float后，该元素就脱离了正常文本流，而他们的父元素div却未脱离，仍在正常文本流中显示，但此时div的内容为空，因此div的高度为0）您可以添加空 div (< div class=“clear”> < /div>)，然后如上文清除空 div，也可以使用标题 div 上的溢出属性来包含浮动元素

div#header {overflow: hidden}

上面将防止标题 div 折叠，即使其中的所有内容都已浮动。
元素包含浮动元素涉及到BFC(块级格式化上下文)规则，更多的方法可查询有关BFC的内容

11. 条件注释

条件注释是仅针对 IE 浏览器的理想方式，因为 IE 通常是不合作的浏览器。条件注释的基本形式是：

<!--[if IE]>
<link rel="stylesheet" type="text/css" href="ie-stylesheet.css" />
< ![endif]-->

仅当查看页面的浏览器是 Internet Explorer 时，才会加载上述样式表。您可以进一步定位 IE 的特定版本。

<!--[if IE 6]> - targets IE6 only -->
<!--[if gt IE 6]> - targets IE7 and above -->
<!--[if lt IE 6]> - targets IE5.5 and below -->
<!--[if gte IE 6]> - targets IE6 and above -->
<!--[if lte IE 6]> - targets IE6 and below -->

您可以指定 Internet 资源管理器的任何版本，并且通过条件注释的组合，可以将不同的 CSS 样式服务器到不同版本的 IE。

12. IE中的 HTML Hack

另一种专门针对 IE 的方法是使用 HTML * hack 。Internet Explorer 允许您使用 html 元素以外的内容作为文档的根。通过在 CSS （* html） 中放在 html 前面放置一个 *，您只能将 IE 作为目标，因为其他浏览器将忽略该声明。

div#content {width: 580px}
* html body div#content {width: 600px}

IE 将使用 600px 作为内容 div 的宽度，而其他浏览器将使用 580px。
以上适用于 IE6 及以下部分。当不在标准模式，但在怪癖模式，这将在IE7工作。您还可以针对 IE7（在怪癖模式下），具体到

*+html body div#content {width: 620px}

13. CSS的特殊性

当两个或多个 CSS 选择器向单个 html 元素发送冲突指令时，必须选择应用哪些样式。这是通过CSS特异性计算完成的，以（a，b，c，d）的形式表示

• 元素 伪元素 ： d = 1 ---- (0,0,0,1)
• 类，伪类，属性：c = 1 ---- (0,0,1,0)
• id 选择器 ： b = 1 ---------(0,1,0,0)
• 内联样式 : a = 1 ----------(1,0,0,0)
  CSS特殊性比较方式 :

每一个样式都可以以上面的形式表示（即，（0，0，1，0）等），对于作用于同一元素的不同样式，通过逐个比较他们各自的特殊性中的a,b,c,d来判断哪一个会被应用。若是在某一位存在大小关系，则停止比较。 假设两个作用于同于元素的样式的特殊性分别为(1,0,0,0) 和（0，2，3，4）。由于第一个a为1，第二个a为0，因此比较完a后，即停止比较，即使第二个样式的b,c,d大。只有前面的一位相同时，才会接着比较下一位。

在以下示例中，随着您向下移动，特异性增加

p: 1 element – (0,0,0,1)
div: 1 element – (0,0,0,1)
#sidebar: 1 id – (0,1,0,0)
div#sidebar: 1 element, 1 id – (0,1,0,1)
div#sidebar p: 2 elements, 1 id – (0,1,0,2)
div#sidebar p.bio: 2 elements, 1 class, 1 id – (0,1,1,2)

14. IE 的最小高度修复

令人悲伤的是，IE仍然不符合最小高度。但是，它确实将高度属性视为最小高度。知道这一点，我们可以在InternetExplorer中工作到最低高度。

.element {
    min-height: 500px
    height: auto !important
    height: 500px
}

上面的第一行设置非 IE 浏览器的最小高度。最后一行基本上在 IE 中设置最小高度，因为 IE 会像我们期望的那样处理最小高度。上面的中线是为了确保非 IE 浏览器不使用 500px 作为元素的高度。使用 ! important 将在除 IE 之外的所有浏览器中覆盖下面的高度声明。
仅针对 IE 的另一种方法是使用 _height。只有 IE6 会将 _ 高度视为高度。所有其他浏览器将忽略它。您必须在任何高度声明后指定 _height，因为 IE 将使用最后一个条件。

.element {
   min-height: 500px
    _height: 500px
}

15. 基本字体大小

在字体上使用"em"或%等流体测量是帮助创建更多流体设计的好方法。计算每个不同元素的"em"可能很痛苦。一个简单的技巧是将基本字体设置为等效于 10px。由于浏览器的默认字体大小为 16px，因此您可以设置以下基本字体大小：

body {font-size:62.5%}

10/16 = 62.5%

现在，如果你想你的h1是24px, 那么计算则容易得多

h1 {font-size: 2.4 em}

16. 100% 高度

100%的高度是CSS不容易做到的事情之一。当您指定一个元素的高度为100%时，100%指的是包含元素的高度。然后，包含元素的高度必须是它的包含元素的高度的100%，以此类推。技巧是将最外层元素的高度设置为100%

html, body {height: 100%}

我还要补充一件事。如果你的内容超过100%的高度，那么它将溢出其容器。为了纠正这个错误，我们需要在内容容器上设置最小高度

#content {min-height: 100%}

您可以使用上述方法之一为 IE 提供最小高度。

17. CSS首字下沉

利用CSS伪元素 :first-letter 可以轻松实现首字下沉效果

p:first-letter {
    display: block;
    float: left;
    margin: 5px 5px 0 0;
    color: red
    font-size: 1.4em;
    background: #ddd;
    font-family: Helvetica;
}

这应该适用于所有现代浏览器。CSS3 引入了 ::first-letter 表示法来区分伪元素和伪类，现在基本所有的新的浏览器均已支持，也可表示成 :first-letter

18. 删除链接上的点状轮廓

易于使用 CSS outline属性来设置。

a {outline: none} or a {outline: 0}

outline对于辅助功能很有用，因此在完全关闭之前，应三思而行。您可能只想为上述特定链接状态之一设置它。

19. 文本大小写转换

通过 CSS text-transform 属性，您可以确保某些文本块是大写、小写或只有每个单词的第一个字母是大写

p {text-transform: uppercase}
p {text-transform: lowercase}
p {text-transform: capitalize}

20. 字体变体

类型的另一个技巧是使用font-variant属性创建小写字母

p {font-variant: small-caps}

你使用的字体没有小大写字母的变化，你要知道你要创建的是伪小大写字母，可能看起来不像你想的那么好，也可能不像你想的那么好。

21. 从图像链接中删除边框

默认情况下，在链接中包装的任何图像周围都有一个边框(类似于文本加下划线的方式)。删除边框很简单:

a image {border: none} or a image {border: 0}

由于我从不希望看到图片链接周围的边框，我通常在我开发的每个站点上设置上面的边框。

22. 使用 CSS 重置进行跨浏览器兼容性

跨浏览器 Web 开发中的一个问题是，不同的浏览器对各种 CSS 属性使用不同的默认值。通过将某些 html 元素的边距等属性显式设置为 0，我们可以确保所有浏览器中该元素的边距为 0。
最好的方法是使用CSS重置文件，如埃里克迈耶或雅虎开发的那些，或者你可以开发自己的。
使用 CSS 重置可确保所有浏览器都位于同一页面上。

23. 在背景图像上设置填充

由于背景图像不会创建新的 CSS 框，因此无法直接在它们上设置填充。您要做的是使用背景图像上的背景位置属性创建相同的效果。

background-position {top-value left-value}

top-value 可以是 top,center 或者是 left . left-value 可以是 left, center, 或者是 bottom
两者还可以采用 %或 px 或任何其他度量值。因此，要围绕背景图像创建 5px 的填充，请使用：

{background-position: 5px 5px}

24. 拉伸背景图像

要创建可以展开和收缩其包含元素的背景图像，您需要创建一个大于所需、足够大的映像，以容纳包含元素的最大大小。然后使用背景位置属性将背景图像居中

{background-position: 50% 50%}

上述内容将在包含元素中居中显示背景图像。图像将增大和收缩以适合包含元素的大小，并且始终居中。您需要确保图像的中心包含图像最重要的部分，因为只有中心才能保证显示。

25. 环绕背景图像的链接

同样，由于背景图像不创建新的 CSS 框，因此不能直接环绕链接。您可以将链接环绕在包含元素周围，也可以将链接环绕在包含元素中的所有内容周围。

<a href="">
<div id="bkgd-image">
your content here
</div>
</a>
<div><a href="">
your content here
</a></div>

以上任何一种基本上都会让人点击您的背景图像，就好像它是一个链接一样。

26. 背景图像作为列表项目符号

有时，能够将图像用作项目符号而不是支持的list-style-type 之一是很好的。

ul {list-style: none}
ul li {
    background-image: url("path-to-your-image");
    background-repeat: none;
    background-position: 0 0.5em;
}

27. 悬停时改变背景图像

有两种非常相似的方法来实现这一点。两者的关键是使用 ：hover 伪类来更改图像的 URL 或图像子画面的位置

.element {background-image: url("path-to-an-image")}
.element:hover {background-image: url("path-to-a-different-image")}

//2
.element {background-position: top-value left-value}
.element:hover {background-position: different-top-value different-left-value
}

28. Visibility or Display?

表面上，CSS 可见性和显示属性似乎都执行相同的操作，隐藏或显示页面上的元素。在表面之下，它们的工作方式不同

• {visibility: hidden} 元素占用空间，但不显示
• {display: none} 元素不占用空间，其他元素折叠以填充空间

就是说，display:none 是完全消失，不会占用网页空间，visibility:hidden 只是隐藏起来了，但是他的位置还保留着，只是会在网页上他的位置上为空白
大部分时间，你可能想要用的是 dispaly:none ， 除非你的目的是在你的网页上留一个空白，此时用visibility:hidden 。

29. 跨浏览器透明度

当我们使用CSS3属性时，比如opacity。大部分较新的浏览器都支持这个属性，但如果想要把这个属性应用于所有浏览器（包括非常古老的），那么就要加上一些特殊的前缀。

.element { 
    filter:alpha(opacity=50); 
    -moz-opacity:0.5; 
    -khtml-opacity: 0.5; 
    opacity: 0.5; 
}

从下往上看：

• -moz-opacity :用于老式Mozilla 浏览器
• -khtml-opacity 用于老式的Safari浏览器以及任何使用khtml渲染引擎的浏览器
• filter:alpha(opacity = 50) 用于 IE浏览器

现在所有浏览器均已支持filter属性

30. 目标 IE7（及以下）和 IE6（具体）无条件注释

我们都知道，当涉及到CSS时，IE有时会有多困难。然而，您可以轻松地编写其他浏览器会忽略的 IE 特定代码，而不是用呼吸或大声骂骂 IE。我自己的偏好是条件注释，但这里有一个快速技巧，您可以在主 CSS 文件中使用。

.element {
    background: red; /* modern browsers */
    *background: green; /* IE 7 and below */
    _background: blue; /* IE6 exclusively */
}

除 IE 外，所有浏览器都将忽略属性前面的星号。IE6 以外的所有内容都将忽略下划线。由于 CSS 优先级规则，上述属性的顺序非常重要。

31. nth-child

nth-child CSS 伪选择器允许您定位列表中的第 3 个或第 7 个或第 n 个元素。另一种用途是以不同的方式设置表中的奇数行和偶数行的样式。另一种方法是专门向列表项添加类，以不同方式设置样式，但这不是非常灵活。第 nth-child 语法如下所示：

ul li:nth-child(3) {
    background: blue
}

上面将选择列表中的第三个项目，并给它一个蓝色背景

ul li:nth-child(3n+3) {
    background: blue
}

同样，上面的代码将设置带有蓝色背景的每个第三个列表项的样式

32. 基本 2 列 CSS 布局（固定宽度、居中、页眉和页脚，右侧侧边栏）

<div id="wrapper">
    <div id="header">
    </div>
   <div id="content">
   </div>
    <div id="sidebar">
    </div>
    <div id="footer">
    </div>
</div>

#wrapper {width:960px; margin:0 auto}
#content {float:left; width:600px}
#sidebar {float:left; width:360px}
#footer {clear: both}

特定宽度是任意的，但必须包括宽度。按键将包装器居中，如本文所述，浮动两列，并清除页脚 div。您还可以将侧边栏 div 浮动到右侧。这两种操作都不起作用，尽管我发现在同一个方向上浮动更容易。

现在更支持使用HTML语义化，< footer > < article > < aside >等标签

33. 基本 3 列 CSS 布局（固定宽度、居中、页眉和页脚、内容左右侧边栏）

<div id="wrapper">
    <div id="header">
    </div>
    <div id="primary">
    </div>
    <div id="content">
    </div>
    <div id="secondary">
    </div>
    <div id="footer">
    </div>
</div>

#wrapper {width:960px; margin:0 auto}
#primary {float:left; width:230px}
#content {float:left; width:500px}
#secondary {float:left; width:230px}
#footer {clear: both}

同样，宽度是任意的，但是必需的。如果您愿意，可以将辅助 div 浮动到右侧。

现在关于CSS布局有了更多的方式，比如flex灵活布局，grid网格布局都非常的便捷，推荐看 阮一峰老师 的博客

34. CSS 三角形和其他形状

CSS 边框以任意角落的一个角度汇聚在一起。当在所有边上设置颜色相同的边框或边框宽度只有几个 px 时，这一点并不明显。使宽度更大，并在不同的边上设置不同的边框颜色，可以清楚地看到这一点。利用这些角度，我们可以使用边框属性来创建一些有趣的形状。

创建三角形是将 4 个边中的 3 个上的边框颜色设置为透明。您还希望将元素的宽度和高度设置为 0，以便所有 4 个角在一个点上相接。也可以将三角形对面的边框设置为 0，但相邻边框需要保持宽度，否则具有边框的整个元素将折叠到单个点。

<div class="triangle"></div>

.triangle {
    border-color: transparent transparent green transparent;
    border-style: solid;
    border-width: 0px 300px 300px 300px;
    height: 0px;
    width: 0px;
}

通过一点实验，您可以创建有趣的形状，特别是结合多个元素时。

35. 防止换行

有时，链接或标题中的文本会中断您不希望它出现的位置。防止这种情况的一个简单方法是：

h1 { white-space:nowrap; }

36. class vs id

对在页面上使用一次且仅一次的元素使用 Id

<div id="content"></div>
#content {background: #fff}

对可在页面上重复使用的元素使用类

<p class="large-text">
</p>

.large-text {font-size: 1.4em}

37. 将文本替换为图像

通过更多的字体选择更好的排版是在这里，但在实践中使用它仍然有限制。有时最简单的解决方案是使用图像。但是，您也希望搜索引擎和屏幕阅读器的原始文本存在。同时使用文本和图像的一种简单方法是使用文本缩进属性。

h1 {
    text-indent:-9999px;
    background:url("h1-image.jpg") no-repeat;
    width:200px;
    height:50px;
}

高度和宽度应与图像的高度和宽度相匹配

38. 为窗体中具有焦点的元素设置样式

一个不错的可用性提示是让人们填写表单，知道哪些输入当前具有焦点。您可以使用 ：focus 伪选择器轻松执行此操作

input:focus { border: 2px solid green; }

这样，您的用户将确切知道哪个字段可供输入

39. 理解 !important

!important 是一种覆盖CSS特性的方法。一般来说，这不是最好的解决方案，因为您使用它的次数越多，最终需要再次使用它的次数就越多。它会使您的CSS在短时间内无法维护。由于IE的一个怪癖，他可以派上用场。你有如下的东西：

h1 {
    color: red !important;
    color: blue
}

浏览器应该用红色显示h1。然而，IE将显示最后的样式，而不是遵循优先规则。因此，上面的代码将显示你的h1在所有的浏览器，除了IE的颜色将是蓝色。

40. CSS 中的简单调试

有时，您的 CSS 似乎不像您预期的那样工作，您希望在 html 中隔离一个元素，以查看它占用了什么空间。执行此操作的一个简单方法是暂时为元素提供边框

.element {border:1px solid red}

上述缺点之一是边框中的额外 px 可能会暂时使布局失控，因为它会增加元素的宽度。例如，您可能会发现，它有时将浮动元素从页面的更下处掉落。不过，它仍然是一种快速而简单的方法来查看发生了什么，您可以克服宽度限制，方法是暂时减小为元素提供的宽度，以补偿边框添加的额外宽度。

41. 为图像创建一个CSS框架

许多图片看起来很不错的一个框架。你通常会在把图片挂在墙上之前把它们框起来，所以为什么不在你的网站上给图片加一个框呢?就像你可以看到的一样，每一篇文章的图片都是在instantShift上用修改过的verion来框起来的。

方法是把你的图像包在一个div中，并添加一个简单的类。

<div class="frame"><img src="" alt="" height="" width=""></div>
.frame {
    border: 2px ridge #000;
     padding: 10px;
   background-color: #fff;
}

.frame img {
    border: 2px solid #ooo;
    padding: 1px;
     margin: 10px;
}

您可以使用各种边框样式值来创建框架的不同外观（凹槽、脊、内分、开始、双、虚线、虚线、实体）。框架 div 上的填充和背景颜色将创建图像周围的垫子外观。向图像本身添加边框、填充和边距可以创建在图像周围设置第二个垫子的效果，从而获得额外的效果。

设置完成后，您需要执行的所有操作，将帧添加到任何图像中，只需将其与 div 环绕并分配类。您甚至可以创建几种不同的框架样式，然后选择用于每个图像的样式。

42. 移动特定样式表

随着越来越多的人通过智能手机和其他移动设备访问网络，我们需要确保我们的网站在不同的平台上显示良好。幸运的是，html 允许您为移动设备提供不同的样式表。

<link type="text/css" rel="stylesheet" href="handheldstyle.css" media="handheld">

43. 通过CSS的凸版印刷类型

基本思想是利用CSS3属性的文本阴影来创建凸版印刷效果。

.element {
    color: #222;
    text-shadow: 0px 2px 3px #555;
}

技巧是使用比文本颜色更亮的阴影颜色，然后偏移一点，添加一点模糊。上面的文本阴影属性值是:

text-shadow: x-offset y-offset blur color;

44. 设置打印分页符

有些人想打印您的页面，而您可能希望您的页面以更具可读性的形式打印。例如，您可能在一个页面上有一个数据表，您希望将整个表打印在一个页面上，而不是将表的一半印在一个页面的底部，另一半印在下一个页面的顶部。CSS提供了一种方法，在某些地方强制分页，在其他地方禁止分页。

首先，您需要通过@media print将您的样式直接发送到打印媒体

<style type="text/css">
@media print
table {page-break-inside: avoid}
</style>

以上将告诉打印机做什么，他们不能打破表超过两页。CSS总共提供了3个与打印分页符相关的属性。括号中的可能值。

• page-break-before (auto, always, avoid, left, right, inherit)

• page-break-after (auto, always, avoid, left, right, inherit)

• page-break-inside (auto, avoid, inherit)

45. 创建带有边框半径的圆

可以使用CSS2 border-radius属性在所有支持该属性的浏览器中创建圆。技巧是设置元素的高度和宽度，使它们相同，并将元素的边界半径设置为该值的一半。

.cirlce {
			width: 300px;
			height: 300px;
			background-color: red;
			border-radius: 150px;
			-moz-border-radius: 150px;
			-webkit-border-radius: 150px;
		}

46. CSS工具提示

您可以使用几行代码轻松创建轻量级 CSS 跨浏览器工具提示。

This is the <a class="tooltip" href="#">Tooltip Link<span>This will be the text that shows up in the tooltip</span></a> You can place any text you want here.

a.tooltip {position: relative}
a.tooltip span {display:none; padding:5px; width:200px;}
a:hover {background:#fff;} /*background-color is a must for IE6*/
a.tooltip:hover span{display:inline;  position:absolute;}

您可以向上面添加更多样式，以适合您的设计。键是范围设置为display:none，直到你将鼠标悬停在链接上。将鼠标悬停在链接上时，显示屏将更改为内联显示，并给出绝对位置。位置：链接上需要相对位置，以确保工具提示相对于链接而不是另一个包含元素的位置。

47. 创建固定标头

您可能希望保留标题，将徽标和导航固定到位，并且仅让下面的内容滚动，而不是让整个页面滚动。

<div id="header">header </div>
<div id="content">content </div>

#header { 
   position:fixed; 
}

您希望确保将标头和内容 div 分开，然后在标题上使用display:fixed。您可以尝试的其他想法是创建一个可滚动表，该表在页面中具有固定页眉，或同时固定页眉和页脚，同时允许内容在它们之间滚动。