python前端學習之css

時間 2019-11-24

標籤 python 前端學習 css 欄目 Python 简体版

原文原文鏈接

01-css的引入方式

在HTML中引入css方式總共有三種：css

行內樣式
內接樣式
外接樣式

　　　　　3.1 連接式html

　　　　　3.1 導入式前端

css介紹

如今的互聯網前端分三層：linux

HTML：超文本標記語言。從語義的角度描述頁面結構。
CSS：層疊樣式表。從審美的角度負責頁面樣式。
JS：JavaScript 。從交互的角度描述頁面行爲

CSS：Cascading Style Sheet，層疊樣式表。CSS的做用就是給HTML頁面標籤添加各類樣式，定義網頁的顯示效果。簡單一句話：CSS將網頁內容和顯示樣式進行分離，提升了顯示功能。css3

css的最新版本是css3，咱們目前學習的是css2.1web

接下來咱們要講一下爲何要使用CSS。瀏覽器

HTML的缺陷：

不可以適應多種設備
要求瀏覽器必須智能化足夠龐大
數據和顯示沒有分開
功能不夠強大

CSS 優勢：

使數據和顯示分開
下降網絡流量
使整個網站視覺效果一致
使開發效率提升了（耦合性下降，一我的負責寫html，一我的負責寫css）

好比說，有一個樣式須要在一百個頁面上顯示，若是是html來實現，那要寫一百遍，如今有了css，只要寫一遍。如今，html只提供數據和一些控件，徹底交給css提供各類各樣的樣式。網絡

行內樣式

 <div>
     <p style="color: green">我是一個段落</p>
 </div>

內接樣式

<style type="text/css">
    /*寫咱們的css代碼*/
        
    span{
    color: yellow;
    }

</style>

外接樣式-連接式

<link rel="stylesheet" href="./index.css">

外接樣式-導入式

<style type="text/css">
        @import url('./index.css');
</style>

02-css的選擇器

css的選擇器：1.基本選擇器 2.高級選擇器前端工程師

基本選擇器包含：佈局

1.標籤選擇器
標籤選擇器能夠選中全部的標籤元素，好比div，ul，li ，p等等，無論標籤藏的多深，都能選中，選中的是全部的，而不是某一個，因此說 "共性" 而不是」特性「

body{
    color:gray;
    font-size: 12px;
}
/*標籤選擇器*/
p{
    color: red;
font-size: 20px;
}
span{
    color: yellow;
}

2.id選擇器
# 選中id

同一個頁面中id不能重複。
任何的標籤均可以設置id
id命名規範要以字母能夠有數字下劃線 - 大小寫嚴格區分 aa和AA是兩個不同的屬性值

#box{
    background:green;
}
            
#s1{
    color: red;
}

#s2{
    font-size: 30px;
}

3.類選擇器

3.1 所謂類就是class . class與id很是類似任何的標籤均可以加類可是類是能夠重複,屬於歸類的概念。

3.2 同一個標籤中能夠攜帶多個類，用空格隔開

類的使用，可以決定前端工程師的css水平到底有多牛逼？

答案：必定要有」公共類「的概念

.lv{
    color: green;

}
.big{
    font-size: 40px;
}
.line{
    text-decoration: underline;
}

<!-- 公共類    共有的屬性 -->
    <div>
        <p class="lv big">段落1</p>
        <p class="lv line">段落2</p>
        <p class="line big">段落3</p>
    </div>

總結：

不要去試圖用一個類將咱們的頁面寫完。這個標籤要攜帶多個類，共同設置樣式
每一個類要儘量的小，有公共的概念，可以讓更多的標籤使用

玩好了類就等於玩好了css中的1/2

到底使用id仍是用class？
答案：儘量的用class。除非一些特殊狀況能夠用id

緣由：id通常是用在js的。也就是說 js是經過id來獲取到標籤

03-高級選擇器

高級選擇器分爲：後代選擇器、子代選擇器、並集選擇器、交集選擇器

後代選擇器

使用空格表示後代選擇器。顧名思義，父元素的後代（包括兒子，孫子，重孫子）

.container p{
    color: red;        
}
.container .item p{
    color: yellow;
}

子代選擇器

使用>表示子代選擇器。好比div>p,僅僅表示的是當前div元素選中的子代(不包含孫子....)元素p。

