介紹

在 Web 開發(fā)中愧哟，HTML 為頁(yè)面的內(nèi)容提供結(jié)構(gòu)和語(yǔ)義，CSS 控制頁(yè)面的布局和外觀。在日常生活中榄融，我們每天接觸著大量的 Web 內(nèi)容。這些內(nèi)容的視覺設(shè)計(jì)會(huì)影響頁(yè)面的呈現(xiàn)和保證用戶體驗(yàn)邑闺。

視覺設(shè)計(jì)在 Web 開發(fā)中是一個(gè)非常廣泛的話題检吆。它結(jié)合了排版、色彩理論章鲤、圖形辜妓、動(dòng)畫和頁(yè)面布局等夏块。 本章我們將深入學(xué)習(xí)開發(fā)人員如何通過(guò)CSS基礎(chǔ)來(lái)創(chuàng)建自己的視覺設(shè)計(jì)。

盒子模型

wKgA3V-0iimAcVg-AABxjHwYCcs636.jpg

介紹

當(dāng)對(duì)一個(gè)文檔進(jìn)行布局（layout）的時(shí)候借跪，瀏覽器的渲染引擎會(huì)根據(jù)標(biāo)準(zhǔn)之一的 CSS 基礎(chǔ)框盒模型（CSS basic box model）政己，將所有元素表示為一個(gè)個(gè)矩形的盒子（box）。CSS 決定這些盒子的大小掏愁、位置以及屬性（例如顏色歇由、背景卵牍、邊框尺寸…）。

每個(gè)盒子由四個(gè)部分：邊距（margin）沦泌，邊框（border）糊昙，填充（padding），和實(shí)際內(nèi)容（content）

我們可以通過(guò)瀏覽器的開發(fā)者工具觀察頁(yè)面的元素谢谦，會(huì)發(fā)現(xiàn)每個(gè)元素都是一個(gè)盒子：

wKgA3V-0ioqAFo2WAAAZaWlDhNg645.png

內(nèi)容 content

概念：由內(nèi)容邊界限制释牺，容納著元素的“真實(shí)”內(nèi)容，例如文本回挽、圖像没咙，或是一個(gè)視頻播放器。它的尺寸為內(nèi)容寬度（或稱 content-box 寬度）和內(nèi)容高度（或稱 content-box 高度）千劈。它通常含有一個(gè)背景顏色（默認(rèn)顏色為透明）或背景圖像祭刚。

如果 box-sizing 為 content-box（默認(rèn)），則內(nèi)容區(qū)域的大小可明確地通過(guò) width队塘、min-width袁梗、max-width、height憔古、min-height遮怜，和 max-height 控制。

內(nèi)邊距 padding

概念：由內(nèi)邊距邊界限制鸿市，擴(kuò)展自內(nèi)容區(qū)域锯梁，負(fù)責(zé)延伸內(nèi)容區(qū)域的背景，填充元素中內(nèi)容與邊框的間距焰情。它的尺寸是 padding-box 寬度 和 padding-box 高度陌凳。

內(nèi)邊距的粗細(xì)可以由 padding-top稳强、padding-right榆苞、padding-bottom、padding-left豌汇，和簡(jiǎn)寫屬性 padding 控制验游。

邊框 border

概念：由邊框邊界限制充岛，內(nèi)邊距外部區(qū)域，是容納邊框的區(qū)域耕蝉。

邊框的粗細(xì)由 border-width 和簡(jiǎn)寫的 border 屬性控制崔梗。如果 box-sizing 屬性被設(shè)為 border-box，那么邊框區(qū)域的大小可明確地通過(guò) width垒在、min-width, max-width蒜魄、height、min-height，和 max-height 屬性控制谈为。
假如盒子上設(shè)有背景（background-color 或 background-image）旅挤，背景顏色將會(huì)一直延伸至邊框的外沿，背景圖片在邊框的內(nèi)沿峦阁。此默認(rèn)表現(xiàn)可通過(guò) CSS 屬性 background-clip 來(lái)改變谦铃。

邊框相關(guān)屬性

• border-width：指定邊框的寬度(粗細(xì))
• border-style: 指定邊框的樣式，常用可選值： none （無(wú)邊框）榔昔，hidden （與 "none" 相同驹闰。不過(guò)應(yīng)用于表時(shí)除外，用于解決邊框沖突）撒会，solid （單實(shí)線）嘹朗，double（雙實(shí)線）
• border-color: 指定邊框的顏色

.box { 
  border-width: 1px; 
  border-style: solid; 
  border-color: black; 
} 

• border 上面三個(gè)屬性的合并簡(jiǎn)寫形式

.box { 
  border: 1px solid black;
} 

注意：邊框允許單獨(dú)設(shè)置四條邊，屬性為 border-top诵肛，border-button屹培，border-left，border-right

案例：實(shí)現(xiàn)小三角形

<style>
.tall {
            box-sizing: border-box;
            width: 0;
            height: 0;
            border-left: 0; /* 在CSS規(guī)范中我們約定使用0替代none關(guān)鍵字 */
            border-right: 10px solid #00aaee;
            border-top: 10px solid transparent;
            border-bottom: 10px solid transparent;
        }
</style>

<div class="tall"></div>

外邊距 margin

由外邊距邊界限制怔檩，用空白區(qū)域擴(kuò)展邊框區(qū)域褪秀，以分開相鄰的元素。它的尺寸為 margin-box 寬度 和 margin-box 高度薛训。

