黑馬程序員web前端教程04-CSS進(jìn)階筆記_第1頁
黑馬程序員web前端教程04-CSS進(jìn)階筆記_第2頁
黑馬程序員web前端教程04-CSS進(jìn)階筆記_第3頁
黑馬程序員web前端教程04-CSS進(jìn)階筆記_第4頁
黑馬程序員web前端教程04-CSS進(jìn)階筆記_第5頁
已閱讀5頁，還剩18頁未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

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

文檔簡(jiǎn)介

1、CSS3進(jìn)階課程筆記 目錄 目錄21.1 CSS盒模型31.2 邊框51.3 內(nèi)邊距81.4 外邊距81.5 外邊距合并81.1 CSS盒模型網(wǎng)頁中所有的元素都是矩形的，所以可以看出一個(gè)個(gè)盒子。網(wǎng)頁由多個(gè)盒子組成。盒子：邊框+內(nèi)邊距+內(nèi)容區(qū)域+外邊距組成。IE6的盒模型的bug：背景色不能穿透 邊框。而且如果不設(shè)置爭(zhēng)取的doctype的話，ie6顯示的盒子也不是標(biāo)準(zhǔn)的盒子。1.2 邊框邊框可以被背景色穿透，邊框包括三部分可以進(jìn)行設(shè)置：邊框的寬度、邊框的顏色、邊框的樣式?？梢苑謩e分開設(shè)置，也可以進(jìn)行合寫進(jìn)行統(tǒng)一設(shè)置。所有的邊框相關(guān)設(shè)置在如下的代碼中：<!DOCTYPE html>&l

2、t;html lang="en"><head><meta charset="UTF-8"><title>02CSS設(shè)置盒子邊框</title><style>.box height: 200px;width: 200px;background-color: green;/*設(shè)置上邊框的寬度*/border-top-width: 20px;/*設(shè)置上邊框的顏色*/border-top-color: red;/*設(shè)置上邊框的樣式： 虛線、實(shí)線、點(diǎn)線.*/border-top-style: dou

3、ble;border-bottom-color: yellowgreen;border-bottom-width: 5px;border-bottom-style: solid;/*邊框的樣式設(shè)置也可以進(jìn)行合寫*/*border-top: 寬度 樣式 顏色;*/border-left: 5px solid blue;/*可以用一行css設(shè)置上下左右所有的邊框的樣式*/border: 10px dashed blue;</style></head><body><div class="box"></div></b

4、ody></html>去掉圖片的邊框的寫法：（在某些老的瀏覽器中圖片是默認(rèn)有邊框） /* 去掉默認(rèn)的邊框 ，兼容性最好的寫法是*/ border: 0 none;1.3 內(nèi)邊距內(nèi)邊距是設(shè)置盒子與子盒子之間的距離。Pading: 10px; 設(shè)置上下左右都是10px的內(nèi)邊距。Padding： 10px 12px; 設(shè)置上下是10培訓(xùn)的寬度，左右是12像素的寬度。Pading： 10px 12px 13px 14px; / 分別設(shè)置的是 上 右 下 左如果設(shè)置三個(gè)值： 上 左右 下1.4 外邊距外邊距設(shè)置兄弟元素之間的距離。Margin的設(shè)置跟padding的一樣。Margin：

5、 0 auto; 可以讓 塊級(jí)元素水平的居中。原理： auto是設(shè)置外邊距自動(dòng)賦值。如果左右都是auto的時(shí)候，會(huì)把盒子所在行剩余的寬度除以2，然后分別賦值給左右的magin值，自然就會(huì)讓盒子居中顯示了。行內(nèi)元素的margin（padding）只能在水平方向起作用。垂直方向不起作用。1.5 外邊距合并第一種外邊距合并的情況：當(dāng)兩個(gè)塊級(jí)元素，上面塊級(jí)元素?fù)碛邢峦膺吘?，下面的塊級(jí)元素?fù)碛猩贤膺吘嗟臅r(shí)候。兩個(gè)盒子上下的距離會(huì)取 兩個(gè)邊距的最大值，而不是把兩個(gè)盒子的邊距進(jìn)行加和處理。第二種外邊距合并的情況：當(dāng)塊級(jí)元素進(jìn)行嵌套的時(shí)候，如果父盒子沒有設(shè)置上邊框和上內(nèi)邊距的話，子盒子的上外邊距和 復(fù)盒子的上

