网站制作设计开始我希望知道的CSS技术
CSS技术，我希望我知道当我开始设计网站
CSS是网络上最好的事情。它简单，功能强大，使用方便。但是，尽管它很简单，但它隐藏了一些重要功能。问任何设计师，他们会告诉你，他们大部分的代码头痛是由CSS引起并最终解决的。

所有的设计师在职业生涯的某个阶段都经历了一个奇怪的展示问题，寻找一个解决方案，发现一个技巧，技术或者黑客，如果他们知道他们什么时候开始的话，就可以为他们节省几个小时的挫败感。

我们列出了一个最令人沮丧和耗时的CSS头痛列表，更重要的是，它们的解决方案（以及示例和进一步的资源）。我希望这份清单能帮你省下一些白发。至于我，我想我现在感觉有些人进来了…

重置和浏览器不一致

并非所有浏览器都是平等的。事实上，每个浏览器都是不同的。元素的默认边距、填充或字体大小是什么？你可能会对广泛的价值观感到惊讶。为了处理浏览器之间的差异，我们中的很多人希望通过使用CSS重置样式来升级游戏场并从头开始。

重置的早期阶段，设计人员处理不同的边距和填充值，使用全局重置：

*边距：0；填充：0；}

但是，随着越来越多的人使用和讨论重置，很明显只重新设置边距和填充是不够的（而且，将上述规则应用到每个元素对渲染引擎都很繁重）。由于Eric Meyer和其他CSS先锋的工作，创建了一个更好、更完整的复位规则集合：

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-weight: inherit;
    font-style: inherit;
    font-size: 100%;
    font-family: inherit;
    vertical-align: baseline;
    }
/* remember to define focus styles! */
:focus {
    outline: 0;
    }
body {
    line-height: 1;
    color: black;
    background: white;
    }
ol, ul {
    list-style: none;
    }
/* tables still need 'cellspacing="0"' in the markup */
table {
    border-collapse: separate;
    border-spacing: 0;
    }
caption, th, td {
    text-align: left;
    font-weight: normal;
    }
blockquote:before, blockquote:after,
q:before, q:after {
    content: "";
    }
blockquote, q {
    quotes: "" "";
    }

同样重要的是要注意哪些元素包含在当今最流行的CSS重置中，还需要注意一些有意排除在列表之外的元素：

输入

按钮

人力资源

这些元素被排除在外，因为他们的跨浏览器的差异是如此巨大，你会完全unstyle他们创造的“防弹”元素。他们太奇怪了，即使这样，也没有保证。

框模型-边距，填充和边框

盒子模型是所有布局的基础。它控制页面上元素的大小和间距。为了理解它，我们必须理解块级元素和内联元素之间的区别。

在默认情况下，块级元素占用它们所包含元素的整个宽度和默认行高度的高度。它们会相互堆叠，从上到下。因此，默认情况下，它们将在页面上自己的行。某些块级元素有：< >、< > >、< > >、< > >、< > >、< > >等。

内联元素就像它们的名字所暗示的那样，内联。他们将互相堆叠，从左到右。当给定内容时，它们将占用该内容的确切宽度和高度。如果没有内容，它们就会坍塌，没有宽度或高度。一些在线的元素：，< EM >，<强>，<一>、<跨度>，等。

所有HTML块级元素都有五个间距属性：高度、宽度、边距、填充和边框（内联元素也有它们，它们只是有点不同）。宽度和高度是棘手的属性，因为它们需要一点计算。当测量一个元素的宽度时，设计者必须考虑整个盒子。

在下面的例子中，盒的总宽度260px。缘，填充，和边界30px每个（记住，这是30px顶部，底部的30、30和30左右，）。因此，在这个例子中，边距占用了盒子宽度的60个像素。同样，边框和填充60px每消费。在一起，边距、边框和填充量占框总宽度的180像素。

我们知道，盒的总宽度260px，但CSS属性指的是内容区域的宽度在盒子里面。所以，在这个例子中，我们要减去180像素（用于边缘、边界，填充）260（总箱宽度），让我们与80px内容区域。因此，我们的CSS看起来像这样：

div {
  margin:30px;
  border:30px solid yellow;
  padding:30px;
  width:80px;
  height:80px;
}

们讨论的宽度属性的所有示例和规则也适用于高度。

保证金可以支持负值。谨慎使用它们，但它们可以被证明是非常强大的设计元素。

别忘了带盒子模型的单位。只有一个零值（边距：0；）可以写没有指定的单位。

CSS盒子模型的资源

W3C的CSS规范

htmlsource盒模型教程由Ross Shannon

“初学者的指南，利润和Paddings“在网页设计师的笔记本

尺寸-宽度，高度，最小和最大

现在我们已经了解了如何与框模型一致地使用宽度和高度，让我们来看看CSS维度的一些灵活性。现代浏览器支持最小和最大宽度（和高度相同），使我们能够创造性地使用维度，并创建灵活的布局。

宽度/高度指定对象应占用的空间。他们可以以像素为单位（10px），EMS（10em）和百分比（10%），以及一些其他单位。定义元素的宽度或高度将迫使该元素保留这些维度，而不管其内容如何。所以，如果我们的内容对它的容器来说太大了，它就会被切断，隐藏我们内容的底部（或者看起来真的一团糟）。

最小宽度和最小高度

给定一个元素的最小宽度或最小高度将默认设置元素的精确维度。但是，因为我们只提供了一个最小维度，随着内容的增加，包含元素将被允许拉伸，并且我们的所有内容都将保持可见。

最小宽度和最小高度可以他有用的表单元素像< >和<文本>输入/。我们可以用最小的宽度/高度定义它们，并让它们作为用户类型展开。

在IE6，“高度”的行为方式”的最小高度“现代浏览器作为一个容器将随着内容相同的（一些需要注意当使用建筑的IE6）。

最大宽度和最大高度

如果我们给出一个元素的最大宽度或最大高度，默认情况下它将崩溃到内容的大小。随着我们的内容的增长，容器将伸展直至达到我们的最大值。然后我们剩余的内容会被剪掉或者看起来很奇怪，挂在内容块的底部。

最大宽度和最大高度可用于浏览长列表（如果正确管理溢出，如果列表过长，则创建滚动）。

#page-wrap{
min-width:800px;
max-width:1000px;
width:expression(document.body.clientWidth < 800? "800px" : document.body.clientWidth > 1000? "1000px" : "auto");
}

在上面的例子中，你可以看到这个页面的最小宽度和最大800px，是1000px；不是一个Flex，但概念可以应用于任何元素。

如果你只想使用最小宽度：

浮动结算

浮动将将元素放置在元素的正常流之外，并将元素向右或向左移动，直到它到达另一个块级元素的边距或填充。浮动和清除是CSS中最强大和最被误解的属性。要理解它，我们必须返回块级和内联元素。

将浮动应用于元素将自动使其成为块级元素。这意味着两件事：1）默认情况下，所有浮动元素（甚至是< > >和< > >）将表现为块级元素，2）给元素一个浮动：左；和显示：块；是多余的和不必要的。此外，在浮动图像上使用显示内联实际上是一种非常流行的修复许多跨浏览器怪癖的方法。

浮动div以清除div

浮动div来清除div是您在一些实验和挫折中偶然发现的事情之一。基本的情况是，您可以将浮动应用到包含其他浮动元素的父元素中，它们将适当地均衡和清除：

HTML