CSS語法基礎

時間 2019-11-06

標籤 css 語法基礎欄目 CSS 简体版

原文原文鏈接

引言：CSS語法

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

selector {
                  property: value;
                  property: value;
             ...  property: value
         
          }

　　例如：html

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

在上面的CSS代碼中：python

h1 是選擇器
{color:red;front-size:14px;} 是聲明
color是屬性名稱
red是屬性值
color:red; 被稱爲一個聲明

每一個聲明由一個屬性和一個值組成。selector選擇要設置樣式的HTML元素。api

屬性是要更改的樣式屬性。每一個屬性都有一個值。 CSS聲明以分號結尾，聲明組被大括號括起來。瀏覽器

一，網頁中CSS的四種引入方法

1.行內式

行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，不推薦使用。佈局

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

<!--行內式是在標記的style屬性中設定CSS樣式。這種方式沒有體現出CSS的優點，不推薦使用-->
<p style="color: #cc1111;background-color: #5E5694">hellp css</p>

<div>hello world</div>
</body>
</html>

2.嵌入式

嵌入式是將CSS樣式集中寫在網頁的<head></head>標籤對的<style></style>標籤對中。格式以下：post

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

    <style>
        p{
            background-color: #2b99ff;
        }
    </style>
    
</head>
<body>



<div>hello world</div>
</body>
</html>

3.連接式（推薦）

將一個.css文件引入到HTML文件中學習

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

   <link type="text/css" rel="stylesheet" href="css代碼.css"></head>
</head>
<body>



<div>hello world</div>
</body>
</html>

4.導入式

將一個獨立的.css文件引入HTML文件中，導入式使用CSS規則引入外部CSS文件，<style>標記也是寫在<head>標記中，使用的語法以下：字體

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

   <style type="text/css">
        /*導入式*/
        @import "css代碼.css";  此處要注意CSS文件的路徑
    </style>

</head>
<body>

注意：網站

導入式會在整個網頁裝載完後再裝載CSS文件，所以這就致使了一個問題，若是網頁比較大則會兒出現先顯示無樣式的頁面，閃爍一下以後，再出現網頁的樣式。這是導入式固有的一個缺陷。使用連接式時與導入式不一樣的是它會以網頁文件主體裝載前裝載CSS文件，所以顯示出來的網頁從一開始就是帶樣式的效果的，它不會象導入式那樣先顯示無樣式的網頁，而後再顯示有樣式的網頁，這是連接式的優勢。

二，CSS的選擇器

「選擇器」指明瞭{}中的「樣式」的做用對象，也就是「樣式」做用於網頁中的哪些元素

1.基礎選擇器

＊ ：           通用元素選擇器，匹配任何元素                    * { margin:0; padding:0; }

E  ：          標籤選擇器，匹配全部使用E標籤的元素               p { color:green; }

.info和E.info: class選擇器，匹配全部class屬性中包含info的元素   .info { background:#ff0; }    p.info { background:blue; }

#info和E#info  id選擇器，匹配全部id屬性等於footer的元素         #info { background:#ff0; }   p#info { background:#ff0; }

2.組合選擇器

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; }

　舉個例子

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

        .div1>p{
            background-color: aqua;
            color: deeppink;
        }

        .main2>div{
            background-color: blueviolet;
            color: chartreuse;
        }
    </style>
</head>
<body>

      <div class="div1">hello1
          <div class="div2">hello2
              <div>hello4</div>
              <p>hello5</p>
          </div>
          <p>hello3</p>
      </div>
      <p>hello6</p>

<hr>

     <div class="main2">1
       <div>2
           <div>
           </div>
       </div>
       <div>
           </div>
     </div>
</body>
</html>

注意嵌套規則：

塊級元素能夠包含內聯元素或某些塊級元素，但內聯元素不能包含塊級元素，它只能包含其它內聯元素。
有幾個特殊的塊級元素只能包含內聯元素，不能包含塊級元素。如h1,h2,h3,h4,h5,h6,p,dt
li內能夠包含div
塊級元素與塊級元素並列、內聯元素與內聯元素並列。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        [suoning]{
            color: blueviolet;
        }
        .he>div{
            color: bisque;
        }

    </style>
