摘要：塊元素的例子內聯元素只需要必要的寬度，不強制換行。內聯元素的例子如何改變一個元素顯示可以更改內聯元素和塊元素把列表項顯示為內聯元素把元素作為塊元素定位五大屬性定位元素的默認值，即沒有定位，元素出現在正常的流中靜態定位的元素不會受到影響。

?Infi-chu:

http://www.cnblogs.com/Infi-chu/

?

CSS盒子模型
?? ?概念：CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。盒模型允許我們在其它元素和周圍元素邊框之間的空間放置元素。
?? ?如下所示：
?? ?
?? ?不同部分的說明：
?? ??? ?Margin(外邊距) - 清除邊框外的區域，外邊距是透明的。
?? ??? ?Border(邊框) - 圍繞在內邊距和內容外的邊框。
?? ??? ?Padding(內邊距) - 清除內容周圍的區域，內邊距是透明的。
?? ??? ?Content(內容) - 盒子的內容，顯示文本和圖像。

?? ?元素的寬度和高度：
?? ??? ?例子：300px (寬)+ 50px (左 + 右填充)+ 50px (左 + 右邊框)+ 50px (左 + 右邊距)= 450px
?? ??? ?總結：
?? ??? ??? ?最終元素的總寬度計算公式是這樣的：總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距
?? ??? ??? ?元素的總高度最終計算公式是這樣的：總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距
?? ?
CSS邊框：
?? ?邊框樣式：
?? ??? ?border-style屬性用來定義邊框的樣式。
?? ??? ?常用的值：
?? ??? ??? ?none: 默認無邊框
?? ??? ??? ?dotted: 定義一個點線邊框
?? ??? ??? ?dashed: 定義一個虛線邊框
?? ??? ??? ?solid: 定義實線邊框
?? ??? ??? ?double: 定義兩個邊框。 兩個邊框的寬度和 border-width 的值相同
?? ??? ??? ?groove: 定義3D溝槽邊框。效果取決于邊框的顏色值
?? ??? ??? ?ridge: 定義3D脊邊框。效果取決于邊框的顏色值
?? ??? ??? ?inset:定義一個3D的嵌入邊框。效果取決于邊框的顏色值
?? ??? ??? ?outset: 定義一個3D突出邊框。 效果取決于邊框的顏色值
?? ??? ??? ?
?? ?邊框寬度：
?? ??? ?通過 border-width 屬性為邊框指定寬度。
?? ??? ?為邊框指定寬度有兩種方法：
?? ??? ??? ?可以指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)；
?? ??? ??? ?或者使用 3 個關鍵字之一，它們分別是 thick 、medium（默認值） 和 thin。
?? ??? ?注：CSS 沒有定義 3 個關鍵字的具體寬度，所以一個用戶可能把 thick 、medium 和 thin 分別設置為等于 5px、3px 和 2px，而另一個用戶則分別設置為 3px、2px 和 1px。?? ?
?? ??? ?

        p.one
        {
            border-style:solid;
            border-width:5px;
        }
        p.two
        {
            border-style:solid;
            border-width:medium;
        }

?

?? ?
?? ?邊框顏色：
?? ??? ?border-color屬性用于設置邊框的顏色。可以設置的顏色：
?? ??? ??? ?name - 指定顏色的名稱，如 "red"
?? ??? ??? ?RGB - 指定 RGB 值, 如 "rgb(255,0,0)"
?? ??? ??? ?Hex - 指定16進制值, 如 "#ff0000"
?? ??? ?注： border-color多帶帶使用是不起作用的，必須得先使用border-style來設置邊框樣式。
?? ??? ??? ?

        p.one
        {
            border-style:solid;
            border-color:red;
        }
        p.two
        {
            border-style:solid;
            border-color:#98bf21;
        }

?

?? ??? ?
?? ?多帶帶設置各個邊：
?? ?border-style屬性可以有1-4個值：
?? ??? ?border-style:dotted solid double dashed;
?? ??? ??? ?上邊框是 dotted
?? ??? ??? ?右邊框是 solid
?? ??? ??? ?底邊框是 double
?? ??? ??? ?左邊框是 dashed

?? ??? ?border-style:dotted solid double;
?? ??? ??? ?上邊框是 dotted
?? ??? ??? ?左、右邊框是 solid
?? ??? ??? ?底邊框是 double

?? ??? ?border-style:dotted solid;
?? ??? ??? ?上、底邊框是 dotted
?? ??? ??? ?右、左邊框是 solid

