Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 第4-6章 css復(fù)合選擇器及特性、盒子模型、浮動與定位_第1頁
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 第4-6章 css復(fù)合選擇器及特性、盒子模型、浮動與定位_第2頁
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 第4-6章 css復(fù)合選擇器及特性、盒子模型、浮動與定位_第3頁
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 第4-6章 css復(fù)合選擇器及特性、盒子模型、浮動與定位_第4頁
Web前端技術(shù)HTML5+CSS3+響應(yīng)式設(shè)計(jì) 課件 第4-6章 css復(fù)合選擇器及特性、盒子模型、浮動與定位_第5頁
已閱讀5頁，還剩109頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

HTML+CSS網(wǎng)頁設(shè)計(jì)與制作第四章CSS復(fù)合選擇器及特性教學(xué)目標(biāo)根據(jù)需要合理的選用不同的選擇器掌握更多CSS選擇器的用法掌握CSS的主要特性4.1CSS組合選擇器

組合選擇器是以2個(gè)或多個(gè)基本選擇器為基礎(chǔ)，通過組合產(chǎn)生出新的選擇器，而這種組合通?？梢灾苯臃从吵鲞@些元素在文檔結(jié)構(gòu)中的相互位置關(guān)系。一、后代選擇器當(dāng)標(biāo)記發(fā)生嵌套時(shí)，內(nèi)層標(biāo)記就成為外層標(biāo)記的后代。

基本語法：selectorselector{property:value;……}其中selector為選擇器，property：value;為屬性值對。

例如：ulli{font-size:16px;}li是ul的后代，表示匹配所有嵌套在標(biāo)記<ul>中的<li>。

4.1CSS組合選擇器

一、后代選擇器<p><span>夏天</span></p><h3class=“test1”><span>秋天</span></h3>后代選擇器的定義在兩個(gè)選擇器之間用“空格”來描述可以減少class選擇器的使用，保持HTML文檔的簡潔可以實(shí)現(xiàn)更精準(zhǔn)地選擇需要設(shè)置樣式的對象4.1CSS組合選擇器

pspan{color:yellow;}.test1span{color:red;}二、子元素選擇器子元素選擇器描述的是父元素的下一級元素，在兩個(gè)選擇器之間用“>”來描述；基本語法：selector>selector{property:value;……}

例如：p>span{color:blue;}

這里p是span的父元素4.1CSS組合選擇器

后代選擇器和子元素選擇器只要是內(nèi)層嵌套的元素都是外層元素的后代，而子元素僅僅是指父元素的下一級元素4.1CSS組合選擇器

<body><ul>嵌套關(guān)系<li>后代選擇器</li><li>子元素選擇器</li></ul></body>ul、li都是body的后代

但只有ul是body的子元素li是body的后代，也是ul的后代但只是ul的子元素

案例：demo4-1.html4.1CSS組合選擇器

三、相鄰兄弟選擇器相鄰兄弟選擇器是指緊接在一個(gè)元素之后的元素，二者有相同的父元素，兩個(gè)選擇器之間用“+”來描述。

基本語法：selector+selector{property:value;……}

例如：h1+p{color:blue;}4.1CSS組合選擇器

三、相鄰兄弟選擇器<body><h1>望廬山瀑布</h1><h3>唐-李白</h3><p>日照香爐生紫煙，</p><p>遙看瀑布掛前川。</p><p>飛流直下三千尺，</p><p>疑是銀河落九天。</p></body>案例：demo4-2.htmlh3+p{ font-family:華文彩云;}4.1CSS組合選擇器

四、普通兄弟選擇器普通兄弟選擇器是指一個(gè)元素后面所有與該元素?fù)碛邢嗤冈氐男值埽ㄔ兀?，選擇器之間用“~”來描述。

基本語法：selector~selector{property:value;……}

例如：h3~p{font-family:華文彩云;}，前面案例中的4個(gè)<p>段落都是h3的普通兄弟，均會表現(xiàn)為“華為彩云”的字體樣式。4.2偽類選擇器

網(wǎng)頁中某些元素在用戶的交互行為作用下狀態(tài)是可以發(fā)生變化的，例如元素獲得焦點(diǎn)時(shí)、元素被鼠標(biāo)懸停時(shí)等等，還有一些元素在文檔中具有一些特殊的結(jié)構(gòu)位置，例如表格中所有的單數(shù)行等等，CSS偽類就是描述元素的特殊狀態(tài)或特殊結(jié)構(gòu)。4.2偽類選擇器

偽類的名稱不區(qū)分大小寫，但要以冒號“：”開頭。偽類需要與CSS選擇器結(jié)合成為偽類選擇器來使用，將某種特定狀態(tài)或特殊結(jié)構(gòu)下的元素作為需要設(shè)置樣式的對象。

偽類選擇器的基本語法：selector:pseudo-class{property:value;…}:pseudo-class表示偽類的名稱，偽類選擇器分為狀態(tài)偽類和結(jié)構(gòu)性偽類。4.2偽類選擇器