container>p{
    color: yellowgreen;

並集選擇器
多個選擇器之間使用逗號隔開。表示選中的頁面中的多個標籤。一些共性的元素，可使用並集選擇器

/*並集選擇器*/
h3,a{
    color: #008000;
    text-decoration: none;
                
}

好比像百度首頁使用並集選擇器。

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td {
      margin: 0;
      padding: 0
   }
/*使用此並集選擇器選中頁面中全部的標籤，頁面佈局的時候會使用*/

交集選擇器

使用.表示交集選擇器。第一個標籤必須是標籤選擇器，第二個標籤必須是類選擇器語法：div.active

好比有一個<h4 class='active'></h4>這樣的標籤。

那麼

h4{
    width: 100px;
    font-size: 14px;
}
.active{
    color: red;
    text-decoration: underline;
}
/* 交集選擇器 */
h4.active{
    background: #00BFFF;
}

它表示二者選中以後元素共有的特性。

04-屬性選擇器

屬性選擇器，字面意思就是根據標籤中的屬性，選中當前的標籤。

語法：

/*根據屬性查找*/
            /*[for]{
                color: red;
            }*/
            
            /*找到for屬性的等於username的元素 字體顏色設爲紅色*/
            /*[for='username']{
                color: yellow;
            }*/
            
            /*以....開頭  ^*/ 
            /*[for^='user']{
                color: #008000;
            }*/
            
            /*以....結尾   $*/
            /*[for$='vvip']{
                color: red;
            }*/
            
            /*包含某元素的標籤*/
            /*[for*="vip"]{
                color: #00BFFF;
            }*/
            
            /**/
            
            /*指定單詞的屬性*/
            label[for~='user1']{
                color: red;
            }
            
            input[type='text']{
                background: red;
            }

05-僞類選擇器

僞類選擇器通常會用在超連接a標籤中，使用a標籤的僞類選擇器，咱們必定要遵循"愛恨準則" LoVe HAte

/*沒有被訪問的a標籤的樣式*/
        .box ul li.item1 a:link{
            
            color: #666;
        }
        /*訪問事後的a標籤的樣式*/
        .box ul li.item2 a:visited{
            
            color: yellow;
        }
        /*鼠標懸停時a標籤的樣式*/
        .box ul li.item3 a:hover{
            
            color: green;
        }
        /*鼠標摁住的時候a標籤的樣式*/
        .box ul li.item4 a:active{
            
            color: yellowgreen;
        }

再給你們介紹一種css3的選擇器nth-child()

/*選中第一個元素*/
        div ul li:first-child{
            font-size: 20px;
            color: red;
        }
        /*選中最後一個元素*/
        div ul li:last-child{
            font-size: 20px;
            color: yellow;
        }
        
        /*選中當前指定的元素  數值從1開始*/
        div ul li:nth-child(3){
            font-size: 30px;
            color: purple;
        }
        
        /*n表示選中全部,這裏面必須是n, 從0開始的  0的時候表示沒有選中*/
        div ul li:nth-child(n){
            font-size: 40px;
            color: red;
        }
        
        /*偶數*/
        div ul li:nth-child(2n){
            font-size: 50px;
            color: gold;
        }
        /*奇數*/
        div ul li:nth-child(2n-1){
            font-size: 50px;
            color: yellow;
        }
        /*隔幾換色  隔行換色
             隔4換色 就是5n+1,隔3換色就是4n+1
            */
        
        div ul li:nth-child(5n+1){
            font-size: 50px;
            color: red;
        }

06-僞元素選擇器

廢話很少說，直接上代碼！！！

/*設置第一個首字母的樣式*/
        p:first-letter{
            color: red;
            font-size: 30px;

        }
        
/* 在....以前 添加內容   這個屬性使用不是很頻繁 瞭解  使用此僞元素選擇器必定要結合content屬性*/
        p:before{
            content:'alex';
        }
        
        
/*在....以後 添加內容，使用很是頻繁 一般與我們後面要講到佈局 有很大的關聯（清除浮動）*/
        p:after{
            content:'&';
            color: red;
            font-size: 40px;
        }

07-css的繼承性和層疊性

css有兩大特性：繼承性和層疊性

繼承性

面嚮對象語言都會存在繼承的概念，在面嚮對象語言中，繼承的特色：繼承了父類的屬性和方法。那麼咱們如今主要研究css，css就是在設置屬性的。不會牽扯到方法的層面。

繼承：給父級設置一些屬性，子級繼承了父級的該屬性，這就是咱們的css中的繼承。

記住：有一些屬性是能夠繼承下來： color 、 font-*、 text-*、line-* 。主要是文本級的標籤元素。

可是像一些盒子元素屬性，定位的元素（浮動，絕對定位，固定定位）不能繼承。

層疊性

層疊性：權重的標籤覆蓋掉了權重小的標籤，說白了，就是被幹掉了
權重：誰的權重大，瀏覽器就會顯示誰的屬性

誰的權重大？很是簡單就是小學的數數。

數：id的數量 class的數量標籤的數量，順序不能亂

/*1  0  0 */顯示紅色
#box{


    color: red; 
}
/*0  1  0*/
.container{
    color: yellow;
}
/*0  0  1*/
p{
    color: purple;
}

是否是感受明白了呢？好的，再給你們加深點難度。

<div id='box1' class="wrap1">
        <div id="box2" class="wrap2">
            <div id="box3" class="wrap3">
                <p>再來猜猜我是什麼顏色？</p>
            </div>
        </div>
    </div>

#box1 #box2 p{
            color: yellow;
        }
        
        #box2 .wrap3 p{
            color: red;
        }
        
        div div #box3 p{
            color: purple;
        }
        
        
        div.wrap1 div.wrap2 div.wrap3 p{
            color: blue;
        }

好的。那麼上面的這個案例你們是否懂了呢？那麼接下來咱們繼續看案例

仍是上面那個html結構，若是我設置如下css，會顯示什麼顏色呢。

#box1 #box2 .wrap3{
    color: red;
}
        
#box2 .wrap3 p{
    color: green;
}

答案是綠色。哈哈，是否是感受快懵掉了。其實你們只要記住這點特性就能夠。第一條css設置的屬性值，是經過繼承性設置成的紅色，那麼繼承來的屬性，它的權重爲0。它沒有資格跟咱們下面選中的標籤對比。

那你們猜測一下若是都是被繼承來的屬性，那麼字會顯示什麼顏色呢？

#box1 #box2 .wrap3{
    color: red;
}
.wrap1 #box2{
    color: green;
}

小案例證實：權重都是0:那麼就是"就近原則" ：誰描述的近，就顯示誰的屬性。所謂描述的近，就是選中到最內層的距離越近。

小總結一下：

總結：
1.先看標籤元素有沒有被選中，若是選中了，就數數（id,class,標籤的數量）誰的權重大就顯示誰的屬性。權重同樣大，後來者居上
2.若是沒有被選中標籤元素，權重爲0。
若是屬性都是被繼承下來的權重都是0 。權重都是0:"就近原則" ：誰描述的近，就顯示誰的屬性

08-層疊性權重相同處理

直接上代碼，看效果！

第一種現象：當權重相同時，之後來設置的屬性爲準，前提必定要權重相同