6、外邊距會(huì)進(jìn)行合并。1.6 浮動(dòng)1.6.1 標(biāo)準(zhǔn)流標(biāo)準(zhǔn)流就是瀏覽器默認(rèn)布局的方式，也就是從上往下，從左向右的默認(rèn)的排班布局的方式。1.6.2 浮動(dòng)布局方式浮動(dòng)的本質(zhì)：就是解決圖片和文字并排的格式問題。元素浮動(dòng)后，會(huì)脫離標(biāo)準(zhǔn)流，但是還會(huì)影響標(biāo)準(zhǔn)流的布局。沒有設(shè)置浮動(dòng)之前：設(shè)置浮動(dòng)之后：總結(jié)一下：浮動(dòng)的元素會(huì)不占據(jù)標(biāo)準(zhǔn)流的空間。但是會(huì)影響標(biāo)準(zhǔn)流中的文本的排版。1.6.3 浮動(dòng)的特性1.浮動(dòng)脫離標(biāo)準(zhǔn)流，不占位置，但會(huì)影響標(biāo)準(zhǔn)流。浮動(dòng)只有左右浮動(dòng)。2. 浮動(dòng)的元素A排列位置，跟上一個(gè)元素（塊級(jí)）有關(guān)系。如果上一個(gè)元素有浮動(dòng)，則A元素頂部會(huì)和上一個(gè)元素的頂部對(duì)齊；如果上一個(gè)元素是標(biāo)準(zhǔn)流，則A元素的頂部會(huì)和

7、上一個(gè)元素的底部對(duì)齊。3.一個(gè)父盒子里面的子盒子，如果其中一個(gè)子級(jí)有浮動(dòng)的，則其他子級(jí)都需要浮動(dòng)。這樣才能一行對(duì)齊顯示。4.浮動(dòng)根據(jù)元素書寫的位置來顯示相應(yīng)的浮動(dòng)。5. 元素添加浮動(dòng)后，如果沒有設(shè)置寬高的話，元素會(huì)具有行內(nèi)塊元素的特性。元素的大小完全取決于定義的大小或者默認(rèn)的內(nèi)容多少。也就是具有了包裹性。6.浮動(dòng)具有破壞性，元素浮動(dòng)后，破壞來原來的正常流布局，造成內(nèi)容塌陷。注意：如果一個(gè)標(biāo)準(zhǔn)流的父盒子，沒有設(shè)置高的情況下，所有的子盒子進(jìn)行了浮動(dòng)，那么父盒子的高度會(huì)塌陷成0.1.6.4 解決浮動(dòng)破壞性造成的高度塌陷的問題第一種解決高度塌陷的方法就是使用overflow。在父盒子上設(shè)置overfl

8、ow： hidden；之后，父盒子具有的包裹性，就不會(huì)出現(xiàn)高度塌陷的問題了。1.6.5 Overflow詳解當(dāng)盒子內(nèi)的元素超出盒子自身的大小時(shí)，內(nèi)容就會(huì)溢出（IE6除外），這時(shí)如果想要規(guī)范溢出內(nèi)容的顯示方式，就需要使用CSS的overflow屬性屬性描述visible內(nèi)容不會(huì)被修剪，會(huì)呈現(xiàn)在元素框之外（默認(rèn)值）hidden溢出內(nèi)容會(huì)被修剪，并且被修剪的內(nèi)容是不可見的auto在需要時(shí)產(chǎn)生滾動(dòng)條，即自適應(yīng)所要顯示的內(nèi)容scroll溢出內(nèi)容會(huì)被修剪，且瀏覽器會(huì)始終顯示滾動(dòng)條<!DOCTYPE html><html lang="en"><head>

