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

?Infi-chu:

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

?

CSS盒子模型
?? ?概念：CSS盒模型本質(zhì)上是一個(gè)盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實(shí)際內(nèi)容。盒模型允許我們?cè)谄渌睾椭車剡吙蛑g的空間放置元素。
?? ?如下所示：
?? ?
?? ?不同部分的說明：
?? ??? ?Margin(外邊距) - 清除邊框外的區(qū)域，外邊距是透明的。
?? ??? ?Border(邊框) - 圍繞在內(nèi)邊距和內(nèi)容外的邊框。
?? ??? ?Padding(內(nèi)邊距) - 清除內(nèi)容周圍的區(qū)域，內(nèi)邊距是透明的。
?? ??? ?Content(內(nèi)容) - 盒子的內(nèi)容，顯示文本和圖像。

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

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

?

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

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

?

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

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

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

?? ??? ?margin:25px;
?? ??? ??? ?所有的4個(gè)邊距都是25px
?? ??? ??? ?
CSS填充：
?? ?Padding：
?? ??? ?當(dāng)元素的 padding（填充）內(nèi)邊距被清除時(shí)，所釋放的區(qū)域?qū)?huì)受到元素背景顏色的填充；多帶帶使用 padding 屬性可以改變上下左右的填充。
?? ??? ?如圖所示：
?? ?
?? ??? ?可以輸入的值：
?? ??? ??? ?值 ?? ??? ??? ?說明
?? ??? ??? ?length ?? ??? ?定義一個(gè)固定的填充(像素, pt, em,等)
?? ??? ??? ?% ?? ??? ??? ?使用百分比值定義一個(gè)填充
?? ?
?? ?填充 單邊內(nèi)邊距：
?? ??? ?padding-top:25px;
?? ??? ?padding-bottom:25px;
?? ??? ?padding-right:50px;
?? ??? ?padding-left:50px;
?? ??? ?
?? ?簡(jiǎn)寫：
?? ??? ?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分組和嵌套：
?? ?分組選擇器：
?? ??? ?在樣式表中有很多具有相同樣式的元素；為了盡量減少代碼，你可以使用分組選擇器；每個(gè)選擇器用逗號(hào)分隔。

        
        h1,h2,p
        {
            color:green;
        }

?

?? ?
?? ?嵌套選擇器：
?? ??? ?它可能適用于選擇器內(nèi)部的選擇器的樣式。

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

?

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

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

?? ??? ??? ?

?? ??? ??? ?

?? ??? ?內(nèi)聯(lián)元素只需要必要的寬度，不強(qiáng)制換行。
?? ??? ?內(nèi)聯(lián)元素的例子：
?? ??? ??? ?
?? ??? ??? ?

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

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

?

?? ??? ?
?? ?fixed定位：
?? ??? ?元素的位置相對(duì)于瀏覽器窗口是固定位置；即使窗口是滾動(dòng)的它也不會(huì)移動(dòng)?? ?
?? ???

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

?

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

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

?

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

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

?

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

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

?

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

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

?

云服務(wù)器 GPU云服務(wù)器 機(jī)器學(xué)習(xí)學(xué)習(xí)之路 機(jī)器學(xué)習(xí)之路 python學(xué)習(xí)之路 大數(shù)據(jù)學(xué)習(xí)之路

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/1725.html

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