#box2 .wrap3 p{
    color: yellow;
}
        
#box1 .wrap2 p{
    color: red;
}

咱們會發現此時顯示的是紅色的。

 

第二種現象： 第一個選擇器沒有選中內層標籤，那麼它是經過繼承來設置的屬性，那麼它的權重爲0。第二個選擇器選中了內層標籤，有權重。

因此 繼承來的元素 權重爲0。跟選中的元素沒有可比性。

#box1 #box2 .wrap3{
    color: red;
}
#box2 .wrap3 p{
    color: green;
}

咱們會發現此時顯示的是綠色的。

第三種現象：若是都是繼承來的屬性，誰描述的近，顯示誰的屬性。'就近原則'

#box1 #box2 .wrap3{
    color: red;
}
 .wrap1 #box2{
    color: green;
}

!important 的使用。

！important:設置權重爲無限大
!important 不影響繼承來的權重，隻影響選中的元素。不要隨便使用!important,由於使用它會影響頁面的佈局

09-盒模型

盒模型

在CSS中，"box model"這一術語是用來設計和佈局時使用，而後在網頁中基本上都會顯示一些方方正正的盒子。咱們稱爲這種盒子叫盒模型。

盒模型有兩種：標準模型和IE模型。咱們在這裏重點講標準模型。

盒模型示意圖

盒模型的屬性

width：內容的寬度

height: 內容的高度

padding：內邊距，邊框到內容的距離

border: 邊框，就是指的盒子的寬度

margin：外邊距，盒子邊框到附近最近盒子的距離

若是讓你作一個寬高402*402的盒子，您如何來設計呢？

答案有上萬種，甚至上一種。

盒模型的計算

若是一個盒子設置了padding，border，width，height，margin(我們先不要設置margin，margin有坑，後面課程會講解)

盒子的真實寬度=width+2*padding+2*border

盒子的真實寬度=height+2*padding+2*border

那麼在這裏要注意看了。標準盒模型，width不等於盒子真實的寬度。

另外若是要保持盒子真實的寬度，那麼加padding就必定要減width，減padding就必定要加width。真實高度同樣設置。

10-padding(內邊距)

padding

padding：就是內邊距的意思，它是邊框到內容之間的距離

另外padding的區域是有背景顏色的。而且背景顏色和內容的顏色同樣。也就是說background-color這個屬性將填充全部的border之內的區域

padding的設置

padding有四個方向，分別描述4個方向的padding。

描述的方法有兩種

一、寫小屬性,分別設置不一樣方向的padding

padding-top: 30px;
padding-right: 30px;
padding-bottom: 30px;
padding-left: 30px;

二、寫綜合屬性，用空格隔開

/*上 右 下 左*/
padding: 20px 30px 40px 50px ;

/*上 左右  下*/
padding: 20px 30px 40px;

/* 上下 左右*/
padding: 20px 30px;
            
/*上下左右*/
padding: 20px;

一些標籤默認有padding

好比ul標籤，有默認的padding-left值。

那麼咱們通常在作站的時候，是要清除頁面標籤中默認的padding和margin。以便於咱們更好的去調整元素的位置。

咱們如今初學可使用通配符選擇器

*{
  padding:0;
  margin:0;    
}

But，這種方法效率不高。

因此咱們要使用並集選擇器來選中頁面中應有的標籤（不一樣背，由於有人已經給我們寫好了這些清除默認的樣式表，reset.css）

https://meyerweb.com/eric/tools/css/reset/

11-border(邊框)

邊框

border:邊框的意思，描述盒子的邊框

邊框有三個要素：粗細線性樣式顏色

border: solid

若是顏色不寫，默認是黑色。若是粗細不寫，不顯示邊框。若是隻寫線性樣式，默認的有上下左右 3px的寬度,實體樣式，而且黑色的邊框。

按照3要素來寫border

border-width: 3px;
border-style: solid;
border-color: red;
/*
border-width: 5px 10px;
border-style: solid dotted double dashed;
border-color: red green yellow;
*/

按照方向劃分

border-top-width: 10px;
border-top-color: red;
border-top-style: solid;

border-right-width: 10px;
border-right-color: red;
border-right-style: solid;

border-bottom-width: 10px;
border-bottom-color: red;
border-bottom-style: solid;

border-left-width: 10px;
border-left-color: red;
border-left-style:solid;

上面12條語句，至關於 bordr: 10px solid red;

另外還能夠這樣：

border-top: 10px solid red;
border-right: 10px solid red;
border-bottom: 10px solid red;
border-left: 10pxb solid red;

border:none；

border：0；

表示border沒有設置樣式。

使用border來製做小三角

/*小三角 箭頭指向下方*/
        div{
            width: 0;
            height: 0;
            border-bottom: 20px solid red;
            border-left: 20px solid transparent;
            border-right: 20px solid transparent;
        }

12-簡單認識下margin

margin

margin：外邊距的意思。表示邊框到最近盒子的距離。

/*表示四個方向的外邊距離爲20px*/
margin: 20px;
/*表示盒子向下移動了30px*/
margin-top: 30px;
/*表示盒子向右移動了50px*/
margin-left: 50px;

margin-bottom: 100px;

13-標準文檔流

什麼是標準文檔流

宏觀的將，咱們的web頁面和ps等設計軟件有本質的區別，web 網頁的製做，是個「流」，從上而下，像「織毛衣」。而設計軟件，想往哪裏畫東西，就去哪裏畫

標準文檔流下有哪些微觀現象？

1.空白摺疊現象

多個空格會被合併成一個空格顯示到瀏覽器頁面中。img標籤換行寫。會發現每張圖片之間有間隙，若是在一行內寫img標籤，就解決了這個問題，可是咱們不會這樣去寫咱們的html結構。這種現象稱爲空白摺疊現象。

