CSS 文法

CSS 規則由兩個主要的部分構成：選擇器，以及一條或多條聲明。

'''

selector {

property: value;

... property: value

}

'''

例如：

1	h1 {color:red; font-size:14px;}

css的四種引入方式

1.行内式

行内式是在标記的style屬性中設定CSS樣式。這種方式沒有展現出CSS的優勢，不推薦使用。

1	<p style="background-color: rebeccapurple">hello yuan</p>

2.嵌入式

嵌入式是将CSS樣式集中寫在網頁的<head></head>标簽對的<style></style>标簽對中。格式如下：

<head>

<title>Title</title>

<style>

background-color: #2b99ff;

}

</style>

</head>

3 連結式

将一個.css檔案引入到HTML檔案中

1	<link href="mystyle.css" rel="stylesheet" type="text/css"/>

4.導入式

将一個獨立的.css檔案引入HTML檔案中，導入式使用CSS規則引入外部CSS檔案，<style>标記也是寫在<head>标記中，使用的文法如下：

@import"mystyle.css"; 此處要注意.css檔案的路徑

</style>

注意：

導入式會在整個網頁裝載完後再裝載CSS檔案，是以這就導緻了一個問題，如果網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下之後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用連結式時與導入式不同的是它會以網頁檔案主體裝載前裝載CSS檔案，是以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，然後再顯示有樣式的網頁，這是連結式的優點。

css選擇器

基本選擇器

組合選擇器