外邊距區(qū)域的大小由 margin-top媒吗、margin-right、margin-bottom乙埃、margin-left闸英，和簡(jiǎn)寫屬性 margin 控制。在發(fā)生外邊距合并的情況下介袜，由于盒之間共享外邊距甫何，外邊距不容易弄清楚。

display

概念：display 屬性可以設(shè)置元素的內(nèi)部和外部顯示類型遇伞。元素的外部顯示類型將決定該元素在流式布局中的表現(xiàn)（塊級(jí)或內(nèi)聯(lián)元素）辙喂；元素的內(nèi)部顯示類型可以控制其子元素的布局（例如：grid 或 flex）。

• 外部顯式類型：
  1. block 元素生成一個(gè)塊元素作用域鸠珠，在正常流中生成元素前后的換行符（獨(dú)占一行）加派。可以設(shè)置 width跳芳、 height、 margin 和 padding 屬性竹勉。
  2. inline 該元素是個(gè)內(nèi)聯(lián)元素飞盆，這些元素不會(huì)在其前后生成換行符（不會(huì)獨(dú)占一行）。在正常流中，如果有空間吓歇，下一個(gè)元素將位于同一行上孽水。設(shè)置width,height屬性無(wú)效。內(nèi)聯(lián)元素的margin屬性只在水平方向會(huì)生效而padding都會(huì)生效城看。
• 遺留顯式類型：
  1. inline-block 元素生成一個(gè)行內(nèi)塊元素女气。它將與周圍的內(nèi)容一起流動(dòng)，元素不再獨(dú)占一行但元素具有block的屬性测柠，可設(shè)置width炼鞠、 height、 margin 和 padding 屬性轰胁。
• 內(nèi)部顯式類型：
  1. table 該屬性元素類似于HTML<table>元素谒主。是一個(gè)塊級(jí)元素。
  2. flex 彈性盒子赃阀，元素的行為類似于塊元素霎肯，我們會(huì)在之后進(jìn)行專門的講解。
  3. grid 網(wǎng)格榛斯，元素的行為類似于塊元素观游，我們會(huì)在之后進(jìn)行專門的講解。

請(qǐng)注意驮俗，對(duì)于行內(nèi)元素來(lái)說(shuō)懂缕，盡管內(nèi)容周圍存在內(nèi)邊距與邊框，但其占用空間（每一行文字的高度）則由 line-height 屬性決定意述，即使邊框和內(nèi)邊距仍會(huì)顯示在內(nèi)容周圍提佣。

overflow

概念：CSS屬性 overflow 定義當(dāng)一個(gè)元素的內(nèi)容太大而無(wú)法適應(yīng) 塊級(jí)格式化上下文 時(shí)候該做什么。

.box {
    overflow: visible | hidden | scroll | auto | inherit;
}

• visible (默認(rèn))：內(nèi)容不會(huì)被修剪荤崇，會(huì)呈現(xiàn)在元素框之外

.box {
  overflow: visible;
}

[圖片上傳失敗...(image-3c9e5d-1623939781003)]

• hidden：內(nèi)容會(huì)被修剪拌屏，并且其余內(nèi)容不可見

.box {
  overflow: hidden;
}

[圖片上傳失敗...(image-109411-1623939781003)]

• scroll：內(nèi)容會(huì)被修剪，瀏覽器會(huì)顯示滾動(dòng)條以便查看其余內(nèi)容

.box {
  overflow: scroll;
}

[圖片上傳失敗...(image-5f392-1623939781003)]

• auto：由瀏覽器定奪术荤，如果內(nèi)容被修剪倚喂，就會(huì)顯示滾動(dòng)條

.box {
  overflow: auto ;
}

• inherit： 規(guī)定從父元素繼承overflow屬性的值

.box {
  overflow: inherit;
}

float 浮動(dòng)

介紹

引入 float 屬性是為了能讓 web 開發(fā)人員實(shí)現(xiàn)簡(jiǎn)單的布局，包括在一列文本中浮動(dòng)的圖像瓣戚，文字環(huán)繞在它的左邊或右邊端圈。你可能在報(bào)紙版面上看到過(guò)。

但 Web 開發(fā)人員很快意識(shí)到子库，任何東西都可以浮動(dòng)舱权，而不僅僅是圖像，所以浮動(dòng)的使用范圍擴(kuò)大了仑嗅。

浮動(dòng)曾被用來(lái)實(shí)現(xiàn)整個(gè)網(wǎng)站頁(yè)面的布局宴倍，它使信息列得以橫向排列（默認(rèn)的設(shè)定則是按照這些列在源代碼中出現(xiàn)的順序縱向排列）张症。目前出現(xiàn)了更新更好的頁(yè)面布局技術(shù)，所以使用浮動(dòng)來(lái)進(jìn)行頁(yè)面布局應(yīng)被看作傳統(tǒng)的布局方法鸵贬。

概念

float 屬性定義元素在哪個(gè)方向浮動(dòng)俗他，浮動(dòng)元素會(huì)生成一個(gè)塊級(jí)框，而不論它本身是何種元素阔逼。

.box {
  float: left | right | none | inherit
}

• left：元素向左浮動(dòng)兆衅。
• right：元素向右浮動(dòng)。
• none： 默認(rèn)值嗜浮。元素不浮動(dòng)羡亩，并會(huì)顯示在其在文本中出現(xiàn)的位置。
• inherit： 規(guī)定應(yīng)該從父元素繼承 float 屬性的值周伦。

注意：