2.高矮不齊，底邊對齊

文字還有圖片大小不一，都會讓咱們頁面的元素出現高矮不齊的現象，可是在瀏覽器查看咱們的頁面總會發現底邊對齊

3.自動換行，一行寫不滿，換行寫

若是在一行內寫文字，文字過多，那麼瀏覽器會自動換行去顯示咱們的文字。

14-塊級元素和行內元素

學習的初期，咱們就要知道，標準文檔流等級森嚴。標籤分爲兩種等級：

行內元素
塊級元素

好比h1標籤和span，同時設置寬高，來看瀏覽器效果，那麼你會發現：

行內元素和塊級元素的區別：（很是重要）

行內元素：

與其餘行內元素並排；
不能設置寬、高。默認的寬度，就是文字的寬度。

塊級元素：

霸佔一行，不能與其餘任何元素並列；
能接受寬、高。若是不設置寬度，那麼寬度將默認變爲父親的100%。

塊級元素和行內元素的分類：

在之前的HTML知識中，咱們已經將標籤分過類，當時分爲了：文本級、容器級。

從HTML的角度來說，標籤分爲：

文本級標籤：p、span、a、b、i、u、em。
容器級標籤：div、h系列、li、dt、dd。

　　PS：爲甚麼說p是文本級標籤呢？由於p裏面只能放文字&圖片&表單元素，p裏面不能放h和ul，p裏面也不能放p。

如今，從CSS的角度講，CSS的分類和上面的很像，就p不同：

行內元素：除了p以外，全部的文本級標籤，都是行內元素。p是個文本級，可是是個塊級元素。
塊級元素：全部的容器級標籤都是塊級元素，還有p標籤。

塊級元素和行內元素的相互轉換

咱們能夠經過display屬性將塊級元素和行內元素進行相互轉換。display即「顯示模式」。

塊級元素能夠轉換爲行內元素：

一旦，給一個塊級元素（好比div）設置：

display: inline;

那麼，這個標籤將當即變爲行內元素，此時它和一個span無異。inline就是「行內」。也就是說：

此時這個div不能設置寬度、高度；
此時這個div能夠和別人並排了

行內元素轉換爲塊級元素：

一樣的道理，一旦給一個行內元素（好比span）設置：

display: block;

那麼，這個標籤將當即變爲塊級元素，此時它和一個div無異。block」是「塊」的意思。也就是說：

此時這個span可以設置寬度、高度
此時這個span必須霸佔一行了，別人沒法和他並排
若是不設置寬度，將撐滿父親

標準流裏面的限制很是多，致使不少頁面效果沒法實現。若是咱們如今就要並排、而且就要設置寬高，那該怎麼辦呢？辦法是：移民！脫離標準流！

css中一共有三種手段，使一個元素脫離標準文檔流：

（1）浮動
（2）絕對定位
（3）固定定位

15-浮動

浮動

浮動是css裏面佈局最多的一個屬性，也是很重要的一個屬性。

float：表示浮動的意思。它有四個值。

none: 表示不浮動，默認
left: 表示左浮動
right：表示右浮動

看一個例子

html結構：

 <div class="box1"></div>
 <div class="box2"></div>
 <span>路飛學城</span>

css樣式：

.box1{
     width: 300px;
     height: 300px;
     background-color: red;
     float:left;
  }
 .box2{
     width: 400px;
     height: 400px;
     background-color: green;
     float:right;
   }
   span{
     float: left;
     width: 100px;
     height: 200px;
     background-color: yellow;
    }

咱們會發現，三個元素並排顯示，.box1和span由於是左浮動，緊挨在一塊兒，這種現象貼邊。.box2盒子由於右浮動，因此緊靠着右邊。

那麼浮動若是你們想學好，必定要知道它的四大特性

1.浮動的元素脫標

2.浮動的元素互相貼靠

3.浮動的元素由"子圍"效果

4.收縮的效果

浮動元素脫標

脫標：就是脫離了標準文檔流

看例子

     <div class="box1">小紅</div>
     <div class="box2">小黃</div>
     <span>小馬哥</span>
     <span>小馬哥</span>

.box1{
            width: 200px;
            height: 200px;
            background-color: red;
            float: left;
        
        }
        .box2{
            width: 400px;
            height: 400px;
            background-color: yellow;
        
        }
        span{
            background-color: green;
            float: left;
            width: 300px;
            height: 50px;
        }

效果：紅色盒子壓蓋住了黃色的盒子，一個行內的span標籤居然可以設置寬高了。

緣由1：小紅設置了浮動，小黃沒有設置浮動，小紅脫離了標準文檔流，其實就是它不在頁面中佔位置了，此時瀏覽器認爲小黃是標準文檔流中的第一個盒子。因此就渲染到了頁面中的第一個位置上。這種現象，也有一種叫法，浮動元素「飄起來了」，但我不建議你們這樣叫。

緣由2：全部的標籤一旦設置浮動，就可以並排，而且都不區分行內、塊狀元素，都可以設置寬高

浮動元素互相貼靠

看例子

html結構

    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>

css樣式

.box1{
            width: 100px;
            height: 400px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 150px;       
            height: 450px;
            float: left;
            background-color: yellow;
        }
        .box3{
            width: 300px;
            height: 300px;
            float: left;
            background-color: green;
        }

效果發現：

若是父元素有足夠的空間，那麼3哥緊靠着2哥，2哥緊靠着1哥，1哥靠着邊。
若是沒有足夠的空間，那麼就會靠着1哥，若是再沒有足夠的空間靠着1哥，本身往邊靠

浮動元素字圍效果

html結構：

<div>
        <img src="./images/企業1.png" alt="">    
    </div>
    <p>
        123路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛路飛
    </p>