</head>
<body>

<div class="he">111
    <p class="fr">222
        <div>333</div>
    </p>
    <div>444</div>
</div>


***************************

<div suoning="sb">ddd
         <p>pppp</p>
     </div>
     <p suoning="sb2">ddd2
         <p>pppp2</p>
     </p>
</body>
</html>

3.屬性選擇器

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;}

4，僞例

4.1 CSS僞類：是用來給選擇器添加一些特殊效果。

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>
    a:link{
        color: red;
    }
    a:hover{
        color: #19865C;
    }
    p:after{
        content: "pp";
    }
    /*動態添加*/
    </style>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<p>jells</p>

</body>
</html>

補充

.outer:hover .right{color: red}

　before after僞類：

:before    p:before       在每一個<p>元素以前插入內容
:after     p:after        在每一個<p>元素以後插入內容


 p:before        在每一個 <p> 元素的內容以前插入內容                    p:before{content:"hello";color:red}
 p:after         在每一個 <p> 元素的內容以前插入內容                    p:after{ content:"hello"；color:red}

5,CSS優先級和繼承

5.1 CSS優先級:

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

樣式表中的特殊性描述了不一樣規則的相對權重，它的基本規則是：
        1 內聯樣式表的權值最高       style=""-------------------1000；
        2 統計選擇符中的ID屬性個數。    #id    －－－－－－－－－－－－－100
        3 統計選擇符中的CLASS屬性個數。 .class  －－－－－－－－－－－－－10
        4 統計選擇符中的HTML標籤名個數。     p     －－－－－－－－－－－－－-1

按這些規則將數字符串逐位相加，就獲得最終的權重，而後在比較取捨時按照從左到右的順序逐位比較

<style>
        #p{
            color: rebeccapurple;
        }
        .p{
            color: #2459a2;
        }
        p{
            color: yellow;
        }
    </style>
<p id="p" class="p" style="color: deeppink">hello yuan</p>

5.2 CSS的繼承性:

繼承是CSS的一個主要特徵，它是依賴於祖先-後代的關係的。繼承是一種機制，它容許樣式不只能夠應用於某個特定的元素，還能夠應用於它的後代。例如一個BODY定義了的顏色值也會應用到段落的文本中。

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

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

p{color:green}

發現只須要給加個顏色值就能覆蓋掉它繼承的樣式顏色。因而可知：任何顯示申明的規則均可以覆蓋其繼承樣式。　

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

div{
  border:1px solid #222
}

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

附加說明

一、文內的樣式優先級爲1,0,0,0，因此始終高於外部定義。這裏文內樣式指形如<div style="color:red>blah</div>的樣式，而外部定義指經由<link>或<style>卷標定義的規則。

　　二、有!important聲明的規則高於一切。

　　三、若是!important聲明衝突，則比較優先權。

　　四、若是優先權同樣，則按照在源碼中出現的順序決定，後來者居上。

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

三，css的經常使用屬性

3.1，顏色屬性

在CSS中不可避免會遇到顏色設置，所以這裏咱們須要學習怎麼表示顏色。

　共有4種顏色表示法：

預約義顏色：例如「color:black」中的black就是預約義的顏色。
十六進制表示法：#ABCDEF，其中AB、CD、EF分別對應R、G、B。例子：#FFFFFF 表示白色。
短十六進制表示法：這是對第二種表示法的特例，當A=B時A和B只寫一個(一樣地，C=D、E=F 時也相似)。例子：#FF00CC 可簡寫爲 #F0C.
rgb表示法：rgb(255,255,255) 表示白色

<div style="color:blueviolet">ppppp</div>
 
<div style="color:#ffee33">ppppp</div>
 
<div style="color:rgb(255,0,0)">ppppp</div>
 
<div style="color:rgba(255,0,0,0.5)">ppppp</div>

3.2，字體屬性

font-style: 設置斜體。可選值有：normal(正常), italic(斜體).
font-weight: 設置粗體。可選值有：normal(正常), bold(粗體).
font-size: 設置字號。
line-height: 設置行高，即一行的高度。
font-family: 設置字體。這裏值得一提的是能夠同時寫多個字體，如："font-family:'雅黑','宋體','黑體';"，由於不一樣機器上擁有的字體可能不同，若是有的機器沒有雅黑字體，則使用宋體，若是沒有宋體，最後使用黑體。
color: 設置字的顏色。