一、狀態(tài)偽類（1）anchor偽類（錨偽類）

anchor偽類是與超級鏈接有關(guān)的偽類，在瀏覽器中，超級鏈接可以表現(xiàn)為4種狀態(tài)。:link未被訪問過的狀態(tài)；:hover鼠標(biāo)懸停狀態(tài)；:active活動狀態(tài)；:visited已訪問過的狀態(tài)。4.2偽類選擇器

<body><div><ahref="#1">首頁</a><ahref="#2">新聞</a><ahref="#3">教育</a><ahref="#4">考試</a></div></body><style>a{text-decoration:none;}a:link{color:black; }a:visited{color:orange; }a:hover{text-decoration:underline; color:red; }a:active{color:blue; }</style>一、狀態(tài)偽類（1）anchor偽類（錨偽類）案例：demo4-3.html4.2偽類選擇器

<style>a:link,a:visited{text-decoration:none;color:block;}

a:hover{text-decoration:underline;

color:orange;}</style>一、狀態(tài)偽類（1）anchor偽類（錨偽類）一般情況下，未訪問的鏈接和訪問過的鏈接狀態(tài)設(shè)置相同狀態(tài)，活動狀態(tài)響應(yīng)時(shí)間太短，不進(jìn)行設(shè)置，因此，前面的代碼可優(yōu)化改寫為：4.2偽類選擇器

一、狀態(tài)偽類（2）：focus偽類:focus偽類主要應(yīng)用于獲得輸入焦點(diǎn)的元素，比較常見的是表單中的一些控件，如<inputtype="text"/>這樣的文本輸入控件。

案例demo4-4.html4.2偽類選擇器

一、狀態(tài)偽類（2）：focus偽類<styletype="text/css">.inp:focus{width:200px;}</style><body><inputtype="text"placeholder="用戶名“class="inp"/><br><inputtype="password"placeholder="密碼"/></body>獲得焦點(diǎn)4.2偽類選擇器

二、結(jié)構(gòu)性偽類結(jié)構(gòu)性偽類是css3新增的選擇器，利用文檔結(jié)構(gòu)的上下文關(guān)系來匹配元素，能夠減少class類的定義，使文檔結(jié)構(gòu)更簡潔。

4.2偽類選擇器

二、結(jié)構(gòu)性偽類元素名描述:first-child匹配父元素的第一個(gè)子元素:last-child匹配父元素的最后一個(gè)子無素:only-child匹配父元素有且只有一個(gè)子元素:only-of-type匹配父元素有且只有一個(gè)指定類型的元素:nth-child(n)匹配父元素的第n個(gè)子元素:nth-last-child(n)匹配父元素的倒數(shù)第n個(gè)子元素:nth-of-type(n)匹配父元素定義類型的第n個(gè)子元素:nth-last-of-type(n)匹配父元素定義類型的倒數(shù)n個(gè)子元素:first-of-type匹配一個(gè)上級元素下的第一個(gè)同類子元素:last-of-type匹配一個(gè)上級元素的最后一個(gè)同類子元素4.2偽類選擇器

二、結(jié)構(gòu)性偽類

<ul><li>JavaEE培訓(xùn)</li><li>Android培訓(xùn)</li><li>PHP培訓(xùn)</li><li>UI設(shè)計(jì)培訓(xùn)</li><li>iOS培訓(xùn)</li><li>前端與移動開發(fā)培訓(xùn)</li><li>C/C++培訓(xùn)</li></ul><styletype="text/css">

li:first-child{text-decoration:underline; }

li:nth-child(3){font-size:24px; font-style:italic; }

li:nth-child(2n){color:orange; }

li:nth-child(2n+1){color:green; }</style>案例：demo4-5.html4.3偽元素選擇器

CSS偽元素指向的是比較抽象存在的內(nèi)容。例如元素的部分內(nèi)容，又或者是基于元素前后位置構(gòu)建出的內(nèi)容等等。

基本語法：selector::pseudo-element{property:value;……}::pseudo-element表示偽元素的名稱，需要注意的是偽元素采用雙冒號“::”，這樣也便于和偽類進(jìn)行區(qū)分。

4.3偽元素選擇器

常見的偽元素包括：

::first-letter選擇元素文本的第一個(gè)字（母）::first-line選擇元素文本的第一行::before在元素內(nèi)容的最前面添加新內(nèi)容::after在元素內(nèi)容的最后面添加新內(nèi)容偽元素需要與CSS選擇器結(jié)合起來成為偽元素選擇器。

例如

p::first-line表示選擇該段落的第一行作為設(shè)置樣式的對象

div::before表示在該div內(nèi)部所有元素內(nèi)容的前面添加新內(nèi)容。

案例demo4-6.html

4.4屬性選擇器

屬性選擇器是根據(jù)元素的屬性及屬性值來選擇元素的?；菊Z法：

[attribute]{property:value;……}

其中[attribute]表示以attribute命名屬性的元素。