css樣式：

*{
            padding: 0;
            margin: 0;
        }
        div{
            float: left;
        }
        p{
            background-color: #666;
        }

效果發現：所謂字圍效果，當div浮動，p不浮動，div遮蓋住了p，div的層級提升，可是p中的文字不會被遮蓋，此時就造成了字圍效果。

浮動元素緊湊效果

收縮：一個浮動元素。若是沒有設置width，那麼就自動收縮爲文字的寬度（這點跟行內元素很像）

html結構：

<div>
     alex
</div>

css樣式：

div{
    float: left;
    background-color: red;
}

你們必定要謹記：關於浮動，咱們初期必定要遵循一個原則，永遠不是一個盒子單獨浮動，要浮動就要一塊兒浮動。另外，有浮動，必定要清除浮動，

爲何要清除浮動

在頁面佈局的時候，每一個結構中的父元素的高度，咱們通常不會設置。（爲何？）

你們想，若是我初版的頁面的寫完了，感受很是爽，忽然隔了一個月，老闆說頁面某一塊的區域，我要加點內容，或者我以爲圖片要縮小一下。這樣的需求在工做中很是常見的。真想打他啊。那麼此時做爲一個前端小白，確定是去每一個地方加內容，改圖片，而後修改父盒子的高度。那問題來了，這樣不影響開發效率嗎？答案是確定的。

看一個效果：

html效果：

<div class="father">    
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>

 </div>

  <div class="father2"></div>

css樣式：

*{
            padding: 0;
            margin: 0;

        }
        .father{
            width: 1126px;
            /*子元素浮動 父盒子通常不設置高度*/

            /*出現這種問題，咱們要清除浮動帶來影響*/
            /*height: 300px;*/

        }
        .box1{
            width: 200px;
            
            height: 500px;
            float: left;
            background-color: red;
        }
        .box2{
            width: 300px;
            height: 200px;
            float: left;
            background-color: green;
        }
        .box3{
            width: 400px;
            float: left;
            height: 100px;
            background-color: blue;
        }
        .father2{
            width: 1126px;
            height: 600px;
            background-color: purple;
        }

效果發現：若是不給父盒子一個高度，那麼浮動子元素是不會填充父盒子的高度，那麼此時.father2的盒子就會跑到第一個位置上，影響頁面佈局。

那麼咱們知道，浮動元素確實能實現咱們頁面元素並排的效果，這是它的好處，同時它還帶來了頁面佈局極大的錯亂！！！因此咱們要清除浮動

還好還好。咱們有多種清除浮動的方法，在這裏給你們介紹四種：

給父盒子設置高度
clear:both
僞元素清除法
overflow：hidden

給父盒子設置高度

這個方法給你們上個代碼介紹，它的使用不靈活，通常會經常使用頁面中固定高度的，而且子元素並排顯示的佈局。好比：導航欄

clear：both

clear：意思就是清除的意思。

有三個值：

left：當前元素左邊不容許有浮動元素

right：當前元素右邊不容許有浮動元素

both：當前元素左右兩邊不容許有浮動元素

給浮動元素的後面加一個空的div，而且該元素不浮動，而後設置clear：both。

html結構：

<div>
        <ul>
            <li>Python</li>
            <li>web</li>
            <li>linux</li>
            <!-- 給浮動元素最後面加一個空的div 而且該元素不浮動 ，而後設置clear:both  清除別人對個人浮動影響-->
            <!-- 內牆法 -->
            <!-- 平白無故加了div元素  結構冗餘 -->
            <div class="clear"></div>
            
        </ul>
        
</div>
<div class="box">
        
</div>

css樣式

*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        
        }


        div{
            width: 400px;
        
        }
        

        div ul li {
            float: left;
            width: 100px;
            height: 40px;
            background-color: red;
        }
        .box{
            width: 200px;
            height: 100px;
            background-color: yellow;
        }
        .clear{
            clear: both;
        }

僞元素清除法(經常使用)

給浮動子元素的父盒子，也就是不浮動元素，添加一個clearfix的類，而後設置

.clearfix:after{
    /*必需要寫這三句話*/
    content: '.';
    clear: both;
    display: block;
}

新浪首頁推薦僞元素清除法的寫法

/*新浪首頁清除浮動僞元素方法*/
              content: ".";
                display: block;
                height: 0;
                clear: both;
                visibility: hidden

overflow:hidden(經常使用)

overflow屬性規定當內容溢出元素框時發生的事情。

說明：

這個屬性定義溢出元素內容區的內容會如何處理。若是值爲 scroll，不管是否須要，用戶代理都會提供一種滾動機制。所以，有可能即便元素框中能夠放下全部內容也會出現滾動條。

有五個值：

值	描述
visible	默認值。內容不會被修剪，會呈如今元素框以外。
hidden	內容會被修剪，而且其他內容是不可見的。
scroll	內容會被修剪，可是瀏覽器會顯示滾動條以便查看其他的內容。
auto	若是內容被修剪，則瀏覽器會顯示滾動條以便查看其他的內容。
inherit	規定應該從父元素繼承 overflow 屬性的值。

逐漸演變成overflow：hidden清除法。

其實它是一個BFC區域: http://www.javashuo.com/article/p-ezyacvwn-v.html

到此爲止。關於浮動的實現並排、清除浮動的四個用法已經介紹完畢，你們必定要熟記於心。

16-margin的用法

margin塌陷問題

當時說到了盒模型，盒模型包含着margin，爲何要在這裏說margin呢？由於元素和元素在垂直方向上margin裏面有坑。

咱們來看一個例子：

html結構：

<div class="father">
    <div class="box1"></div>        
    <div class="box2"></div>
</div>

css樣式：