1. 假如在一行之上只有極少的空間可供浮動(dòng)元素夕春，那么這個(gè)元素會(huì)跳至下一行，這個(gè)過(guò)程會(huì)持續(xù)到某一行擁有足夠的空間為止专挪。
2. 浮動(dòng)元素會(huì)脫離正常的文檔布局流及志，并吸附到其父容器的float屬性指定位置。在正常布局中位于該浮動(dòng)元素之下的內(nèi)容寨腔，此時(shí)會(huì)圍繞著浮動(dòng)元素速侈，填滿其剩余的空間。
3. 注意浮動(dòng)內(nèi)容仍然遵循盒子模型諸如外邊距和邊框迫卢。通過(guò)設(shè)置外邊距就能阻止其他元素緊貼浮動(dòng)元素倚搬。

案例一：文字環(huán)繞

<style>
body {
  width: 90%;
  max-width: 900px;
  margin: 0 auto;
}

p {
  line-height: 2;
  word-spacing: 0.1rem;
}

img {
  float: left;
  margin-right: 30px;
}

</style>

<h1>Simple float example</h1>

<img src="https://mdn.mozillademos.org/files/13340/butterfly.jpg" alt="A pretty butterfly with red, white, and brown coloring, sitting on a large leaf">

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>

<p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>

案例二：首字下沉

<style>
p {
  width: 400px;
  margin: 0 auto;
}

p:first-line {
  text-transform: uppercase;
}

p:first-letter {
  font-size: 3em;
  border: 1px solid black;
  background: red;
  float: left;
  padding: 2px;
  margin-right: 4px;
}
</style>

<p>This is my very important paragraph.
 I am a distinguished gentleman of such renown that my paragraph
 needs to be styled in a manner befitting my majesty. Bow before
my splendour, dear students, and go forth and learn CSS!</p>

案例三：多列浮動(dòng)布局

介紹：浮動(dòng)通常用于創(chuàng)建多個(gè)列布局，并且由于其廣泛的瀏覽器支持已經(jīng)有相當(dāng)一段時(shí)間乾蛤。盡管事實(shí)上每界，他們不是真的打算這個(gè)工作，并有一些奇怪的副作用必須處理家卖。

<style>
.body {
   width: 90%;
   max-width: 900px;
   margin: 0 auto;
 }

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

div:nth-of-type(2) {
  width: 30%;
  float: left;
  margin-left: 4%;
}

div:nth-of-type(3) {
  width: 26%;
  float: right;
}

</style>

<h1>2 column layout example</h1>
<div>
  <h2>First column</h2>
  <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla luctus aliquam dolor, eu lacinia lorem placerat vulputate. Duis felis orci, pulvinar id metus ut, rutrum luctus orci. Cras porttitor imperdiet nunc, at ultricies tellus laoreet sit amet. Sed auctor cursus massa at porta. Integer ligula ipsum, tristique sit amet orci vel, viverra egestas ligula. Curabitur vehicula tellus neque, ac ornare ex malesuada et. In vitae convallis lacus. Aliquam erat volutpat. Suspendisse ac imperdiet turpis. Aenean finibus sollicitudin eros pharetra congue. Duis ornare egestas augue ut luctus. Proin blandit quam nec lacus varius commodo et a urna. Ut id ornare felis, eget fermentum sapien.</p>
</div>

<div>
  <h2>Second column</h2>
  <p>Nam vulputate diam nec tempor bibendum. Donec luctus augue eget malesuada ultrices. Phasellus turpis est, posuere sit amet dapibus ut, facilisis sed est. Nam id risus quis ante semper consectetur eget aliquam lorem. Vivamus tristique elit dolor, sed pretium metus suscipit vel. Mauris ultricies lectus sed lobortis finibus. Vivamus eu urna eget velit cursus viverra quis vestibulum sem. Aliquam tincidunt eget purus in interdum. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
</div>

<div>
  <h2>Third column</h2>
  <p>Nam consequat scelerisque mattis. Duis pulvinar dapibus magna, eget congue purus mollis sit amet. Sed euismod lacus sit amet ex tempus, a semper felis ultrices. Maecenas a efficitur metus. Nullam tempus pharetra pharetra. Morbi in leo mauris. Nullam gravida ligula eros, lacinia sagittis lorem fermentum ut. Praesent dapibus eros vel mi pretium, nec convallis nibh blandit. Sed scelerisque justo ac ligula mollis laoreet. In mattis, risus et porta scelerisque, augue neque hendrerit orci, sit amet imperdiet risus neque vitae lectus. In tempus lectus a quam posuere vestibulum. Duis quis finibus mi. Nullam commodo mi in enim maximus fermentum. Mauris finibus at lorem vel sollicitudin.</p>
</div>

注意: 我們所有列使用寬度百分比——這是一個(gè)很好的策略眨层，因?yàn)樗鼊?chuàng)建一個(gè)流式布局（liquid layout），一種調(diào)整為不同的屏幕尺寸上荡，并在較小的屏幕尺寸下保持相同的列寬度比例趴樱。

清除浮動(dòng)

• 為什么要清除浮動(dòng)？

  1. 由于浮動(dòng)元素脫離了文檔流酪捡，所以父元素的高度無(wú)法被撐開叁征，影響了與父元素同級(jí)的元素。

  2. 浮動(dòng)元素同級(jí)的非浮動(dòng)元素會(huì)跟隨其后逛薇，因?yàn)楦?dòng)元素脫離文檔流不占據(jù)原來(lái)的位置, 阻止非浮動(dòng)元素環(huán)繞捺疼。

  3. 非浮動(dòng)元素margin不能正常顯式。

