CSS****屬性的官方文檔
? CSS****官方文檔地址
? CSS****推薦文檔地址:
? 由于瀏覽器版本、****CSS****版本等問題，查詢某些CSS是否可用:
可以到https://caniuse.com/查詢CSS屬性的可用性;
這個(gè)網(wǎng)站在后續(xù)的browserlist工具中我們再詳細(xì)說明;
目前需要掌握的****CSS****屬性
? 要想深刻理解所有常用****CSS****屬性窿锉，最好先學(xué)會以下幾個(gè)最基礎(chǔ)最常用的CSS屬性
font-size:文字大小
color:前景色(文字顏色)
background-color:背景色
width :寬度
height:高度
CSS屬性 - background-color
? background-color決定背景色
CSS屬性 - color
? color屬性用來設(shè)置文本內(nèi)容的前景色
- 包括文字既穆、裝飾線准脂、邊框饿悬、外輪廓等的顏色
CSS屬性 – text
CSS屬性 – text-decoration(常用)
? text-decoration用于設(shè)置文字的裝飾線
- decoration是裝飾/裝飾品的意思;
? text-decoration有如下常見取值:
- none:無任何裝飾線
? 可以去除a元素默認(rèn)的下劃線 - underline:下劃線
- overline: 上劃線
- line-through:中劃線(刪除線)
? a元素有下劃線的本質(zhì)是被添加了text-decoration屬性
text-transform(一般)
? text-transform用于設(shè)置文字的大小寫轉(zhuǎn)換
- Transform單詞是使變形/變換(形變);
? text-transform有幾個(gè)常見的值:
- capitalize:(使...首字母大寫, 資本化的意思)將每個(gè)單詞的首字符變?yōu)榇髮?/li>
- uppercase:(大寫字母)將每個(gè)單詞的所有字符變?yōu)榇髮?/li>
- lowercase:(小寫字母)將每個(gè)單詞的所有字符變?yōu)樾?/li>
- none:沒有任何影響
? 實(shí)際開發(fā)中用JavaScript代碼轉(zhuǎn)化的更多.
text-indent(一般)
? text-indent用于設(shè)置第一行內(nèi)容的縮進(jìn)
? text-indent: 2em; 剛好是縮進(jìn)2個(gè)文字
text-align(重要)
? text-align: 直接翻譯過來設(shè)置文本的對齊方式;
? MDN: 定義行內(nèi)內(nèi)容(例如文字)如何相對它的塊父元素對齊;
? 常用的值
- left:左對齊
- right:右對齊
- center:正中間顯示
- justify:兩端對齊
letter-spacing刹枉、word-spacing(一般)
? letter-spacing叽唱、word-spacing分別用于設(shè)置字母、單詞之間的間距
- 默認(rèn)是0微宝，可以設(shè)置為負(fù)數(shù)
CSS屬性-字體
font-size(重要)
? font-size決定文字的大小
? 常用的設(shè)置
- 具體數(shù)值+單位
? 比如100px
? 也可以使用em單位(不推薦):1em代表100%棺亭，2em代表200%，0.5em代表50% - 百分比
? 基于父元素的font-size計(jì)算蟋软，比如50%表示等于父元素font-size的一半
font-family (重要, 不過一般僅設(shè)置一次)
? font-family用于設(shè)置文字的字體名稱
- 可以設(shè)置1個(gè)或者多個(gè)字體名稱;
- 瀏覽器會選擇列表中第一個(gè)該計(jì)算機(jī)上有安裝的字體;
- 或者是通過 @font-face 指定的可以直接下載的字體侦铜。
? 淘寶使用的字體:
font-weight(重要)
? font-weight用于設(shè)置文字的粗細(xì)(重量)
? 常見的取值:
- 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 :每一個(gè)數(shù)字表示一個(gè)重量
- normal:等于400
- bold:等于700
? strong专甩、b钟鸵、h1~h6等標(biāo)簽的font-weight默認(rèn)就是bold
font-style(一般)
? font-style用于設(shè)置文字的常規(guī)钉稍、斜體顯示
- normal:常規(guī)顯示
- italic(斜體):用字體的斜體顯示(通常會有專門的字體)
- oblique(傾斜):文本傾斜顯示(僅僅是讓文字傾斜)
? em、i棺耍、cite贡未、address、var蒙袍、dfn等元素的font-style默認(rèn)就是italic
font-variant(了解)
? font-variant可以影響小寫字母的顯示形式
- variant是變形的意思;
? 可以設(shè)置的值如下
- normal:常規(guī)顯示
- small-caps:將小寫字母替換為縮小過的大寫字母
line-height(常用)
? line-height用于設(shè)置文本的行高
- 行高可以先簡單理解為一行文字所占據(jù)的高度
為什么文本需要行高?
line-height
? 行高的嚴(yán)格定義是:兩行文字基線(baseline)之間的間距
? 基線(baseline):與小寫字母x最底部對齊的線
line-height
? 注意區(qū)分height和line-height的區(qū)別
- height:元素的整體高度
- line-height:元素中每一行文字所占據(jù)的高度
? 應(yīng)用實(shí)例:假設(shè)div中只有一行文字俊卤，如何讓這行文字在div內(nèi)部垂直居中
- 讓line-height等同于height
font
? font是一個(gè)縮寫屬性
font 屬性可以用來作為 font-style, font-variant, font-weight, font-size, line-height 和 font-family 屬性的簡寫;
font-style font-variant font-weight font-size/line-height font-family
? 規(guī)則:
font-style、font-variant害幅、font-weight可以隨意調(diào)換順序消恍，也可以省略
/line-height可以省略，如果不省略以现，必須跟在font-size后面
font-size狠怨、font-family不可以調(diào)換順序，不可以省略
CSS選擇器(selector)
? 開發(fā)中經(jīng)常需要找到特定的網(wǎng)頁元素進(jìn)行設(shè)置樣式
- 思考:如何找到特定的那個(gè)元素?
? 什么是CSS選擇器
- 按照一定的規(guī)則選出符合條件的元素邑遏，為之添加CSS樣式
? 選擇器的種類繁多佣赖，大概可以這么歸類
- 通用選擇器(universal selector)
- 元素選擇器(type selectors)
- 類選擇器(class selectors)
- id選擇器(id selectors)
- 屬性選擇器(attribute selectors)
- 組合(combinators)
- 偽類(pseudo-classes)
- 偽元素(pseudo-elements)
通用選擇器
? 通用選擇器(universal selector)
- 所有的元素都會被選中;
? 一般用來給所有元素作一些通用性的設(shè)置
- 比如內(nèi)邊距、外邊距;
- 比如重置一些內(nèi)容;
? 效率比較低记盒，盡量不要使用;
簡單選擇器
? 簡單選擇器是開發(fā)中用的最多的選擇器:
- 元素選擇器(type selectors), 使用元素的名稱;
- 類選擇器(class selectors), 使用 .類名 ;
- id選擇器(id selectors), 使用 #id;
id注意事項(xiàng)
? 一個(gè)HTML文檔里面的id值是唯一的憎蛤，不能重復(fù)
id值如果由多個(gè)單詞組成，單詞之間可以用中劃線-纪吮、下劃線_連接俩檬，也可以使用駝峰標(biāo)識
最好不要用標(biāo)簽名作為id值
? 中劃線又叫連字符(hyphen)
屬性選擇器(attribute selectors)
? 擁有某一個(gè)屬性 [att]
? 屬性等于某個(gè)值 [att=val]
? 其他了解的(不用記)
[attr*=val]: 屬性值包含某一個(gè)值val;
[attr^=val]: 屬性值以val開頭;
[attr$=val]: 屬性值以val結(jié)尾;
[attr|=val]: 屬性值等于val或者以val開頭后面緊跟連接符-;
[attr~=val]: 屬性值包含val, 如果有其他值必須以空格和val分割;
后代選擇器(descendant combinator)
? 后代選擇器一: 所有的后代(直接/間接的后代)
- 選擇器之間以空格分割
? 后代選擇器二: 直接子代選擇器(必須是直接自帶)
- 選擇器之間以 > 分割;
兄弟選擇器(sibling combinator)
? 兄弟選擇器一:相鄰兄弟選擇器
- 使用符號 + 連接
? 兄弟選擇器二: 普遍兄弟選擇器 ~
- 使用符號 ~ 連接
選擇器組 – 交集選擇器
? 交集選擇器: 需要同時(shí)符合兩個(gè)選擇器條件(兩個(gè)選擇器緊密連接)
- 在開發(fā)中通常為了精準(zhǔn)的選擇某一個(gè)元素;
? 并集選擇器: 符合一個(gè)選擇器條件即可(兩個(gè)選擇器以,號分割)
- 在開發(fā)中通常為了給多個(gè)元素設(shè)置相同的樣式;
認(rèn)識偽類
? 什么是偽類呢?
Pseudo-classes: 翻譯過來是偽類;
偽類是選擇器的一種，它用于選擇處于特定狀態(tài)的元素;
? 比如我們經(jīng)常會實(shí)現(xiàn)的: 當(dāng)手指放在一個(gè)元素上時(shí), 顯示另外一個(gè)顏色;
偽類(pseudo-classes)
? 常見的偽類有
-
1.動態(tài)偽類(dynamic pseudo-classes)
- :link碾盟、:visited棚辽、:hover、:active巷疼、:focus
-
2.目標(biāo)偽類(target pseudo-classes)
- :target
-
3.語言偽類(language pseudo-classes)
- :lang( )
-
4.元素狀態(tài)偽類(UI element states pseudo-classes)
- :enabled晚胡、:disabled、:checked
-
5.結(jié)構(gòu)偽類(structural pseudo-classes)
:nth-child( )嚼沿、:nth-last-child( )估盘、:nth-of-type( )、:nth-last-of-type( )
:first-child骡尽、:last-child遣妥、:first-of-type、:last-of-type
:root攀细、:only-child箫踩、:only-of-type爱态、:empty
-
6.否定偽類(negation pseudo-classes)
- :not()
所有的偽類: https://developer.mozilla.org/zh-CN/docs/Web/CSS/Pseudo-classes
動態(tài)偽類(dynamic pseudo-classes)
? 使用舉例
a:link 未訪問的鏈接
a:visited 已訪問的鏈接
a:hover 鼠標(biāo)挪動到鏈接上(重要)
a:active 激活的鏈接(鼠標(biāo)在鏈接上長按住未松開)
? 使用注意
:hover必須放在:link和:visited后面才能完全生效
:active必須放在:hover后面才能完全生效
所以建議的編寫順序是 :link、:visited境钟、:hover锦担、:active
? 除了a元素，:hover慨削、:active也能用在其他元素上
動態(tài)偽類 - :focus
? :focus指當(dāng)前擁有輸入焦點(diǎn)的元素(能接收鍵盤輸入)
- 文本輸入框一聚焦后洞渔，背景就會變紅色
? 因?yàn)殒溄觓元素可以被鍵盤的****Tab****鍵選中聚焦，所以:focus也適用于a元素
? 動態(tài)偽類編寫順序建議為
- :link缚态、:visited磁椒、:focus、:hover玫芦、:active
? 直接給a元素設(shè)置樣式浆熔，相當(dāng)于給a元素的所有動態(tài)偽類都設(shè)置了
- 相當(dāng)于a:link、a:visited桥帆、a:hover医增、a:active、a:focus的color都是red
偽元素(pseudo-elements)
? 常用的偽元素有
:first-line环葵、::first-line
:first-letter调窍、::first-letter
:before、::before
:after张遭、::after
? 為了區(qū)分偽元素和偽類邓萨，建議偽元素使用2個(gè)冒號，比如::first-line
偽元素 - ::first-line - ::first-letter(了解)
? ::first-line可以針對首行文本設(shè)置屬性
? ::first-letter可以針對首字母設(shè)置屬性
偽元素 - ::before和::after(常用)
? ::before和::after用來在一個(gè)元素的內(nèi)容之前或之后插入其他內(nèi)容(可以是文字菊卷、圖片)
- 常通過 content 屬性來為一個(gè)元素添加修飾性的內(nèi)容缔恳。
CSS繼承-層疊-元素類型
CSS的屬性繼承
? CSS的某些屬性具有繼承性(Inherited):
如果一個(gè)屬性具備繼承性, 那么在該元素上設(shè)置后, 它的后代元素都可以繼承這個(gè)屬性;
當(dāng)然, 如果后代元素自己有設(shè)置該屬性, 那么優(yōu)先使用后代元素自己的屬性(不管繼承過來的屬性權(quán)重多高);
? 如何知道一個(gè)屬性是否具有繼承性呢?
常見的font-size/font-family/font-weight/line-height/color/text-align都具有繼承性;
這些不用刻意去記, 用的多自然就記住了;
? 另外要多學(xué)會查閱文檔, 文檔中每個(gè)屬性都有標(biāo)明其繼承性的:
tips:注意(了解):繼承過來的是計(jì)算值, 而不是設(shè)置值
常見的繼承屬性有哪些呢?(不用記)
CSS屬性的層疊
? CSS的翻譯是層疊樣式表, 什么是層疊呢?
- 對于一個(gè)元素來說, 相同一個(gè)屬性我們可以通過不同的選擇器給它進(jìn)行多次設(shè)置;
- 那么屬性會被一層層覆蓋上去;
- 但是最終只有一個(gè)會生效;
? 那么多個(gè)樣式屬性覆蓋上去, 哪一個(gè)會生效呢?
判斷一: 選擇器的權(quán)重, 權(quán)重大的生效, 根據(jù)權(quán)重可以判斷出優(yōu)先級;
判斷二: 先后順序, 權(quán)重相同時(shí), 后面設(shè)置的生效;
選擇器的權(quán)重
? 按照經(jīng)驗(yàn)，為了方便比較****CSS****屬性的優(yōu)先級洁闰，可以給CSS屬性所處的環(huán)境定義一個(gè)權(quán)值(權(quán)重)
- !important:10000
- 內(nèi)聯(lián)樣式:1000
- id選擇器:100
- 類選擇器歉甚、屬性選擇器、偽類:10
- 元素選擇器扑眉、偽元素:1
- 通配符:0
HTML元素的類型
? 我們會經(jīng)常提到div是****塊級元素****會獨(dú)占一行, span是****行內(nèi)級元素****會在同一行顯示.
- 到底什么是塊級元素, 什么是行內(nèi)級元素呢?
? HTML定義元素類型的思路:
HTML元素有很多, 比如h元素/p元素/div元素/span元素/img元素/a元素等等;
-
當(dāng)我們把這個(gè)元素放到頁面上時(shí), 這個(gè)元素到底占據(jù)頁面中一行多大的空間呢?
? 為什么我們這里只說一行呢? 因?yàn)榇怪狈较虻母叨韧ǔＪ莾?nèi)容決定的;
比如一個(gè)h1元素的標(biāo)題, 我們必然是希望它獨(dú)占一行的, 其他的內(nèi)容不應(yīng)該和我的標(biāo)題放在一起;
比如一個(gè)p元素的段落, 必然也應(yīng)該獨(dú)占一行, 其他的內(nèi)容不應(yīng)該和我的段落放在一起;
而類似于img/span/a元素, 通常是對內(nèi)容的某一個(gè)細(xì)節(jié)的特殊描述, 沒有必要獨(dú)占一行;
? 所以, 為了區(qū)分哪些元素需要獨(dú)占一行, 哪些元素不需要獨(dú)占一行, HTML將元素區(qū)分(本質(zhì)是通過****CSS****的)成了兩類
塊級元素(block-level elements): 獨(dú)占父元素的一行
行內(nèi)級元素(inline-level elements):多個(gè)行內(nèi)級元素可以在父元素的同一行中顯示
通過CSS修改元素類型
? 前面我們說過, 事實(shí)上元素沒有本質(zhì)的區(qū)別:
div是塊級元素, span是行內(nèi)級元素;
div之所以是塊級元素僅僅是因?yàn)闉g覽器默認(rèn)設(shè)置了display屬性而已;
? 那么我們是否可以通過display來改變元素的特性呢?
? 當(dāng)然可以!
CSS屬性 - display
? CSS中有個(gè)display屬性纸泄，能修改元素的顯示類型，有4個(gè)常用值
- block:讓元素顯示為塊級元素
- inline:讓元素顯示為行內(nèi)級元素
- inline-block:讓元素同時(shí)具備行內(nèi)級腰素、塊級元素的特征
- none:隱藏元素
? 事實(shí)上display還有其他的值, 比如flex, 后續(xù)會專門學(xué)習(xí);
display值的特性(非常重要)
? block元素:
獨(dú)占父元素的一行
可以隨意設(shè)置寬高
高度默認(rèn)由內(nèi)容決定
? inline-block元素:
跟其他行內(nèi)級元素在同一行顯示
可以隨意設(shè)置寬高
可以這樣理解
? 對外來說聘裁，它是一個(gè)行內(nèi)級元素
? 對內(nèi)來說，它是一個(gè)塊級元素
? inline:
跟其他行內(nèi)級元素在同一行顯示; ? 不可以隨意設(shè)置寬高;
寬高都由內(nèi)容決定;
編寫HTML時(shí)的注意事項(xiàng)
? 塊級元素弓千、inline-block元素
一般情況下衡便，可以包含其他任何元素(比如塊級元素、行內(nèi)級元素、inline-block元素)
特殊情況镣陕，p元素不能包含其他塊級元素
? 行內(nèi)級元素(比如a谴餐、span、strong等)
- 一般情況下呆抑，只能包含行內(nèi)級元素
元素隱藏方法
? 方法一: display設(shè)置為none
- 元素不顯示出來, 并且也不占據(jù)位置, 不占據(jù)任何空間(和不存在一樣);
? 方法二: visibility設(shè)置為hidden
設(shè)置為hidden, 雖然元素不可見, 但是會占據(jù)元素應(yīng)該占據(jù)的空間;
默認(rèn)為visible, 元素是可見的;
? 方法三: rgba設(shè)置顏色, 將a的值設(shè)置為0
- rgba的a設(shè)置的是alpha值, 可以設(shè)置透明度, 不影響子元素;
? 方法四: opacity設(shè)置透明度, 設(shè)置為0
- 設(shè)置整個(gè)元素的透明度, 會影響所有的子元素;
CSS****屬性 - overflow
? overflow****用于控制內(nèi)容溢出時(shí)的行為
visible:溢出的內(nèi)容照樣可見
hidden:溢出的內(nèi)容直接裁剪
scroll:溢出的內(nèi)容被裁剪岂嗓，但可以通過滾動機(jī)制查看
會一直顯示滾動條區(qū)域，滾動條區(qū)域占用的空間屬于width理肺、height
auto:自動根據(jù)內(nèi)容是否溢出來決定是否提供滾動機(jī)制
CSS樣式不生效技巧
? 為何有時(shí)候編寫的CSS屬性不好使摄闸，有可能是因?yàn)?/strong>
選擇器的優(yōu)先級太低
選擇器沒選中對應(yīng)的元素
CSS屬性的使用形式不對
? 元素不支持此CSS屬性，比如span默認(rèn)是不支持width和height的
? 瀏覽器不支持此CSS屬性妹萨，比如舊版本的瀏覽器不支持一些css module3的某些屬性
? 被同類型的CSS屬性覆蓋，比如font覆蓋font-size
? 建議 充分利用瀏覽器的開發(fā)者工具進(jìn)行調(diào)試(增加炫欺、修改樣式)乎完、查錯(cuò)
CSS盒子模型
認(rèn)識盒子
? 生活中, 我們經(jīng)常會看到各種各樣的盒子:
HTML每個(gè)元素都是盒子
? 事實(shí)上, 我們可以把HTML每一個(gè)元素看出一個(gè)個(gè)的盒子:
盒子模型(Box Model)
? HTML中的每一個(gè)元素都可以看做是一個(gè)盒子，如下圖所示品洛，可以具備這4個(gè)屬性
-
內(nèi)容(content)
- 元素的內(nèi)容width/height
-
內(nèi)邊距(padding)
- 元素和內(nèi)容之間的間距
-
邊框(border)
- 元素自己的邊框
-
外邊距(margin)
- 元素和其他元素之間的間距
盒子模型的四邊
? 因?yàn)楹凶佑兴倪? 所以margin/padding/border都包括top/right/bottom/left四個(gè)邊:
在瀏覽器的開發(fā)工具中
內(nèi)容 – 寬度和高度
? 設(shè)置內(nèi)容是通過寬度和高度設(shè)置的:
寬度設(shè)置: width
高度設(shè)置: height
? 注意: 對于行內(nèi)級非替換元素來說, 設(shè)置寬高是無效的!
? 另外我們還可以設(shè)置如下屬性:
min-width:最小寬度树姨，無論內(nèi)容多少，寬度都大于或等于min-width
max-width:最大寬度桥状，無論內(nèi)容多少帽揪，寬度都小于或等于max-width
移動端適配時(shí), 可以設(shè)置最大寬度和最小寬度;
? 下面兩個(gè)屬性不常用:
min-height:最小高度，無論內(nèi)容多少辅斟，高度都大于或等于min-height
max-height:最大高度转晰，無論內(nèi)容多少，高度都小于或等于max-height
內(nèi)邊距 - padding
? padding屬性****用于設(shè)置盒子的內(nèi)邊距, 通常用于設(shè)置****邊框和內(nèi)容之間的間距****;
? padding包括四個(gè)方向, 所以有如下的取值:
padding-top:上內(nèi)邊距
padding-right:右內(nèi)邊距
padding-bottom:下內(nèi)邊距
padding-left:左內(nèi)邊距
? padding單獨(dú)編寫是一個(gè)縮寫屬性:
padding-top士飒、padding-right查邢、padding-bottom、padding-left的簡寫屬性
padding縮寫屬性是從零點(diǎn)鐘方向開始, 沿著順時(shí)針轉(zhuǎn)動的, 也就是上右下左;
? padding并非必須是四個(gè)值, 也可以有其他值;
padding的其他值
邊框 - border
? border用于設(shè)置盒子的邊框:
? 邊框相對于content/padding/margin來說特殊一些:
邊框具備寬度width;
邊框具備樣式style;
邊框具備顏色color;
設(shè)置邊框的方式
? 邊框?qū)挾?/strong>
border-top-width酵幕、border-right-width扰藕、border-bottom-width、border-left-width
border-width是上面4個(gè)屬性的簡寫屬性
? 邊框顏色
border-top-color芳撒、border-right-color邓深、border-bottom-color、border-left-color
border-color是上面4個(gè)屬性的簡寫屬性
? 邊框樣式
border-top-style笔刹、border-right-style芥备、border-bottom-style、border-left-style
border-style是上面4個(gè)屬性的簡寫屬性
邊框的樣式設(shè)置值
? 邊框的樣式有很多, 我們可以了解如下的幾個(gè):
groove:凹槽, 溝槽, 邊框看上去好象是雕刻在畫布之內(nèi)
ridge:山脊, 和grove相反徘熔，邊框看上去好象是從畫布中凸出來
同時(shí)設(shè)置的方式
? 如果我們相對某一邊同時(shí)設(shè)置 寬度 樣式 顏色, 可以進(jìn)行如下設(shè)置:
Border-top
Border-right
border-bottom
Border-left
border:統(tǒng)一設(shè)置4個(gè)方向的邊框
? 邊框顏色门躯、寬度、樣式的編寫順序任意
圓角 – border-radius
? border-radius用于設(shè)置盒子的圓角
? border-radius常見的值:
數(shù)值: 通常用來設(shè)置小的圓角, 比如6px;
百分比: 通常用來設(shè)置一定的弧度或者圓形;
border-radius補(bǔ)充
? border-radius事實(shí)上是一個(gè)縮寫屬性:
將這四個(gè)屬性 border-top-left-radius酷师、border-top-right-radius讶凉、border-bottom-right-radius染乌，和 border-bottom- left-radius 簡寫為一個(gè)屬性。
開發(fā)中比較少見一個(gè)個(gè)圓角設(shè)置;
? 如果一個(gè)元素是正方形, 設(shè)置border-radius大于或等于50%時(shí)懂讯，就會變成一個(gè)圓.
外邊距 - margin
? margin屬性****用于設(shè)置盒子的****外邊距****, 通常用于****元素和元素之間的間距****;
? margin包括四個(gè)方向, 所以有如下的取值:
margin-top:上內(nèi)邊距
margin-right:右內(nèi)邊距
margin-bottom:下內(nèi)邊距
margin-left:左內(nèi)邊距
? margin單獨(dú)編寫是一個(gè)縮寫屬性:
margin-top荷憋、margin-right、margin-bottom褐望、margin-left的簡寫屬性
margin縮寫屬性是從零點(diǎn)鐘方向開始, 沿著順時(shí)針轉(zhuǎn)動的, 也就是上右下左;
? margin也并非必須是四個(gè)值, 也可以有其他值;
margin的其他值
上下margin的傳遞
? margin-top傳遞
- 如果塊級元素的頂部線和父元素的頂部線重疊勒庄，那么這個(gè)塊級元素的margin-top值會傳遞給父元素
?margin-bottom傳遞
- 如果塊級元素的底部線和父元素的底部線重寫，并且父元素的高度是auto瘫里，那么這個(gè)塊級元素的margin-bottom值會傳遞給父元素
? 如何防止出現(xiàn)傳遞問題?
給父元素設(shè)置padding-top\padding-bottom
給父元素設(shè)置border
觸發(fā)BFC: 設(shè)置overflow為auto
?建議
margin一般是用來設(shè)置兄弟元素之間的間距
padding一般是用來設(shè)置父子元素之間的間距
上下margin的折疊
? 垂直方向上相鄰的2個(gè)margin(margin-top实蔽、margin-bottom)有可能會合并為1個(gè)margin，這種現(xiàn)象叫做collapse(折疊)
? 水平方向上的margin(margin-left谨读、margin-right)永遠(yuǎn)不會collapse
? 折疊后最終值的計(jì)算規(guī)則
- 兩個(gè)值進(jìn)行比較局装，取較大的值
? 如何防止margin collapse ?
- 只設(shè)置其中一個(gè)元素的margin
上下margin折疊的情況
? 兩個(gè)兄弟塊級元素****之間****上下margin的折疊
? 父子塊級元素****之間****margin的折疊
外輪廓 - outline
? outline表示元素的外輪廓
不占用空間
默認(rèn)顯示在border的外面
? outline相關(guān)屬性有
outline-width: 外輪廓的寬度
outline-style:取值跟border的樣式一樣，比如solid劳殖、dotted等
outline-color: 外輪廓的顏色
outline:outline-width铐尚、outline-style、outline-color的簡寫屬性哆姻，跟border用法類似
? 應(yīng)用實(shí)例
- 去除a元素宣增、input元素的focus輪廓效果
盒子陰影 – box-shadow
? box-shadow屬性可以設(shè)置一個(gè)或者多個(gè)陰影
每個(gè)陰影用<shadow>表示
多個(gè)陰影之間用逗號,隔開，從前到后疊加
? <shadow>的常見格式如下
第1個(gè)<length>:offset-x, 水平方向的偏移矛缨，正數(shù)往右偏移
第2個(gè)<length>:offset-y, 垂直方向的偏移爹脾，正數(shù)往下偏移
第3個(gè)<length>:blur-radius, 模糊半徑
第4個(gè)<length>:spread-radius, 延伸半徑
<color>:陰影的顏色，如果沒有設(shè)置劳景，就跟隨color屬性的顏色
inset:外框陰影變成內(nèi)框陰影
盒子陰影 – 在線查看
? 我們可以通過一個(gè)網(wǎng)站測試盒子的陰影:
文字陰影 - text-shadow
? text-shadow用法類似于box-shadow誉简，用于給文字添加陰影效果
? <shadow>的常見格式如下
- 相當(dāng)于box-shadow, 它沒有spread-radius的值;
? 我們可以通過一個(gè)網(wǎng)站測試文字的陰影:
行內(nèi)非替換元素的注意事項(xiàng)
? 以下屬性對行內(nèi)級非替換元素不起作用
- width、height盟广、margin-top闷串、margin-bottom
? 以下屬性對行內(nèi)級非替換元素的效果比較特殊
- padding-top、padding-bottom筋量、上下方向的border
CSS屬性 - box-sizing
? box-sizing用來設(shè)置盒子模型中寬高的行為
? content-box
- padding烹吵、border都布置在width、height外邊
? border-box
- padding桨武、border都布置在width肋拔、height里邊
box-sizing: content-box
? 元素的實(shí)際占用寬度 = border + padding + width
? 元素的實(shí)際占用高度 = border + padding + height
box-sizing: border-box
? 元素的實(shí)際占用寬度 = width
? 元素的實(shí)際占用高度 = height
IE盒子模型
元素的水平居中方案
? 在一些需求中，需要元素在父元素中水平居中顯示(父元素一般都是塊級元素呀酸、inline-block)
? 行內(nèi)級元素(包括inline-block元素)
- 水平居中:在父元素中設(shè)置text-align: center
? 塊級元素
- 水平居中:margin: 0 auto
CSS設(shè)置背景
認(rèn)識網(wǎng)頁的背景
? 在開發(fā)中, 為了讓網(wǎng)頁更加美觀, 我們經(jīng)常會設(shè)置各種各樣的背景:
- 我們前面已經(jīng)學(xué)習(xí)了如何設(shè)置背景顏色, 這里我們要學(xué)習(xí)設(shè)置背景的更多知識;
background-image
? background-image用于設(shè)置元素的背景圖片
- 會蓋在(不是覆蓋)background-color的上面
? 如果設(shè)置了多張圖片
- 設(shè)置的第一張圖片將顯示在最上面凉蜂，其他圖片按順序?qū)盈B在下面
? 注意:如果設(shè)置了背景圖片后，元素沒有具體的寬高，背景圖片是不會顯示出來的
background-repeat
? background-repeat用于設(shè)置背景圖片是否要平鋪
? 常見的設(shè)值有
repeat:平鋪
no-repeat:不平鋪
repeat-x:只在水平方向平鋪
repeat-y:只在垂直平方向平鋪
background-size
? background-size用于設(shè)置背景圖片的大小
auto:默認(rèn)值, 以背景圖本身大小顯示
cover:縮放背景圖窿吩，以完全覆蓋鋪滿元素,可能背景圖片部分看不見
contain:縮放背景圖茎杂，寬度或者高度鋪滿元素，但是圖片保持寬高比
<percentage>:百分比纫雁，相對于背景區(qū)(background positioning area)
length:具體的大小煌往，比如100px
background-position
? background-position用于設(shè)置背景圖片在水平、垂直方向上的具體位置
可以設(shè)置具體的數(shù)值 比如 20px 30px;
水平方向還可以設(shè)值:left轧邪、center刽脖、right
垂直方向還可以設(shè)值:top、center忌愚、bottom
如果只設(shè)置了1個(gè)方向曲管，另一個(gè)方向默認(rèn)是center
background-attachment
? background-attachment決定背景圖像的位置是在視口內(nèi)固定，或者隨著包含它的區(qū)塊滾動菜循。
? 可以設(shè)置以下3個(gè)值
scroll:此關(guān)鍵屬性值表示背景相對于元素本身固定翘地， 而不是隨著它的內(nèi)容滾動
local:此關(guān)鍵屬性值表示背景相對于元素的內(nèi)容固定。如果一個(gè)元素?fù)碛袧L動機(jī)制癌幕，背景將會隨著元素的內(nèi)容滾動.
fixed:此關(guān)鍵屬性值表示背景相對于視口固定。即使一個(gè)元素?fù)碛袧L動機(jī)制昧穿，背景也不會隨著元素的內(nèi)容滾動勺远。
background
? background是一系列背景相關(guān)屬性的簡寫屬性
? 常用格式是
? background-size可以省略，如果不省略时鸵，/background-size必須緊跟在background-position的后面
? 其他屬性也都可以省略胶逢，而且順序任意
background-image和img對比
? 利用background-image和img都能夠?qū)崿F(xiàn)顯示圖片的需求，在開發(fā)中該如何選擇?
?總結(jié)
img饰潜，作為網(wǎng)頁內(nèi)容的重要組成部分初坠，比如廣告圖片、LOGO圖片彭雾、文章配圖碟刺、產(chǎn)品圖片
background-image，可有可無薯酝。有半沽，能讓網(wǎng)頁更加美觀。無吴菠，也不影響用戶獲取完整的網(wǎng)頁內(nèi)容信息
