閱讀MDN文檔之StylingBoxes(五)

目錄

• BoxModelRecap
  • Box properties
    • Overflow
    • Background clip
    • Background origin
    • Outline
  • Advanced box properties
    • Setting width and height constraints(約束)
    • Changing the box model completely
  • Box display types
    • Common display types
    • Uncommon display types
• Backgrounds
  • What exactly is a background?
  • The basis: color, image, position, repeat
    • Background color
    • Background image
    • Background repeat
    • Background position
  • Background image: gradients
  • Background attachment
  • Background shorthand
  • Multiple backgrounds
  • Background size
• Borders
  • Border radius
  • Border images
• StylingTables
  • A typical HTML table
  • Active learning: Styling our table
    • Spacing and layout
    • Some simple typography(排版)
    • Graphics and colors
      • Zebra striping(隔行變色)
    • Styling the caption
• AdvancedBoxEffects
  • Box shadow
    • A simple box shadow
    • Multiple box shadow
    • Other box shadow features
  • Filters(濾鏡)
  • Blend modes(混合模式)

BoxModelRecap

Box properties

Some points worth remembering:

• 盒模型不會遵照百分比的高度；盒子高度自適應內容或者設置一個絕對的高度。
• 邊框忽略寬度百分比設置。
• Margins會存在margin collapse

Overflow

當設置盒子絕對的高度或者寬度時，內容可能會超出。爲了解決這個問題，有了overflow屬性，下面介紹最多見的3個值。

• auto
• hidden
• visible

Background clip

背景由背景圖和背景顏色構成。默認下，背景擴展到border的邊緣。這很好，可是有時候有其餘的狀況怎麼辦？look at this。默認下，是用的border-box。其實這裏只是簡單的裁剪。

• border-box: 背景延伸到邊框的外邊緣。(但z-index排序在邊框下)
• padding-box: 在邊框下方沒有繪製背景。(背景延伸到填充的外邊緣)
• content-box: 背景畫在內容框(content)內。

Background origin

background-origin這個屬性定義了，背景圖是相對於什麼哪一個位置來定位的。它有三個值：

• content-box: 背景圖像相對於內容來定位
• border-box: 背景圖像相對於邊框來定位
• padding-box: 背景圖像相對於內邊距來定位

Outline

和border差很少，可是它不是box model的一部分。

Advanced box properties

Setting width and height constraints(約束)

一個明顯的用途是，若是你想容許一個佈局的寬度是靈活的，經過設置它的外部容器的寬度爲一個百分比，但你也不但願它變得太寬或太窄，由於佈局會開始看起來很差。 這裏的一個選擇是使用響應式網頁設計技術（咱們將在後面介紹），但更簡單的方法多是給佈局一個最大和最小寬度約束：

body {
    width: 70%;
    max-width: 1280px;
    min-width: 480px;
    margin: 0 auto;
}

0 causes the top and bottom margins to be 0, while auto (in this case) shares the available space between the left and right margins of the container, centering it. The end result is that when the container is within the min and max width constraints, it will fill the entire viewport width. When 1280px width is exceeded, the layout will stay at 1280px wide, and start to be centered inside the available space. When the width goes below 480px, the viewport will become smaller than the container, and you'll have to scroll to see it all.

0使頂部和底部邊距爲0，而auto（在這種狀況下）共享容器的左右邊距之間的可用空間，以此爲中心。 最終結果是，當容器在最小和最大寬度約束內時，它將填充整個視口寬度。 當超過1280像素寬度時，佈局將保持在1280像素寬，並開始在可用空間內居中。 當寬度低於480像素時，視口將變得小於容器，您必須滾動才能看到它。

我理解的，準確來講，當超過1280px時候，就保持1280px，在480到1280px之間，就會保持寬度70%，若是小於480px時，視口會變得小於容器。必須滾動才能看到它。

Another good use of max-width is to keep media(e.g. images and video) constrained inside a container. For example:

img {
    display: block;
    margin: 0 auto;
    width: 100%;
}

Changing the box model completely