• 清除浮動(dòng)的方法：

  1. 在想讓非浮動(dòng)停止的元素上設(shè)置 clear 屬性永罚，（不能解決父元素塌陷問(wèn)題和margin不能正常顯式問(wèn)題）

  footer {
          clear: left | right | both;
  }
  

  • left：停止任何活動(dòng)的左浮動(dòng)
  • right：停止任何活動(dòng)的右浮動(dòng)
  • both：停止任何活動(dòng)的左右浮動(dòng)

  2. 給父元素添加overflow: hidden （不推薦）

  3. 給父元素內(nèi)部底下添加一個(gè)新標(biāo)簽啤呼，給這個(gè)新標(biāo)簽設(shè)置clear:both;

  4. 利用偽元素:after 給父元素添加以下屬性

  父元素:after {
    content:""; 
    display:block; /*將文本轉(zhuǎn)為塊級(jí)元素*/
    clear:both; /*清除浮動(dòng)*/
  }
  
  父元素 {
    zoom:1; /*這是針對(duì)于IE6/7的议薪，因?yàn)镮E6/7不支持:after偽類，這個(gè)神奇的zoom:1讓IE6/7的元素可以清除浮動(dòng)來(lái)包裹內(nèi)部元素媳友。*/
  }
  

  5. 利用雙偽元素:before :after 清除浮動(dòng)

     父元素:after,
     父元素:after {
       content:""; 
       display:block; /*將文本轉(zhuǎn)為塊級(jí)元素*/
       clear:both; /*清除浮動(dòng)*/
     }
       
     父元素 {
       zoom:1;
     }
     

外邊距重疊問(wèn)題（補(bǔ)充）

塊的上外邊距(margin-top)和下外邊距(margin-bottom)會(huì)合并為單個(gè)邊距（左右邊距不存在此問(wèn)題），其大小為單個(gè)邊距的最大值(或如果它們相等产捞，則僅為其中一個(gè))醇锚，這種行為稱為邊距折疊。

有三種情況會(huì)形成外邊距重疊：

• 同一層相鄰元素之間,相鄰的兩個(gè)元素之間的外邊距重疊坯临。

<style>   
p:nth-child(1){   
  margin-bottom: 13px; 
}   
p:nth-child(2){  
  margin-top: 87px;  
} 
</style>
 
<p>下邊界范圍會(huì)...</p>
<p>...會(huì)跟這個(gè)元素的上邊界范圍重疊盗扇。</p>

這個(gè)例子如果以為邊界會(huì)合并的話梁厉，理所當(dāng)然會(huì)猜測(cè)上下2個(gè)元素會(huì)合并一個(gè)100px的邊界范圍，但其實(shí)會(huì)發(fā)生邊界折疊，只會(huì)挑選最大邊界范圍留下画拾，所以這個(gè)例子的邊界范圍其實(shí)是87px。

• 沒(méi)有內(nèi)容將父元素和后代元素分開
  如果沒(méi)有邊框border邻耕，內(nèi)邊距padding戴甩，行內(nèi)內(nèi)容，也沒(méi)有創(chuàng)建塊級(jí)格式上下文或清除浮動(dòng)來(lái)分開一個(gè)塊級(jí)元素的上邊界margin-top 與其內(nèi)一個(gè)或多個(gè)后代塊級(jí)元素的上邊界margin-top谤祖；或沒(méi)有邊框婿滓，內(nèi)邊距，行內(nèi)內(nèi)容粥喜，高度height凸主，最小高度min-height或 最大高度max-height 來(lái)分開一個(gè)塊級(jí)元素的下邊界margin-bottom與其內(nèi)的一個(gè)或多個(gè)后代后代塊元素的下邊界margin-bottom，則就會(huì)出現(xiàn)父塊元素和其內(nèi)后代塊元素外邊界重疊额湘，重疊部分最終會(huì)溢出到父級(jí)塊元素外面卿吐。

<style type="text/css">
    section    {
        margin-top: 13px;
        margin-bottom: 87px;
    }

    header {
        margin-top: 87px;
    }

    footer {
        margin-bottom: 13px;
    }
</style>

<section>
    <header>上邊界重疊 87</header>
    <main></main>
    <footer>下邊界重疊 87 不能再高了</footer>
</section>

• 空的塊級(jí)元素
  當(dāng)一個(gè)塊元素上邊界margin-top 直接貼到元素下邊界margin-bottom時(shí)也會(huì)發(fā)生邊界折疊。這種情況會(huì)發(fā)生在一個(gè)塊元素完全沒(méi)有設(shè)定邊框border锋华、內(nèi)邊距paddng嗡官、高度height、最小高度min-height 供置、最大高度max-height 谨湘、內(nèi)容設(shè)定為inline或是加上clear-fix的時(shí)候。

<style>
p {
  margin: 0;  
}
div {
  margin-top: 13px;
  margin-bottom: 87px;
}
</style>

<p>上邊界范圍是 87 ...</p>
<div></div>
<p>... 上邊界范圍是 87</p>

注意：

1. 上述情況的組合會(huì)產(chǎn)生更復(fù)雜的外邊距折疊芥丧。
2. 即使某一外邊距為0紧阔，這些規(guī)則仍然適用。因此就算父元素的外邊距是0续担，第一個(gè)或最后一個(gè)子元素的外邊距仍然會(huì)“溢出”到父元素的外面擅耽。
3. 如果參與折疊的外邊距中包含負(fù)值，折疊后的外邊距的值為最大的正邊距與最小的負(fù)邊距的和,物遇；也就是說(shuō)如果有-13px 8px 100px疊在一起乖仇，邊界范圍的技術(shù)就是 100px -13px 的和 87px憾儒。
4. 如果所有參與折疊的外邊距都為負(fù)，折疊后的外邊距的值為最小的負(fù)邊距的值乃沙。這一規(guī)則適用于相鄰元素和嵌套元素起趾。
5. 以上這些內(nèi)容都是發(fā)生在Block-Level的元素，設(shè)定floating和absolutely positioned的元素完全不用擔(dān)心邊界重疊的問(wèn)題警儒。