例如：[type]{color:red;}進(jìn)一步利用attribute屬性關(guān)聯(lián)的屬性值來選擇元素時(shí)，可以匹配完整的屬性值，也可以利用通配符匹配屬性值的部分值。如表4-2所示：4.4屬性選擇器

表4-2與元素屬性及屬性值相關(guān)的選擇器

案例demo4-7.html選擇器實(shí)例說明[attribute][type]選擇帶有type屬性的所有元素。[attribute=value][type="text"]選擇帶有type屬性，且值為text的所有元素。[attribute~=value][class~="data"]選擇帶有class屬性，且值包含獨(dú)立單詞"data"的所有元素。[attribute|=value][class|="one"]選擇帶class屬性，且值以"one"或"one-"開頭的所有元素。其中要求"one"是完整或獨(dú)立的單詞。[attribute*=value]a[href*="demo"]選擇其

href

屬性值包含"demo"的所有<a>元素。"demo"不必是完整的單詞。[attribute^=value]a[href^="demo"]選擇其

href

屬性值以"demo"開頭的所有<a>元素。"demo"不必是完整的單詞。[attribute$=value]a[href$=".html"]選擇其

href

屬性值以".html"結(jié)尾的所有<a>元素。"html"不必是完整的單詞。4.5

CSS的特性

在掌握了CSS選擇器的使用方法后，為了科學(xué)高效的運(yùn)用選擇器，我們還要深入了解CSS的特性，才能在應(yīng)用的過程中，充分發(fā)揮CSS的作用，避免沖突。CSS主要有兩大特性：繼承性和層疊性。4.5CSS的特性

一、CSS的繼承性文檔的上下文關(guān)系，在HTML結(jié)構(gòu)中大多是通過嵌套來表現(xiàn)的，繼承性就是基于這種嵌套關(guān)系，子元素對父元素樣式的繼承。繼承性的特點(diǎn)主要包括以下兩方面：子標(biāo)記繼承父標(biāo)記部分的CSS樣式風(fēng)格；子標(biāo)記可以產(chǎn)生新的CSS樣式，不會影響父標(biāo)記；

4.5CSS的特性

一、CSS的繼承性HTML結(jié)構(gòu)：<h1class="test1">hello<span>world</span></h1>CSS樣式規(guī)則：h1{font-style:italic;}.test1{text-transform:uppercase;}span{text-decoration:line-through;color:red;}

繼承后效果圖：案例：demo4-8.html4.5CSS的特性

一、CSS的繼承性不是所有的CSS屬性都會被繼承，父元素的以下屬于不會被子元素繼承：邊框?qū)傩酝膺吘鄬傩?、?nèi)邊距屬性背景屬性定位屬性、布局屬性元素寬、高屬性利用CSS的繼承性，可以減少代碼的編寫量，提高文檔的可讀性。二、CSS的層疊性CSS的層疊性是指多種CSS樣式可以疊加在同一個(gè)元素，層疊包括來自同級元素樣式的定義，也包括由于繼承性引起的樣式定義?！皐orld”文本通過繼承，將<h1>和“test1”的樣式連同自定義的樣式層疊到了一起。4.5CSS的特性

二、CSS的層疊性在層疊的過程中，可能引起樣式的沖突，如圖所示，該元素“WORLD”最終會顯示什么顏色呢？<h1class="test1">hello<span>world</span></h1>4.5CSS的特性

WORLD如何解決沖突？提出優(yōu)先級的概念！三、CSS的優(yōu)先級CSS的優(yōu)先級是當(dāng)層疊引發(fā)樣式?jīng)_突的時(shí)候，瀏覽器根據(jù)優(yōu)先級來決定元素應(yīng)用哪個(gè)樣式，優(yōu)先級則由選擇器的匹配規(guī)則即優(yōu)先順序來決定。4.5CSS的特性

三、CSS的優(yōu)先級（1）引用樣式表的優(yōu)先順序根據(jù)引用CSS樣式的方式不同，優(yōu)先級的順序是：

內(nèi)聯(lián)樣式>內(nèi)部樣式>外部樣式如果外部樣式放在內(nèi)部樣式的后面，如下圖所示，外部樣式優(yōu)先級會反過來高于內(nèi)部樣式表。（就近原則）4.5CSS的特性

案例demo4-9.html三、CSS的優(yōu)先級（2）繼承性的優(yōu)先級當(dāng)HTML結(jié)構(gòu)嵌套較深時(shí)，一個(gè)元素的樣式可能會受它多層祖先元素的樣式影響，這時(shí)它們的優(yōu)先順序是：

元素的自定義樣式>最近祖先>高于其他祖先4.5CSS的特性

三、CSS的優(yōu)先級（2）繼承性的優(yōu)先級<h1class="test1">hello<span>world</span></h1>由<span>自定義的樣式優(yōu)先級高于從類“test1”中繼承來的樣式，所以最后文本的顏色渲染為紅色。4.5CSS的特性

三、CSS的優(yōu)先級（3）選擇器的優(yōu)先級選擇器的優(yōu)先級是通過計(jì)算每個(gè)選擇器的權(quán)重值得出的，權(quán)重值大的優(yōu)先級高，一般選擇器的權(quán)重值如表所示：

