天天看點
傳回

前端之CSS進階

本文介紹WEB前端之CSS進階

一、CSS屬性操作

1.背景屬性

常用：

  • background-color 規定要使用的背景顔色
  • background-image 規定要使用的背景圖像
  • background-repeat 規定如何重複背景圖像
  • background-position 規定背景圖像的位置

非常用：

  • background-size 規定背景圖檔的尺寸
  • background-origin 規定背景圖檔的定位區域
  • background-clip 規定背景的繪制區域
  • background-attachment 規定背景圖像是否固定或者随着頁面的其餘部分滾動
  • inherit 規定應該從父元素繼承 background 屬性的設定 
background-color: cornflowerblue
background-image: url('1.jpg');
background-repeat: no-repeat;(repeat:平鋪滿)
background-position: right top（20px 20px）;

簡寫：

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

2.邊框屬性

  • border-width 規定邊框的寬度
  • border-style 規定邊框的樣式
  • border-color 規定邊框的顔色
  • inherit 規定應該從父元素繼承 border 屬性的設定 
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.清單屬性

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

說明：

該屬性是一個簡寫屬性，涵蓋了所有其他清單樣式屬性。由于它應用到所有display為list-item的元素，是以在普通的HTML和XHTML中隻能用于li元素，不過實際上它可以應用到任何元素，并由list-item元素繼承。

可以按順序設定如下屬性：

  • list-style-type 設定清單項标記的類型
  • list-style-position 設定在何處放置清單項标記
  • list-style-image 使用圖像來替換清單項的标記
  • inherit 規定應該從父元素繼承 list-style 屬性的值 
ist-style-type屬性指定清單項标記的類型：
ul { list-style-type: square; }

使用圖像來替換清單項的标記:
ul {
     list-style-image: url('');
            }

4.display屬性

display 屬性規定元素應該生成的框的類型。

這個屬性用于定義建立布局時元素生成的顯示框類型。對于HTML等文檔類型，如果使用display不謹慎會很危險，因為可能違反HTML中已經定義的顯示層次結構。對于XML，由于XML沒有内置的這種層次結構，所有display是絕對必要的。

前端之CSS進階

none(隐藏某标簽)

p{display:none;}

注意與visibility:hidden的差別：

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

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

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

span {display:block;}

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

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

li {display:inline;}

inline-block

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

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

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

（1）盒子模型

前端之CSS進階
前端之CSS進階

margin: 用于控制元素與元素之間的距離；margin的最基本用途就是控制元素周圍空間的間隔，從視覺角度上達到互相隔開的目的。

padding: 用于控制内容與邊框之間的距離；

Border(邊框): 圍繞在内邊距和内容外的邊框。

Content(内容): 盒子的内容，顯示文本和圖像。

（2）margin屬性

margin簡寫屬性在一個聲明中設定所有外邊距屬性。該屬性可以有1到4個值。

這個簡寫屬性設定一個元素所有外邊距的寬度，或者設定各邊上外邊距的寬度。

塊級元素的垂直相鄰外邊距會合并，而行内元素實際上不占上下外邊距。行内元素的的左右外邊距不會合并。同樣地，浮動元素的外邊距也不會合并。允許指定負的外邊距值，不過使用時要小心。

注釋：允許使用負值。

  • auto 浏覽器計算外邊距。
  • length 規定以具體機關計的外邊距值，比如像素、厘米等。預設值是 0px。
  • % 規定基于父元素的寬度的百分比的外邊距。
  • inherit 規定應該從父元素繼承外邊距。

單邊外邊距屬性：

margin-top:100px;
margin-bottom:100px;
margin-right:50px;
margin-left:50px;

居中應用

margin: 0 auto;

例子1

margin:10px 5px 15px 20px;
  • 上外邊距是 10px
  • 右外邊距是 5px
  • 下外邊距是 15px
  • 左外邊距是 20px

例子2

margin:10px 5px 15px;
  • 右外邊距和左外邊距是 5px

例子3

margin:10px 5px;
  • 上外邊距和下外邊距是 10px

例子4

margin:10px;
  • 所有4個外邊距都是 10px

（3）padding屬性

padding 簡寫屬性在一個聲明中設定所有内邊距屬性。

說明:

這個簡寫屬性設定元素所有内邊距的寬度，或者設定各邊上内邊距的寬度。行内非替換元素上設定的内邊距不會影響行高計算；是以，如果一個元素既有内邊距又有背景，從視覺上看可能會延伸到其他行，有可能還會與其他内容重疊。元素的背景會延伸穿過内邊距。不允許指定負邊距值。

注釋：不允許使用負值。

樣例：

<!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>

效果圖：

前端之CSS進階
  • auto 浏覽器計算内邊距。
  • length 規定以具體機關計的内邊距值，比如像素、厘米等。預設值是 0px。
  • % 規定基于父元素的寬度的百分比的内邊距。
  • inherit 規定應該從父元素繼承内邊距。 
padding:10px 5px 15px 20px;
  • 上内邊距是 10px
  • 右内邊距是 5px
  • 下内邊距是 15px
  • 左内邊距是 20px 
padding:10px 5px 15px;
  • 右内邊距和左内邊距是 5px 
padding:10px 5px;
  • 上内邊距和下内邊距是 10px 
padding:10px;
  • 所有 4 個内邊距都是 10px

思考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>
           
overflow: hidden;

6.float屬性

float屬性定義元素在哪個方向浮動。以往這個屬性總應用于圖像，使文本圍繞在圖像周圍，不過在CSS中，任何元素都可以浮動。浮動元素會生成一個塊級框，而不論它本身是何種元素。

如果浮動非替換元素，則要指定一個明确的寬度；否則，它們會盡可能地窄。

注釋：假如在一行之上隻有極少的空間可供浮動元素，那麼這個元素會跳至下一行，這個過程會持續到某一行擁有足夠的空間為止。

  • left 元素向左浮動。
  • right 元素向右浮動。
  • none 預設值。元素不浮動，并會顯示在其在文本中出現的位置。
  • inherit 規定應該從父元素繼承 float 屬性的值。

（1）基本浮動規則

先來了解一下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>

（2）非完全脫離文檔流

左右結構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樣式。

（3）父級坍塌現象

<!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>
</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>

但是這樣限定固定高度會使頁面操作不靈活，不推薦！

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>

把握住兩點：

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

思考：

<!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>

overflow:hidden

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

7.position(定位)

position 屬性規定元素的定位類型。

這個屬性定義建立元素布局所用的定位機制。任何元素都可以定位，不過絕對或固定元素會生成一個塊級框，而不論該元素本身是什麼類型。相對定位元素會相對于它在正常流中的預設位置偏移。

前端之CSS進階

（1）relative: 相對定位。

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

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

（2）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>
前端之CSS進階

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

（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>
前端之CSS進階

補充

預設的高度和寬度問題

（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%，這樣，圖檔就能鋪滿父元素了。

css
上一篇: Docker容器技術-基礎與架構
下一篇: Django架構之自定義分頁

繼續閱讀