css背景樣式屬性

background-color ( 背景顏色 )

屬性定義了 CSS 中任何元素的背景顏色训裆。屬性接受任何有效的<color>值。背景色擴(kuò)展到元素的內(nèi)容和內(nèi)邊距的中蜀铲。

div {
  background-color: red;
}

div {
  background-color: rgb(0, 160, 220);
}

div {
  background-color: rgba(0, 160, 220, 0.6);
}

div {
  background-color: #FFCC00;
}

div {
  background-color: #FC0;
}

div {
  background-color: hsl() 
}

div {
  background-color: hsla(); 
}

background-image (背景圖片)

通過(guò) background-image 屬性允許在元素的背景中顯示圖像边琉。

默認(rèn)情況下，大圖不會(huì)縮小以適應(yīng)元素记劝，因此我們只能看到它的一部分变姨，而小圖則是平鋪以填充方框。
背景顏色和背景圖片可以同時(shí)設(shè)置厌丑，背景圖片會(huì)在背景顏色上方

.box {
  background-image: url(balloons.jpg);
}

background-repeat (控制背景平鋪)

使用 background-repeat 屬性可以控制圖像的平鋪行為

.box {
  background-image: url(balloons.jpg);
  background-repeat: no-repeat | repeat-x | repeat-y | repeat;
}

• no-repeat：不重復(fù)平鋪圖片定欧。
• repeat-x：水平重復(fù)平鋪圖片。
• repeat-y：垂直重復(fù)平鋪圖片蹄衷。
• repeat (默認(rèn))：在兩個(gè)方向重復(fù)平鋪圖片忧额。

background-size (控制背景圖片大小)

通過(guò) background-size屬性，它可以設(shè)置長(zhǎng)度或百分比值愧口，來(lái)調(diào)整圖像的大小以適應(yīng)背景睦番。

.box {
  background-image: url(balloons.jpg);
  background-size: <width> <height> | cover | contain;
}

• <width> <height> 分別設(shè)置圖片的寬度高度可以是長(zhǎng)度或百分比值，如果只設(shè)置一個(gè)值該值將會(huì)設(shè)置圖片寬度耍属，高度按圖片比例進(jìn)行縮放托嚣。
• cover: 保證寬高比的情況下放大圖片占滿盒子區(qū)域。在這種情況下厚骗，有些圖像可能會(huì)跳出盒子外示启。
• contain: 保證寬高比的情況下適應(yīng)盒子區(qū)域。在這種情況下领舰，有些可能在圖像的任何一邊或頂部和底部出現(xiàn)間隙夫嗓。

background-position (背景圖像定位)

background-position屬性允許您選擇背景圖像顯示在其應(yīng)用到的盒子中的位置。它使用的坐標(biāo)系中冲秽，框的左上角是(0,0)舍咖，框沿著水平(x)和垂直(y)軸定位。

.box {
  background-image: url(star.png);
  background-repeat: no-repeat;
  background-position: <x> <y>;
}

• <x> <y> 分別表示圖片相對(duì)盒子容器的x軸y軸的偏移量锉桑，可以是具體的距離長(zhǎng)度值排霉、百分比或者是關(guān)鍵字
  1. x軸支持的關(guān)鍵字：left center right
  2. y軸支持的關(guān)鍵字：top center bottom

例：

/* 上面允許的值可以混合使用 */
.box {
  background-position: 10px 50%;
}

.box {
  background-position: 10% bottom;
}

.box {
  background-position: top right;
}

background-attachment （背景附加）

通過(guò) background-attachment 可以指定當(dāng)容器內(nèi)容需要滾動(dòng)時(shí)，背景如何滾動(dòng)民轴。

.box {
  background-attachment : scroll | fixed | local;
}

• scroll: 使元素的背景在頁(yè)面滾動(dòng)時(shí)滾動(dòng)攻柠。如果滾動(dòng)了元素內(nèi)容球订，則背景不會(huì)移動(dòng)
• fixed: 此關(guān)鍵屬性值表示背景相對(duì)于視口固定。即使一個(gè)元素?fù)碛袧L動(dòng)機(jī)制瑰钮，背景也不會(huì)隨著元素的內(nèi)容滾動(dòng)冒滩。
• local: 這個(gè)值是后來(lái)添加的(它只在Internet Explorer 9+中受支持，而其他的在IE4+中受支持)浪谴， 使元素的背景在頁(yè)面滾動(dòng)時(shí)或滾動(dòng)了元素內(nèi)容時(shí)背景都會(huì)滾動(dòng)旦部。

background-origin (背景定位)

background-origin 屬性規(guī)定 background-position 屬性相對(duì)于什么位置來(lái)定位。
注意：如果背景圖像的 background-attachment 屬性為 "fixed"较店，則該屬性沒(méi)有效果。

.box {
  background-origin: padding-box | border-box | content-box;
}

• padding-box (默認(rèn))： 背景圖像相對(duì)于內(nèi)邊距框左上角來(lái)定位容燕。
• border-box： 背景圖像相對(duì)于邊框盒左上角來(lái)定位梁呈。
• content-box：背景圖像相對(duì)于內(nèi)容框左上角來(lái)定位。