?? ??? ?border-style:dotted;
?? ??? ??? ?四面邊框是 dotted
?? ?
?? ?常用邊框屬性：
?? ??? ?border ?? ?簡寫屬性，用于把針對四個邊的屬性設置在一個聲明。
?? ??? ?border-style ?? ?用于設置元素所有邊框的樣式，或者多帶帶地為各邊設置邊框樣式。
?? ??? ?border-width ?? ?簡寫屬性，用于為元素的所有邊框設置寬度，或者多帶帶地為各邊邊框設置寬度。
?? ??? ?border-color ?? ?簡寫屬性，設置元素的所有邊框中可見部分的顏色，或為 4 個邊分別設置顏色。
?? ??? ?border-bottom ?? ?簡寫屬性，用于把下邊框的所有屬性設置到一個聲明中。
?? ??? ?border-bottom-color ?? ?設置元素的下邊框的顏色。
?? ??? ?border-bottom-style ?? ?設置元素的下邊框的樣式。
?? ??? ?border-bottom-width ?? ?設置元素的下邊框的寬度。
?? ??? ?border-left ?? ?簡寫屬性，用于把左邊框的所有屬性設置到一個聲明中。
?? ??? ?border-left-color ?? ?設置元素的左邊框的顏色。
?? ??? ?border-left-style ?? ?設置元素的左邊框的樣式。
?? ??? ?border-left-width ?? ?設置元素的左邊框的寬度。
?? ??? ?border-right ?? ?簡寫屬性，用于把右邊框的所有屬性設置到一個聲明中。
?? ??? ?border-right-color ?? ?設置元素的右邊框的顏色。
?? ??? ?border-right-style ?? ?設置元素的右邊框的樣式。
?? ??? ?border-right-width ?? ?設置元素的右邊框的寬度。
?? ??? ?border-top ?? ?簡寫屬性，用于把上邊框的所有屬性設置到一個聲明中。
?? ??? ?border-top-color ?? ?設置元素的上邊框的顏色。
?? ??? ?border-top-style ?? ?設置元素的上邊框的樣式。
?? ??? ?border-top-width ?? ?設置元素的上邊框的寬度。
?? ??? ?
CSS輪廓：
?? ?CSS輪廓：
?? ??? ?輪廓（outline）是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用；CSS outline 屬性規定元素輪廓的樣式、顏色和寬度。
?? ??? ?如圖所示：
?? ?
?? ?所有屬性：
?? ??? ?屬性 ?? ??? ??? ??? ??? ??? ??? ?說明 ?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?值 ?? ??? ??? ??? ??? ??? ??? ??? ??? ??? ?CSS
?? ??? ?outline ?? ??? ??? ?在一個聲明中設置所有的輪廓屬性 ?? ?outline-color、outline-style、outline-width、inherit ?? ??? ??? ??? ?2
?? ??? ?outline-color ?? ??? ??? ?設置輪廓的顏色 ?? ??? ??? ??? ?color-name、hex-number、rgb-number、invert、inherit?? ? ?? ??? ??? ??? ?2
?? ??? ?outline-style ?? ??? ??? ?設置輪廓的樣式 ?? ??? ?none、dotted、dashed、solid、double、groove、ridge、inset、outset、inherit ?? ?2
?? ??? ?outline-width ?? ??? ??? ?設置輪廓的寬度 ?? ??? ??? ??? ?thin、medium、thick、length、inherit ?? ??? ??? ??? ??? ??? ??? ??? ?2
?? ??? ?
CSS外邊距：
?? ?margin：
?? ??? ?margin 清除周圍的（外邊框）元素區域。margin 沒有背景顏色，是完全透明的；margin 可以多帶帶改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。
?? ??? ?如圖所示：
?? ?
?? ??? ?可以輸入的值：
?? ??? ??? ?值 ?? ??? ??? ?說明
?? ??? ??? ?auto ?? ?設置瀏覽器邊距，這樣做的結果會依賴于瀏覽器
?? ??? ??? ?length ?? ?定義一個固定的margin（使用像素，pt，em等）
?? ??? ??? ?% ?? ??? ?定義一個使用百分比的邊距
?? ?
?? ?單邊 外邊距屬性：
?? ??? ?margin-top:100px;
?? ??? ?margin-bottom:100px;
?? ??? ?margin-right:50px;
?? ??? ?margin-left:50px;
?? ?
?? ?簡寫：
?? ??? ?margin:25px 50px 75px 100px;
?? ??? ??? ?上邊距為25px
?? ??? ??? ?右邊距為50px
?? ??? ??? ?下邊距為75px
?? ??? ??? ?左邊距為100px

