網(wǎng)站制作設(shè)計開始我希望知道的CSS技術(shù)
CSS技術(shù)，我希望我知道當(dāng)我開始設(shè)計網(wǎng)站
CSS是網(wǎng)絡(luò)上最好的事情。它簡單，功能強(qiáng)大，使用方便。但是，盡管它很簡單，但它隱藏了一些重要功能。問任何設(shè)計師，他們會告訴你，他們大部分的代碼頭痛是由CSS引起并最終解決的。

所有的設(shè)計師在職業(yè)生涯的某個階段都經(jīng)歷了一個奇怪的展示問題，尋找一個解決方案，發(fā)現(xiàn)一個技巧，技術(shù)或者黑客，如果他們知道他們什么時候開始的話，就可以為他們節(jié)省幾個小時的挫敗感。

我們列出了一個最令人沮喪和耗時的CSS頭痛列表，更重要的是，它們的解決方案（以及示例和進(jìn)一步的資源）。我希望這份清單能幫你省下一些白發(fā)。至于我，我想我現(xiàn)在感覺有些人進(jìn)來了…

重置和瀏覽器不一致

并非所有瀏覽器都是平等的。事實(shí)上，每個瀏覽器都是不同的。元素的默認(rèn)邊距、填充或字體大小是什么？你可能會對廣泛的價值觀感到驚訝。為了處理瀏覽器之間的差異，我們中的很多人希望通過使用CSS重置樣式來升級游戲場并從頭開始。

重置的早期階段，設(shè)計人員處理不同的邊距和填充值，使用全局重置：

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

但是，隨著越來越多的人使用和討論重置，很明顯只重新設(shè)置邊距和填充是不夠的（而且，將上述規(guī)則應(yīng)用到每個元素對渲染引擎都很繁重）。由于Eric Meyer和其他CSS先鋒的工作，創(chuàng)建了一個更好、更完整的復(fù)位規(guī)則集合：

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: "" "";
    }

同樣重要的是要注意哪些元素包含在當(dāng)今最流行的CSS重置中，還需要注意一些有意排除在列表之外的元素：

輸入

按鈕

人力資源

這些元素被排除在外，因為他們的跨瀏覽器的差異是如此巨大，你會完全unstyle他們創(chuàng)造的“防彈”元素。他們太奇怪了，即使這樣，也沒有保證。

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

盒子模型是所有布局的基礎(chǔ)。它控制頁面上元素的大小和間距。為了理解它，我們必須理解塊級元素和內(nèi)聯(lián)元素之間的區(qū)別。

在默認(rèn)情況下，塊級元素占用它們所包含元素的整個寬度和默認(rèn)行高度的高度。它們會相互堆疊，從上到下。因此，默認(rèn)情況下，它們將在頁面上自己的行。某些塊級元素有：< >、< > >、< > >、< > >、< > >、< > >等。

內(nèi)聯(lián)元素就像它們的名字所暗示的那樣，內(nèi)聯(lián)。他們將互相堆疊，從左到右。當(dāng)給定內(nèi)容時，它們將占用該內(nèi)容的確切寬度和高度。如果沒有內(nèi)容，它們就會坍塌，沒有寬度或高度。一些在線的元素：，< EM >，<強(qiáng)>，<一>、<跨度>，等。

所有HTML塊級元素都有五個間距屬性：高度、寬度、邊距、填充和邊框（內(nèi)聯(lián)元素也有它們，它們只是有點(diǎn)不同）。寬度和高度是棘手的屬性，因為它們需要一點(diǎn)計算。當(dāng)測量一個元素的寬度時，設(shè)計者必須考慮整個盒子。

在下面的例子中，盒的總寬度260px。緣，填充，和邊界30px每個（記住，這是30px頂部，底部的30、30和30左右，）。因此，在這個例子中，邊距占用了盒子寬度的60個像素。同樣，邊框和填充60px每消費(fèi)。在一起，邊距、邊框和填充量占框總寬度的180像素。

