网站生产设计之初我想知道的技术

　　网站当我开始设计网站CSS时我想知道的CSS技术是互联网上** 好的东西。它简单，功能强大，易于使用。但是，尽管它很简单，却隐藏了一些重要的特性。问问任何一个设计师，他们都会告诉你，他们的大部分代码难题都是由CSS引起的，并** 终得到解决。

　　所有的设计师在职业生涯的某个阶段都会遇到一个奇怪的显示问题，寻找解决方案，找到一个技能、技术或黑客，如果他们知道什么时候开始，就可以省下几个小时的挫败感。

　　我们有一个** 令人沮丧和耗时的CSS头痛的列表，更重要的是，他们的解决方案（连同例子和进一步的资源）。我希望这张单子能帮你省点白发。至于我，我想现在我觉得有人进来了hellip；

　　重置与浏览器不一致

　　并非所有浏览器都是平等的。事实上，每个浏览器都是不同的。元素的默认边距、边距或字体大小是多少 你可能会对各种各样的价值观感到惊讶。为了应对浏览器之间的差异，我们很多人都希望升级游乐场，从零开始使用CSS重置样式。

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

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

　　然而，随着越来越多的人使用和讨论reset，很明显仅仅重置边距和填充是不够的（并且对每个元素应用上述规则对于渲染引擎来说是很麻烦的）。由于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{** 金：0；padding: 0; border: 0; outline: 0; font-权重：inherit；font-样式：inherit；font-大小：100%；font-family：继承；垂直-align:底部line；}/*记住定义focus样式！*/：focus { outline: 0; }body{line-高度：1；颜色：黑色；背景：白色；}ol，ul{list-样式：无；}/*tables still need #39;cellspacing=报价；0quot；#39; 在markup*/table{border-collapse:separate；border-间距：0；}caption，th，td{text-align:左；font-重量：正常；}blockquote：before，blockquote：后，q:before，q:后{内容：quot；引用；；}blockquote，q{quotes：quot；引用；引用；引用；；}

　　同样重要的是要注意哪些元素包括在今天** 流行的CSS重置中，以及一些故意排除在列表之外的元素：

　　输入

　　按钮

　　人力资源

　　这些元素被排除在外，因为它们的跨浏览器差异太大，你无法完全理解它们；防弹的；元素。他们太奇怪了，即便如此，也无法** 。

　　方框模型-边距、填充和边框

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

　　默认情况下，块级元素占据其包含的元素的整个宽度和默认行高的高度。它们从上到下一层层叠在一起。因此，默认情况下，它们将位于页面上自己的行上。一些块级元素是：lt；gt书信电报；燃气轮机；gt书信电报；燃气轮机；gt书信电报；燃气轮机；gt书信电报；燃气轮机；gt书信电报；燃气轮机；燃气轮机；等等。

　　内联元素顾名思义，内联。它们将从左到右堆叠在一起。当给定内容时，它们会占用该内容的确切宽度和高度。如果没有内容，它们就会塌陷，没有宽度或高度。一些在线元素：lt；EM gt书信电报；强gt；，书信电报；首先lt；Span gt；，等等。

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

　　在下面的示例中，框的总宽度为260px。边缘、填充和边框各为30px（请记住，顶部为30px，底部约为30、30和30）。所以，在这种情况下，边距占据了方框宽度的60个像素。同样，每消费一次，边界和填充60px。边距、边框和边距加在一起占到了方框总宽度的180个像素。

　　我们知道框的总宽度是260px，但是CSS属性意味着内容区域的宽度在框内。因此，在本例中，我们将减去180像素（对于边、边框、填充）260像素（总框宽），然后匹配80px个内容区域。所以我们的CSS看起来是这样的：

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

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

　　边距可以支持负值。小心使用它们，但它们可以证明是非常强大的设计元素。

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

　　CSS盒子模型

　　第CSS页，共W3C页

　　Ross Shannon的Htmlsource box模型教程

　　ldquo；利润和paddingsldquo；在网页设计师的笔记本里

　　尺寸-宽度、高度、** 小值和** 大值

　　既然我们已经学会了如何使用宽度和高度一致的盒子模型，让我们看看CSS维度的一些灵活性。现代浏览器支持** 小和** 大宽度（与高度相同），使我们能够创造性地使用尺寸并创建灵活的布局。

　　宽度/高度指定对象应占据的空间。它们可以是像素（10px）、EMS（10em）和百分比（10%）以及其他一些单位。定义元素的宽度或高度会强制元素保留这些尺寸，而不管其内容如何。因此，如果我们的内容对于它的容器来说太大，它将被切断，隐藏我们内容的底部（或者看起来非常混乱）。

　　** 小宽度和** 小高度

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

　　** 小宽度和** 小高度可用于其他有用的形状元素，如lt；燃气轮机；和lt；文本gt；输入/。我们可以用** 小的宽度/高度来定义它们，并将它们扩展为用户类型。

　　在IE6中；高度行为方式。”；管道的** 小高度；作为一个容器的现代浏览器将遵循相同的内容（在使用架构IE6时需要注意一些内容）。

　　** 大宽度和高度

　　如果我们给定元素的** 大宽度或高度，默认情况下它将崩溃为内容的大小。随着我们内容的增长，容器将扩展到我们的** 大限度。然后我们的其他内容将被切断或看起来奇怪，并挂在底部的内容块。

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

　　#第-wrap{min-width:800 px;max- width:1000 px; width:ex pre转换（文件号：body.cli入口宽度lt；800报价；800px股：文件body.clientWidth gt；1000份；1000px报价：引用；autoquot；）；}

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

　　如果只想使用** 小宽度：

　　浮动结算

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

　　将浮动应用于元素会自动使其成为块级别。这意味着两件事：1）默认情况下，所有浮动元素（即使lt；燃气轮机；燃气轮机；和lt；燃气轮机；gt；）2） 给元素一个float:left；显示：块；这是多余和不必要的。此外，使用display inline on浮动图像实际上是一种非常流行的解决跨浏览器问题的方法。

　　浮动div到清除div

　　浮div转清div是你在一些实验和挫折中遇到的事情之一。基本上，您可以将浮动应用于包含其他浮动的父元素，这些浮动将得到适当的平衡和清除：

　　HTML格式