4.5CSS的特性

繼承樣式標(biāo)簽選擇器類選擇器ID選擇器內(nèi)聯(lián)樣式表!important規(guī)則0110100100010000+三、CSS的優(yōu)先級（3）選擇器的優(yōu)先級<h1class="test1">hello<span>world</span></h1><style>h1{color:blue;}.test1{color:gray;}span{color:yellow;}h1span{color:green;}.test1span{color:red;}</style>

4.5CSS的特性

思考一下：“world”最后什么顏色？案例demo4-10.html三、CSS的優(yōu)先級（3）選擇器的優(yōu)先級

4.5CSS的特性

選擇器權(quán)重值說明h10對于“world”，<h1>是繼承樣式，權(quán)重為0.test10對于“world”，類“test1”是繼承樣式，權(quán)重為0span1標(biāo)簽選擇器，權(quán)重值為1h1span1+1組合選擇器，計(jì)算標(biāo)簽選擇器+標(biāo)簽選擇器權(quán)重之和.test1span10+1組合選擇器，計(jì)算類選擇器+標(biāo)簽選擇器權(quán)重之和根據(jù)計(jì)算選擇器“.test1span”的權(quán)重值為11最大，因此它的優(yōu)先級最高，最后文本“world”的字體顏色表現(xiàn)為“red”。三、CSS的優(yōu)先級!important命令，無條件優(yōu)先；

文本“world”的最終顏色會顯示為“green”，因?yàn)椤?important”規(guī)則使得“h1span”的權(quán)重值變?yōu)?0000+超越了“.test1span”的權(quán)重值。

h1{color:blue!important;}對于文本“world”而言，標(biāo)簽<h1>的樣式是繼承樣式權(quán)重值依然為0。h1span{color:green!important;}4.5CSS的特性

三、CSS的優(yōu)先級（4）其他選擇器的優(yōu)先級除了一般選擇器，其他選擇器參考以下規(guī)則：屬性選擇器=偽類選擇器=類選擇器偽元素選擇器=標(biāo)簽選擇器

4.5CSS的特性

三、CSS的優(yōu)先級（4）其他選擇器的優(yōu)先級除了這些CSS優(yōu)先級規(guī)則，我們還要注意以下幾個(gè)問題：當(dāng)權(quán)重值相等時(shí)，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置，即遵循“就近原則”；每個(gè)選擇器分配的權(quán)重值的作用僅僅是用來比較大小，權(quán)重值的具體數(shù)據(jù)是沒有任何意義的。創(chuàng)作者的規(guī)則優(yōu)于瀏覽者，即網(wǎng)頁編寫者設(shè)置的CSS樣式優(yōu)于瀏覽器所設(shè)置的樣式

4.5CSS的特性

小結(jié)1CSS組合選擇器4CSS的特性繼承性、層疊性、優(yōu)先級后代、子代、普通兄弟、相鄰兄弟2偽類選擇器狀態(tài)偽類、結(jié)構(gòu)性偽類3屬性選擇器屬性、屬性值、部分屬性值ThankYou!HTML+CSS網(wǎng)頁設(shè)計(jì)與制作CSS盒模型學(xué)習(xí)目標(biāo)掌握盒子主要屬性的設(shè)置掌握盒模型的組成要素了解盒模型的概念5.1CSS盒模型的概念導(dǎo)入問題掌握了利用CSS選擇器選擇網(wǎng)頁元素的方法，接著將引入一個(gè)重要的概念——盒模型，它可以幫助我們進(jìn)一步理解CSS是如何格式化和管理網(wǎng)頁元素的。CSS將HTML元素看成一個(gè)矩形盒子；通過這個(gè)盒子的組成要素來描述它占用的空間；網(wǎng)頁上在所有元素都可以描述成盒子；通過設(shè)置盒子的樣式以及管理多個(gè)盒子之間的位置關(guān)系是實(shí)現(xiàn)頁面布局的重要基礎(chǔ)。5.1CSS盒模型的概念5.1CSS盒子模型的概念排列方式：1）橫向排列2）縱向排列3）嵌套排列4）層疊排列盒子模型通過四個(gè)要素來描述：content（內(nèi)容區(qū)域）border（邊框）padding（內(nèi)邊距）margin（外邊距）5.2CSS盒模型的組成要素一、內(nèi)容區(qū)域content盒子的content指的是元素本身的內(nèi)容區(qū)域，由元素的寬度屬性width和高度屬性height定義：img{width:200px;height:200px;}p{width:300px; height:150px;}