?? ??? ?margin:25px 50px 75px;
?? ??? ??? ?上邊距為25px
?? ??? ??? ?左右邊距為50px
?? ??? ??? ?下邊距為75px

?? ??? ?margin:25px 50px;
?? ??? ??? ?上下邊距為25px
?? ??? ??? ?左右邊距為50px

?? ??? ?margin:25px;
?? ??? ??? ?所有的4個邊距都是25px
?? ??? ??? ?
CSS填充：
?? ?Padding：
?? ??? ?當元素的 padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充；多帶帶使用 padding 屬性可以改變上下左右的填充。
?? ??? ?如圖所示：
?? ?
?? ??? ?可以輸入的值：
?? ??? ??? ?值 ?? ??? ??? ?說明
?? ??? ??? ?length ?? ??? ?定義一個固定的填充(像素, pt, em,等)
?? ??? ??? ?% ?? ??? ??? ?使用百分比值定義一個填充
?? ?
?? ?填充 單邊內邊距：
?? ??? ?padding-top:25px;
?? ??? ?padding-bottom:25px;
?? ??? ?padding-right:50px;
?? ??? ?padding-left:50px;
?? ??? ?
?? ?簡寫：
?? ??? ?padding:25px 50px 75px 100px;
?? ??? ??? ?上填充為25px
?? ??? ??? ?右填充為50px
?? ??? ??? ?下填充為75px
?? ??? ??? ?左填充為100px

?? ??? ?padding:25px 50px 75px;
?? ??? ??? ?上填充為25px
?? ??? ??? ?左右填充為50px
?? ??? ??? ?下填充為75px

?? ??? ?padding:25px 50px;
?? ??? ??? ?上下填充為25px
?? ??? ??? ?左右填充為50px

?? ??? ?padding:25px;
?? ??? ??? ?所有的填充都是25px

CSS分組和嵌套：
?? ?分組選擇器：
?? ??? ?在樣式表中有很多具有相同樣式的元素；為了盡量減少代碼，你可以使用分組選擇器；每個選擇器用逗號分隔。

        
        h1,h2,p
        {
            color:green;
        }

?

?? ?
?? ?嵌套選擇器：
?? ??? ?它可能適用于選擇器內部的選擇器的樣式。

        
        /*
        p{ }: 為所有 p 元素指定一個樣式。
        .marked{ }: 為所有 class="marked" 的元素指定一個樣式。
        .marked p{ }: 為所有 class="marked" 元素內的 p 元素指定一個樣式。
        p.marked{ }: 為所有 class="marked" 的 p 元素指定一個樣式。
        */
        p
        {
            color:blue;
            text-align:center;
        }
        .marked
        {
            background-color:red;
        }
        .marked p
        {
            color:white;
        }
        p.marked{
            text-decoration:underline;
        }

?

CSS尺寸：
?? ?常用屬性：
?? ??? ?屬性 ?? ??? ??? ??? ?描述
?? ??? ?height ?? ??? ??? ?設置元素的高度。
?? ??? ?line-height ?? ?設置行高。
?? ??? ?max-height ?? ??? ?設置元素的最大高度。
?? ??? ?max-width ?? ??? ?設置元素的最大寬度。
?? ??? ?min-height ?? ??? ?設置元素的最小高度。
?? ??? ?min-width ?? ??? ?設置元素的最小寬度。
?? ??? ?width ?? ??? ??? ?設置元素的寬度。

CSS Display(顯示) 與 Visibility（可見性）：
?? ?隱藏元素 - display:none或visibility:hidden：
?? ??? ?隱藏一個元素可以通過把display屬性設置為"none"，或把visibility屬性設置為"hidden"。但是請注意，這兩種方法會產生不同的結果；visibility:hidden可以隱藏某個元素，但隱藏的元素仍需占用與未隱藏之前一樣的空間。也就是說，該元素雖然被隱藏了，但仍然會影響布局。
?? ??? ?display:none可以隱藏某個元素，且隱藏的元素不會占用任何空間。也就是說，該元素不但被隱藏了，而且該元素原本占用的空間也會從頁面布局中消失。
?? ??? ?
?? ??? ?h1.hidden {visibility:hidden;}
?? ??? ?h1.hidden {display:none;}
?? ??? ?
?? ?CSS Display - 塊和內聯元素：
?? ??? ?塊元素是一個元素，占用了全部寬度，在前后都是換行符。
?? ??? ?塊元素的例子：
?? ??? ??? ?

?? ??? ??? ?

?? ??? ??? ?