box-sizing屬性也有三個值

• content-box(default): 設置width爲500px，border和padding依然會增長盒子的寬度。(padding和border計入width內。)
• border-box: 設置width爲500px，border和padding不會增長盒子的寬度。(padding和border不計入width內。)
• padding-box: 設置width爲500px，padding計入width內，可是border不會計入width。這個值只有firefox實現了，可是firefox 50就刪除了它。

Box display types

Common display types

display有不少個值，可是最多見的3個仍是: block、inline、inline-block

• block: 單獨爲一行，能夠設置高度和寬度。
• inline：它於與文檔的文本一塊兒流動(即它和周圍文本以及其餘inline元素在一行，其內容與文本流斷開(試一試padding，它並不會影響下一行的文本。))。 不能設置高度和寬度。任何inline元素上的margin、border、padding都會更新周圍的(左右的，並非上下的)文本位置，可是不會影響周圍block元素的位置。
• inline-block:它和周圍的文本會在一行，而且也能夠設置高度和寬度。它不會在段落行之間被破壞(也就是說inline-block的文本不會跨越兩行。)

For example:

HTML:

<p>
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <span class="inline">Mauris tempus turpis id ante mollis dignissim.</span>
   Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  <span class="inline-block">Mauris tempus turpis id ante mollis dignissim.</span>
  Nam sed dolor non tortor lacinia lobortis id dapibus nunc.
</p>


CSS:

p {
  padding : 1em;
  border  : 1px solid black;
}

span {
  padding : 0.5em;
  border  : 1px solid green;

  /* That makes the box visible, regardless of its type */
  background-color: yellow;
}

.inline       { display: inline;       }
.block        { display: block;        }
.inline-block { display: inline-block; }

Uncommon display types

• table
• flex: look at this
• grid: look at this

Backgrounds

What exactly is a background?

There are many other different properties you can use to manipulate the element's background, some of which we have already seen a number of times in our course already:

• background-color
• background-image
• background-position
• background-repeat
• background-attachment: Specifies the behavior of an element's background when its content scrolls, e.g. does it scroll with the content, or is it fixed?
• background: Shorthand for specifying the above five properties on one line.
• background-size: Allows background image to be resized dynamically.

The basis: color, image, position, repeat

Background color

幾乎全部地方鬥支持背景顏色，並且背景漸變只有新瀏覽器才支持，所以設置一個背景顏色是很是有必要的有時候。

Background image

我以爲沒有什麼多說的。

p {
    background-image: url(/example.png);
}

Background repeat

常見的幾個值：

• no-repeat
• repeat-x
• repeat-y

Background position

Generally the property will take two values, seperated by a space, which specify the horizontal(x) and vertical(y) coordinates of the image --- the top left corner of the image, to be exact. Think of the background as a graph, with the x coordinate going across from left to right, and the y coordinate going from top to bottom.

背景位置容許咱們將背景圖像放置在咱們想要的背景內。 一般，屬性將採用兩個值，這兩個值由空格分隔，這兩個值指定圖像的水平（x）和垂直（y）座標，即圖像的左上角。 將背景視爲圖形，x座標從左到右穿過，y座標從上到下。

這個屬性能夠接受不少值，你會用到的大多數值有：

• 絕對單位，好比px。background-position: 200px 25px.
• 相對單位，好比rems。background-position: 20rem 2.5rem.
• 百分比，background-position: 90% 25%.
• 關鍵字，好比background: right center。這兩個值是直視的，而且能夠分別取左、中、右和上、中、下的值。

你應該注意，能夠混合和匹配這些值，好比background-position: 99% center。還要注意，若是隻指定一個值，那麼該值將被假定爲水平值，垂直值將默認爲center.

Background image: gradients

一個linear gradient經過linear-gradient()建立，它做爲background-image屬性的值。至少，函數須要3個值，它們由逗號分開。分別是：漸變應該跨越背景的方向，開始處的顏色，結束處的顏色。舉例來講：

background-image: linear-gradient(to bottom, origin, yellow);