案例：demo5-1.html5.2CSS盒模型的組成要素二、邊框border邊框border是指從四周包裹元素的線條。p{ width:300px;height:150px;

border:1pxsolid#A9A9A9;}

包裹了邊框的段落5.2CSS盒模型的組成要素二、邊框borderborder的屬性值包含三方面內(nèi)容：width、style、colorwidth：設(shè)置線條的粗細(xì)，如果設(shè)置成為0，其他兩個(gè)樣式則無效；style：設(shè)置線條的顯示樣式，常用的有solid（實(shí)線）、dashed（虛線）、double（雙線）等；color：設(shè)置線條的顏色，缺省時(shí)默認(rèn)取元素的前景色。5.2CSS盒模型的組成要素二、邊框border（1）按邊框?qū)傩栽O(shè)置border-width:3px;border-style:dashed;border-color:#008000;可以利用邊框的復(fù)合屬性border簡化這段代碼，如下：border：3pxdashed#008000；屬性值之間不分先后，用空格分隔，這種方式能快速地為盒子的4條邊框設(shè)置相同的樣式。5.2CSS盒模型的組成要素二、邊框border（2）按線條方向設(shè)置border-top:1pxsolidred;border-right:5pxdottedblue;border-bottom:1pxsolidred;border-left:5pxdottedblue;通過指定方向，可以實(shí)現(xiàn)邊框的差異化設(shè)置。

5.2CSS盒模型的組成要素（3）屬性和線條方向結(jié)合起來設(shè)置border-top-width:3px;border-top-style:dashed;border-top-color:#008000;這種方式往往是為了設(shè)置有單獨(dú)樣式需求的某條邊框。三、內(nèi)邊距padding在元素內(nèi)容和邊框之間存在一片空白區(qū)域，如圖所示這個(gè)區(qū)域的大小由盒子的內(nèi)邊距padding來設(shè)定。

/*對每個(gè)方向的內(nèi)邊距進(jìn)行獨(dú)立設(shè)置*/

padding-top:5px;padding-right:10px;padding-bottom:15px;padding-left:20px;

復(fù)合屬性簡化代碼

padding:5px10px15px20px;5.2CSS盒模型的組成要素三、內(nèi)邊距padding每個(gè)方向的內(nèi)邊距匹配屬性值時(shí)，始終以top方向?yàn)槠瘘c(diǎn)，按順時(shí)針方向依次匹配。例如：padding:5px10px15px20px;/*上5px右10px下15px左20px*/padding:5px10px15px;/*上5px右10px下15px左缺省取10px*/padding:10px20px;/*上10px右20px下缺省取10px左缺省取20px*/padding:20px;/*4個(gè)方向均為20px*/5.2CSS盒模型的組成要素四、外邊距margin外邊距margin是以元素的邊框?yàn)榻缦蛲鈩?chuàng)建的空白區(qū)域，通常是用來控制盒子和其他元素之間的相互間隔，如圖所示，圍繞在圖片四周用紅色箭頭標(biāo)注的空白區(qū)域就是由該圖片盒子設(shè)定的外邊距所產(chǎn)生。5.2CSS盒模型的組成要素一、盒子的大小盒子在頁面中的實(shí)際占位空間可能超出了對元素內(nèi)容設(shè)置的尺寸。頁面設(shè)計(jì)時(shí)我們要考慮的是盒子的實(shí)際大小。

實(shí)際尺寸=content+padding+border+margin5.3盒子的box-sizing屬性一、盒子的大小案例demo5-2.html<styletype="text/css">img{ width:150px; height:120px; border:2pxdottedorangered; padding:10px; margin:20px; }</style>5.3盒子的box-sizing屬性此圖片在頁面中的實(shí)際占位大小為：寬度=150+10*2+2*2+20*2=214px高度=120+10*2+2*2+20*2=184px二、box-sizing屬性早期的IE瀏覽器對width和height有不同的解讀，width和height包含了border和padding的值；瀏覽器的差異解讀給網(wǎng)頁布局造成了不小的困擾，為了解決這個(gè)問題，W3C規(guī)范引入了一個(gè)非常重要的屬性——box-sizing。5.3盒子的box-sizing屬性二、box-sizing屬性