?? ??? ?內聯元素只需要必要的寬度，不強制換行。
?? ??? ?內聯元素的例子：
?? ??? ??? ?
?? ??? ??? ?

?? ?如何改變一個元素顯示：
?? ??? ?可以更改內聯元素和塊元素：
?? ??? ??? ?把列表項顯示為內聯元素：
?? ??? ??? ?li {display:inline;}
?? ??? ??? ?
?? ??? ??? ?把span元素作為塊元素：
?? ??? ??? ?span {display:block;}
?? ??? ??? ?
CSS定位：
?? ?五大屬性：static、relative、fixed、absolute、sticky
?? ?
?? ?static定位：
?? ??? ?HTML元素的默認值，即沒有定位，元素出現在正常的流中；靜態定位的元素不會受到 top, bottom, left, right影響。?? ?

        div.static {
            position: static;
            border: 3px solid #73AD21;
        }

?

?? ??? ?
?? ?fixed定位：
?? ??? ?元素的位置相對于瀏覽器窗口是固定位置；即使窗口是滾動的它也不會移動?? ?
?? ???

 p.pos_fixed
        {
            position:fixed;
            top:30px;
            right:5px;
        }

?

?? ??? ?注：Fixed 定位在 IE7 和 IE8 下需要描述 !DOCTYPE 才能支持；Fixed定位使元素的位置與文檔流無關，因此不占據空間；Fixed定位的元素和其他元素重疊。
?? ??? ?
?? ?relative 定位：
?? ??? ?相對定位元素的定位是相對其正常位置。

        h2.pos_left
        {
            position:relative;
            left:-20px;
        }
        h2.pos_right
        {
            position:relative;
            left:20px;
        }

?

?? ?absolute 定位：
?? ??? ?絕對定位的元素的位置相對于最近的已定位父元素，如果元素沒有已定位的父元素，那么它的位置相對于:

h2{
            position:absolute;
            left:100px;
            top:150px;
        }

?

?? ?注：absolute 定位使元素的位置與文檔流無關，因此不占據空間；absolute 定位的元素和其他元素重疊。
?? ?
?? ?sticky 定位
?? ??? ?position: sticky; 基于用戶的滾動位置來定位；粘性定位的元素是依賴于用戶的滾動，在 position:relative 與 position:fixed 定位之間切換；它的行為就像 position:relative; 而當頁面滾動超出目標區域時，它的表現就像 position:fixed；它會固定在目標位置；元素定位表現為在跨越特定閾值前為相對定位，之后為固定定位；這個特定閾值指的是 top, right, bottom 或 left 之一，換言之，指定 top, right, bottom 或 left 四個閾值其中之一，才可使粘性定位生效。否則其行為與相對定位相同。
?? ????

div.sticky {
            position: -webkit-sticky; /* Safari */
            position: sticky;
            top: 0;
            background-color: green;
            border: 2px solid #4CAF50;
        }

?

?? ?
?? ?重疊的元素：
?? ??? ?元素的定位與文檔流無關，所以它們可以覆蓋頁面上的其它元素；z-index屬性指定了一個元素的堆疊順序（哪個元素應該放在前面，或后面）；一個元素可以有正數或負數的堆疊順序
?? ?
CSS Overflow：
?? ?CSS overflow 屬性可以控制內容溢出元素框時在對應的元素區間內添加滾動條。
?? ?
?? ?屬性：
?? ??? ??? ?值 ?? ??? ??? ?描述
?? ??? ?visible ?? ?默認值。內容不會被修剪，會呈現在元素框之外。
?? ??? ?hidden ?? ??? ?內容會被修剪，并且其余內容是不可見的。
?? ??? ?scroll ?? ??? ?內容會被修剪，但是瀏覽器會顯示滾動條以便查看其余的內容。
?? ??? ?auto ?? ??? ?如果內容被修剪，則瀏覽器會顯示滾動條以便查看其余的內容。
?? ??? ?inherit ?? ?規定應該從父元素繼承 overflow 屬性的值。
?? ??? ?
CSS浮動：
?? ?什么是浮動：
?? ??? ?CSS 的 Float（浮動），會使元素向左或向右移動，其周圍的元素也會重新排列。Float（浮動），往往是用于圖像，但它在布局時一樣非常有用。

    .eg
    {
        float:left;
        width:110px;
        height:90px;
        margin:5px;
    }

?

GPU云服務器 云服務器 機器學習學習之路 機器學習之路 python學習之路 大數據學習之路

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/1725.html

• 上一篇：vue axios 簡單封裝以及思考
• 下一篇：CSS顏色代碼