網站制作設計開始我希望知道的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