基本語法：box-sizing:content-box|border-box|inherit;content-box：默認(rèn)值，在元素的寬度和高度之外繪制元素的內(nèi)邊距和邊框；border-box：內(nèi)邊距和邊框被包含在定義的width和height；inherit：規(guī)定從父元素繼承box-sizing屬性的值；5.3盒子的box-sizing屬性二、box-sizing屬性在案例demo5-2.html中加入box-sizing屬性，代碼如下：img{box-sizing:border-box; width:150px; height:120px; border:2pxdottedorangered; padding:10px; margin:20px; }5.3盒子的box-sizing屬性二、box-sizing屬性在實(shí)際工作中為了方便計(jì)算盒子的占位，我們經(jīng)常統(tǒng)一將所有元素的box-sizing屬性值設(shè)置為border-box，這個(gè)可以在初始化的時(shí)候完成，這里推薦采用以下定義方式：html{box-sizing:border-box;}/*對網(wǎng)頁的box-sizing屬性初始化*/*,*:before,*:after{box-sizing:inherit;}/*規(guī)定從父元素繼承box-sizing屬性的值*/5.3盒子的box-sizing屬性5.4盒子的background屬性CSS背景屬性主要包括：background-colorbackground-imagebackground-repeatbackground-attachmentbackground-position5.4盒子的background屬性一、背景色background-color使用background-color屬性設(shè)置盒子的背景色例如：background-color:red;background-color:#ADD8E6;background-color:rgba(255,255,0,0.5);背景顏色的填充區(qū)域默認(rèn)是邊框及以內(nèi)的范圍，其中也包括邊框自身所在區(qū)域二、背景圖像background-imageCSS可以通過屬性background-image將圖像作為元素的背景來設(shè)置，并通過url來定義圖像的信息。background-image:url(img/5-5.jpg);5.4盒子的background屬性二、背景圖像background-image（1）background-repeat背景重復(fù)repeat：默認(rèn)，平鋪直至鋪滿整個(gè)背景區(qū)域；no-repeat：不平鋪，圖像只顯示一次，默認(rèn)顯示在元素區(qū)域內(nèi)的左上角；repeat-x：只沿水平方向平鋪；repeat-y：只沿豎直方向平鋪；5.4盒子的background屬性repeatno-repeatrepeat-xrepeat-y二、背景圖像background-image（2）background-position（只有在no-repeat設(shè)定時(shí)才有用）指定背景圖像的左上角頂點(diǎn)在元素內(nèi)的坐標(biāo)，可以改變背景圖像的位置。background-position:160px80px;background-position:25%25%;background-position:rightbottom;5.4盒子的background屬性二、背景圖像background-image（3）background-attachment（只有在no-repeat設(shè)定時(shí)才有用）背景圖像隨著頁面上下滾動，可用屬性如下：scroll：默認(rèn)值，背景圖像隨著頁面的滾動而滾動；fixed：背景圖片固定于窗口位置，不會隨著頁面的滾動而滾動。local：背景圖片會隨著元素內(nèi)容的滾動而滾動；inherit：指定屬性的設(shè)置從父元素繼承。注意：一旦定義了fixed，background-position就以body的左上角為坐標(biāo)原點(diǎn)。5.4盒子的background屬性三、復(fù)合屬性background設(shè)置屬性值的順序?yàn)椋篵ackground-colorbackground-imagebackground-repeatbackground-attachmentbackground-position屬性值之間用空格隔開，不需要的樣式可以省略，例如：background:#808080url(img/5-5.jpg)no-repeatrightbottom;5.4盒子的background屬性案例：demo5-3.html四、其他背景屬性在CSS3中，新增了幾個(gè)背景屬性和對背景的控制功能，可以實(shí)現(xiàn)對背景圖像更強(qiáng)大的控制：background-size：設(shè)置背景圖像的尺寸；background-origin：設(shè)置背景圖像的定位區(qū)域；background-clip：設(shè)置背景圖像的繪制區(qū)域；設(shè)置多重背景。5.4盒子的background屬性一、元素的位置關(guān)系（1）水平排列因?yàn)橹挥行性睾托袎K元素可以水平并排，水平排列的兩個(gè)元素之間的距離由它們的外邊距之和產(chǎn)生。.hello{margin-right:30px;}.world{margin-left:20px;}水平距離的計(jì)算5.5盒子的其他屬性一、元素的位置關(guān)系（2）垂直排列行元素設(shè)置的上下margin是無效的，只有塊元素和行塊元素可以設(shè)置垂直方向的margin1）兩個(gè)塊元素

采用外邊距合并的計(jì)算方法向的margin。2）一個(gè)或兩個(gè)都是行塊元素

采用外邊距求和的計(jì)算方法。5.5盒子的其他屬性一、元素的位置關(guān)系（2）垂直排列

塊元素與塊元素

（外邊距合并）

塊元素與行塊元素

（外邊距求和）5.5盒子的其他屬性案例demo5-4.html一、元素的位置關(guān)系（3）元素嵌套文檔的上下文關(guān)系我們用嵌套來描述，發(fā)生溢出時(shí)，溢出部分的內(nèi)容可以利用overflow屬性來解決。

一般盒子嵌套盒子嵌套溢出5.5盒子的其他屬性二、overflow屬性overflow屬性用來處理溢出父元素區(qū)域的元素內(nèi)容，借助這個(gè)屬性可以幫助我們更好地管理嵌套關(guān)系的盒子。

visible hidden scroll auto5.5盒子的其他屬性案例demo5-5.html三、display屬性盒子的display屬性是用于控制布局的非常重要的CSS屬性，通過它可以改變元素原有的顯示方式。它的主要屬性值如下：none：隱藏元素，使頁面中好像該元素不存在；block：顯示為塊元素；inline：顯示為行元素；inline-block：顯示為行塊元素