我們知道，盒的總寬度260px，但CSS屬性指的是內(nèi)容區(qū)域的寬度在盒子里面。所以，在這個例子中，我們要減去180像素（用于邊緣、邊界，填充）260（總箱寬度），讓我們與80px內(nèi)容區(qū)域。因此，我們的CSS看起來像這樣：

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

們討論的寬度屬性的所有示例和規(guī)則也適用于高度。

保證金可以支持負(fù)值。謹(jǐn)慎使用它們，但它們可以被證明是非常強(qiáng)大的設(shè)計元素。

別忘了帶盒子模型的單位。只有一個零值（邊距：0；）可以寫沒有指定的單位。

CSS盒子模型的資源

W3C的CSS規(guī)范

htmlsource盒模型教程由Ross Shannon

“初學(xué)者的指南，利潤和Paddings“在網(wǎng)頁設(shè)計師的筆記本

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

現(xiàn)在我們已經(jīng)了解了如何與框模型一致地使用寬度和高度，讓我們來看看CSS維度的一些靈活性?，F(xiàn)代瀏覽器支持最小和最大寬度（和高度相同），使我們能夠創(chuàng)造性地使用維度，并創(chuàng)建靈活的布局。

寬度/高度指定對象應(yīng)占用的空間。他們可以以像素為單位（10px），EMS（10em）和百分比（10%），以及一些其他單位。定義元素的寬度或高度將迫使該元素保留這些維度，而不管其內(nèi)容如何。所以，如果我們的內(nèi)容對它的容器來說太大了，它就會被切斷，隱藏我們內(nèi)容的底部（或者看起來真的一團(tuán)糟）。

最小寬度和最小高度

給定一個元素的最小寬度或最小高度將默認(rèn)設(shè)置元素的精確維度。但是，因為我們只提供了一個最小維度，隨著內(nèi)容的增加，包含元素將被允許拉伸，并且我們的所有內(nèi)容都將保持可見。

最小寬度和最小高度可以他有用的表單元素像< >和<文本>輸入/。我們可以用最小的寬度/高度定義它們，并讓它們作為用戶類型展開。

在IE6，“高度”的行為方式”的最小高度“現(xiàn)代瀏覽器作為一個容器將隨著內(nèi)容相同的（一些需要注意當(dāng)使用建筑的IE6）。

最大寬度和最大高度

如果我們給出一個元素的最大寬度或最大高度，默認(rèn)情況下它將崩潰到內(nèi)容的大小。隨著我們的內(nèi)容的增長，容器將伸展直至達(dá)到我們的最大值。然后我們剩余的內(nèi)容會被剪掉或者看起來很奇怪，掛在內(nèi)容塊的底部。

最大寬度和最大高度可用于瀏覽長列表（如果正確管理溢出，如果列表過長，則創(chuàng)建滾動）。

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

在上面的例子中，你可以看到這個頁面的最小寬度和最大800px，是1000px；不是一個Flex，但概念可以應(yīng)用于任何元素。

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

浮動結(jié)算

浮動將將元素放置在元素的正常流之外，并將元素向右或向左移動，直到它到達(dá)另一個塊級元素的邊距或填充。浮動和清除是CSS中最強(qiáng)大和最被誤解的屬性。要理解它，我們必須返回塊級和內(nèi)聯(lián)元素。

將浮動應(yīng)用于元素將自動使其成為塊級元素。這意味著兩件事：1）默認(rèn)情況下，所有浮動元素（甚至是< > >和< > >）將表現(xiàn)為塊級元素，2）給元素一個浮動：左；和顯示：塊；是多余的和不必要的。此外，在浮動圖像上使用顯示內(nèi)聯(lián)實(shí)際上是一種非常流行的修復(fù)許多跨瀏覽器怪癖的方法。

浮動div以清除div

浮動div來清除div是您在一些實(shí)驗和挫折中偶然發(fā)現(xiàn)的事情之一?；镜那闆r是，您可以將浮動應(yīng)用到包含其他浮動元素的父元素中，它們將適當(dāng)?shù)鼐夂颓宄?/p>

HTML