摘要：塊級(jí)元素默認(rèn)設(shè)置為，行內(nèi)元素默認(rèn)設(shè)置為。顏色值是陰影的基本顏色。如持久導(dǎo)航菜單元素的位置通過(guò)以及屬性進(jìn)行規(guī)定。粘性定位該定位基于用戶滾動(dòng)的位置。

? auto：如果內(nèi)容太多，那么超出盒子大小的內(nèi)容會(huì)被隱藏，滾動(dòng)條顯示出來(lái)，從而可以讓用戶滾動(dòng)看到所有內(nèi)容。
? hidden：如果內(nèi)容太多，那么超出盒子大小的內(nèi)容被隱藏了。
? visible：如果內(nèi)容太多，超出盒子大小的內(nèi)容顯示在盒子之外（這通常是默認(rèn)的行為）。

border-box 默認(rèn)值。背景繪制在邊框方框內(nèi)（剪切成邊框方框）。
padding-box 背景繪制在襯距方框內(nèi)（剪切成襯距方框）。
content-box 背景繪制在內(nèi)容方框內(nèi)（剪切成內(nèi)容方框）。

如果想通過(guò)設(shè)置將一個(gè)布局的外層容器的寬度設(shè)置為百分比，從而讓布局的寬度變得靈活，不過(guò)又不想讓它變得太寬或者太窄, 給布局一個(gè)最大和最小寬度約束即可

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

可以將應(yīng)用這段代碼的容器在它的父容器內(nèi)居中：

margin: 0 auto;

當(dāng)父容器在最小和最大寬度限制內(nèi)時(shí)，它將填滿整個(gè)視口寬度；當(dāng)父容器超過(guò)1280px寬度時(shí)，布局將保持在1280px寬，并開(kāi)始在可用空間內(nèi)居中。 當(dāng)寬度低于480px時(shí)，視口將小于容器，您必須滾動(dòng)才能看得到完全的內(nèi)容。

圖像會(huì)引起一個(gè)問(wèn)題——起初它的顯示正常，但當(dāng)容器變得比圖像更窄時(shí)，圖像開(kāi)始溢流容器（因?yàn)樗且粋€(gè)固定的寬度）。 要應(yīng)對(duì)這類圖像的問(wèn)題，我們可以在其上設(shè)置以下聲明：

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

寬度和高度等于通過(guò)CSS設(shè)置在 content 的寬度和高度。 padding 和 border 并沒(méi)有添加到總寬度和高度上; 反而，他們占用一些內(nèi)容的空間，使內(nèi)容更小.

? 塊盒(block box)是被定義為堆放在其它盒子之上的盒子（即盒子之前以及之后的內(nèi)容出現(xiàn)在不同的行上），并且可以給它設(shè)置高度和寬度。上面所述的整個(gè)盒模型都適用于塊盒。

? 行內(nèi)盒（inline box）與塊盒相反：它跟隨文檔的文本流堆放（即，它會(huì)與周圍的文本和其它行內(nèi)元素出現(xiàn)在同一行，并且其內(nèi)容會(huì)像段落中的文本行一樣，隨著文本流換行）。寬度和高度設(shè)置對(duì)行內(nèi)盒無(wú)效；在行內(nèi)盒上的所有內(nèi)邊距、外邊距和邊界設(shè)置會(huì)改變周圍文本的位置，但是不會(huì)影響周圍塊盒的位置。

? 行內(nèi)塊盒（inline-block box）介于前兩者之間： 它會(huì)像行內(nèi)盒一樣，跟隨周圍的文本流堆放，不會(huì)在其前后創(chuàng)建換行；不過(guò)，它可以像塊盒一樣，使用寬度和高度設(shè)置大小，并且維護(hù)其塊完整性 — 它不會(huì)跨段落行換行（對(duì)于一行文本容納不下的行內(nèi)盒，會(huì)落到第二行上，因?yàn)榈谝恍猩蠜](méi)有足夠的空間容納它，并且不會(huì)跨兩行換行）。

塊級(jí)元素默認(rèn)設(shè)置為?display: block;?，行內(nèi)元素默認(rèn)設(shè)置為?display: inline;?。