5.5盒子的其他屬性demo5-6.html小結(jié)盒模型的概念CSS盒模型的組成要素盒子的常用屬性掌握盒模型的原理，熟悉相關(guān)屬性的設(shè)置ThankYou!HTML+CSS網(wǎng)頁設(shè)計(jì)與制作浮動與定位教學(xué)目標(biāo)掌握清除浮動影響的方法理解定位的概念掌握定位的分類和設(shè)置方法掌握制作水平導(dǎo)航條的方法理解浮動的原理6.1浮動一、浮動的原理標(biāo)準(zhǔn)文檔流，指的是元素排版布局過程中，瀏覽器會按元素默認(rèn)的顯示方式自動從左往右，從上往下的流式排列。這種布局結(jié)構(gòu)穩(wěn)定，但浪費(fèi)空間。利用浮動屬性可以使元素脫離標(biāo)準(zhǔn)流，并定義元素向左或向右浮動，直至元素的外邊緣遇到父元素或另一個(gè)浮動元素為止。

基本語法：selector{float:left|right|none|inherit}6.1浮動一、浮動的原理浮動的過程：元素的標(biāo)準(zhǔn)流排列box1向左浮動 box1向右浮動案例：demo6-1.html.box1{float:left;}.box1{float:right;}6.1浮動一、浮動的原理對box1元素設(shè)置浮動之后，文檔中的元素有以下變化：box1因?yàn)闆]有設(shè)置寬度浮動后自動收縮至元素內(nèi)容的實(shí)際寬度；box1無論向左還是向右浮動遇到父元素即停止；box1脫離了標(biāo)準(zhǔn)流，不再占用原文檔流中的位置，因此box2和box3向上移動占領(lǐng)了原來box1的位置；浮動元素box1覆蓋了標(biāo)準(zhǔn)流元素box2的部分區(qū)域，box2內(nèi)的文本會自動在剩余區(qū)域內(nèi)進(jìn)行調(diào)整；父元素本身沒有設(shè)置高度，是由內(nèi)部標(biāo)準(zhǔn)流元素的高度支撐，box1脫離標(biāo)準(zhǔn)流后，父元素的高度也隨之改變（稱之為高度塌陷）；6.1浮動一、浮動的原理浮動的特性：浮動元素不再區(qū)分行、塊等元素類型，所有浮動元素都可以設(shè)置寬、高；后浮動的元素不會超越前面浮動元素的頂端；浮動會影響該元素后面的內(nèi)容，不會影響該元素前面的內(nèi)容；6.1浮動一、浮動的原理浮動最初的本意是將插入到文章中的圖片向左或者向右浮動，使圖片下方的文字自動環(huán)繞在它的周圍，浮動之后的圖片左邊或者右邊不會出現(xiàn)一大塊的留白。案例：圖文混排demo6-2.html6.1浮動二、清除浮動根據(jù)浮動的特性，浮動元素會影響該元素后面的元素，也有可能對父元素的高度造成影響，因此有些時(shí)候需要對被影響的元素清除浮動造成的影響。清除浮動的常用方法有五種：使用clear屬性添加空標(biāo)記利用overflow屬性利用::after偽元素使用clearfix方法6.1浮動二、清除浮動（1）使用clear屬性（浮動的影響發(fā)生在兄弟元素之間）

基本語法：

clear：left|right|both；受元素left和right浮動的影響，footer的效果對footer設(shè)置清除浮動影響后的效果.footer{clear:both;}案例：demo6-3.html6.1浮動二、清除浮動（1）使用clear屬性（浮動元素高度不一致時(shí)）對底部元素footer設(shè)置了

clear:left;footer元素在向上移動的過程中遇到向左浮動的元素底部就會停止移動，如果浮動元素的高度不一致，可能會得到以下幾種情況；footer元素始終顯示在left元素的下方，clear：right；同理6.1浮動二、清除浮動（2）添加空標(biāo)記（應(yīng)用于嵌套元素，且父元素沒有設(shè)置高度）<divclass="con">

<divclass='left'></div><divclass='right'></div><!--為父元素.con添加空標(biāo)記-->

<divstyle="clear:both;width:0;height:0;"></div></div>案例：demo6-4.html添加空標(biāo)記的方法有一個(gè)缺點(diǎn)就是改變了原有HTML文檔的結(jié)構(gòu)，不利于優(yōu)化，因此并不提倡使用。6.1浮動二、清除浮動（3）利用overflow屬性（設(shè)置父元素的overflow屬性）可以利用overflow屬性來清除浮動對父元素的影響。對案例demo6-4.html，修改父元素的con類，為其添加如下代碼：.con{overflow:hidden; }因?yàn)閛verflow屬性會自動檢測浮動區(qū)域的高度，就算所有子元素都浮動了，overflow依然會為父元素保留浮動區(qū)域的高度，從而達(dá)到清除浮動影響的目的。