font-size: 20px/50%/larger
 
font-family:'Lucida Bright'
 
font-weight: lighter/bold/border/
 
<h1 style="font-style: oblique">老男孩</h1>

3.3，背景屬性

background-color: cornflowerblue

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

background-repeat: no-repeat;(repeat:平鋪滿)

background-position: right top（20px 20px）;(橫向：left center right)(縱向：top center bottom)

      簡寫：<body style="background: 20px 20px no-repeat #ff4 url('1.jpg')">

              <div style="width: 300px;height: 300px;background: 20px 20px no-repeat #ff4 url('1.jpg')">

注意：若是將背景屬性加在body上，要記得給body加上一個height，不然結果異常，這是由於body爲空，沒法撐起背景圖片；另外，若是此時要設置一個width＝100px，你也看不出效果，除非你設置出html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        html{
            background-color: antiquewhite;
            
        }
        body{
            width: 100px;
            height: 600px;
            background-color: deeppink;
            background-image: url(1.jpg);
            background-repeat: no-repeat;
            background-position: center center;
        }
    </style>
</head>
<body>

</body>
</html>

eg:

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

    <style>

        span{
            display: inline-block;
            width: 18px;
            height: 20px;
            background-image: url("http://dig.chouti.com/images/icon_18_118.png?v=2.13");
            background-position: 0 -100px;
        }
    </style>
</head>
<body>


    <span></span>

</body>
</html>

3.4，文本屬性

font-size: 10px;

text-align: center;   橫向排列

line-height: 200px;   文本行高 通俗的講，文字高度加上文字上下的空白區域的高度 50%:基於字體大小的百分比

vertical-align:－4px  設置元素內容的垂直對齊方式 ,只對行內元素有效，對塊級元素無效


text-indent: 150px;   首行縮進
letter-spacing: 10px;
word-spacing: 20px;
text-transform: capitalize;

3.5，邊框屬性

border-style: solid;
 
border-color: chartreuse;
 
border-width: 20px;
 
簡寫：border: 30px rebeccapurple solid;

邊框單獨設置各邊

border-top-style:dotted;
border-right-style:solid;
border-bottom-style:dotted;
border-left-style:none;

3.6，列表屬性

list-style-type         設置列表項標誌的類型。
list-style-image    將圖象設置爲列表項標誌。
list-style-position 設置列表中列表項標誌的位置。
 
list-style          簡寫屬性。用於把全部用於列表的屬性設置於一個聲明中

list-style-type屬性指定列表項標記的類型：

ul { list-style-type: square; }

　　使用圖像來替換列表項內的標記：

ul {
     list-style-image: url('');
            }

ul,ol{   list-style: decimal-leading-zero;
         list-style: none; <br>         list-style: circle;
         list-style: upper-alpha;
         list-style: disc; }

3.7，display屬性

none
block
inline

display:inline-block可作列表佈局，其中的相似於圖片間的間隙小bug能夠經過以下設置解決：

#outer{
            border: 3px dashed;
            word-spacing: -5px;
        }

3.7.1 none(隱藏某標籤)

p{display:none;}

注意與visibility:hidden的區別：

visibility:hidden能夠隱藏某個元素，但隱藏的元素仍需佔用與未隱藏以前同樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響佈局。

display:none能夠隱藏某個元素，且隱藏的元素不會佔用任何空間。也就是說，該元素不但被隱藏了，並且該元素本來佔用的空間也會從頁面佈局中消失。

3.7.2 block（內聯標籤設置爲塊級標籤）

span {display:block;}

　　注意：一個內聯元素設置爲display:block是不容許有它內部的嵌套塊元素。

3.7.3 inline（塊級標籤設置爲內聯標籤）

li {display:inline;}

3.7.4 inline-block

display:inline-block可作列表佈局，其中的相似於圖片間的間隙小bug能夠經過以下設置解決：

#outer{
            border: 3px dashed;
            word-spacing: -5px;
        }

3.8，外邊框和內邊框