background-clip (背景的繪制區(qū)域)

background-clip 屬性規(guī)定背景的繪制區(qū)域蘸秘。

.box {
  background-clip:: padding-box | border-box | content-box;
}

• padding-box (默認(rèn))： 背景繪制區(qū)域包含padding content官卡。
• border-box： 背景繪制區(qū)域包含border padding content。
• content-box：背景繪制區(qū)域包含content醋虏。

background

background屬性是以下屬性的合并簡(jiǎn)寫形式：

1. background-color
2. background-image
3. background-attachment
4. background-position
5. background-size
6. background-repeat
7. background-origin
8. background-clip

注意：background一些規(guī)則寻咒，需要在簡(jiǎn)寫背景屬性時(shí)遵循，例如:

1. background-color 只能開頭指定颈嚼。
2. background-size 值只能包含在背景位置之后毛秘，用'/'字符分隔，例如：center/80%阻课。
3. 不需要設(shè)置的屬性可以省略

例：

.box {
  background: yellow url(big-star.png)  fixed center center / 400px 200px no-repeat;
}
   

背景多重值

在一個(gè)元素中可以設(shè)置多個(gè)背景叫挟，在單個(gè)屬性值中指定多個(gè)background-image值，用逗號(hào)分隔每個(gè)值限煞。

例：

.box {
    background-image: url(image1.png), url(image2.png), url(image3.png), url(image1.png);
    background-repeat: no-repeat, repeat-x, repeat;
    background-position: 10px 20px,  top right;
}

注意：background簡(jiǎn)寫屬性同樣允許您一次設(shè)置所有不同的屬性抹恳。

例：

.box {
  background:   
    url(image3.png) center center / 400px 200px no-repeat,
    url(big-star.png) center no-repeat, 
    pink url(small-star.png) center bottom / contain no-repeat,
    
}
    

注意：background簡(jiǎn)寫多重值時(shí)背景顏色一定要放在最后一個(gè)多重值中。

文本相關(guān)屬性

介紹：在 CSS 中可以通過(guò)設(shè)置文本屬性定義文本的外觀署驻。如：改變文本的顏色奋献、字符間距，對(duì)齊文本旺上，裝飾文本瓶蚂，對(duì)文本進(jìn)行縮進(jìn)，等等抚官。

text-indent ( 縮進(jìn)文本 )

通過(guò)使用 text-indent 屬性扬跋，所有元素的第一行都可以縮進(jìn)一個(gè)給定的長(zhǎng)度，甚至該長(zhǎng)度可以是負(fù)值凌节。

這個(gè)屬性最常見的用途是將段落的首行縮進(jìn)钦听，下面的規(guī)則會(huì)使所有段落的首行縮進(jìn) 5 em：

p {
  text-indent: 5em;
}

注意：一般來(lái)說(shuō)洒试，可以為所有塊級(jí)元素應(yīng)用 text-indent，但無(wú)法將該屬性應(yīng)用于行內(nèi)元素朴上，圖像之類的替換元素上也無(wú)法應(yīng)用 text-indent 屬性垒棋。不過(guò)，如果一個(gè)塊級(jí)元素（比如段落）的首行中有一個(gè)圖像痪宰，它會(huì)隨該行的其余文本移動(dòng)叼架。

提示：如果想把一個(gè)行內(nèi)元素的第一行“縮進(jìn)”，可以用左內(nèi)邊距或外邊距創(chuàng)造這種效果衣撬。

text-align ( 文本對(duì)齊方式 )

該屬性通過(guò)指定行框與哪個(gè)點(diǎn)對(duì)齊乖订，從而設(shè)置塊級(jí)元素內(nèi)文本的水平對(duì)齊方式。

p {
    text-align: center;
}

• left(默認(rèn))：把文本排列到左邊具练。
• right： 把文本排列到右邊乍构。
• center： 把文本排列到中間。
• justify： 實(shí)現(xiàn)兩端對(duì)齊文本效果扛点。（常用于打印輸出）
• inherit： 規(guī)定應(yīng)該從父元素繼承 text-align 屬性的值哥遮。

letter-spacing ( 字母或者字符的間距 )

該屬性定義了在文本字符框之間插入多少空間。由于字符字形通常比其字符框要窄陵究，指定長(zhǎng)度值時(shí)眠饮，會(huì)調(diào)整字母之間通常的間隔。因此铜邮，normal 就相當(dāng)于值為 0仪召。

h1 {
letter-spacing:2px;
}

h2 {
letter-spacing:-3px;
}

• normal(默認(rèn))：規(guī)定字符間沒(méi)有額外的空間。
• length：定義字符間的固定空間（允許使用負(fù)值）松蒜。
• inherit：規(guī)定應(yīng)該從父元素繼承 letter-spacing 屬性的值返咱。

word-spacing ( 單詞的間距 )

該屬性定義元素中字之間插入多少空白符。針對(duì)這個(gè)屬性牍鞠，“字” 定義為由空白符包圍的一個(gè)字符串咖摹。如果指定為長(zhǎng)度值，會(huì)調(diào)整字之間的通常間隔难述；所以萤晴，normal 就等同于設(shè)置為 0。允許指定負(fù)長(zhǎng)度值胁后，這會(huì)讓字之間擠得更緊店读。

p {
  word-spacing:25px;
 }

• normal(默認(rèn))：定義單詞間的標(biāo)準(zhǔn)空間。
• length：定義單詞間的固定空間（允許使用負(fù)值）攀芯。
• inherit：規(guī)定應(yīng)該從父元素繼承 word-spacing 屬性的值屯断。