二、清除浮動（4）利用::after偽元素利用after偽元素和增加空標(biāo)記的原理類似，但又不會破壞HTML原文檔的結(jié)構(gòu)，在使用::after偽元素創(chuàng)建的子元素中清除浮動，創(chuàng)造的子元素并不會顯示在html樹中：.con::after{ clear:both; content:'';

display:block; width:0; height:0; visibility:hidden;

}6.1浮動二、清除浮動（5）使用clearfix方法clearfix是一種解決父元素高度塌陷問題的方法，是對第4種方法的改進(jìn)。首先為父元素添加一個(gè)clearfix的類：<divclass="conclearfix">，然后給這個(gè)類添加偽元素。.clearfix::before,.clearfix::after{content:''; display:table;}.clearfix::after{clear:both;}.clearfix{*zoom:1;}/*該語句用于支持舊版本的瀏覽器，不需要可刪除*/這是當(dāng)前比較推薦的方法。一方面clearfix這個(gè)類可以設(shè)置成公共類，減少CSS代碼，另一方面display：table；在解決margin擊穿問題時(shí)比display：block；具有更良好的表現(xiàn)。6.1浮動6.2定位一、定位的概念除了浮動之外，定位是另一種可以使元素脫離標(biāo)準(zhǔn)流的方法；允許對網(wǎng)頁元素通過位移定位到一個(gè)新的位置。通過定位屬性position來實(shí)現(xiàn)：static：默認(rèn)值，靜態(tài)定位；relative：相對定位，相對于其原標(biāo)準(zhǔn)流中的位置進(jìn)行定位；absolute：絕對定位，相對于最近一個(gè)已經(jīng)定位的父元素進(jìn)行定位；fixed：固定定位，相對于瀏覽器窗口進(jìn)行定位；sticky：粘貼定位，CSS3新增的定位屬性，基于用戶的滾動位置來定位；6.2定位二、靜態(tài)定位元素默認(rèn)的定位屬性值，是元素按照標(biāo)準(zhǔn)流規(guī)則在文檔中默認(rèn)的位置。在靜態(tài)定位狀態(tài)下，無法通過邊偏移屬性（top、bottom、left或right等）來改變元素在文檔中的位置。6.2定位三、相對定位使用相對定位的網(wǎng)頁元素，會相對于它在標(biāo)準(zhǔn)流中的初始位置，通過偏移指定的距離，到達(dá)新的位置.box{ position:relative;

/*以left邊框?yàn)榛€，向右偏移80px*/left:80px;

/*以bottom邊框?yàn)榛€，向上偏移100px*/ bottom:100px; }案例demo6-5.html6.2定位三、相對定位偏移值可以也可以是負(fù)數(shù).box{ position:relative; left:80px; bottom:-100px;}6.2定位三、相對定位使用相對定位的元素仍在標(biāo)準(zhǔn)流中，它在標(biāo)準(zhǔn)流中的初始位置會被空缺出來，而在新位置上有可能與其他元素發(fā)生疊加，其他元素不會受相對定位元素的影響。6.2定位四、絕對定位絕對定位的偏移量是以最近一個(gè)具有定位屬性的父元素作為基準(zhǔn)，如所有父元素均無定位屬性，則以文檔主體body為基準(zhǔn)采用絕對定位的元素會從標(biāo)準(zhǔn)流中脫離出來，后面的元素會向上移動占領(lǐng)它在標(biāo)準(zhǔn)流中初始的位置通常使用“父相子絕”的原則，即父元素設(shè)置為相對定位，但不設(shè)置偏移量，使其保留在標(biāo)準(zhǔn)流中，子元素設(shè)置為絕對定位。案例：demo6-6.html（a）絕對定位前

（b）絕對定位后（以父元素為基準(zhǔn)）（c）絕對定位后（以body為基準(zhǔn)）6.2定位五、固定定位固定定位fixed與絕對定位類似，但它始終以文檔主體body作為定位的基準(zhǔn)線，并且不會隨著滾動條進(jìn)行滾動。固定定位最常見的一種用途是在頁面中創(chuàng)建一個(gè)固定區(qū)域，例如返回頂部的按鈕及網(wǎng)頁里的小廣告等。6.2定位六、粘貼定位粘貼定位sticky的元素依賴用戶的滾動位置進(jìn)行定位；在相對定位和固定定位之間切換，起先它表現(xiàn)為相對定位，當(dāng)頁面滾動超出指定閾值時(shí)，它的表現(xiàn)就像固定定位；只有指定top、right、bottom或left四個(gè)閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。6.2定位六、粘貼定位/*為top設(shè)置粘貼定位*/.top{

position:sticky;

top:5px; /*設(shè)置閾值*/

}案例demo6-7.html.top元素隨頁面滾動到達(dá)top：5px；則固定在該位置不再隨頁面向上滾動。6.2定位七、z-index在浮動和定位的實(shí)現(xiàn)過程中，都出現(xiàn)過多個(gè)元素在垂直空間上發(fā)生層疊的現(xiàn)象（a）帶背景色的元素層疊

（b）無背景色的元素層疊6.2定位七、z-index所有元素的z-index值默認(rèn)是0；z-index屬性僅對定位元素有效；z-index取整數(shù)值，不能加單位，可以是正數(shù)也可以是負(fù)數(shù)，值越大定位元素在層疊元素中越居上；z-index值相同時(shí)，浮動元素和定位元素位于標(biāo)準(zhǔn)流中其他元素的上方；浮動元素與定位元素層疊時(shí)，默認(rèn)情況下，定位元素位于浮動元素上

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論