可使用關鍵字來表示方向，好比(to bottom, to right, to bottom right, .etc)或者用角度來表示(0度表示to top, 90度表示to right, 360度表示to top.)

還能夠指定開始漸變的位置，好比說：

background-image: linear-gradient(to bottom, origin 40%, yellow);

它將從高度爲40%的地方纔開始漸變。而高度40%以前是origin顏色。

還能夠指定多個值(除了是百分比以外，還能夠是px阿等等其餘的), 好比說

background-image: linear-gradient(to bottom, yellow, origin 40%, yellow);

固然，咱們還可使用repeating-linear-gradient()還設置重複線性漸變。下面的例子，每40px(必須指定中止點)後就會重複漸變。

background-image: repeating-linear-gradient(top bottom, yellow, origin 40px);

Background attachment

Look at this

這個屬性是用於指定當內容滾動時它們如何滾動，它有如下的值：

• scroll(也是默認屬性): 表示會隨着頁面滾動而滾動(能夠想象成它被附加到元素的邊框上), 若是你滾動的是元素（上面有背景圖片）,那麼背景不會滾動。
• fixed：它表示不會隨着頁面的滾動而滾動，不管滾動的是頁面仍是擁有背景圖片的元素。
• local：它只支持IE9+ 以及其餘主流瀏覽器。它將背景固定到它所設置的元素，所以當滾動元素時，background會隨着滾動。

Background shorthand

For example:

background: yellow linear-gradient(to bottom, yellow, origin) no-repeat left center scroll;

若是有的屬性沒有被設置值，那麼默認的值會被設置。

Multiple backgrounds

IE9後，能夠給一個元素添加多個背景圖片。用逗號分割開。它們的最終效果是這樣的：最前面的值在最上面，而後依次在下面，這裏須要注意。