E,F 多元素選擇器，同時比對所有E元素或F元素，E和F之間用逗号分隔 :div,p { color:#f00; }

E F 後代元素選擇器，比對所有屬于E元素後代的F元素，E和F之間用空格分隔 :li a { font-weight:bold;｝

E > F 子元素選擇器，比對所有E元素的子元素F :div > p { color:#f00; }

E + F 毗鄰元素選擇器，比對所有緊随E元素之後的同級元素F :div + p { color:#f00; }

E ~ F 普通兄弟選擇器（以破折号分隔） :.div1 ~ p{font-size: 30px; }

注意，關于标簽嵌套：

一般，塊級元素可以包含内聯元素或某些塊級元素，但内聯元素不能包含塊級元素，它隻能包含其它内聯元素。需要注意的是，p标簽不能包含塊級标簽。

屬性選擇器

E[att] 比對所有具有att屬性的E元素，不考慮它的值。（注意：E在此處可以省略。

比如“[cheacked]”。以下同。） p[title] { color:#f00; }

E[att=val] 比對所有att屬性等于“val”的E元素 div[class=”error”] { color:#f00; }

E[att~=val] 比對所有att屬性具有多個空格分隔的值、其中一個值等于“val”的E元素

td[class~=”name”] { color:#f00; }

E[attr^=val] 比對屬性值以指定值開頭的每個元素

div[class^="test"]{background:#ffff00;}

E[attr$=val] 比對屬性值以指定值結尾的每個元素 div[class$="test"]{background:#ffff00;}

E[attr*=val] 比對屬性值中包含指定值的每個元素 div[class*="test"]{background:#ffff00;}

僞類

anchor僞類：專用于控制連結的顯示效果

'''
        a:link（沒有接觸過的連結）,用于定義了連結的正常狀态。

        a:hover（滑鼠放在連結上的狀态）,用于産生視覺效果。
        
        a:visited（通路過的連結）,用于閱讀文章，能清楚的判斷已經通路過的連結。
        
        a:active（在連結上按下滑鼠時的狀态）,用于表現滑鼠按下時的連結狀态。
        
        僞類選擇器 : 僞類指的是标簽的不同狀态:
        
                   a ==> 點過狀态 沒有點過的狀态 滑鼠懸浮狀态 激活狀态
        
        a:link {color: #FF0000} /* 未通路的連結 */
        
        a:visited {color: #00FF00} /* 已通路的連結 */
        
        a:hover {color: #FF00FF} /* 滑鼠移動到連結上 */
        
        a:active {color: #0000FF} /* 標明的連結 */ 格式: 标簽:僞類名稱{ css代碼; }

'''

複制

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

       .top{
           background-color: rebeccapurple;
           width: 100px;
           height: 100px;
       }
        .bottom{
            background-color: green;
            width: 100px;
            height: 100px;
        }

        .outer:hover .bottom{           #懸浮在outer上，改變bottom的背景色（必須是父子關系才能這麼設定，兄弟關系設定無效）
            background-color: yellow;
        }

        注意:一定是outer:hover  控制outer裡某一個标簽,否則無效()

        .top:hover .bottom{
            background-color: yellow;
        }
    </style>
</head>
<body>


<div class="outer">
    <div class="top">top</div>
    <div class="bottom">bottom</div>
</div>




</body>
</html>

複制

before after僞類

:before    p:before       在每個<p>元素之前插入内容     
 :after     p:after        在每個<p>元素之後插入内容     

例：p:before{content:"hello";color:red;display: block;}

複制

選擇器的優先級　

css的繼承

繼承是CSS的一個主要特征，它是依賴于祖先-後代的關系的。繼承是一種機制，它允許樣式不僅可以應用于某個特定的元素，還可以應用于它的後代。例如一個BODY定義了的顔色值也會應用到段落的文本中。

1	body{color:red;} <p>helloyuan</p>

這段文字都繼承了由body {color:red;}樣式定義的顔色。然而CSS繼承性的權重是非常低的，是比普通元素的權重還要低的0。

1	p{color:green}

發現隻需要給加個顔色值就能覆寫掉它繼承的樣式顔色。由此可見：任何顯示申明的規則都可以覆寫其繼承樣式。

此外，繼承是CSS重要的一部分，我們甚至不用去考慮它為什麼能夠這樣，但CSS繼承也是有限制的。有一些屬性不能被繼承，如：border, margin, padding, background等。

div{
  border:1px solid #222
}

<div>hello <p>yuan</p> </div>

複制

對于a标簽，有自己的樣式顔色等，當給其父級字型顔色大小等屬性時，a标簽并不會繼承這些屬性，是以要改a标簽的屬性，必須指定到a标簽上

css的優先級

所謂CSS優先級，即是指CSS樣式在浏覽器中被解析的先後順序。

樣式表中的特殊性描述了不同規則的相對權重，它的基本規則是：

1 内聯樣式表的權值最高 style=""－－－－－－－－－－－－1000；

2 統計選擇符中的ID屬性個數。 #id －－－－－－－－－－－－－－100

3 統計選擇符中的CLASS屬性個數。 .class －－－－－－－－－－－－－10

4 統計選擇符中的HTML标簽名個數。 p －－－－－－－－－－－－－-－1

按這些規則将數字元串逐位相加，就得到最終的權重，然後在比較取舍時按照從左到右的順序逐位比較。

1、文内的樣式優先級為1000，是以始終高于外部定義。
   
　　2、有!important聲明的規則高于一切。

　　3、如果!important聲明沖突，則比較優先權。

　　4、如果優先權一樣，則按照在源碼中出現的順序決定，後來者居上。

　　5、由繼承而得到的樣式沒有specificity的計算，它低于一切其它規則(比如全局選擇符*定義的規則)。

複制

css屬性操作

css text

文本顔色：color

顔色屬性被用來設定文字的顔色。

顔色是通過CSS最經常的指定：

十六進制值 - 如: ＃FF0000
一個RGB值 - 如: RGB(255,0,0)
顔色的名稱 - 如: red

1	p { color: rebeccapurple; }

水準對齊方式

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

left 把文本排列到左邊。預設值：由浏覽器決定。
right 把文本排列到右邊。
center 把文本排列到中間。
justify 實作兩端對齊文本效果。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>css</title>
<style>
        h2 {text-align:center;}
        p.publish_time {text-align:right;}
        p.content {text-align:justify;}
</style>
</head>

<body>
<h1>CSS text-align 水準居中</h1>
<p class="publish_time">2017 年 5 月 17 号</p>
<p class="content">
    有個落拓不得志的中年人每隔三兩天就到教堂祈禱，而且他的禱告詞幾乎每次都相同。第一次他到教堂時，
    跪在聖壇前，虔誠地低語：“上帝啊，請念在我多年來敬畏您的份上。讓我中一次彩票吧！阿門。”
    幾天後，他又垂頭喪氣回到教堂，同樣跪着祈禱：“上帝啊，為何不讓我中彩票？我願意更謙卑地來
    服侍你，求您讓我中一次彩票吧！阿門。”又過了幾天，他再次出現在教堂，同樣重複他的祈禱。如此周而
    複始，不間斷地祈求着。到了最後一次，他跪着：“我的上帝，為何您不垂聽我的祈求？讓我中一次彩票吧！
    隻要一次，讓我解決所有困難，我願終身奉獻，專心侍奉您……”就在這時，聖壇上發出一陣宏偉莊嚴的聲
    音：“我一直垂聽你的禱告。可是最起碼？你也該先去買一張彩票吧!”</p>
<p><b>注意：</b> 重置浏覽器視窗大小檢視 &quot;justify&quot; 是如何工作的。</p>
</body>

</html>

複制

文本其他屬性

font-size: 10px;    字型大小

line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基于字型大小的百分比 （文本垂直居中可以将行高和塊的高度設定為相同值）

vertical-align:－4px  設定元素内容的垂直對齊方式 ,隻對行内元素有效，對塊級元素無效，不設定時預設以基線baseline對齊（當圖檔和文字或輸入框等在一行但是沒對齊時，可以設定此屬性，來調整）


text-decoration:none       text-decoration 屬性用來設定或删除文本的裝飾。主要是用來删除連結的下劃線,如： a{text-decoration:none}

font-family: 'Lucida Bright'   字型樣式

font-weight: lighter/bold/border/  字型粗細

font-style: oblique   字型斜體

text-indent: 150px;      首行縮進150px

letter-spacing: 10px;  字母間距

word-spacing: 20px;  單詞間距

text-transform: capitalize/uppercase/lowercase ; 文本轉換，用于所有字句變成大寫或小寫字母，或每個單詞的首字母大寫

複制

背景屬性

屬性介紹

background-color
background-image
background-repeat
background-position

background-color: cornflowerblue

background-image: url('1.jpg');

background-repeat: no-repeat;（不設定此屬性，圖檔不夠大時，會多個相同圖檔填充頁面）(repeat:平鋪滿)

background-position: right top（20px 20px）;（設定圖檔在頁面的位置，填center可以居中）

簡寫

1	background:#ffffff url('1.png') no-repeat center center;

邊框屬性

屬性介紹

border-width 寬度
border-style (required) 樣式
border-color 顔色

border-style: solid;

border-color: chartreuse;

border-width: 20px;

簡寫　

1	簡寫：border: 30px rebeccapurple solid;

邊框-單獨設定各邊

border-top-style:dotted;

border-right-style:solid;

border-bottom-style:dotted;

border-left-style:none;

清單屬性

list-style-type 設定清單項标志的類型。

list-style-image 将圖象設定為清單項标志。

list-style-position 設定清單中清單項标志的位置。

list-style 簡寫屬性。用于把所有用于清單的屬性設定于一個聲明中

ist-style-type屬性指定清單項标記的類型：

1	ul { list-style-type: square; }

使用圖像來替換清單項的标記:

ul {

list-style-image: url('');

}

ul li{list-style:none} 去掉清單前面的标志，但是還是與最左邊有距離

*{ margin:0;

padding:0} 最好設定此項，可以去掉頂部與頁面的間隙，也可消除清單與左邊的空白距離

dispaly屬性

none　　
block 設定成塊級，可以設定長寬，獨占一行
inline 設定成内聯，長寬設定無效，大小由内容多少而定，不獨占一行
inline-block 兼具塊級和内聯标簽的特性，可以設定長寬，但是不獨占一行

none(隐藏某标簽)

1	p{display:none;}

注意與visibility:hidden的差別：

visibility:hidden可以隐藏某個元素，但隐藏的元素仍需占用與未隐藏之前一樣的空間。也就是說，該元素雖然被隐藏了，但仍然會影響布局。

display:none可以隐藏某個元素，且隐藏的元素不會占用任何空間。也就是說，該元素不但被隐藏了，而且該元素原本占用的空間也會從頁面布局中消失。

`block(内聯标簽設定為塊級标簽)`

1	span {display:block;}

注意：一個内聯元素設定為display:block是不允許有它内部的嵌套塊元素。

`inline(塊級标簽設定為内聯标簽)`

1	li {display:inline;}

inline-block

display:inline-block可做清單布局，其中的類似于圖檔間的間隙小bug可以通過如下設定解決：

#outer{

border: 3px dashed;

word-spacing: -5px;

}

或者調整margin-left:-5px

外邊距(margine)和内邊距(padding)

盒子模型

margin: 用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到互相隔開的目的。
padding: 用于控制内容與邊框之間的距離；
Border(邊框): 圍繞在内邊距和内容外的邊框。
Content(内容): 盒子的内容，顯示文本和圖像。

margine(外邊距)

單邊外邊距屬性：

margin-top:100px;

margin-bottom:100px;

margin-right:50px;

margin-left:50px;

簡寫屬性　

margin:10px 20px 20px 10px；

        上邊距為10px
        右邊距為20px
        下邊距為20px
        左邊距為10px

margin:10px 20px 10px;

        上邊距為10px
        左右邊距為20px
        下邊距為10px

margin:10px 20px;

        上下邊距為10px
        左右邊距為20px

margin:25px;

        所有的4個邊距都是25px

複制

居中應用

1	margin: 0 auto;

margin後面如果隻有兩個參數的話，第一個表示top和bottom，第二個表示left和right
因為0 auto，表示上下邊界為0，左右則根據寬度自适應相同值（即水準居中）

margin:0 auto使頁面居中無效的原因：
margin:0 auto居中要配合固定Width才生效，另外用了position，margin也不會居中了。

1.要給居中的元素一個寬度，否者無效。

2.該元素一定不能浮動，否者無效。

3 在HTML中使用<center></center>标簽，需考慮好整體構架，否者全部元素都會居中的。

複制

padding(内邊距)

單獨使用填充屬性可以改變上下左右的填充。縮寫填充屬性也可以使用，一旦改變一切都改變。

設定同margine；

頁碼執行個體：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .outer{
            margin: 0 auto;
            width: 80%;

        }

        .content{
            background-color: darkgrey;
            height: 500px;

        }

        a{
            text-decoration: none;
        }

        .page-area{

            text-align: center;
            padding-top: 30px;
            padding-bottom: 30px;
            background-color: #f0ad4e;

        }

        .page-area ul li{
            display: inline-block;
        }


       .page-area ul li a ,.page-area ul li span{

            display: inline-block;
            color: #369;
            height: 25px;
            width: 25px;
            text-align: center;
            line-height: 25px;

            padding: 8px;
            margin-left: 8px;

            border: 1px solid #e1e1e1;
            border-radius: 15%;

        }

       .page-area ul li .page-next{
           width: 70px;
           border-radius:0
       }


       .page-area ul li span.current_page{
           border: none;
           color: black;
           font-weight:900;
       }

       .page-area ul li a:hover{

           color: #fff;
           background-color: #2459a2;
       }


    </style>
</head>
<body>

<div class="outer">

<div class="content"></div>

<div class="page-area">

             <ul>

                 <li><span class="current_page">1</span></li>
                 <li><a href="#" class="page-a">2</a></li>
                 <li><a href="#" class="page-a">3</a></li>
                 <li><a href="#" class="page-a">4</a></li>
                 <li><a href="#" class="page-a">5</a></li>
                 <li><a href="#" class="page-a">6</a></li>
                 <li><a href="#" class="page-a">7</a></li>
                 <li><a href="#" class="page-a">8</a></li>
                 <li><a href="#" class="page-a">9</a></li>
                 <li><a href="#" class="page-a">10</a></li>
                 <li><a href="#" class="page-a page-next">下一頁</a></li>

             </ul>

</div>

</div>


</body>
</html>

複制

思考1:body的外邊距

邊框在預設情況下會定位于浏覽器視窗的左上角，但是并沒有緊貼着浏覽器的視窗的邊框，這是因為body本身也是一個盒子（外層還有html），在預設情況下， body距離html會有若幹像素的margin，具體數值因各個浏覽器不盡相同，是以body中的盒子不會緊貼浏覽器視窗的邊框了，為了驗證這一點，加上：

body{
    border: 1px solid;
    background-color: cadetblue;
}

複制

>>>>解決方法：

body{
    margin: 0;
}

複制

思考2：margin collapse（邊界塌陷或者說邊界重疊）

1、兄弟div：

上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下兩者margin裡最大值作為顯示值

2、父子div：

if 父級div中沒有border，padding，inlinecontent，子級div的margin會一直向上找，直到找到某個标簽包括border，padding，inline content中的其中一個，然後按此div 進行margin；

<!DOCTYPE html>
<html lang="en" style="padding: 0px">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        body{
            margin: 0px;
        }

        .div1{
            background-color: rebeccapurple;
            width: 300px;
            height: 300px;
            overflow: hidden;

        }
        .div2{
            background-color: green;
            width: 100px;
            height: 100px;
            margin-bottom: 40px;
            margin-top: 20px;
        }
        .div3{
            background-color:teal;
            width: 100px;
            height: 100px;
            margin-top: 20px;
        }
    </style>
</head>
<body>
<div style="background-color: bisque;width: 300px;height: 300px"></div>

<div class="div1">

   <div class="div2"></div>
   <div class="div3"></div>
</div>

</body>

</html>

複制

>>>> 解決方法：

給父級标簽加上任意屬性（會改變結構），不想改變可以加下面屬性

1	overflow: hidden;　溢出則隐藏

如果有文本，最好用overflow：auto，那樣溢出的文本也可以通過滾動條看到

float屬性

基本浮動規則

先來了解一下block元素和inline元素在文檔流中的排列方式。

block元素通常被現實為獨立的一塊，獨占一行，多個block元素會各自新起一行，預設block元素寬度自動填滿其父元素寬度。block元素可以設定width、height、margin、padding屬性；

inline元素不會獨占一行，多個相鄰的行内元素會排列在同一行裡，直到一行排列不下，才會新換一行，其寬度随元素的内容而變化。inline元素設定width、height屬性無效

常見的塊級元素有 div、form、table、p、pre、h1～h5、dl、ol、ul 等。
常見的内聯元素有 span、a、strong、em、label、input、select、textarea、img、br等

所謂的文檔流，指的是元素排版布局過程中，元素會自動從左往右，從上往下的流式排列。

脫離文檔流，也就是将元素從普通的布局排版中拿走，其他盒子在定位的時候，會當做脫離文檔流的元素不存在而進行定位。

假如某個div元素A是浮動的，如果A元素上一個元素也是浮動的，那麼A元素會跟随在上一個元素的後邊(如果一行放不下這兩個元素，那麼A元素會被擠到下一行)；如果A元素上一個元素是标準流中的元素，那麼A的相對垂直位置不會改變，也就是說A的頂部總是和上一個元素的底部對齊。此外，浮動的框之後的block元素元素會認為這個框不存在，但其中的文本依然會為這個元素讓出位置。浮動的框之後的inline元素，會為這個框空出位置，然後按順序排列。

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            /*float: left;*/

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>

複制

非完全脫離文檔流

左右結構div盒子重疊現象，一般是由于相鄰兩個DIV一個使用浮動一個沒有使用浮動。一個使用浮動一個沒有導緻DIV不是在同個“平面”上，但内容不會造成覆寫現象，隻有DIV形成覆寫現象。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 100px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;

        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2">region2</div>




</body>
</html>

複制

>>>>解決方法：要麼都不使用浮動；要麼都使用float浮動；要麼對沒有使用float浮動的DIV設定margin樣式。

父級坍塌現象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
<style type="text/css">
         * {
             margin:0;padding:0;
         }
        .container{
            border:1px solid red;width:300px;
        }
        #box1{
            background-color:green;float:left;width:100px;height:100px;
        }
        #box2{
            background-color:deeppink; float:right;width:100px;height:100px; 
        }
         #box3{
             background-color:pink;height:40px;
         }
</style>
</head>
<body>

        <div class="container">
                <div id="box1">box1 向左浮動</div>
                <div id="box2">box2 向右浮動</div>
        </div>
        <div id="box3">box3</div>
</body>
</body>
</html>

複制

例子如上：.container和box3的布局是上下結構，上圖發現box3跑到了上面，與.container産生了重疊，但文本内容沒有發生覆寫，隻有div發生覆寫現象。這個原因是因為第一個大盒子裡的子元素使用了浮動，脫離了文檔流，導緻.container沒有被撐開。box3認為.container沒有高度（未被撐開），是以跑上去了。

>>>>解決方法：

1、固定高度

給.container設定固定高度，一般情況下文字内容不确定多少就不能設定固定高度，是以一般不能設定“.container”高度(當然能确定内容多高，這種情況下“.container是可以設定一個高度即可解決覆寫問題。

或者給.container加一個固定高度的子div：

<div class="container">
                <div id="box1">box1 向左浮動</div>
                <div id="box2">box2 向右浮動</div>
                <div id="empty" style="height: 100px"></div>
</div>
<div id="box3">box3</div>

複制

但是這樣限定固定高度會使頁面操作不靈活，不推薦！可以用清除浮動加一個<div style='clear: both'></div>，就可以解決，這樣寫也不太好，可以用僞類在css裡設定

.clearfix:after{

content:'';

display:block;

clear:both;

}

哪裡需要用到，就給哪裡添加clearfix(也可以取别的)這個類名

2、清除浮動(推薦)。

clear文法：

clear : none | left | right | both

取值：

none : 預設值。允許兩邊都可以有浮動對象

left : 不允許左邊有浮動對象

right : 不允許右邊有浮動對象

both : 不允許有浮動對象

但是需要注意的是：clear屬性隻會對自身起作用，而不會影響其他元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            float: left;
            clear: left;

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>

複制

把握住兩點：1、元素是從上到下、從左到右依次加載的。

2、clear: left;對自身起作用，一旦左邊有浮動元素，即切換到下一行來保證左邊元素不是浮動的，依據這一點解決父級塌陷問題。

3、clear:both:對自己起作用，加載時判斷左右兩邊有沒有浮動元素，如div2加了此屬性，其後面有div3，其實和clear:left作用差不多，因為加載div2時即判斷兩邊有沒有浮動元素，此時div3還沒加載，是以限制不了div3

思考：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }

        .r1{
            width: 300px;
            height: 100px;
            background-color: #7A77C8;
            float: left;
        }
        .r2{
            width: 200px;
            height: 200px;
            background-color: wheat;
            float: left;
            clear: both;

        }
        .r3{
            width: 100px;
            height: 200px;
            background-color: darkgreen;
            float: left;
        }
    </style>
</head>
<body>

<div class="r1"></div>
<div class="r2"></div>
<div class="r3"></div>



</body>
</html>

複制

解決父級塌陷：

'''

    .clearfix:after {             <----在類名為“clearfix”的元素内最後面加入内容；
    content: ".";                 <----内容為“.”就是一個英文的句号而已。也可以不寫。
    display: block;               <----加入的這個元素轉換為塊級元素。
    clear: both;                  <----清除左右兩邊浮動。
    visibility: hidden;           <----可見度設為隐藏。注意它和display:none;是有差別的。
                                       visibility:hidden;仍然占據空間，隻是看不到而已；
    line-height: 0;               <----行高為0；
    height: 0;                    <----高度為0；
    font-size:0;                  <----字型大小為0；
    }
    
    .clearfix { *zoom:1;}         <----這是針對于IE6的，因為IE6不支援:after僞類，這個神
                                       奇的zoom:1讓IE6的元素可以清除浮動來包裹内部元素。


整段代碼就相當于在浮動元素後面跟了個寬高為0的空div，然後設定它clear:both來達到清除浮動的效果。
之是以用它，是因為，你不必在html檔案中寫入大量無意義的空标簽，又能清除浮動。
<div class="head clearfix"></div>

'''

複制

.clearfix:after{

content:'';

display:block;

clear:both;

}

哪裡需要用到，就給哪裡添加clearfix(也可以取别的)這個類名

3、overflow:hidden

overflow：hidden的含義是超出的部分要裁切隐藏，float的元素雖然不在普通流中，但是他是浮動在普通流之上的，可以把普通流元素+浮動元素想象成一個立方體。如果沒有明确設定包含容器高度的情況下，它要計算内容的全部高度才能确定在什麼位置hidden，這樣浮動元素的高度就要被計算進去。這樣包含容器就會被撐開，清除浮動。

position(定位)

1 static

static 預設值，無定位，不能當作絕對定位的參照物，并且設定标簽對象的left、top等值是不起作用的的。

2 position: relative／absolute

relative: 相對定位。

相對定位是相對于該元素在文檔流中的原始位置，即以自己原始位置為參照物。有趣的是，即使設定了元素的相對定位以及偏移值，元素還占有着原來的位置，即占據文檔流空間。對象遵循正常文檔流，但将依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊通過z-index屬性定義。

注意：position：relative的一個主要用法：友善絕對定位元素找到參照物。

absolute: 絕對定位。

定義：設定為絕對定位的元素框從文檔流完全删除，并相對于最近的已定位祖先元素定位，如果元素沒有已定位的祖先元素，那麼它的位置相對于最初的包含塊（即body元素）。元素原先在正常文檔流中所占的空間會關閉，就好像該元素原來不存在一樣。元素定位後生成一個塊級框，而不論原來它在正常流中生成何種類型的框。

重點：如果父級設定了position屬性，例如position:relative;，那麼子元素就會以父級的左上角為原始點進行定位。這樣能很好的解決自适應網站的标簽偏離問題，即父級為自适應的，那我子元素就設定position:absolute;父元素設定position:relative;，然後Top、Right、Bottom、Left用百分比寬度表示。

另外，對象脫離正常文檔流，使用top，right，bottom，left等屬性進行絕對定位。而其層疊通過z-index屬性定義。

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .outet{
            /*position: relative;*/

        }
        .item{
            width: 200px;
            height:200px ;
        }
        .r1{
            background-color: #7A77C8;
        }
        .r2{
            background-color: wheat;
            /*position: relative;*/
            position: absolute;
            top: 200px;
            left: 200px;
        }
        .r3{
            background-color: darkgreen;
        }
    </style>
</head>
<body>

<div class="item r1"></div>
<div class="outet">

    <div class="item r2"></div>
    <div class="item r3"></div>
</div>


</body>
</html>

複制

總結：參照物用相對定位，子元素用絕對定位，并且保證相對定位參照物不會偏移即可。

3 position:fixed

fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以可視視窗為參考點進行定位，當出現滾動條時，對象不會随着滾動。而其層疊通過z-index屬性定義。注意點：一個元素若設定了 position:absolute | fixed; 則該元素就不能設定float。這是一個常識性的知識點，因為這是兩個不同的流，一個是浮動流，另一個是“定位流”。但是 relative 卻可以。因為它原本所占的空間仍然占據文檔流。

在理論上，被設定為fixed的元素會被定位于浏覽器視窗的一個指定坐标，不論視窗是否滾動，它都會固定在這個位置。

示例代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
        }
        .back{
            background-color: wheat;
            width: 100%;
            height: 1200px;
        }
        span{
            display: inline-block;
            width: 80px;
            height: 50px;
            position: fixed;
            bottom: 20px;
            right: 20px;
            background-color: rebeccapurple;
            color: white;
            text-align: center;
            line-height: 50px;

        }
    </style>
</head>
<body>


<div class="back">
    <span>傳回頂部</span>
</div>
</body>
</html>

複制

Caution！

1、預設的高度和寬度問題

（1）父子都是塊級元素

<!DOCTYPE html>
<html>
<head>
    <title>fortest</title>
    <style>
        div.parent{
            width: 500px;
            height: 300px;
            background: #ccc;
        }
        div.son{
            width: 100%;
            height: 200px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="parent">
        <div class="son"></div>
    </div>
</body>
</html>

複制

這時，子元素設定為了父元素width的100%，那麼子元素的寬度也是500px；

　　但是如果我們把子元素的width去掉之後，就會發現子元素還是等于父元素的width。也就是說，對于塊級元素，子元素的寬度預設為父元素的100%。

當我們給子元素添加padding和margin時，可以發現寬度width是父元素的寬度減去子元素的margin值和padding值。

　　毫無疑問，如果去掉子元素的height，就會發先子元素的高度為0，故height是不會為100%的，一般我們都是通過添加内容（子元素）将父元素撐起來。

（2）父：塊級元素子：内聯元素

如果内聯元素是不可替換元素（除img，input以外的一般元素），元素是沒有辦法設定寬度的，也就談不上100%的問題了。即内聯元素必須依靠其内部的内容才能撐開。

如果内聯元素是可替換元素（img，input，本身可以設定長和寬），不管怎麼設定父元素的寬度和高度，而不設定img的寬和高時，img總是表現為其原始的寬和高。

<!DOCTYPE html>
<html>
<head>
    <title>...</title>
    <style>
        div.parent{
            width: 500px;
            height: 300px;
            background: #ccc;
        }
        img{
            height: 100px;
            background: green;
        }
    </style>
</head>
<body>
    <div class="parent">
        <img class="son" src="s1.jpg"></img>
    </div>
</body>
</html>

複制

由此我們可以發現，雖然沒有設定寬度，但是表現在浏覽器上為160px，它并沒有繼承父元素的100%得到500px，而是根據既定的高度來等比例縮小寬度。同樣，如果隻設定width，那麼height也會等比例改變。如果我們把img的width設定為100%，就可以發現其寬度這時就和父元素的寬度一緻了。而我們一般的做法時，首先确定img的父元素的寬度和高度，然後再将img的寬度和高度設定位100%，這樣，圖檔就能鋪滿父元素了。

背景管理布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>

        .pg-header{
           height: 48px;
           width: 100%;
           background-color: #204982;
           position: fixed;
           top:0;
           left: 0;
        }
        .left{
            position:absolute;
            left:0;
            top:48px;
            bottom:0;
            width:200px;
            background-color: darkgray;
        }

        .right{
            position:absolute;
            right:0;
            left:200px;
            top:48px;
            bottom:0;
            overflow:auto;
            background-color: wheat;
        }
    </style>
</head>
<body>


<div class="pg-header"></div>
<div>
    <div class="left">

    </div>
    <div class="right">
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>
       <h1>yuan</h1>

    </div>
</div>

</body>
</html>

複制

css響應式布局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>

        /*======================================初始化=====================*/
            *{
             margin: 0;
             padding: 0;
                  }

            body{
                font-size: 12px;
            }

            a{
              text-decoration: none;
            }

        /*======================================header區域設定=====================*/
        .header{
               height: 44px;
               width: 100%;
               background-color: #2459a2;
               position: fixed;
               top:0;
               left: 0;
        }



        .header_content{
            width: 80%;
            height: 44px;
            background-color: #2459a2;
            margin: 0 auto;
            line-height: 44px;
            position: relative;

        }


/*======header區part1:logo ===========*/


               .logo{

                    float: left;
                    width: 121px;
                    height: 23px;
                    margin-top: 9px;

                }

/*======header區part2:action-menu =====*/

               .action-menu{
                    float: left;
                    margin-left: 30px;
                }

                .action-menu a.tb{
                            color: #c0cddf;
                            padding: 0 10px;
                            text-align: center;
                            margin-left: -3px;
                            display: inline-block;


                        }

                .action-menu a.tb:hover {
                    color: #fff;
                    background-color: lightslategrey;

                }

                 .action-menu a.active, .action-menu a.active:hover {
                                color: #fff;
                                background-color:#204982;;

                            }

/*======header區part3:key-search =====*/

                 .key-search{
                         margin-top: 5px;
                         float: right;
                    }


                 .key-search a.search-icon-box, .search-txt {
                        float: left;
                    }

                .search-txt {

                    color: #333;
                    line-height: 25px;
                    padding: 2px 2px 2px 5px;
                    height: 25px;
                    width: 91px;

                }

                .key-search a.search-icon-box {
                    border: 1px solid #e0e0e0;
                    background-color: #f4f4f4;
                    width: 30px;
                    height: 31px;
                    border-left: 0;
                }


                .key-search a.search-icon-box span.search-icon{
                    background: url("images/icon.png") no-repeat 0 -197px;
                    float: left;
                    height: 12px;
                    width: 11px;
                    margin-left: 10px;
                    margin-top: 9px;
                }

/*======header區part4:action-nav =====*/

                .action-nav {
                       float: right;
                       margin-right: 10px;
                    }

                 .action-nav a {
                        color: white;
                        padding: 14px 18px;

                    }

                .action-nav a:hover{
                    background-color: lightslategrey;
                    color: white;
                }
 /*======================================content區域設定=====================*/

             .content-box {
                    background-color: #ededed;
                    padding-top: 44px;
                    height: 100%;
                }

             .content {
                    width: 960px;
                    margin: 0 auto;
                    height: auto!important;
                    overflow: hidden;
                    min-height: 713px;
                    padding: 6px 28px;
                    background-color: #fff;
                    /*overflow: hidden;取消後看看效果*/
                }

        /*===============================響應式布局=====================*/



         @media(max-width:1050px) {


          .action-menu a.item{

              display: none;
              background-color: gold;
              border: dashed 1px rebeccapurple;

              color: black;





          }

             .action-menu a.active{

                 padding: 0 25px;

             }

             .action-nav{

                 float: left;

                 margin-left: 80px;

             }

             .key-search{
                 float: right;
                 margin-right: 100px;
             }




          .action-menu:hover a.item{
              display: block;


          }



         }



        @media(max-width:810px) {

             .key-search{
                 display: none;
             }

            .action-nav{
                display: none;
            }
        }



    </style>
</head>
<body>



    <!--header結構-->
    <div class="header">

         <div class="header_content">

               <div class="logo">
                   <a href="/"><img src="images/logo.png" alt=""></a>
               </div>

               <div class="action-menu">

                        <a href="#" class="tb active">全部</a>
                        <a href="#" class="tb item">42區</a>
                        <a href="#" class="tb item">段子</a>
                        <a href="#" class="tb item">圖檔</a>
                        <a href="#" class="tb item">挨踢1024</a>
                        <a href="#" class="tb item">你問我答</a>
               </div>

               <div class="key-search">

                    <form action="/" method="post">
                        <input type="text" class="search-txt">

                        <a href="#" class="search-icon-box" >
                            <span class="search-icon"></span>
                        </a>
                    </form>

               </div>

               <div class="action-nav">

                    <a href="#" class="register-btn">注冊</a>
                    <a href="#" class="login-btn">登入</a>
               </div>

         </div>
    </div>


    <!--content結構-->

    <div class="content-box">

        <div class="content">


        </div>
        
    </div>



</body>
</html>

複制

CSS基礎CSS 文法css的四種引入方式 css選擇器css屬性操作Caution！背景管理布局css響應式布局

CSS 文法

css的四種引入方式

1.行内式

2.嵌入式

3 連結式

4.導入式

css選擇器

基本選擇器

組合選擇器

屬性選擇器

僞類

anchor僞類：專用于控制連結的顯示效果

before after僞類

選擇器的優先級

css的繼承

css的優先級

css屬性操作

css text

文本顔色：color

水準對齊方式

文本其他屬性

背景屬性

屬性介紹

簡寫

邊框屬性

屬性介紹

簡寫

邊框-單獨設定各邊

清單屬性

dispaly屬性

none(隐藏某标簽)

block(内聯标簽設定為塊級标簽)

inline(塊級标簽設定為内聯标簽)

inline-block

外邊距(margine)和内邊距(padding)

盒子模型

margine(外邊距)

單邊外邊距屬性：

簡寫屬性

居中應用

padding(内邊距)

float屬性

基本浮動規則

非完全脫離文檔流

父級坍塌現象

position(定位)

1 static

2 position: relative／absolute

absolute: 絕對定位。

3 position:fixed

Caution！

1、預設的高度和寬度問題

背景管理布局

css響應式布局

選擇器的優先級　

簡寫　

`block(内聯标簽設定為塊級标簽)`

`inline(塊級标簽設定為内聯标簽)`

簡寫屬性　