text-transform ( 文本轉(zhuǎn)換 )

CSS 里面的text-transform屬性來(lái)改變英文中字母的大小寫。它通常用來(lái)統(tǒng)一頁(yè)面里英文的顯示，且無(wú)需直接改變 HTML 元素中的文本殖演。

h1 {
  text-transform:uppercase;
}
h2 {
  text-transform:capitalize;
}
p {
  text-transform:lowercase;
}

• none (默認(rèn))：不改變文字氧秘。
• lowercase：定義無(wú)大寫字母，僅有小寫字母趴久。
• uppercase： 定義僅有大寫字母丸相。
• capitalize： 文本中的每個(gè)單詞以大寫字母開頭。
• initial： 使用默認(rèn)值
• inherit： 使用父元素的text-transform值彼棍。

text-decoration ( 文本裝飾 )

這個(gè)屬性允許對(duì)文本設(shè)置某種效果灭忠，如加下劃線。如果后代元素沒(méi)有自己的裝飾座硕，祖先元素上設(shè)置的裝飾會(huì)“延伸”到后代元素中弛作。

h1 {
  text-decoration:overline;
}
h2 {
  text-decoration:line-through;
}

• none (默認(rèn))： 定義標(biāo)準(zhǔn)的文本。
• underline：定義文本下的一條線华匾。
• overline：定義文本上的一條線缆蝉。
• line-through：定義穿過(guò)文本下的一條線。
• inherit：規(guī)定應(yīng)該從父元素繼承 text-decoration 屬性的值瘦真。

white-space ( 文本空白 )

white-space 屬性設(shè)置如何處理元素內(nèi)的空白。

p {
  white-space: nowrap
}

• normal(默認(rèn)):空白會(huì)被瀏覽器忽略黍瞧。
• pre: 空白會(huì)被瀏覽器保留诸尽。其行為方式類似 HTML 中的 <pre> 標(biāo)簽。
• nowrap: 文本不會(huì)換行印颤，文本會(huì)在在同一行上繼續(xù)您机，直到遇到
  標(biāo)簽為止。
• pre-wrap: 保留空白符序列年局，但是正常地進(jìn)行換行际看。
• pre-line: 合并空白符序列，但是保留換行符矢否。
• inherit: 規(guī)定應(yīng)該從父元素繼承 white-space 屬性的值仲闽。

text-overflow

CSS 屬性確定如何向用戶發(fā)出未顯示的溢出內(nèi)容。它可以被剪切僵朗，顯示一個(gè)省略號(hào)或顯示一個(gè)自定義字符串赖欣。
[圖片上傳失敗...(image-26bc42-1623939781003)]