9、;<meta charset="UTF-8"><title>13CSS溢出處理overflow.html</title><style>div background-color: silver;height: 100px;width: 100px;border: 1px solid red;/*overflow: visible;*/*overflow: hidden;*/*overflow: auto;*/overflow: scroll;</style></head><body><d

10、iv>北京<!- 2015年12月20日基礎(chǔ)班2015年11月15日就業(yè)班搶先報(bào)名 上海2016年04月17日基礎(chǔ)班2016年05月08日就業(yè)班搶先報(bào)名 廣州2016年03月10日基礎(chǔ)班2016年03月30日就業(yè)班搶先報(bào)名 深圳2015年XX月XX日基礎(chǔ)班 ->盡請(qǐng)期待</div></body></html>1.6.6 補(bǔ)充：BFCOverflow可以觸發(fā)元素的BFC，可以讓元素具有獨(dú)立的排版的空間和權(quán)限，在bfc內(nèi)部所有的元素都依據(jù)父元素進(jìn)行排版和布局，所有父元素具有了包裹性，這就是解決高度塌陷問題的原理。比如： 浮動(dòng)也可以觸發(fā)bfc，再

11、有：定位、overflow、display：table、table-cell.1.7 版心的概念版心就是，網(wǎng)站的核心展示區(qū)域，一般居中顯示。版心寬度一般是：960px 980px 1000px 1190px1200px1.8 清除浮動(dòng)清除浮動(dòng)，就是讓當(dāng)前元素左右兩邊都不存在浮動(dòng)元素的時(shí)候才把元素放到標(biāo)準(zhǔn)流匯中顯示。Clear：left; 清除左浮動(dòng)，清除右浮動(dòng): clear:right;清除左右浮動(dòng)：clear:both;常用的幾種清除浮動(dòng)的方法：第一種：隔墻法。第二種綜合的clearfix的方法：使用overflow進(jìn)行包裹所有的浮動(dòng)子元素。有誤傷。Ckearfix的使用場(chǎng)景：1、 父盒子要

12、把所有的子盒子包裹住。2、 父盒子是包裹正行的 div元素，需要前后進(jìn)行清除浮動(dòng)。.clearfix display: table; /* 觸發(fā)bfc，div具有的包裹性*/.clearfix:before, .clearfix:after content: ""display: block;clear: both;height: 0;visibility: hidden;.clearfix _zoom: 1; 1.9 定位概述默認(rèn)的文檔流的布局的方式?jīng)Q定了元素的位置就是靜態(tài)的定位方式。Static?？梢酝ㄟ^position CSS屬性來改變?cè)氐亩ㄎ坏姆绞健?.9.1 相

13、對(duì)定位：相對(duì)于原來的位置進(jìn)行偏移。1.9.2 絕對(duì)定位：根據(jù)父容器（必須是非static的定位的容器）進(jìn)行位置定位。一般原則：子絕父相1.9.3 固定定位：固定在瀏覽器的某個(gè)位置，瀏覽器scroll時(shí)不會(huì)發(fā)生變化。1.9.4 ZindexZindex可以改變?cè)貙盈B的位置。Zindex越大，越靠近用戶。頁面zindex規(guī)劃案例：一般的zindex都會(huì)在100區(qū)間內(nèi)。如果是頁面比較頂部的用200區(qū)間的如果是廣告，那么需要最頂部，則是300區(qū)間1.9.5 三列自適應(yīng)布局前端學(xué)院公開課的網(wǎng)站： <!DOCTYPE html><html lang="en">

14、<head><meta charset="UTF-8"><title>26三列自適應(yīng)布局</title><style>* padding: 0; margin: 0; .sub-nav, .aside width: 200px;background-color: teal;height: 300px;.main margin-left: 203px;margin-right: 203px;height: 300px;background-color: yellowgreen;.sub-nav float: left;.aside float: right;</style>

溫馨提示

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

評(píng)論

0/150

提交評(píng)論