display: table?— 允許你像處理table布局那樣處理非table元素，而不是濫用HTML的

大多數(shù)元素的默認(rèn)背景顏色不是white?(白色，這可能如你所料) 而是transparent（透明）

該空間指定了圖像的水平(x)和垂直(y)坐標(biāo)。圖像的左上角是原點(diǎn)(0,0)。
該屬性可以接受許多不同的值類型:
像px這樣的絕對(duì)值——比如?background-position: 200px 25px.
像rems 這樣的相對(duì)值——比如?background-position: 20rem 2.5rem.
百分比 ——比如?background-position: 90% 25%.
關(guān)鍵字——比如?background-position: right center. 這兩個(gè)值是直觀的，可以分別取值比如?left，center，?right和?top，center，?bottom。
如果只指定一個(gè)值，那么該值將被假定為水平值，而垂直值將默認(rèn)為center

線性漸變是通過(guò)linear-gradient()函數(shù)傳入的，它是一個(gè)background-image屬性的值。函數(shù)至少需要用逗號(hào)分隔的三個(gè)參數(shù)——背景中漸變的方向[可以使用關(guān)鍵字來(lái)指定方向 （to bottom，to right，?to bottom right等）， 或角度值 (0deg相當(dāng)于?to top，90deg?相當(dāng)于?to right，直到?360deg，它再次相當(dāng)于?to top?）。]，開(kāi)始的顏色和結(jié)尾的顏色。

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

scroll: 這將把背景修改為頁(yè)面視圖，因此它將在頁(yè)面滾動(dòng)時(shí)滾動(dòng)。注意，我們說(shuō)的是視圖，而不是元素——如果滾動(dòng)實(shí)際的背景設(shè)置的元素，而不是頁(yè)面，背景不會(huì)滾動(dòng)。

fixed: 這可以在頁(yè)面的位置上固定背景，所以當(dāng)頁(yè)面滾動(dòng)時(shí)，它不會(huì)滾動(dòng)，不管你是滾動(dòng)頁(yè)面還是背景設(shè)置的元素，它都會(huì)保持在相同的位置。

local:這個(gè)值后來(lái)被添加了(它只在Internet Explorer 9+中得到支持，而其他的則在IE4+中得到支持)，因?yàn)閟croll值相當(dāng)混亂，并且在許多情況下并沒(méi)有真正做您想要的事情。 ?local?值將背景設(shè)置為它所設(shè)置的元素的背景，因此當(dāng)滾動(dòng)元素時(shí)，背景會(huì)隨之滾動(dòng)。

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

可以將多個(gè)值放入到普通寫(xiě)法的?background-*屬性中，比如：

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

當(dāng)沒(méi)有明確設(shè)置值時(shí)，邊界會(huì)默認(rèn)使用文本的顏色，寬度為3px。

如果需要兼容舊的瀏覽器——border-radius?只支持Internet Explorer 9以上。

可以創(chuàng)建橢圓形角（x半徑與y半徑不同）。兩個(gè)不同的半徑用正斜杠（/）分隔

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

text-shadow屬性，它允許將一個(gè)或多個(gè)陰影應(yīng)用到元素的文本上。對(duì)于盒子來(lái)說(shuō)，存在一個(gè)等價(jià)的屬性——box-shadow允許將一個(gè)或多個(gè)陰影應(yīng)用到一個(gè)實(shí)際的元素盒子中。
只有在IE9+（IE9及更新版本）中可用
box-shadow屬性值中有4個(gè)項(xiàng)：
1.第一個(gè)長(zhǎng)度值是水平偏移量（horizontal offset?）——即向右的距離，陰影被從原始的框中偏移(如果值為負(fù)的話則為左)。
2.第二個(gè)長(zhǎng)度值是垂直偏移量（vertical offset）——即陰影從原始盒子中向下偏移的距離(或向上，如果值為負(fù))。
3.第三個(gè)長(zhǎng)度的值是模糊半徑（blur radius）——在陰影中應(yīng)用的模糊度。
4.顏色值是陰影的基本顏色（base color）。