盒子模型

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

margin（外邊距）

單邊外邊距屬性

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

　　居中應用：

margin: 0 auto;

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>

　　思考：body的邊距

邊框在默認狀況下會定位於瀏覽器窗口的左上角，可是並無緊貼着瀏覽器的窗口的邊框，這是由於body自己也是一個盒子（外層還有html），在默認狀況下， body距離html會有若干像素的margin，具體數值因各個瀏覽器不盡相同，因此body中的盒子不會緊貼瀏覽器窗口的邊框了，爲了驗證這一點，加上：

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

　　解決方法：

body{
    margin: 0;
}

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

一、兄弟div：
上面div的margin-bottom和下面div的margin-top會塌陷，也就是會取上下二者margin裏最大值做爲顯示值

二、父子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>

　　解決方法：

overflow: hidden;

重要: 當您指定一個CSS元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，徹底大小的元素，你還必須添加填充，邊框和邊距。.

margin:10px 5px 15px 20px;-----------上 右 下 左
margin:10px 5px 15px;----------------上 右左 下
margin:10px 5px;---------------------上下  右左
margin:10px;    ---------------------上右下左

下面的例子中的元素的總寬度爲300px：

width:250px;
padding:10px;
border:5px solid gray;
margin:10px;

練習： 300px*300px的盒子裝着100px*100px的盒子，分別經過margin和padding設置將小盒子移到大盒子的中間

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

        .div1{
            background-color: aqua;
            width: 300px;
            height: 300px;
        }
        .div2{
            background-color: blueviolet;
            width: 100px;
            height: 100px;
        }
    </style>
</head>
<body>
       <div class="div1">
           <div class="div2"></div>
           <div class="div2"></div>
       </div>
</body>
</html>

3.9，float屬性

3.9.1 基本浮動規則

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

　　block元素一般被現實爲獨立的一塊，獨佔一行，多個block元素會各自新起一行，默認block元素寬度自動填滿其父元素寬度。block元素能夠設置width、height、margin、padding屬性；

　　inline元素不會獨佔一行，多個相鄰的行內元素會排列在同一行裏，直到一行排列不下，纔會新換一行，其寬度隨元素的內容而變化。inline元素設置width、height屬性無效。inline元素的margin和padding屬性。水平方向的padding-left, padding-right, margin-left, margin-right都產生邊距效果；但豎直方向的padding-top, padding-bottom, margin-top, margin-bottom不會產生邊距效果。

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

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

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

只有絕對定位absolute和浮動float纔會脫離文檔流。

---部分無視和徹底無視的區別？須要注意的是，使用float脫離文檔流時，其餘盒子會無視這個元素，但其餘盒子內的文本依然會爲這個元素讓出位置，環繞在周圍(能夠說是部分無視)。而對於使用absolute position脫離文檔流的元素，其餘盒子與其餘盒子內的文本都會無視它。(能夠說是徹底無視)

浮動的表現

定義：浮動的框能夠向左或向右移動，直到它的外邊緣碰到包含框或另外一個浮動框的邊框爲止。因爲浮動框不在文檔的普通流中，因此文檔的普通流中的浮動框以後的塊框表現得就像浮動框不存在同樣。（注意這裏是塊框而不是內聯元素；浮動框只對它後面的元素形成影響）

注意當初float被設計的時候就是用來完成文本環繞的效果，因此文本不會被擋住，這是float的特性，即float是一種不完全的脫離文檔流方式。不管多麼複雜的佈局，其基本出發點均是：「如何在一行顯示多個div元素」。

現象1:

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

現象2:

(1)左右結構div盒子重疊現象，通常是因爲相鄰兩個DIV一個使用浮動一個沒有使用浮動。如上面的例1：相鄰的兩個盒子box2向左浮動、box3未浮動。一個使用浮動一個沒有致使DIV不是在同個「平面」上，但內容不會照成覆蓋現象，只有DIV造成覆蓋現象。

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

(2)上下結構div盒子重疊現象

<!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沒有高度（未被撐開），所以跑上去了。

解決方法：