*{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 400px;
            overflow: hidden;
            border: 1px solid gray;
        }
        .box1{
            width: 300px;
            height: 200px;
            background-color: red;
            margin-bottom: 20px;}
        .box2{
            width: 400px;
            height: 300px;
            background-color: green;
            margin-top: 50px;
        }

當給兩個標準流下兄弟盒子設置垂直方向上的margin時，那麼以較大的爲準，那麼咱們稱這種現象叫塌陷。無法解決，咱們稱爲這種技巧叫「奇淫技巧」。記住這種現象，在佈局垂直方向盒子的時候主要margin的用法。

當咱們給兩個標準流下的兄弟盒子設置浮動以後，就不會出現margin塌陷的問題。

margin：0 auto;

div{
            width: 780px;
            height: 50px;
            background-color: red;
            /*水平居中盒子*/
            margin: 0px auto;
                        /*水平居中文字*/
            text-align: center;

        }

當一個div元素設置margin：0 auto;時就會居中盒子，那咱們知道margin:0 auto;表示上下外邊距離爲0，左右爲auto的距離，那麼auto是什麼意思呢？

設置margin-left:auto；咱們發現盒子儘量大的右邊有很大的距離，沒有什麼意義。當設置margin-right:auto；咱們發現盒子儘量大的左邊有很大的距離。當兩條語句並存的時候，咱們發現盒子儘量大的左右兩邊有很大的距離。此時咱們就發現盒子居中了。

另外如何給盒子設置浮動，那麼margin:0 auto失效。

使用margin：0 auto;注意點：

1.使用margin: 0 auto;水平居中盒子必須有width，要有明確width，文字水平居中使用text-align: center;

2.只有標準流下的盒子才能使用margin:0 auto;

當一個盒子浮動了，固定定位，絕對定位(後面會講)，margin:0 auto; 不能用了

3.margin：0 auto;居中盒子。而不是居中文本，文字水平居中使用text-align: center;

另外你們必定要知道margin屬性是描述兄弟盒子的關係，而padding描述的是父子盒子的關係

善於使用父親的padding，而不是margin

若是讓你們實現如圖的效果，應該有很多的同窗作不出來。

那麼咱們來看看這個案例，它的坑在哪裏？

下面這個代碼應該是你們都會去寫的代碼。

*{
            padding: 0;
            margin: 0;
        }
        .father{
            width: 300px;
            height: 300px;
            background-color: blue;
        }
        .xiongda{
            width: 100px;
            height: 100px;
            background-color: orange;
            
            margin-top: 30px;
        }

由於父親沒有border，那麼兒子margin-top實際上踹的是「流」踹的是行,因此父親掉下來了，一旦給父親一個border發現就行了。

那麼問題來了，咱們不可能在頁面中平白無故的去給盒子加一個border，因此此時的解決方案只有一種。就是使用父親的padding。讓子盒子擠下來。

17-文本屬性和字體屬性

文本屬性

介紹幾個經常使用的。

文本對齊

text-align 屬性規定元素中的文本的水平對齊方式。

屬性值：none | center | left | right | justify

文本顏色

color屬性

文本首行縮進

text-indent 屬性規定元素首行縮進的距離，單位建議使用em

文本修飾

text-decoration屬性規定文本修飾的樣式

屬性值：none(默認) | underline(下劃線) | overline(定義文本上的一條線) | line-through (定義穿過文本下的一條線) | inherit(繼承父元素的text-decoration屬性的值。)

行高

line-height就是行高的意思，指的就是一行的高度。

字體屬性

字體大小

font-size表示設置字體大小，若是設置成inherit表示繼承父元素的字體大小值。

字體粗細

font-weight表示設置字體的粗細

字體系列

font-family

font-family: "Microsoft Yahei", "微軟雅黑", "Arial", sans-serif

若是瀏覽器不支持第一個字體，則會嘗試下一個。瀏覽器會使用它可識別的第一個值。若是都不支持則顯示宋體。

行高 line-height

針對單行文本垂直居中

公式：行高的高度等於盒子的高度，可使當行文本垂直居中，注意只適用單行文本。

針對多行文本垂直居中

行高的高度不能小於字體的大小，否則上下字之間會緊挨一塊兒。

第一步，一個寬度300*300的盒子，看盒子中一共顯示了幾行文字，假如是5行，再看一下行高，若是行高是line-height:30px; 那麼就知道行高*5=150px

第二步，讓(盒子的高度-150px)/2=75;那麼設置盒子的padding-top:75px;同時保證盒子的高度爲300px,那麼高度改成225px;

font-family介紹

使用font-family注意幾點：

1.網頁中不是全部字體都能用哦，由於這個字體要看用戶的電腦裏面裝沒裝，
好比你設置： font-family: "華文彩雲"; 若是用戶電腦裏面沒有這個字體，
那麼就會變成宋體
頁面中，中文咱們只使用：微軟雅黑、宋體、黑體。
若是頁面中，須要其餘的字體，那麼須要切圖。英語：Arial 、 Times New Roman

2.爲了防止用戶電腦裏面，沒有微軟雅黑這個字體。
就要用英語的逗號，隔開備選字體，就是說若是用戶電腦裏面，
沒有安裝微軟雅黑字體，那麼就是宋體：
font-family: "微軟雅黑","宋體"; 備選字體能夠有無數個，用逗號隔開。
3.咱們要將英語字體，放在最前面，這樣全部的中文，就不能匹配英語字體，
就自動的變爲後面的中文字體：
font-family: "Times New Roman","微軟雅黑","宋體";

4.全部的中文字體，都有英語別名，
咱們也要知道：微軟雅黑的英語別名：
font-family: "Microsoft YaHei";
宋體的英語別名： font-family: "SimSun";
font屬性可以將font-size、line-height、font-family合三爲一： font:12px/30px "Times New Roman","Microsoft YaHei","SimSun";

