CSS基礎

溢流(Overflow )

• auto:若是內容太多,那麼超出盒子大小的內容會被隱藏,滾動條顯示出來,從而可讓用戶滾動看到全部內容。
• hidden:若是內容太多,那麼超出盒子大小的內容被隱藏了。
visible:若是內容太多,超出盒子大小的內容顯示在盒子以外(這一般是默認的行爲)。html

背景剪裁 (Background clip)

border-box 默認值。背景繪製在邊框方框內(剪切成邊框方框)。
padding-box 背景繪製在襯距方框內(剪切成襯距方框)。
content-box 背景繪製在內容方框內(剪切成內容方框)。web

clipboard.png
clipboard.png
clipboard.png

設置寬和高的約束

若是想經過設置將一個佈局的外層容器的寬度設置爲百分比,從而讓佈局的寬度變得靈活,不過又不想讓它變得太寬或者太窄, 給佈局一個最大和最小寬度約束便可瀏覽器

width: 70%;
max-width: 1280px;
min-width: 480px;

能夠將應用這段代碼的容器在它的父容器內居中:框架

margin: 0 auto;

當父容器在最小和最大寬度限制內時,它將填滿整個視口寬度;當父容器超過1280px寬度時,佈局將保持在1280px寬,並開始在可用空間內居中。 當寬度低於480px時,視口將小於容器,您必須滾動才能看獲得徹底的內容。函數

控制圖像大小

圖像會引發一個問題——起初它的顯示正常,但當容器變得比圖像更窄時,圖像開始溢流容器(由於它是一個固定的寬度)。 要應對這類圖像的問題,咱們能夠在其上設置如下聲明:佈局

display: block;
margin: 0 auto;
max-width: 100%;

徹底改變盒模型 box-sizing: border-box;

clipboard.png

寬度和高度等於經過CSS設置在 content 的寬度和高度。 padding 和 border 並無添加到總寬度和高度上; 反而,他們佔用一些內容的空間,使內容更小.flex

常見的display的類型

塊盒(block box)是被定義爲堆放在其它盒子之上的盒子(即盒子以前以及以後的內容出如今不一樣的行上),而且能夠給它設置高度和寬度。上面所述的整個盒模型都適用於塊盒。this

行內盒(inline box)與塊盒相反:它跟隨文檔的文本流堆放(即,它會與周圍的文本和其它行內元素出如今同一行,而且其內容會像段落中的文本行同樣,隨着文本流換行)。寬度和高度設置對行內盒無效;在行內盒上的全部內邊距、外邊距和邊界設置會改變周圍文本的位置,可是不會影響周圍塊盒的位置。url

行內塊盒(inline-block box)介於前二者之間: 它會像行內盒同樣,跟隨周圍的文本流堆放,不會在其先後建立換行;不過,它能夠像塊盒同樣,使用寬度和高度設置大小,而且維護其塊完整性 — 它不會跨段落行換行(對於一行文本容納不下的行內盒,會落到第二行上,由於第一行上沒有足夠的空間容納它,而且不會跨兩行換行)。spa

塊級元素默認設置爲 display: block; ,行內元素默認設置爲 display: inline; 。

display: table — 容許你像處理table佈局那樣處理非table元素,而不是濫用HTML的<table>標籤來達到一樣的目的。
display: flex — 容許你處理一些困擾CSS已久的一些傳統佈局問題,例如佈置一系列彈性等寬容器或者垂直居中內容。
display: grid — 給出一種簡單實現CSS網格系統的方式,而在傳統上它依賴於一些棘手難以處理的CSS網格框架

背景顏色  background-color

大多數元素的默認背景顏色不是white (白色,這可能如你所料) 而是transparent(透明)

背景位置:background-position 

該空間指定了圖像的水平(x)和垂直(y)座標。圖像的左上角是原點(0,0)。
該屬性能夠接受許多不一樣的值類型:
像px這樣的絕對值——好比 background-position: 200px 25px.
像rems 這樣的相對值——好比 background-position: 20rem 2.5rem.
百分比 ——好比 background-position: 90% 25%.
關鍵字——好比 background-position: right center. 這兩個值是直觀的,能夠分別取值好比 left,center, right和 top,center, bottom。
若是隻指定一個值,那麼該值將被假定爲水平值,而垂直值將默認爲center

背景圖像:漸變

線性漸變是經過linear-gradient()函數傳入的,它是一個background-image屬性的值。函數至少須要用逗號分隔的三個參數——背景中漸變的方向[可使用關鍵字來指定方向 (to bottom,to right, to bottom right等), 或角度值 (0deg至關於 to top,90deg 至關於 to right,直到 360deg,它再次至關於 to top )。],開始的顏色和結尾的顏色。

div {
background-image: linear-gradient(to bottom, orange, yellow);
}

背景附着 background-attachment