p {
    /* 要實(shí)現(xiàn)文本超出需要給容器一個(gè)固定大小后設(shè)置以下屬性 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

• clip：此為默認(rèn)值。這個(gè)關(guān)鍵字的意思是"在內(nèi)容區(qū)域的極限處截?cái)辔谋?验庙，因此在字符的中間可能會(huì)發(fā)生截?cái)喽ニ薄Ｈ绻愕哪繕?biāo)瀏覽器支持 text-overflow: ''，為了能在兩個(gè)字符過(guò)渡處截?cái)喾嘌Γ憧梢允褂靡粋€(gè)空字符串值 ('') 作為 text-overflow 屬性的值悴了。
• ellipsis：這個(gè)關(guān)鍵字的意思是“用一個(gè)省略號(hào) …來(lái)表示被截?cái)嗟奈谋尽薄＿@個(gè)省略號(hào)被添加在內(nèi)容區(qū)域中，因此會(huì)減少顯示的文本湃交。如果空間太小到連省略號(hào)都容納不下熟空，那么這個(gè)省略號(hào)也會(huì)被截?cái)唷?/li>

該屬性還有其他屬性值不常用我們就不在這里講解了

color ( 文本顏色 )

這個(gè)屬性設(shè)置了一個(gè)元素的前景色（在 HTML 表現(xiàn)中，就是元素文本的顏色）

p {
    color: #fc0
}

• color_name： 規(guī)定顏色值為顏色名稱的顏色（比如 red）巡揍。
• hex_number： 規(guī)定顏色值為十六進(jìn)制值的顏色（比如 #ff0000）痛阻。
• rgb_number： 規(guī)定顏色值為 rgb 代碼的顏色（比如 rgb(255,0,0)）。
• hsl_number： 規(guī)定顏色值為 rgb 代碼的顏色（比如 hsl(180,100%,50%)）腮敌。
• inherit： 規(guī)定應(yīng)該從父元素繼承顏色阱当。

line-height (行高)

該屬性設(shè)置行間的距離（行高）。該屬性會(huì)影響行框的布局糜工。在應(yīng)用到一個(gè)塊級(jí)元素時(shí)弊添，它定義了該元素中基線之間的最小距離而不是最大距離。不允許使用負(fù)值捌木。
[圖片上傳失敗...(image-f2f7e9-1623939781003)]

.small {
  line-height:90%
}

• normal(默認(rèn))：設(shè)置合理的行間距油坝。
• number：設(shè)置數(shù)字，此數(shù)字會(huì)與當(dāng)前的字體尺寸相乘來(lái)設(shè)置行間距刨裆。
• length：設(shè)置固定的行間距澈圈。
• %：基于當(dāng)前字體尺寸的百分比行間距。
• inherit： 規(guī)定應(yīng)該從父元素繼承 line-height 屬性的值帆啃。

字體相關(guān)

font-family ( 字體系列 )

font-family 規(guī)定元素的字體系列瞬女。

p {
  font-family:"Times New Roman",Georgia,Serif;
}

有兩種類型的字體系列名稱：
指定的系列名稱：具體字體的名稱，比如："times"努潘、"courier"诽偷、"arial"。
通常字體系列名稱：比如："serif"疯坤、"sans-serif"报慕、"cursive"、"fantasy"压怠、"monospace"

字體優(yōu)雅降級(jí):

使用某種特定的字體系列（Geneva）完全取決于用戶機(jī)器上該字體系列是否可用眠冈；這個(gè)屬性沒(méi)有指示任何字體下載。因此菌瘫，強(qiáng)烈推薦使用一個(gè)通用字體系列名作為后路洋闽。

所有瀏覽器都有幾種默認(rèn)字體。這些通用字體包括monospace突梦，serif和sans-serif诫舅。

當(dāng)字體不可用，你可以告訴瀏覽器通過(guò) “降級(jí)” 去使用其他字體宫患。

例如刊懈，如果你想將一個(gè)元素的字體設(shè)置成Helvetica，當(dāng)Helvetica不可用時(shí)，降級(jí)使用sans-serif字體虚汛，那么可以這樣寫：

    p {
             font-family: Helvetica, sans-serif;
    }

通用字體名字不區(qū)分大小寫匾浪。同時(shí)，也不需要使用引號(hào)卷哩，因?yàn)樗鼈兪?CSS 關(guān)鍵字蛋辈。

font-style ( 字體風(fēng)格 )

font-style 屬性定義字體的風(fēng)格,設(shè)置使用斜體、傾斜或正常字體将谊。斜體字體通常定義為字體系列中的一個(gè)單獨(dú)的字體

p.normal {
  font-style:normal;
}
p.italic {
  font-style: italic;
}
p.oblique {
  font-style: oblique;
}

• normal (默認(rèn)):瀏覽器顯示一個(gè)標(biāo)準(zhǔn)的字體樣式冷溶。
• italic： 瀏覽器會(huì)顯示一個(gè)斜體的字體樣式。
• oblique： 瀏覽器會(huì)顯示一個(gè)傾斜的字體樣式尊浓。
• inherit： 規(guī)定應(yīng)該從父元素繼承字體樣式逞频。

注意：Italic是使用了文字本身的斜體字體，oblique是讓沒(méi)有斜體字體的文字做傾斜處理栋齿。所以有少量的不常用字體沒(méi)有斜體屬性苗胀，如果我們使用Italic則會(huì)沒(méi)有效果。

font-variant ( 字體變形 )

屬性設(shè)置小型大寫字母的字體顯示文本瓦堵，這意味著所有的小寫字母均會(huì)被轉(zhuǎn)換為大寫基协，但是所有使用小型大寫字體的字母與其余文本相比，其字體尺寸更小菇用。

p.small {
  font-variant:small-caps;
}

• normal (默認(rèn)值)：瀏覽器會(huì)顯示一個(gè)標(biāo)準(zhǔn)的字體澜驮。
• small-caps：瀏覽器會(huì)顯示小型大寫字母的字體。
• inherit：規(guī)定應(yīng)該從父元素繼承 font-variant 屬性的值刨疼。

font-weight ( 字體加粗 )

font-weight 屬性設(shè)置文本的粗細(xì)。該屬性用于設(shè)置顯示元素的文本中所用的字體加粗鹅龄。

p.normal {
  font-weight: normal;
}
p.thick {
  font-weight: bold;
}
p.thicker {
  font-weight: 900;
}

• normal(默認(rèn)值)：定義標(biāo)準(zhǔn)的字符揩慕。
• bold： 定義粗體字符。
• bolder： 定義更粗的字符扮休。
• lighter： 定義更細(xì)的字符迎卤。
• 100~900： 定義由粗到細(xì)的字符。400 等同于 normal玷坠，而 700 等同于 bold蜗搔。(該屬性值只有整百)
• inherit： 規(guī)定應(yīng)該從父元素繼承字體的粗細(xì)。

字體粗細(xì)屬性是根據(jù)用戶電腦上安裝的字體相應(yīng)匹配改變的八堡。在很多情況下樟凄，由于系統(tǒng)作了最相近的匹配，因此看不出不同的 font-weight 值有什么區(qū)別兄渺。

font-size ( 字體大小 )

該屬性設(shè)置元素的字體大小缝龄。注意，實(shí)際上它設(shè)置的是字體中字符框的高度；實(shí)際的字符字形可能比這些框高或矮（通常會(huì)矮）叔壤。

h1 {
  font-size: 250%;
}
h2 {
  font-size: 2rem;
}
p {
font-size: 18px;
}

• length：把 font-size 設(shè)置為一個(gè)固定的值瞎饲。
• %： 把 font-size 設(shè)置為基于父元素的一個(gè)百分比值。

font ( 字體簡(jiǎn)寫方式 )

font 簡(jiǎn)寫屬性在一個(gè)聲明中設(shè)置所有字體屬性炼绘。此屬性可以設(shè)置："line-height"指定行間距嗅战。

可以按順序設(shè)置如下屬性：

1. font-style
2. font-variant
3. font-weight
4. font-size/line-height
5. font-family

p.ex1 {
  font:italic arial,sans-serif;
}

p.ex2 {
  font:italic bold 12px arial,sans-serif;
}

p.ex3 {
  font:italic bold 12px/20px arial,sans-serif;
}

可以不設(shè)置其中的某個(gè)值，比如 font:100% verdana; 也是允許的俺亮。未設(shè)置的屬性會(huì)使用其默認(rèn)值驮捍。