5.行高能夠用百分比，表示字號的百分之多少。
通常來講，都是大於100%的，由於行高必定要大於字號。
font:12px/200% 「宋體」等價於 font:12px/24px 「宋體」;
反過來，好比： font:16px/48px 「宋體」;
等價於 font:16px/300% 「宋體」

18-超連接導航欄案例

直接上代碼了

html結構

<div class="nav">
        <ul>
            <li>
                <a href="">路飛學城</a>
            </li>
            <li>
                <a href="">老男孩</a>
            </li>
            <li>
                <a href="">網站導航</a>
            </li>
            <li>
                <a href="">網站導航</a>
            </li>
            <li>
                <a href="">網站導航</a>
            </li>
            <li>
                <a href="">網站導航</a>
            </li>
        </ul>
    </div>

寫好上面的結構代碼以後，也就是將咱們頁面展現的內容顯示了，可是咱們此時要利用咱們學過的知識點來佈局頁面

首先咱們要作導航欄，並排顯示元素，第一想浮動，想到使用浮動以後，必定記得清除浮動元素。

css代碼以下：

*{
            padding: 0;
            margin: 0;
        }
        ul{
            list-style: none;
        }
        .nav{
            width: 960px;
            /*height: 40px;*/
            overflow: hidden;
            margin: 100px auto ;
            background-color: purple;
            /*設置圓角*/
            border-radius: 5px;
        }
        .nav ul li{
            float: left;
            width: 160px;
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
        .nav ul li a{
            display: block;
            width: 160px;
            height: 40px;
            color: white;
            font-size: 20px;
            text-decoration: none;
            font-family: 'Hanzipen SC';
        }
        /*a標籤除外，不繼承父元素的color*/


        .nav ul li a:hover{
            background-color: red;
            font-size: 22px;
        }

19-background

先來說講顏色表示法

一共有三種：單詞、rgb表示法、十六進制表示法

rgb:紅色綠色藍色三原色
光學顯示器，每一個像素都是由三原色的發光原件組成的，靠明亮度不一樣調成不一樣的顏色的。
用逗號隔開，r、g、b的值，每一個值的取值範圍0~255，一共256個值。
若是此項的值，是255，那麼就說明是純色：

黑色：

光學顯示器，每一個元件都不發光，黑色的。

白色：

顏色能夠疊加，好比黃色就是紅色和綠色的疊加：

再好比：

就是紅、綠、藍三種顏色的不一樣比例疊加。

16進製表示法
紅色：

全部用#開頭的值，都是16進制的。
#ff0000：紅色
16進製表示法，也是兩位兩位看，看r、g、b，可是沒有逗號隔開。
ff就是10進制的255 ，00 就是10進制的0，00就是10進制的0。因此等價於rgb(255,0,0);
怎麼換算的？咱們介紹一下
咱們如今看一下10進制中的基本數字（一共10個）:
0、一、二、三、四、五、六、七、八、9

16進制中的基本數字（一共16個）:
0、一、二、三、四、五、六、七、八、九、a、b、c、d、e、f

16進制對應表：
十進制數十六進制數
0 0
1 1
2 2
3 3
……
10 a
11 b
12 c
13 d
14 e
15 f

16 10
17 11
18 12
19 13
……
43 2b
……
255 ff

十六進制中，13 這個數字表示什麼？
表示1個16和3個1。那就是19。這就是位權的概念，開頭這位表示多少個16，末尾這位表示多少個1。
小練習：
16進制中28等於10進制多少？
答：2*16+8 = 40。

16進制中的2b等於10進制多少？
答：2*16+11 = 43。

16進制中的af等於10進制多少？
答：10 * 16 + 15 = 175

16進制中的ff等於10進制多少？
答：15*16 + 15 = 255

因此，#ff0000就等於rgb(255,0,0)

等價於：

因此，任何一種十六進制表示法，都可以換算成爲rgb表示法。也就是說，兩個表示法的顏色數量，同樣。

十六進制能夠簡化爲3位，全部#aabbcc的形式，可以簡化爲#abc;
好比：

等價於

好比：

等價於

只能上面的方法簡化，好比

沒法簡化！
再好比

沒法簡化！

要記住：
#000 黑
#fff 白
#f00 紅
#333 灰
#222 深灰
#ccc 淺灰

background-color屬性表示背景顏色

background-img:表示設置該元素的背景圖片

那麼發現默認的背景圖片，水平方向和垂直方向都平鋪

background-repeat:表示設置該元素平鋪的方式

屬性值：

值	描述
repeat	默認。背景圖像將在垂直方向和水平方向重複。
repeat-x	背景圖像將在水平方向重複。
repeat-y	背景圖像將在垂直方向重複。
no-repeat	背景圖像將僅顯示一次。
inherit	規定應該從父元素繼承 background-repeat 屬性的設置。

給元素設置padding以後，發現padding的區域也會平鋪背景圖片。

repeat應用案例

仍是上面那個超連接導航欄的案例，咱們給body設置平鋪的圖片，注意：必定找左右對稱的平鋪圖片，才能實現咱們要的效果

background-position: 屬性設置背景圖像的起始位置。這個屬性設置背景原圖像（由 background-image 定義）的位置

屬性值：

值	描述
top left top center top right center left center center center right bottom left bottom center bottom right	若是您僅規定了一個關鍵詞，那麼第二個值將是"center"。默認值：0 0；這兩個值必須挨在一塊兒。

值

描述

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right

若是您僅規定了一個關鍵詞，那麼第二個值將是"center"。

默認值：0 0；

這兩個值必須挨在一塊兒。

雪碧圖技術（精靈圖技術）

CSS雪碧即CSS Sprite，也有人叫它CSS精靈，是一種CSS圖像合併技術，該方法是將小圖標和背景圖像合併到一張圖片上，而後利用css的背景定位來顯示須要顯示的圖片部分

CSS 雪碧圖應用原理：
只有一張大的合併圖，每一個小圖標節點如何顯示單獨的小圖標呢？

其實就是截取大圖一部分顯示，而這部分就是一個小圖標。

使用雪碧圖的好處：

一、利用CSS Sprites能很好地減小網頁的http請求，從而大大的提升頁面的性能，這也是CSS Sprites最大的優勢，也是其被普遍傳播和應用的主要緣由；
二、CSS Sprites能減小圖片的字節，曾經比較過屢次3張圖片合併成1張圖片的字節老是小於這3張圖片的字節總和。
三、解決了網頁設計師在圖片命名上的困擾，只需對一張集合的圖片上命名就能夠了，不須要對每個小元素進行命名，從而提升了網頁的製做效率。
四、更換風格方便，只須要在一張或少張圖片上修改圖片的顏色或樣式，整個網頁的風格就能夠改變。維護起來更加方便

不足：

1）CSS雪碧的最大問題是內存使用
2）拼圖維護比較麻煩
3）使CSS的編寫變得困難
4）CSS 雪碧調用的圖片不能被打印

咱們可使用background綜合屬性製做通天banner，什麼是通天banner呢，就是通常咱們電腦的屏幕都是1439.可是設計師給咱們的banner圖都會比這個大，

那麼咱們能夠此屬性來製做通天banner。

background:  red  url('./images/banner.jpg')  no-repeat   center top;

background-attach

設置fixed以後，該屬性固定背景圖片不隨瀏覽器的滾動而滾動

20-定位

定位

定位有三種：

1.相對定位 2.絕對定位 3.固定定位

這三種定位，每一種都暗藏玄機，因此咱們要一一單講。

相對定位

相對定位:相對於本身原來的位置定位

現象和使用：

1.若是對當前元素僅僅設置了相對定位，那麼與標準流的盒子什麼區別。

2.設置相對定位以後，咱們纔可使用四個方向的屬性： top、bottom、left、right

特性：

1.不脫標

2.形影分離

3.老家留坑（佔着茅房不拉屎，噁心人）

因此說相對定位在頁面中沒有什麼太大的做用。影響咱們頁面的佈局。咱們不要使用相對定位來作壓蓋效果

用途：

1.微調元素位置

2.作絕對定位的參考（父相子絕）絕對定位會說到此內容。

參考點：

本身原來的位置作參考點。

絕對定位

特性：

1.脫標 2.作遮蓋效果，提成了層級。設置絕對定位以後，不區分行內元素和塊級元素，都能設置寬高。

參考點(重點)：

1、單獨一個絕對定位的盒子

1.當我使用top屬性描述的時候是以頁面的左上角（跟瀏覽器的左上角區分）爲參考點來調整位置
2.當我使用bottom屬性描述的時候。是以首屏頁面左下角爲參考點來調整位置。

2、以父輩盒子做爲參考點

1.父輩元素設置相對定位，子元素設置絕對定位，那麼會以父輩元素左上角爲參考點，這個父輩元素不必定是爸爸，它也能夠是爺爺，曾爺爺。

2.若是父親設置了定位，那麼以父親爲參考點。那麼若是父親沒有設置定位，那麼以父輩元素設置定位的爲參考點

3.不只僅是父相子絕，父絕子絕，父固子絕,都是以父輩元素爲參考點

注意了：父絕子絕，沒有實戰意義，作站的時候不會出現父絕子絕。由於絕對定位脫離標準流，影響頁面的佈局。相反‘父相子絕’在咱們頁面佈局中，是經常使用的佈局方案。由於父親設置相對定位，不脫離標準流，子元素設置絕對定位，僅僅的是在當前父輩元素內調整該元素的位置。

還要注意，絕對定位的盒子無視父輩的padding

做用：頁面佈局常見的「父相子絕」，必定要會！！！！

絕對定位的盒子居中

當作公式記下來吧！

*{
            padding: 0;
            margin: 0;
        }
        .box{
            width: 100%;
            height: 69px;
            background: #000;
        }
        .box .c{
            width: 960px;
            height: 69px;
            background-color: pink;
            /*margin: 0 auto;*/
            position: relative;
            left: 50%;
            margin-left: -480px;

            /*設置絕對定位以後，margin:0 auto;不起任何做用，若是想讓絕對定位的盒子居中。當作公式記下來 設置子元素絕對定位，而後left:50%; margin-left等於元素寬度的一半，實現絕對定位盒子居中*/
        }

固定定位

固定當前的元素不會隨着頁面滾動而滾動

特性:

1.脫標 2.遮蓋，提高層級 3.固定不變

參考點：

設置固定定位，用top描述。那麼是以瀏覽器的左上角爲參考點
若是用bottom描述，那麼是以瀏覽器的左下角爲參考點

做用： 1.返回頂部欄 2.固定導航欄 3.小廣告

21-z-index

z-index

這個東西很是簡單，它有四大特性，每一個特性你記住了，頁面佈局就不會出現找不到盒子的狀況。

z-index 值表示誰壓着誰，數值大的壓蓋住數值小的，
只有定位了的元素，纔能有z-index,也就是說，無論相對定位，絕對定位，固定定位，均可以使用z-index，而浮動元素不能使用z-index
z-index值沒有單位，就是一個正整數，默認的z-index值爲0若是你們都沒有z-index值，或者z-index值同樣，那麼誰寫在HTML後面，誰在上面壓着別人，定位了元素，永遠壓住沒有定位的元素。
從父現象：父親慫了，兒子再牛逼也沒用