與text-shadow不同，box-shadow有一個(gè)inset關(guān)鍵字可用——把它放在一個(gè)影子聲明的開(kāi)始，使它變成一個(gè)內(nèi)部陰影，而不是一個(gè)外部陰影。

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

過(guò)濾器可以應(yīng)用在任何元素上，塊元素（block）或者行內(nèi)元素（inline）——你只需要使用filter屬性，并且給他一個(gè)特定的過(guò)濾函數(shù)的值。它們作用于盒（box）內(nèi)內(nèi)容（content）的確切形狀，而不僅僅將盒子本身作為一個(gè)大的塊。

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 {
  clear: both;}

clear 可以取三個(gè)值：
1.left：停止任何活動(dòng)的左浮動(dòng)
2.right：停止任何活動(dòng)的右浮動(dòng)
3.both：停止任何活動(dòng)的左右浮動(dòng)

靜態(tài)定位是每個(gè)元素獲取的默認(rèn)值——它只是意味著“將元素放入它在文檔布局流中的正常位置 （忽略 top, bottom, left, right 或者 z-index 聲明）元素出現(xiàn)在正常的流中

相對(duì)定位是我們將要看的第一個(gè)位置類型。它與靜態(tài)定位非常相似，占據(jù)在正常的文檔流中，除了你仍然可以修改它的最終位置，包括讓它與頁(yè)面上的其他元素重疊。需要使用top，bottom，left和right屬性來(lái)修改元素的位置。

元素相對(duì)自身的原位置偏移某個(gè)距離，但是原本的空間依舊保留，表現(xiàn)為空白
把一個(gè)元素設(shè)置為position: relative; 可以使該元素的子元素相對(duì)該元素絕對(duì)定位。

絕對(duì)定位固定元素是相對(duì)于 元素或其最近的定位祖先，而固定定位固定元素則是相對(duì)于瀏覽器視口本身。（如持久導(dǎo)航菜單）元素的位置通過(guò) "left", "top", "right" 以及 "bottom" 屬性進(jìn)行規(guī)定。

該定位基于用戶滾動(dòng)的位置。它的行為就像 position:relative; 而當(dāng)頁(yè)面滾動(dòng)超出目標(biāo)區(qū)域時(shí)，它的表現(xiàn)就像 position:fixed;，它會(huì)固定在目標(biāo)位置。
注意: Internet Explorer, Edge 15 及更早 IE 版本不支持 sticky 定位。 Safari 需要使用 -webkit- prefix

規(guī)定應(yīng)該從父元素繼承 position 屬性的值。

設(shè)置該屬性為默認(rèn)值

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

• 上一篇：React解決長(zhǎng)列表方案(react-virtualized)
• 下一篇：前端每日實(shí)戰(zhàn)：32# 視頻演示如何用純 CSS 創(chuàng)作六邊形按鈕特效

Atom

男|高級(jí)講師

我要關(guān)注 我要私信

TA的文章

閱讀更多

• tensorflow1安裝

  閱讀 3255·2023-04-25 19:09

• 整理一些中國(guó)香港大帶寬vps – 有cn2 gia大帶寬vps

  閱讀 3961·2021-10-22 09:54

• ?openGauss數(shù)據(jù)庫(kù)源碼解析系列文章—— DeepSQL?

  閱讀 1827·2021-09-29 09:35

• FIN7黑客使用Windows 11主題文件植入Javascript后門(mén)

  閱讀 2993·2021-09-08 09:45

• NTP時(shí)間戳轉(zhuǎn)換成UTC時(shí)間的過(guò)程

  閱讀 2420·2021-09-06 15:00

• CSS基礎(chǔ)

  閱讀 2834·2019-08-29 15:32

• 巧用patternLock開(kāi)發(fā)圖案滑屏解鎖

  閱讀 1109·2019-08-28 18:30

• VueCli+Node+mongodb打造個(gè)人博客（含前臺(tái)展示及后臺(tái)管理系統(tǒng)）（下）

  閱讀 422·2019-08-26 13:43

最新活動(dòng)