scroll: 這將把背景修改成頁面視圖,所以它將在頁面滾動時滾動。注意,咱們說的是視圖,而不是元素——若是滾動實際的背景設置的元素,而不是頁面,背景不會滾動。

fixed: 這能夠在頁面的位置上固定背景,因此當頁面滾動時,它不會滾動,無論你是滾動頁面仍是背景設置的元素,它都會保持在相同的位置。

local:這個值後來被添加了(它只在Internet Explorer 9+中獲得支持,而其餘的則在IE4+中獲得支持),由於scroll值至關混亂,而且在許多狀況下並無真正作您想要的事情。  local 值將背景設置爲它所設置的元素的背景,所以當滾動元素時,背景會隨之滾動。

多個背景

div {
background: url(image.png) no-repeat 99% center,
            url(background-tile.png),
            linear-gradient(to bottom, yellow, #dddd00 50%, orange);
background-color: yellow;
}

能夠將多個值放入到普通寫法的 background-*屬性中,好比:

background-image: url(image.png), url(background-tile.png);
background-repeat: no-repeat, repeat;

邊界

當沒有明確設置值時,邊界會默認使用文本的顏色,寬度爲3px。

邊界半徑 border-radius

若是須要兼容舊的瀏覽器——border-radius 只支持Internet Explorer 9以上。

能夠建立橢圓形角(x半徑與y半徑不一樣)。兩個不一樣的半徑用正斜槓(/)分隔

border-radius: 10px / 20px;
border-radius: 10px 30px / 20px 40px;

盒子陰影

text-shadow屬性,它容許將一個或多個陰影應用到元素的文本上。對於盒子來講,存在一個等價的屬性——box-shadow容許將一個或多個陰影應用到一個實際的元素盒子中。
只有在IE9+(IE9及更新版本)中可用
box-shadow屬性值中有4個項:
1.第一個長度值是水平偏移量(horizontal offset )——即向右的距離,陰影被從原始的框中偏移(若是值爲負的話則爲左)。
2.第二個長度值是垂直偏移量(vertical offset)——即陰影從原始盒子中向下偏移的距離(或向上,若是值爲負)。
3.第三個長度的值是模糊半徑(blur radius)——在陰影中應用的模糊度。
4.顏色值是陰影的基本顏色(base color)。

與text-shadow不一樣,box-shadow有一個inset關鍵字可用——把它放在一個影子聲明的開始,使它變成一個內部陰影,而不是一個外部陰影。

background-image: linear-gradient(to bottom right, #777, #ddd);

Filters(過濾器)

過濾器能夠應用在任何元素上,塊元素(block)或者行內元素(inline)——你只須要使用filter屬性,而且給他一個特定的過濾函數的值。它們做用於盒(box)內內容(content)的確切形狀,而不只僅將盒子自己做爲一個大的塊。

多列浮動佈局

兩列布局

body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;}
div:nth-of-type(1) {
  width: 48%;}
div:nth-of-type(2) {
  width: 48%;}

div:nth-of-type(1) {
  width: 48%;
  float: left;}
div:nth-of-type(2) {
  width: 48%;
  float: right;}

清除浮動

<footer>
  <p>&copy;2016 your imagination. This isn't really copyright, this is a mockery of the very concept. Use as you wish.</p></footer>

footer {
  clear: both;}

clear 能夠取三個值:
1.left:中止任何活動的左浮動
2.right:中止任何活動的右浮動
3.both:中止任何活動的左右浮動

定位

靜態定位 static

靜態定位是每一個元素獲取的默認值——它只是意味着「將元素放入它在文檔佈局流中的正常位置 (忽略 top, bottom, left, right 或者 z-index 聲明)元素出如今正常的流中

clipboard.png

相對定位 relative

相對定位是咱們將要看的第一個位置類型。它與靜態定位很是類似,佔據在正常的文檔流中,除了你仍然能夠修改它的最終位置,包括讓它與頁面上的其餘元素重疊。需要使用top,bottom,left和right屬性來修改元素的位置

clipboard.png

clipboard.png

元素相對自身的原位置偏移某個距離,可是本來的空間依舊保留,表現爲空白
把一個元素設置爲position: relative; 可使該元素的子元素相對該元素絕對定位。

固定定位 fixed

絕對定位固定元素是相對於 <html> 元素或其最近的定位祖先,而固定定位固定元素則是相對於瀏覽器視口自己。(如持久導航菜單)元素的位置經過 "left", "top", "right" 以及 "bottom" 屬性進行規定。

clipboard.png

粘性定位 sticky

該定位基於用戶滾動的位置。它的行爲就像 position:relative; 而當頁面滾動超出目標區域時,它的表現就像 position:fixed;,它會固定在目標位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 須要使用 -webkit- prefix

clipboard.png

clipboard.png

Inherit

規定應該從父元素繼承 position 屬性的值。

Initial

設置該屬性爲默認值

z-index

z-index只能在position屬性值爲relative或absolute或fixed的元素上有效。

相關文章
相關標籤/搜索