p {
    background-color: orange; // 請務必要寫，由於有時候可能會加載不出來圖片或者低版本不支持background-image。
    background: url(https://mdn.mozillademos.org/files/13026/fire-ball-icon.png) no-repeat 99% center,
              linear-gradient(to bottom, yellow, #dddd00 50%, orange);
}

Background size

IE9如下不支持喲。每一個background-size，須要兩個background-size的值，一個是水平方向上的，另外一個是垂直方向上的. 一樣，px,em,rem,percentages,keywords等都支持。若是隻設置了一個值，那麼第二個值會被設置爲auto。

background-size

簡單總結一下：

• percentages: 以父元素的百分比來設置圖像的高度和寬度。
• length
• keywords
  • contain: 根據必定的比例將圖片放大(圖片的高寬比不邊)，可是會有留白區域。
  • cover: 根據必定的比例將圖片放大，會鋪滿容器的高寬，而圖片多出來的部分會被裁掉。

Borders

Border radius

For example:

// 第一個值表明左上角和右下角；第二個值表明右上角和左下角
border-radius: 20px 10px;

// 第一個值表明左上角，第二個值表明右上角和左下角，第三個值表明右下角。
border-radius: 20px 10px 50px;

// 第一個值：左上角，第二個值：右上角，第三個值：右下角，第四個值：左下角
border-radius: 20px 30px 40px 50px;

固然，也能夠建立橢圓形角(其中x半徑不一樣於y半徑), 兩個不一樣的半徑由'/'分割指定。

// 第一個值是x半徑，第二個值是y半徑。
border-radius: 100px / 50px;

// 前兩個值表示x半徑(其中第一個值表示左上角和右下角的，第二個值表示右上角和左下角的), 後兩個表示y半徑。
border-radius: 100px 50px / 50px 25px;

Border images

屬性太多內容，MDN-border-image

IE11+ 以及其餘現代瀏覽器支持。

是將一張圖，分紅9部分，除去中間的一部分，來將其餘8部分做爲盒子的邊框。所以就會用到background-clip: padding-box;來將border部分的背景(主要是背景顏色)給裁掉。

border: 20px solid black; // 低版本瀏覽器
border-clip: padding-box; // 上面介紹了主要是爲了裁掉背景顏色
border-image-source: url(https://mdn.mozillademos.org/files/13060/border-image.png); // 設置邊框背景圖片
border-image-slice: 40; // 以40(多是像素，多是座標，根據是不是矢量圖來判斷的)。指定切片的大小是40.若是是一個值，則應用四個角
border-image-repeat: round; // 設置能夠重複

border-image-slice 能夠有多個值，它和padding與margin差很少：

• Two values: top and bottom, left and right;
• Three values: top, left and right, bottom;
• Four values: top, right, bottom, left;

StylingTables

A typical HTML table

<table summary="This is a test table">
    <caption></caption>
    <thead>
        <tr>
            <th scope="col"></th>
            <th scope="col"></th>
            <th scope="col"></th>
            <th scope="col"></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td scope="row"></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td scope="row" colspan="2"></td>
            <td></td>
        </tr>
    </tfoot>
</table>

簡單的說明：

• summary屬性規定表格內容的摘要，不會對瀏覽器產生視覺效果。可是有利於屏幕閱讀器
• scope屬性定義將表頭單元和數據單元相關聯，有利於屏幕閱讀器。
  • col: 規定單元格是列的表頭
  • row：規定單元格是行的表頭
  • colgroup：規定單元格是列組的表頭
  • rowgroup:規定單元格是行組的表頭

Active learning: Styling our table

Spacing and layout

The first thing we need to is sort out the spacing/layout --- default table styling is so cramped(約束的，狹窄的)!To do this, add the following CSS to your style.css file:

/* spacing */

table {
    table-layout: fixed;
    width: 100%;
    border-collpase: collapse;
    border: 3px solid red;
}

thead th:nth-child(1) {
    width: 30%;
}

thead th:nth-child(2) {
    width: 20%;
}

thead th:nth-child(3) {
    width: 15%;
}

thead th:nth-child(4) {
    width: 35%;
}

th, td {
    padding: 20px;
}

最重要的部分注意以下：

• 設置table-layout的值爲fixed一般對於你的table是很不錯的選擇。由於它比默認的table更可預見。一般，表列的大小設置它由它們包含多大的內容而決定，這可能會致使奇怪的結果。設置table-layout:fixed, 你能夠根據它們的heading來設置列的寬度, 而後適當的處理它們的內容。這就是爲何咱們選擇了四個不一樣的heading的th，而且給它們設置了必定的寬度(百分比)。整個列的寬度都會根據heading的寬度來設置，這是一個設置表格列的很好的一種方法。Fixed Table Layouts
• 咱們設置了它的寬度爲100%, 意味着能夠很好的響應式設計(雖然還須要一些工做來讓它在窄屏幕上看起來更好。)
• 設置border-collapse的值爲collapse是任何表格樣式工做的標準最佳作法。默認狀況下，當你在表格元素上設置邊框時，它們會有默認的間距，這看起來不太好看。而設置border-collapse的值爲collapse，這樣看起來就會好不少。
• 爲table設置了邊框的。
• 爲th、td設置了padding。

Some simple typography(排版)

/* typography */
html {
    font-family: 'helvetica neue', helvetica, arial, sans-serif;
}

thead th, tfoot th {
    font-family: 'Rock Salt', cursive;
}

th {
    letter-spacing: 2px;
}

td {
    letter-spacing: 1px;
}

tbody td {
    text-align: center;
}

tfoot th {
    text-align: right;
}

Graphics and colors

thead, tfoot {
    background: url(leopardskin.jpg);
    color: white;
    text-shadow: 1px 1px 1px black;
}

thead th, tfoot th, tfoot td {
    background: linear-gradient(to bottom, rgba(0,0,0,0.1), rgba(0,0,0,0.5));
    border: 3px solid purple;
}

Zebra striping(隔行變色)

tbody tr:nth-child(even) {
    background: red;
}

tbody tr:nth-child(odd) {
    background: green;
}

tbody {
    background: red; /*優雅降級*/
}

Styling the caption

caption {
    font-family: 'Rock Salt', cursive;
    padding: 20px;
    font-style: italic;
    caption-side: bottom; /*設置位置在下面*/
    color: #666;
    text-align: right;
    letter-spacing: 1px;
}

AdvancedBoxEffects

This article acts as a box of tricks, providing an introduction to some of the advanced features available for styling boxes that don't fit into the other categories above — like box shadows, blend modes(混合模式) and filters.

Box shadow

A simple box shadow

/* HTML */
<article class="simple">
  <p><strong>Warning</strong>: The thermostat on the cosmic transcender has reached a critical level.</p>
</article>


/* CSS */
p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}  

.simple {
  box-shadow: 5px 5px 5px rgba(0,0,0,0.7);
}

box-shadow接受四個值，分別是水平偏移量，垂直偏移量，模糊半徑，陰影顏色。

Multiple box shadow

能夠設置多個box shadow，用逗號隔開。

p {
  margin: 0;
}

article {
  max-width: 500px;
  padding: 10px;
  background-color: red;
  background-image: linear-gradient(to bottom, rgba(0,0,0,0), rgba(0,0,0,0.25));
}  

.multiple {
  box-shadow: 1px 1px 1px black,
              2px 2px 1px black,
              3px 3px 1px red,
              4px 4px 1px red,
              5px 5px 1px black,
              6px 6px 1px black;
}

Other box shadow features

不像text-shadow，box-shadow有一個inset關鍵字能夠用。把這個屬性放在開頭，就可讓陰影成爲內陰影,而不是外陰影。

button {
  width: 150px;
  font-size: 1.1rem;
  line-height: 2;
  border-radius: 10px;
  border: none;
  background-image: linear-gradient(to bottom right, #777, #ddd);
  box-shadow: 1px 1px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
}

button:focus, button:hover {
  background-image: linear-gradient(to bottom right, #888, #eee);
}

button:active {
  box-shadow: inset 2px 2px 1px black,
              inset 2px 3px 5px rgba(0,0,0,0.3),
              inset -2px -3px 5px rgba(255,255,255,0.5);
}

Filters(濾鏡)

CSS過濾器提供了將濾鏡應用到元素的方式。有不少不一樣的選項可使用，能夠在這裏查看filter的用法。這篇文章，主要是爲了介紹語法。

濾鏡能夠應用任何元素，一些濾鏡選項能夠和其餘CSS功能很是相似的事情，好比drop-shadow(),box-shadow和text-shadow實現出來的效果差很少。其實filter的真正好處在於，they work on the exact shapes of the content inside the box(它們處理框內的內容的確切形狀。), not just the box itself as one big chunk, which can look nicer, although it may not always be want you want.下面咱們來舉個例子:

/* HTML */
<p class="filter">filter</p>
<p class="box-shadow">box-shadow</p>


/* CSS */
p {
    margin: 1em auto;
    padding: 20px;
    width: 100px;
    border: 5px dashed red;
}


.filter {
    -webkit-filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.7));
    filter: drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.7));
}

.box-shadow {
    box-shadow: 5px 5px 5px rgba(0, 0, 0, 0.7);
}

你會發現，濾鏡drop-shadow陰影會讓文本和邊框都有陰影。box-shadow只是讓邊框有陰影。

一些注意事項:

• filter支持edge和不少現代瀏覽器，可是不包括全部IE瀏覽器。
• 你會看到一個帶有-webkit-前綴的過濾器屬性版本，有時由瀏覽器在最終肯定其新功能的實現以前使用。Chrome/Safari/Opera支持-webkit-版本, 而EDGE和Firefox使用最終的非前綴版本。

Blend modes(混合模式)

CSS混合模式容許咱們在兩個元素重疊時爲 混合效果添加混合模式。每一個像素顯示的最終顏色將是原始像素顏色和下面圖層中像素的組合。

這有兩個屬性在CSS中使用混合模式：background-blend-mode, 它將在一個元素上設置的多個背景圖像和顏色混在一塊兒，mix-blend-mode將元素與元素混合在一塊兒，是重疊背景和內容的。

注意：混合模式是新特性，不少瀏覽器都不支持。