一、要麼給.container設置固定高度，通常狀況下文字內容不肯定多少就不能設置固定高度，因此通常不能設置「.container」高度(固然能肯定內容多高，這種狀況下「.container是能夠設置一個高度便可解決覆蓋問題。

二、要麼清除浮動。

清除浮動：

在非IE瀏覽器（如Firefox）下，當容器的高度爲auto，且容器的內容中有浮動（float爲left或right）的元素，在這種狀況下，容器的高度不能自動伸長以適應內容的高度，使得內容溢出到容器外面而影響（甚至破壞）佈局的現象。這個現象叫浮動溢出，爲了防止這個現象的出現而進行的CSS處理，就叫CSS清除浮動

clear語法：
clear : none | left | right | both
取值：
none : 默認值。容許兩邊均可以有浮動對象
left : 不容許左邊有浮動對象
right : 不容許右邊有浮動對象
both : 不容許有浮動對象
可是須要注意的是：clear屬性只會對自身起做用，而不會影響其餘元素。若是一個元素的右側有一浮動對象，而這個元素設置了不容許右邊有浮動對象，即clear：right，則這個元素會自動下移一格，達到本元素右邊沒有浮動對象的目的。

方法一（推薦）：

.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文件中寫入大量無心義的空標籤，又能清除浮動。

話說回來，你這段代碼真是個累贅啊，這樣寫不利於維護。
只要寫一個.clearfix就好了，而後在須要清浮動的元素中添加clearfix類名就行了。
如：

<div class="head clearfix"></div>

方法二：

overflow:hidden;

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

10，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屬性定義。

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

3 position:fixed

fixed：對象脫離正常文檔流，使用top，right，bottom，left等屬性以窗口爲參考點進行定位，當出現滾動條時，對象不會隨着滾動。而其層疊經過z-index屬性定義。注意點：一個元素若設置了 position:absolute | fixed; 則該元素就不能設置float。這是一個常識性的知識點，由於這是兩個不一樣的流，一個是浮動流，另外一個是「定位流」。可是 relative 卻能夠。由於它本來所佔的空間仍然佔據文檔流。

在理論上，被設置爲fixed的元素會被定位於瀏覽器窗口的一個指定座標，不論窗口是否滾動，它都會固定在這個位置。

4 僅使用margin屬性佈局絕對定位元素

此狀況，margin-bottom 和margin-right的值再也不對文檔流中的元素產生影響，由於該元素已經脫離了文檔流。另外，無論它的祖先元素有沒有定位，都是以文檔流中原來所在的位置上偏移參照物。
　　圖9中，使用margin屬性佈局相對定位元素。

層級關係爲：
　　<div ——————————— position:relative;
　　<div—————————-沒有設置爲定位元素，不是參照物
　　<div———————-沒有設置爲定位元素，不是參照物
　　<div box1
　　<div box2 ——–position:absolute; margin-top:50px; margin-left:120px;
　　<div box3
　　效果圖：

五、overflow:hidden

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

3.10 position（定位）

3.10.1 static

static 默認值，無定位，不能看成絕對定位的參照物，而且設置標籤對象的left、top等值是不起做用的的。

3.10.2 position：relative/absolute

　　relative: 相對定位。

相對定位是相對於該元素在文檔流中的原始位置，即以本身原始位置爲參照物。有趣的是，即便設定了元素的相對定位以及偏移值，元素還佔有着原來的位置，即佔據文檔流空間。對象遵循正常文檔流，但將依據top，right，bottom，left等屬性在正常文檔流中偏移位置。而其層疊經過z-index屬性定義。

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

　　absolute: 絕對定位。

另外，對象脫離正常文檔流，使用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.10.3 position：fixed

在理論上，被設置爲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>

3.11 caution

3.11.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: #2459a2;
           position: fixed;
           top:0;
           left: 0;
        }
        .left{
            position:absolute;
            left:0;
            top:48px;
            bottom:0;
            width:200px;
            background-color: #ededed;
        }

        .right{
            position:absolute;
            right:0;
            left:200px;
            top:48px;
            bottom:0;
            overflow:auto;

        }
        .content{
            height: 2000px;
            width: 100%;
           
        }
    </style>
</head>
<body>


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

    </div>
    <div class="right">
      <div class="content"></div>
    </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>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。