CSS(Cascading Style Sheets)

CSS通常稱為CSS樣式表或層疊樣式表（級聯樣式表），主要用于設定HTML頁面中的文本內容（字體、大小、對齊方式等）、圖片的外形（寬高、邊框樣式、邊距等）以及版面的布局等外觀顯示樣式，

CSS以HTML為基礎，提供了豐富的功能，如字體、顏色、背景的控制及整體排版等，而且還可以針對不同的瀏覽器設定不同的樣式，

CSS樣式規則

使用HTML時，需要遵從一定的規范，CSS亦如此，要想熟練地使用CSS對網頁進行修飾，首先需要了解CSS樣式規則，具體格式如下：

1.選擇器用于指定CSS樣式作用的HTML物件，花括號內是對該物件設定的具體樣式，
2.屬性和屬性值以“鍵值對”的形式出現，
3.屬性是對指定的物件設定的樣式屬性，例如字體大小、文本顏色、邊框樣式等，
4.屬性和屬性值之間用英文“:”連接，
5.多個“鍵值對”之間用英文“;”進行區分，

選擇器（重點）

要想將CSS樣式應用于特定的HTML元素，首先需要找到該目標元素，在CSS中，執行這一任務的樣式規則部分被稱為選擇器（選擇符），

將上面的圖形按照類別進行分組，這時就要用到選擇器:

標簽選擇器（元素選擇器）

標簽選擇器是指用HTML標簽名稱作為選擇器，按標簽名稱分類，為頁面中某一類標簽指定統一的CSS樣式，其基本語法格式如下：

標簽名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }  或者
元素名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

標簽選擇器最大的優點是能快速為頁面中同型別的標簽統一樣式，同時這也是他的缺點，不能設計差異化樣式，

案例：

    <style>
        p{
            color:red;
        }
    </style>
    <h2>靜夜思</h2>
    <p>離離原上草，</p>
    <p>一歲一枯榮，</p>
    <p>野火燒不盡，</p>
    <p>春風吹又生，</p>

類選擇器（重點）

tips：在HTML頁面中的幾乎所有的元素都是有class屬性，class屬性就是來系結CSS，

類樣式就是創建一個樣式類別，凡是在class中系結了制定的樣式名的元素都是這個樣式類別的元素，

類選擇器使用“.”（英文點號）進行標識，后面緊跟類名，其基本語法格式如下：

.類名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

 標簽呼叫的時候用 class=“類名”  即可，

類選擇器最大的優勢是可以為元素物件定義單獨或相同的樣式，

案例：

    <style>
        .blue{
            color: blue;
        }
    </style>
    <p class="blue">//創建一個ArrayList物件</p>
    <p>ArrayList al = new ArrayList();</p>
    <p class="blue">//給al集合中添加元素</p>
    <p>al.add(new Student("大錘"));</p>
    <p>al.add(new Student("狗蛋"));</p>
    <p>al.add(new Student("山炮"));</p>
    <ul>
        <li class="blue">Arraylist底層是使用陣列實作的</li>
        <li class="blue">創建一個Arraylist物件的時候</li>
        <li class="blue">在記憶體中創建了一個ArrayList物件</li>
        <li class="blue">并沒有創建陣列，第一次添加元素的時候才創建陣列</li>
    </ul>

tips：

1.長名稱或詞組可以使用中橫線來為選擇器命名，
2.不建議使用“_”下劃線來命名CSS選擇器，
3.不要純數字、中文等命名，使用英文字母來表示，
4.一個標簽可以屬于多個類，如果一個標簽有多個類，在class中可以使用“空格”隔開，

.product-list-item{
    color: red;
}

多類名選擇器

我們可以給標簽指定多個類名，從而達到更多的選擇目的， 

1. 樣式顯示效果跟HTML元素中的類名先后順序沒有關系,受CSS樣式書寫的上下順序有關，
2. 各個類名中間用空格隔開，

多類名選擇器在后期布局比較復雜的情況下，還是較多使用的，

案例:

    <style>
        .item-font{
            font-size: 26px;
            font-family: "黑體";
            color: red;
        }
        .blue{
            color: blue;
        }
    </style>
    <p >//創建一個ArrayList物件</p>
    <p>ArrayList al = new ArrayList();</p>
    <p >//給al集合中添加元素</p>
    <p>al.add(new Student("大錘"));</p>
    <p>al.add(new Student("狗蛋"));</p>
    <p>al.add(new Student("山炮"));</p>

id選擇器

tips：HTML頁面中所有的元素都是有id屬性，理論上id是唯一的，

id選擇器使用“#”進行標識，后面緊跟id名，其基本語法格式如下：

#id名{屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

該語法中，id名即為HTML元素的id屬性值，大多數HTML元素都可以定義id屬性，元素的id值是唯一的，只能對應于檔案中某一個具體的元素，

用法基本和類選擇器相同，

案例：

        #newObject{
            color:green;
        }

<p id="newObject">ArrayList al = new ArrayList();</p>

 id選擇器和類選擇器區別

W3C標準規定，在同一個頁面內，不允許有相同名字的id物件出現，但是允許相同名字的class，

類選擇器（class） 好比人的名字， 是可以多次重復使用的.

id選擇器 好比人的身份證號碼， 全國是唯一的不得重復， 只能使用一次，

通配符選擇器

通配符選擇器用“*”號表示，他是所有選擇器中作用范圍最廣的，能匹配頁面中所有的元素，其基本語法格式如下：

* { 屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3; }

例如下面的代碼，使用通配符選擇器定義CSS樣式，清除所有HTML標記的默認邊距，

* {
  margin: 0;                    /* 定義外邊距*/
  padding: 0;                   /* 定義內邊距*/
}

偽類選擇器

偽類選擇器用于向某些選擇器添加特殊的效果，比如給鏈接添加特殊效果， 比如可以選擇 第1個，第n個元素，

類選擇器是一個點 比如 .demo {}   
而偽類 用 2個點 就是冒號  比如  :link{}

鏈接偽類選擇器

• :link /* 未訪問的鏈接 */

• :visited /* 已訪問的鏈接 */

• :hover /* 滑鼠移動到鏈接上 */

• :active /* 選定的鏈接 */

  注意寫的時候，他們的順序盡量不要顛倒 按照 lvha 的順序，

案例：

    <style>
        a{
            font-size: 26px;
            /*去掉超鏈接的下劃線*/
            text-decoration: none;
        }
        /*未訪問過的連接*/
        a:link{
            color: green;
        }
        /*訪問過的連接樣式*/
        a:visited{
            color:tomato;
        }
        /*滑鼠懸浮*/
        a:hover{
            color: red;
        }
        /*激活時：滑鼠按下去的時候*/
        a:active{
            color: violet;
        }
    </style>
    <ul>
        <li><a href="http://www.baidu.com">你點我試試</a></li>
        <li><a href="https://www.cnblogs.com/xiaoxiaodeboke/p/www.hsnb.com">一定要點我</a></li>
        <li><a href="https://www.cnblogs.com/xiaoxiaodeboke/p/www.jsnb.com">不要點別的</a></li>
        <li><a href="https://www.cnblogs.com/xiaoxiaodeboke/p/www.nbnb.com">別瞎點</a></li>
    </ul>

tips：上面的偽類不僅僅只能用在a后面，同樣的可以用在其他的選擇器后面，比如：

.st{color:red}
.st:hover{color:green;} 

結構(位置)偽類選擇器（CSS3)

• :first-child :選取屬于其父元素的首個子元素的指定選擇器

• :last-child :選取屬于其父元素的最后一個子元素的指定選擇器

• :nth-child(n) ： 匹配屬于其父元素的第 N 個子元素，不論元素的型別

• :nth-last-child(n) ：選擇器匹配屬于其元素的第 N 個子元素的每個元素，不論元素的型別，從最后一個子元素開始計數， n 可以是數字、關鍵詞或公式

案例：

    <style>
        li:first-child { /*  選擇第一個孩子 */
        		color: pink; 
        	}
        li:last-child {   /* 最后一個孩子 */
        		color: purple;
        	}
        li:nth-child(4) {   /* 選擇第4個孩子  n  代表 第幾個的意思 這里的計數是從1開始的 */ 
				color: skyblue;
        	}
    </style>
    <ul>
        <li>曹操</li>
        <li>孫悟空</li>
        <li>李自成</li>
        <li>劉邦</li>
        <li>孫權</li>
    </ul>

目標偽類選擇器(CSS3)

:target目標偽類選擇器 :選擇器可用于選取當前活動的目標元素

        :target{
            border: 2px solid #D4D4D4;
            background-color: #e5eecc;
        }

<p><a href="https://www.cnblogs.com/xiaoxiaodeboke/p/#news1">跳轉至內容 1</a></p>
<p><a href="https://www.cnblogs.com/xiaoxiaodeboke/p/#news2">跳轉至內容 2</a></p>
<p>請點擊上面的鏈接，:target 選擇器會突出顯示當前活動的 HTML 錨，</p>
<p id="news1"><b>內容 1...</b></p>
<p id="news2"><b>內容 2...</b></p>

CSS注釋

/*  需要注釋的內容  */  進行注釋的，

例如：

p {
  font-size: 14px;                 /* 所有的字體是14像素大小*/
}

CSS字體樣式屬性

font-size:字號大小

font-size屬性用于設定字號，該屬性的值可以使用相對長度單位，也可以使用絕對長度單位，

其中，相對長度單位比較常用，推薦使用像素單位px，絕對長度單位使用較少，

font-family:字體

font-family屬性用于設定字體，網頁中常用的字體有宋體、微軟雅黑、黑體等，例如將網頁中所有段落文本的字體設定為微軟雅黑，可以使用如下CSS樣式代碼：

p{ font-family:"微軟雅黑";}

可以同時指定多個字體，中間以逗號隔開，表示如果瀏覽器不支持第一個字體，則會嘗試下一個，直到找到合適的字體，

1. 現在網頁中普遍使用14px+，
2. 盡量使用偶數的數字字號，ie6等老式瀏覽器支持奇數會有bug，
3. 各種字體之間必須使用英文狀態下的逗號隔開，
4. 中文字體需要加英文狀態下的引號，英文字體一般不需要加引號，當需要設定英文字體時，英文字體名必須位于中文字體名之前，
5. 如果字體名中包含空格、#、$等符號，則該字體必須加英文狀態下的單引號或雙引號，例如font-family: "Times New Roman";，
6. 盡量使用系統默認字體，保證在任何用戶的瀏覽器中都能正確顯示，

CSS Unicode字體

在 CSS 中設定字體名稱，直接寫中文是可以的，但是在檔案編碼（GB2312、UTF-8 等）不匹配時會產生亂碼的錯誤，xp 系統不支持 類似微軟雅黑的中文，

方案一： 你可以使用英文來替代， 比如 font-family:"Microsoft Yahei"，

方案二： 在 CSS 直接使用 Unicode 編碼來寫字體名稱可以避免這些錯誤，使用 Unicode 寫中文字體名稱，瀏覽器是可以正確的決議的， font-family: "\5FAE\8F6F\96C5\9ED1"，表示設定字體為“微軟雅黑”，

可以通過escape() 來測驗屬于什么字體，

字體名稱	英文名稱	Unicode 編碼
宋體	SimSun	\5B8B\4F53
新宋體	NSimSun	\65B0\5B8B\4F53
黑體	SimHei	\9ED1\4F53
微軟雅黑	Microsoft YaHei	\5FAE\8F6F\96C5\9ED1
楷體_GB2312	KaiTi_GB2312	\6977\4F53_GB2312
隸書	LiSu	\96B6\4E66
幼園	YouYuan	\5E7C\5706
華文細黑	STXihei	\534E\6587\7EC6\9ED1
細明體	MingLiU	\7EC6\660E\4F53
新細明體	PMingLiU	\65B0\7EC6\660E\4F53

為了照顧不同電腦的字體安裝問題，我們盡量只使用宋體和微軟雅黑中文字體

案例：

    <style>
        li{
            font-size: 16px;
        }
        li:nth-child(1){
            font-family:"隸書";
        }
        li:nth-child(2){
            font-family:"LiSu";
        }
        li:nth-child(3){
            font-family:"\96B6\4E66";
        }
    </style>
    <ul>
        <li >Arraylist底層是使用陣列實作的</li>
        <li >創建一個Arraylist物件的時候</li>
        <li >在記憶體中創建了一個ArrayList物件</li>
        <li >并沒有創建陣列，第一次添加元素的時候才創建陣列</li>
    </ul>

font-weight:字體粗細

字體加粗除了用 b 和 strong 標簽之外，可以使用CSS 來實作，但是CSS 是沒有語意的，

font-weight屬性用于定義字體的粗細，其可用屬性值：normal、bold、bolder、lighter、100~900（100的整數倍），

數字 400 等價于 normal，而 700 等價于 bold，  但是我們更喜歡用數字來表示，  

案例：

    <style>
        li:nth-child(1){
            font-weight: 100;
        }
        li:nth-child(2){
            font-weight: 300;
        }
        li:nth-child(3){
            font-weight: 600;
        }
        li:nth-child(4){
            font-weight: 900;
        }
    </style>
    <ul>
        <li>介面和抽象類都不能直接創建物件</li>
        <li>抽象類中可有抽象方法也可以有非抽象方法</li>
        <li>介面中除過默認方法職位都是抽象方法</li>
        <li>抽象類中可以有屬性，但是介面中只能有常量</li>
    </ul> 

font-style:字體風格

字體傾斜除了用 i 和 em 標簽之外，可以使用CSS 來實作，但是CSS 是沒有語意的，

font-style屬性用于定義字體風格，如設定斜體、傾斜或正常字體，其可用屬性值如下：

normal：默認值，瀏覽器會顯示標準的字體樣式，

italic：瀏覽器會顯示斜體的字體樣式，

oblique：瀏覽器會顯示傾斜的字體樣式，

平時我們很少給文字加斜體，反而喜歡給斜體標簽（em，i）改為普通模式，

font:綜合設定字體樣式 (重點)

font屬性用于對字體樣式進行綜合設定，其基本語法格式如下：

選擇器{font: font-style  font-weight  font-size/line-height  font-family;}

<style>
        p{
            font: 600 28px "隸書"
        }
</style>
<p>抽象了和介面有什么異同點?</p>

使用font屬性時，必須按上面語法格式中的順序書寫，不能更換順序，各個屬性以空格隔開，

注意：其中不需要設定的屬性可以省略（取默認值），但必須保留font-size和font-family屬性，否則font屬性將不起作用，

CSS外觀屬性

color:文本顏色（前景色）

color屬性用于定義文本的顏色（不能定義其他的顏色），其取值方式有如下3種：

1.預定義的顏色值，如red，green，blue等，

2.十六進制，如#FF0000，#FF6600，#29D794等，實際作業中，十六進制是最常用的定義顏色的方式，

3.RGB代碼，如紅色可以表示為rgb(255,0,0)或rgb(100%,0%,0%)，

需要注意的是，如果使用RGB代碼的百分比顏色值，取值為0時也不能省略百分號，必須寫為0%，

    <style>
        li{
            font-size: 24px;
        }
        li:nth-child(1){
            /*英文單詞*/
            color: red;
        }
        li:nth-child(2){
            /*使用16進制數字設定rgb*/
            color: #0000ff;
        }
        li:nth-child(3){
            /*使用rgb函式得到顏色*/
            color: rgb(188, 188, 188);
        }
        li:nth-child(4){
            /*使用rgba函式得到顏色   最后一個引數是透明度，透明度是0~1之間*/ 
            color: rgba(235, 123, 255, .8);
        }
    </style>
    <h2>JDK 和 JRE 有什么區別？</h2>
    <ul>
        <li>JDK：Java Development Kit</li>
        <li>JRE： Java Runtime Environment</li>
        <li>JDK顧名思義是java開發工具包，是程式員使用java語言撰寫java程式所需的開發工具包，是提供給程式員使用的，JDK包含了JRE，同時還包含了編譯java原始碼的編譯器javac，還包含了很多java程式除錯和分析的工具：jconsole，jvisualvm等工具軟體，還包含了java程式撰寫所需的檔案和demo例子程式，</li>
        <li>JRE顧名思義是java運行時環境，包含了java虛擬機，java基礎類別庫，是使用java語言撰寫的程式運行所需要的軟體環境，是提供給想運行java程式的用戶使用的，</li>
    </ul>

line-height:行間距

ine-height屬性用于設定行間距，就是行與行之間的距離，即字符的垂直間距，一般稱為行高，line-height常用的屬性值單位有三種，分別為像素px，相對值em和百分比%，實際作業中使用最多的是像素px

一般情況下，行距比字號大7.8像素左右就可以了，

    <style>
        p{
            font-size: 18px;
            line-height: 25px;
            width: 300px;
        }
    </style>
    <h2>== 和 equals 的區別是什么？</h2>
    <p>
        ==是比較運算子，主要對被比較的兩個運算元在堆疊記憶體中的內容，基本型別比較的就是值，參考型別比較的就是地址，
        equals是Object類的方法，默認就是使用==進行比較的，如果希望equals按照我們的期望進行比較，就必須重寫equals方法，String類就是重寫了equals方法，可以比較兩個字串的字符序列
    </p>

text-align:水平對齊方式

text-align屬性用于設定文本內容的水平對齊，相當于html中的align對齊屬性，其可用屬性值如下：

left：左對齊（默認值）

right：右對齊

center：居中對齊

text-indent:首行縮進

text-indent屬性用于設定首行文本的縮進，其屬性值可為不同單位的數值、em字符寬度的倍數、或相對于瀏覽器視窗寬度的百分比%，允許使用負值, 建議使用em作為設定單位，

1em 就是一個字的寬度 如果是漢字的段落， 1em 就是一個漢字的寬度

letter-spacing:字間距

letter-spacing屬性用于定義字間距，所謂字間距就是字符與字符之間的空白，其屬性值可為不同單位的數值，允許使用負值，默認為normal，

word-spacing:單詞間距

word-spacing屬性用于定義英文單詞之間的間距，對中文字符無效，和letter-spacing一樣，其屬性值可為不同單位的數值，允許使用負值，默認為normal，

word-spacing和letter-spacing均可對英文進行設定，不同的是letter-spacing定義的為字母之間的間距，而word-spacing定義的為英文單詞之間的間距，

案例：

    <style>
        p{
            font-size: 18px;
            /*設定行高,一般比字體大7~8個像素*/
            /* line-height: 1.4em; */
            line-height: 25px;
            /*文本的對齊方式*/
            text-align: left;
            /*字間距*/
            letter-spacing: .2em;
            /*詞間距*/
            word-spacing: 1em;
        }
    </style>   
<h2>== 和 equals 的區別是什么？</h2>
    <p>
        ==是比較運算子，主要對被比較的兩個運算元在堆疊記憶體中的內容，基本型別比較的就是值，參考型別比較的就是地址，
        equals是Object類的方法，默認就是使用==進行比較的，如果希望equals按照我們的期望進行比較，就必須重寫equals方法，
　　　　String類就是重寫了equals方法，可以比較兩個字串的字符序列
    </p>
    <hr>
    <p>
        ==Is a comparison operator, which mainly compares the contents of the two operands being compared in the stack memory. Basic types compare values. Reference types compare addresses.
Equals is the method of the object class. The default is to use = = for comparison. If we want equals to compare according to our expectations, we must override the equals method. The string class overrides the equals method to compare the character sequences of two strings
    </p>

text-decoration：文本裝飾

我們可以通過text-decoration給文本添加下劃線、上劃線、洗掉線等等，

    <style>
        span{
            font: 900 36px "黑體";
            text-shadow: -3px -5px 3px red;
            /*文本裝飾*/
            text-decoration: underline;
        }
    </style>
     <span>
        這里就是要顯示文字的陰影！
    </span>

text-decoration的幾個值：

underline 下劃線

line-through 洗掉線

overline 上劃線

none 沒有任何線（去掉超鏈接的下劃線就是這個設定，）

顏色半透明(css3)

文字顏色到了CSS3我們可以采取半透明的格式了語法格式如下：

    color: rgba(r,g,b,a)  a 是alpha  透明的意思  取值范圍 0~1之間    color: rgba(0,0,0,0.3)  

文字陰影(CSS3)

以后我們可以給我們的文字添加陰影效果了 Shadow 影子

text-shadow:水平位置 垂直位置 模糊距離 陰影顏色;

 前兩項是必須寫的， 后兩項可以選寫，

案例：

<style>
        h2{
            font-size: 36px;
            text-shadow: -3px -3px 3px red;
        }
</style>
<h2>噢！ 好模糊呀！</h2>

引入CSS樣式表（書寫位置）

行內式（行內樣式）

是通過標簽的style屬性來設定元素的樣式，其基本語法格式如下：

<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>

語法中style是標簽的屬性，實際上任何HTML標簽都擁有style屬性，用來設定行內式，其中屬性和值的書寫規范與CSS樣式規則相同，行內式只對其所在的標簽及嵌套在其中的子標簽起作用，

    <ul>
        <li>介面和抽象類都不能直接創建物件</li>
        <!-- 這里利用行樣式制定樣式表 -->
        <li style="color: red; font:italic 600 18px '黑體'">
　　　　　　　　抽象類中可有抽象方法也可以有非抽象方法</li>
        <li>介面中除過默認方法職位都是抽象方法</li>
        <li>抽象類中可以有屬性，但是介面中只能有常量</li>
    </ul>

行樣式的級別在所有樣式表中是最高的，可以覆寫其他的樣式屬性，

內部樣式表（內嵌式）

內嵌式是將CSS代碼集中寫在HTML檔案的head頭部標簽中，并且用style標簽定義，其基本語法格式如下：

<head>
<style type="text/CSS">
    選擇器 {屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;}
</style>
</head>

語法中，style標簽一般位于head標簽中title標簽之后，也可以把他放在HTML檔案的任何地方，

外部樣式表（外鏈式）

鏈入式是將所有的樣式放在一個或多個以.CSS為擴展名的外部樣式表檔案中，

通過link標簽將外部樣式表檔案鏈接到HTML檔案中，其基本語法格式如下：

<head>
  <link href="https://www.cnblogs.com/xiaoxiaodeboke/p/CSS檔案的路徑" type="text/CSS" rel="stylesheet" />
</head>

注意： link 是個單標簽哦!!!

該語法中，link標簽需要放在head頭部標簽中，并且必須指定link標簽的三個屬性，具體如下：

href：定義所鏈接外部樣式表檔案的URL，可以是相對路徑，也可以是絕對路徑，
type：定義所鏈接檔案的型別，在這里需要指定為“text/CSS”，表示鏈接的外部檔案為CSS樣式表，
rel：定義當前檔案與被鏈接檔案之間的關系，在這里需要指定為“stylesheet”，表示被鏈接的檔案是一個樣式表檔案，

三種樣式表總結

樣式表	優點	缺點	使用情況	控制范圍
行內樣式表	書寫方便，權重高	沒有實作樣式和結構相分離	較少	控制一個標簽（少）
內嵌樣式表	部分結構和樣式相分離	沒有徹底分離	較多	控制一個頁面（中）
外部樣式表	完全實作結構和樣式相分離	需要引入	最多	控制整個站點（多）

標簽顯示模式（display）

塊級別元素和行內元素的區別案例：

    <style>
        /*給a標簽和p標簽添加細線邊框*/
        a,p,div{
            border:1px solid;
            height: 100px;
            width: 300px;
        }
    </style>
    <p>這是一個段落</p>
    <a href="">點我</a>
    <a href="">別點它</a>
    <p>有時一個p標簽</p>
    <div>
        <header>這里是頭部</header>
        <div style="height: 50px;">
            這里是主體
        </div>
        <footer>這里是footer </footer>
    </div>

p標簽獨占一行，并且設定的高度是生效的，

a標簽不會獨占一行，并且設定的高度是無效，

HTML標簽一般分為塊標簽和行內標簽兩種型別，它們也稱塊元素和行內元素，具體如下：

塊級元素(block-level)

每個塊元素通常都會獨自占據一整行或多整行，可以對其設定寬度、高度、對齊等屬性，常用于網頁布局和網頁結構的搭建，

常見的塊元素有<h1>~<h6>、<p>、<div>、<ul>、<ol>、<li>等，其中<div>標簽是最典型的塊元素，

塊級元素的特點：

（1）總是從新行開始

（2）高度，行高、外邊距以及內邊距都可以控制，

（3）寬度默認是容器的100%，

（4）可以容納行內元素和其他塊元素，

行內元素(inline-level)

行內元素（行內元素）不占有獨立的區域，僅僅靠自身的字體大小和影像尺寸來支撐結構，一般不可以設定寬度、高度、對齊等屬性，常用于控制頁面中文本的樣式，

常見的行內元素有<a>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>、<span>等，其中<span>標簽最典型的行內元素，

行內元素的特點：

（1）和相鄰行內元素在一行上，

（2）高、寬無效，但水平方向的padding和margin可以設定，垂直方向的無效，

（3）默認寬度就是它本身內容的寬度，

（4）行內元素只能容納文本或則其他行內元素，（a特殊）

tips:
1. 只有 文字才 能組成段落  因此 p  里面不能放塊級元素，同理還有這些標簽h1,h2,h3,h4,h5,h6,dt，他們都是文字類塊級標簽，里面不能放其他塊級元素，
2. 鏈接里面不能再放鏈接，

p標簽和h標簽只能方文字和其他的行內元素，不能放其他的塊級元素：

tips:

• HTML模式是流式布局，
• 所有的塊級元素獨占一行，所有的塊級元素都可以設定大小，
• div,p,h系列，li
• 行內元素不獨占一行，行內元素大部分是不能設定大小，
• table,img,a,span,input....
• 行內元素可以設定大小的：table和img，

案例：
   <p>
        這時一個段落
        <div>P標簽內部的一個DIV</div>
        段落結束
    </p>

p標簽從開始標簽開始到下一個塊級元素的開始標簽位置，就自動成為一個段落，

行內塊元素（inline-block）

在行內元素中有幾個特殊的標簽——<img />、<input />、<table>、<td>，可以對它們設定寬高和對齊屬性
行內塊元素的特點：
（1）和相鄰行內元素（行內塊）在一行上,但是之間會有空白縫隙，
（2）默認寬度就是它本身內容的寬度，
（3）高度，行高、外邊距以及內邊距都可以控制，

行內元素和塊級元素之間的切換

• 行內元素切換為塊級元素： 將display修改block
• 塊級元素轉為行內元素：將display修改為inline
• 如果希望元素既不獨占一行，也可以設定大小，將display修改為：inline-block

案例：

    <style>
        img{
            width: 150px;
        }
        input{
            width: 150px;
            height: 80px;
        }
        table{
            /* width: 300px; */
            display: inline-table;
            border: 1px solid;
        }
        td{
            border: 1px solid;
            width: 150px;
            height: 60px;
        }
    </style>    
<img src="https://img.uj5u.com/2022/01/28/298182280710531.jpg" alt="">
    <input type="text">
    <input type="radio">
    <input type="checkbox">
    <table>
        <tr>
            <td>單元格11</td>
            <td>單元格12</td>
            <td>單元格13</td>
        </tr>
        <tr>
            <td>單元格21</td>
            <td>單元格22</td>
            <td>單元格23</td>
        </tr>
    </table>

display樣式屬性

我們可以通過display屬性將行內元素和塊級別元素進行轉換，

display的幾個值：

none： 表示這個元素不可見，

block： 表示元素是塊級別元素，上面說過的塊級別元素默認就是block， 如果將一個行內元素的display設定為block，這個元素會轉換為塊級元素，

inline：表示元素是行內元素，所有的行內元素默認都是inline， 如果將一個塊級元素的display設定為inline，這個塊級元素會轉換為行內元素，

inline-block：行內塊級元素， 不會獨占一行， 而且可以設定元素的大小，

tips：table不是塊級元素，但是table的display默認是table ，效果也是獨占一行，也可以設定大小，

案例：

    <style>
        p{
            display: none;
        }
        a{
            border:1px solid;
            /*將行內元素轉換為快級別元素*/
            display: block;
            width: 300px;
            height: 100px;
        }
        div{
            border:1px solid;
            width: 200px;
            height: 100px;
            /*將div轉換為行內元素*/
            display: inline;
        }
        /*如果希望一個元素是行內元素，但是可以設定大小*/
        span{
            border:1px solid;
            width: 200px;
            height: 100px;
            /*行內塊元素*/
            display: inline-block;
        }
    </style>
    <span>這是一個span--1</span>
    <span>這是一個span--2</span>
    <hr>
    <div>這是一個DIV，塊級元素1</div>
    <div>這是一個DIV，塊級元素2</div>
    <a href="">這是一個行內元素：超鏈接1</a>
    <a href="">這是一個行內元素：超鏈接2</a>
    <p>哈哈哈</p>
    <div>嘻嘻</div>

CSS復合選擇器

復合選擇器是由兩個或多個基礎選擇器，通過不同的方式組合而成的,目的是為了可以選擇更準確更精細的目標元素標簽，

交集選擇器

交集選擇器由兩個選擇器構成，其中第一個為標簽選擇器，第二個為class選擇器，兩個選擇器之間不能有空格，如h3.special，

記憶技巧：

交集選擇器 是 并且的意思， 即...又...的意思

比如：   p.one   選擇的是： 類名為 .one  的 段落標簽，  

用的相對來說比較少，不太建議使用，

并集選擇器

并集選擇器（CSS選擇器分組）是各個選擇器通過逗號連接而成的，任何形式的選擇器（包括標簽選擇器、class類選擇器id選擇器等），都可以作為并集選擇器的一部分，如果某些選擇器定義的樣式完全相同，或部分相同，就可以利用并集選擇器為它們定義相同的CSS樣式，

記憶技巧

并集選擇器 和 的意思， 就是說，只要逗號隔開的，所有選擇器都會執行后面樣式，

比如  .one, p , #test {color: #F00;}  表示   .one 和 p  和 #test 這三個選擇器都會執行顏色為紅色，  通常用于集體宣告，

后代選擇器

后代選擇器又稱為包含選擇器，用來選擇元素或元素組的后代，其寫法就是把外層標簽寫在前面，內層標簽寫在后面，中間用空格分隔，當標簽發生嵌套時，內層標簽就成為外層標簽的后代，

子孫后代都可以這么選擇， 或者說，它能選擇任何包含在內 的標簽，

子元素選擇器

子元素選擇器只能選擇作為某元素子元素的元素，其寫法就是把父級標簽寫在前面，子級標簽寫在后面，中間跟一個 > 進行連接，注意，符號左右兩側各保留一個空格，

白話： 這里的子 指的是 親兒子 不包含孫子 重孫子之類，

 比如：  .demo > h3 {color: red;}   說明  h3 一定是demo 親兒子，  demo 元素包含著h3，

屬性選擇器

選擇器	示例	含義
E[attr]		存在attr屬性即可
E[attr=val]		屬性值完全等于val
E[attr*=val]		屬性值里包含val字符并且在“任意”位置
E[attr^=val]		屬性值里包含val字符并且在“開始”位置
E[attr$=val]		屬性值里包含val字符并且在“結束”位置

/* 獲取到 擁有 該屬性的元素 */
li[type] {
  border: 1px solid gray;
}
/* 獲取 屬性等于某個值的 元素 屬性值 可以使用 引號進行包裹 */
li[type="vegetable"] {
  background-color: green;
}
/* 使用空格分隔的 多個屬性 其中有某個屬性即可獲取 */
li[type~="hot"] {
  font-size: 40px;
}
/* 獲取以某個屬性開頭的語法  */
li[color^='green'] {
  background-color: orange;
}
/* 獲取以某個值 結尾的屬性 */
li[type$='t']{
  color: hotpink;
  font-weight: 900;
}
/* 獲取 屬性中 擁有某個值的 元素 */
li[type*=ea] {
  font-size: 100px;
}
/*  如果屬性的值 只有very 也能夠獲取  用來獲取 多個屬性 并且 使用-連接 */
li[price|='very'] {
  background-color: darkred;
}
<ul>  
<li type='fruit' color='green'>卡卡西</li>
 <li type='vegetable' color='greenyellow'>王大錘</li>
<li type='meat'>鳴人</li><li type='meat hot'>佐助</li>  <li type='drink hot'>小吳，你懂得</li>  <li type='drink hot'>劉大膽</li> <li price='very-cheap'>小黑</li> <li price='very'>大黃</li></ul>

偽元素選擇器（CSS3)

1. E::first-letter文本的第一個單詞或字（如中文、日文、韓文等）

2. E::first-line 文本第一行；

3. E::selection 可改變選中文本的樣式；

p::first-letter {
  font-size: 20px;
  color: hotpink;
}
/* 首行特殊樣式 */
p::first-line {
  color: skyblue;
}
p::selection {
  /* font-size: 50px; */
  color: orange;
}

 4、E::before和E::after

在E元素內部的開始位置和結束位創建一個元素，該元素為行內元素，且必須要結合content屬性使用，

div::befor {
  content:"開始";
}
div::after {
  content:"結束";
}

E:after、E:before 在舊版本里是偽元素，CSS3的規范里“:”用來表示偽類，“::”用來表示偽元素，但是在高版本瀏覽器下E:after、E:before會被自動識別為E::after、E::before，這樣做的目的是用來做兼容處理，

E:after、E:before后面的練習中會反復用到，目前只需要有個大致了解

":" 與 "::" 區別在于區分偽類和偽元素

CSS 背景(background)

CSS 可以添加背景顏色和背景圖片，以及來進行圖片設定，

background-color	背景顏色
background-image	背景圖片地址
background-repeat	是否平鋪
background-position	背景位置
background-attachment	背景固定還是滾動
背景的合寫（復合屬性）
background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置

背景圖片(image)

語法：

background-image : none | url (url) 

引數：

none : 　無背景圖（默認的） url : 　使用絕對或相對地址指定背景影像

background-image 屬性允許指定一個圖片展示在背景中（只有CSS3才可以多背景）可以和 background-color 連用， 如果圖片不重復地話，圖片覆寫不到地地方都會被背景色填充， 如果有背景圖片平鋪，則會覆寫背景顏色，

小技巧： 我們提倡 背景圖片后面的地址，url不要加引號，

背景平鋪（repeat）

語法：

background-repeat : repeat | no-repeat | repeat-x | repeat-y 

引數：

repeat : 　背景影像在縱向和橫向上平鋪（默認的）

no-repeat : 　背景影像不平鋪

repeat-x : 　背景影像在橫向上平鋪

repeat-y : 　背景影像在縱向平鋪

設定背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素，

repeat-x : 　背景影像在橫向上平鋪

repeat-y : 　背景影像在縱向平鋪

設定背景圖片時，默認把圖片在水平和垂直方向平鋪以鋪滿整個元素，

背景位置(position)

語法：background-position : length || length    background-position : position || position 

length : 　百分數 | 由浮點數字和單位識別符號組成的長度值，position : 　top | center | bottom | left | center | right

說明：

設定或檢索物件的背景影像位置，必須先指定background-image屬性，默認值為：(0% 0%)， 如果只指定了一個值，該值將用于橫坐標，縱坐標將默認為50%，第二個值將用于縱坐標，

注意：

1. position 后面是x坐標和y坐標， 可以使用方位名詞或者 精確單位，

2. 如果和精確單位和方位名字混合使用，則必須是x坐標在前，y坐標后面，比如 background-position: 15px top; 則 15px 一定是 x坐標 top是 y坐標，

實際作業用的最多的，就是背景圖片居中對齊了，

背景附著

語法：

background-attachment : scroll | fixed 

引數：

scroll : 　背景影像是隨物件內容滾動

fixed : 　背景影像固定

說明：設定或檢索背景影像是隨物件內容滾動還是固定的，

背景簡寫

background屬性的值的書寫順序官方并沒有強制標準的，為了可讀性，建議大家如下寫：

background:背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置

background: transparent url(image.jpg) repeat-y  scroll 50% 0 ;

背景透明(CSS3)

CSS3支持背景半透明的寫法語法格式是:

background: rgba(0,0,0,0.3);

最后一個引數是alpha 透明度 取值范圍 0~1之間

注意： 背景半透明是指盒子背景半透明， 盒子里面的內容不收影響，

同樣， 可以給 文字和邊框透明 都是 rgba 的格式來寫，

color:rgba(0,0,0,0.3);
border: 1px solid rgba(0,0,0,0.3);

背景縮放(CSS3)

通過background-size設定背景圖片的尺寸，就像我們設定img的尺寸一樣，在移動Web開發中做螢屏適配應用非常廣泛，

其引數設定如下：

a) 可以設定長度單位(px)或百分比（設定百分比時，參照盒子的寬高）

b) 設定為cover時，會自動調整縮放比例，保證圖片始終填充滿背景區域，如有溢位部分則會被隱藏，

c) 設定為contain會自動調整縮放比例，保證圖片始終完整顯示在背景區域，

background-image: url('images/gyt.jpg');
			background-size: 300px 100px;
			/* background-size: contain; */
			/* background-size: cover; */

多背景(CSS3)

以逗號分隔可以設定多背景，可用于自適應布局

background-image: url('images/gyt.jpg'),url('images/robot.png');

CSS 三大特性

層疊 繼承 優先級

CSS層疊性

所謂層疊性是指多種CSS樣式的疊加，

是瀏覽器處理沖突的一個能力,如果一個屬性通過兩個選擇器設定到同一個元素上，那么這個時候一個屬性就會將另一個屬性層疊掉

比如先給某個標簽指定了內部文字顏色為紅色，接著又指定了顏色為藍色，此時出現一個標簽指定了相同樣式不同值的情況，這就是樣式沖突，

一般情況下，如果出現樣式沖突，則會按照CSS書寫的順序，以最后的樣式為準，

CSS繼承性

所謂繼承性是指書寫CSS樣式表時，子標簽會繼承父標簽的某些樣式，如文本顏色和字號，想要設定一個可繼承的屬性，只需將它應用于父元素即可，

簡單的理解就是： 子承父業，

恰當地使用繼承可以簡化代碼，降低CSS樣式的復雜性，子元素可以繼承父元素的樣式（text-，font-，line-這些元素開頭的都可以繼承，以及color屬性）

CSS優先級

定義CSS樣式時，經常出現兩個或更多規則應用在同一元素上，這時就會出現優先級的問題，

在考慮權重時，初學者還需要注意一些特殊的情況，具體如下：

繼承樣式的權重為0，即在嵌套結構中，不管父元素樣式的權重多大，被子元素繼承時，他的權重都為0，也就是說子元素定義的樣式會覆寫繼承來的樣式，

行內樣式優先，應用style屬性的元素，其行內樣式的權重非常高，可以理解為遠大于100，總之，他擁有比上面提高的選擇器都大的優先級，

權重相同時，CSS遵循就近原則，也就是說靠近元素的樣式具有最大的優先級，或者說排在最后的樣式優先級最大，

盒子模型（CSS重點）

其實，CSS就三個大模塊： 盒子模型 、 浮動 、 定位，其余的都是細節，要求這三部分，無論如何也要學的非常精通，

所謂盒子模型就是把HTML頁面中的元素看作是一個矩形的盒子，也就是一個盛裝內容的容器，每個矩形都由元素的內容、內邊距（padding）、邊框（border）和外邊距（margin）組成，

看透網頁布局的本質

行內元素比如 文字，需要一個盒子把他們裝起來，我們前面學過的雙標簽都是一個盒子，有了盒子，我們就可以隨意的，自由的，擺放位置了，

看透網頁布局的本質： 把網頁元素比如文字圖片等等，放入盒子里面，然后利用CSS擺放盒子的程序，就是網頁布局，

CSS 其實沒有太多邏輯可言 ， 類似你們小時候玩的積木,我們可以自由的，隨意的擺放出我們想要的效果，

盒子模型（Box Model）

所有的檔案元素（標簽）都會生成一個矩形框，我們成為元素框（element box），它描述了一個檔案元素再網頁布局匯總所占的位置大小，因此，每個盒子除了有自己大小和位置外，還影響著其他盒子的大小和位置，

盒子邊框（border）

邊框就是那層皮， 橘子皮，，柚子皮，，橙子皮，，，

語法：

border : border-width || border-style || border-color 

邊框屬性—設定邊框樣式（border-style）

邊框樣式用于定義頁面中邊框的風格，常用屬性值如下：

none：沒有邊框即忽略所有邊框的寬度（默認值）

solid：邊框為單實線(最為常用的)

dashed：邊框為虛線

dotted：邊框為點線

double：邊框為雙實線

表格的細線邊框

以前學過的html表格邊框很粗，這里只需要CSS一句話就可以美觀起來， 讓我們真的相信，CSS就是我們的白馬王子（白雪公主），

table{ border-collapse:collapse; }

border-collapse:collapse; 表示邊框合并在一起，

盒子邊框總結表

設定內容	樣式屬性	常用屬性值
上邊框	border-top-style:樣式; border-top-width:寬度;border-top-color:顏色;border-top:寬度 樣式 顏色;
下邊框	border-bottom-style:樣式;border- bottom-width:寬度;border- bottom-color:顏色;border-bottom:寬度 樣式 顏色;
左邊框	border-left-style:樣式; border-left-width:寬度;border-left-color:顏色;border-left:寬度 樣式 顏色;
右邊框	border-right-style:樣式;border-right-width:寬度;border-right-color:顏色;border-right:寬度 樣式 顏色;
樣式綜合設定	border-style:上邊 [右邊 下邊 左邊];	none無（默認）、solid單實線、dashed虛線、dotted點線、double雙實線
寬度綜合設定	border-width:上邊 [右邊 下邊 左邊];	像素值
顏色綜合設定	border-color:上邊 [右邊 下邊 左邊];	顏色值、#十六進制、rgb(r,g,b)、rgb(r%,g%,b%)
邊框綜合設定	border:四邊寬度 四邊樣式 四邊顏色;

圓角邊框(CSS3)

從此以后，我們的世界不只有矩形，

語法格式：

Border-radius: 水平半徑/垂直半徑；

一般我們垂直半徑都是省略的默認和水平半徑一樣，

border-radius: 左上角  右上角  右下角  左下角;

案例:

<style>
  div {
    width:200px;
    height:200px;
    border:1px solid red;
    margin:10px 40px;
    text-align: center;
    line-height: 200px;
  }
  div:first-child {
    border:10px solid red;
    border-radius: 20px/50px;
  }
  div:nth-child(2) {
    border-radius: 20px;
  }
  div:nth-child(3) {
    border-radius: 15px 0;
  }
  div:nth-child(4) {
    border-radius:100px;
  }
  div:nth-child(5) {
    border-radius: 50%;
  }
  div:nth-child(6) {
    border-radius: 100px 0;
  }
  div:nth-child(7) {
    border-radius: 200px 0 0 0;
  }
  div:nth-child(8) {
    border-radius: 100px 100px 0 0;
    height:100px;  /*高度減半*/
  }
  div:nth-child(9) {
    border-radius: 100px;
    height:100px;
  }
  div:nth-child(10) {
    border-radius: 100%;
    height:100px;
  }
</style>

內邊距（padding）

padding屬性用于設定內邊距， 是指 邊框與內容之間的距離，

padding-top:上內邊距

padding-right:右內邊距

padding-bottom:下內邊距

padding-left:左內邊距

注意： 后面跟幾個數值表示的意思是不一樣的，

值的個數	表達意思
1個值	padding：上下左右邊距 比如padding: 3px; 表示上下左右都是3像素
2個值	padding: 上下邊距 左右邊距 比如 padding: 3px 5px; 表示 上下3像素 左右 5像素
3個值	padding：上邊距 左右邊距 下邊距 比如 padding: 3px 5px 10px; 表示 上是3像素 左右是5像素 下是10像素
4個值	padding:上內邊距 右內邊距 下內邊距 左內邊距 比如: padding: 3px 5px 10px 15px; 表示 上3px 右是5px 下 10px 左15px 順時針

課堂案例：

		<style>
			div{
				border:1px solid;
			}
			#inner{
				width: 200px;
				height: 200px;
				background-color: #87CEEB;
			}
			#outer{
				width: 300px;
				height: 300px;
				/*設定內邊距:設定里面的內容和邊框之間的距離*/
				padding-top: 10px;
				padding-left: 20px;
				padding-right: 30px;
				padding-bottom: 50px;
				background-color: #CCCCCC;
			}
		</style>		
		<div id="outer">
			<div id="inner">
				哈哈哈
			</div>
		</div>

外邊距（margin）

margin屬性用于設定外邊距， 設定外邊距會在元素之間創建“空白”， 這段空白通常不能放置其他內容，

margin-top:上外邊距

margin-right:右外邊距

margin-bottom:下外邊距

margin-left:上外邊距

margin:上外邊距 右外邊距 下外邊距 左外邊

取值順序跟內邊距相同，

		<style>
			*{
				margin: 0px;
				padding: 0px;
			}
			div{
				/* display: inline-block; */
			}
			span,div{
				border:1px solid;
				width: 200px;
				height: 200px;
				margin-left: 20px;
				margin-right: 20px;
				margin-top: 20px;
				margin-bottom: 30px;
				/*一次性設定所有的margin， 根border和padding設定是一樣的*/
				/* margin: 10px 20px 30px 40px; */
			}			
			#outer{
				background-color: #CCCCCC;
				padding-top: 20px;
				padding-left: 20px;
			}
			#inner{
				background-color: #FFA500;
			}
		</style>		
　　　　　　　　　　<div id="outer">
			<div id="inner">				
			</div>
		</div>
		<hr>
		<span>第一個span</span>
		<span>第二個span</span>
		<div>
			第一個DIV
		</div>
		<div>
			第二個DIV
		</div>

外邊距實作盒子居中

可以讓一個盒子實作水平居中，需要滿足一下兩個條件：

1. 必須是塊級元素，

2. 盒子必須指定了寬度（width）

然后就給左右的外邊距都設定為auto，就可使塊級元素水平居中，

實際作業中常用這種方式進行網頁布局，示例代碼如下：

.header{ width:960px; margin:0 auto;}

清除元素的默認內外邊距

為了更方便地控制網頁中的元素，制作網頁時，可使用如下代碼清除元素的默認內外邊距：

* {
   padding:0;         /* 清除內邊距 */
   margin:0;          /* 清除外邊距 */
}

注意： 行內元素是只有左右內外邊距的，是沒有上下內外邊距的，

外邊距合并

使用margin定義塊元素的垂直外邊距時，可能會出現外邊距的合并，

相鄰塊元素垂直外邊距的合并

當上下相鄰的兩個塊元素相遇時，如果上面的元素有下外邊距margin-bottom，下面的元素有上外邊距margin-top，則他們之間的垂直間距不是margin-bottom與margin-top之和，而是兩者中的較大者，這種現象被稱為相鄰塊元素垂直外邊距的合并（也稱外邊距塌陷），

解決方案： 避免就好了，

嵌套塊元素垂直外邊距的合并

對于兩個嵌套關系的塊元素，如果父元素沒有上內邊距及邊框，則父元素的上外邊距會與子元素的上外邊距發生合并，合并后的外邊距為兩者中的較大者，即使父元素的上外邊距為0，也會發生合并，

解決方案：

1. 可以為父元素定義1像素的上邊框或上內邊距，

2. 可以為父元素添加overflow:hidden，

content寬度和高度

使用寬度屬性width和高度屬性height可以對盒子的大小進行控制，

width和height的屬性值可以為不同單位的數值或相對于父元素的百分比%，實際作業中最常用的是像素值，

大多數瀏覽器，如Firefox、IE6及以上版本都采用了W3C規范，符合CSS規范的盒子模型的總寬度和總高度的計算原則是：

盒子的總寬度= width+左右內邊距之和+左右邊框寬度之和+左右外邊距之和

盒子的總高度= height+上下內邊距之和+上下邊框寬度之和+上下外邊距之和

注意：

1、寬度屬性width和高度屬性height僅適用于塊級元素，對行內元素無效（ img 標簽和 input除外），

2、計算盒子模型的總高度時，還應考慮上下兩個盒子垂直外邊距合并的情況， 

盒子模型布局穩定性

開始學習盒子模型， 分不清內外邊距的使用，什么情況下使用內邊距，什么情況下使用外邊距？

按照 優先使用 寬度 （width） 其次 使用內邊距（padding） 再次 外邊距（margin），

  width >  padding  >   margin   

原因：

1. margin 會有外邊距合并 還有 ie6下面margin 加倍的bug所以最后使用，

2. padding 會影響盒子大小， 需要進行加減計算 其次使用，

3. width 沒有問題我們經常使用寬度剩余法 高度剩余法來做，

CSS3盒模型

CSS3中可以通過box-sizing 來指定盒模型，即可指定為content-box、border-box，這樣我們計算盒子大小的方式就發生了改變，

可以分成兩種情況：

1、box-sizing: border-box 盒子大小為 width

2、box-sizing: content-box 盒子大小為 width + padding + border

注：上面的標注的width指的是CSS屬性里設定的width: length，content的值是會自動調整的，

div {
  width: 100px;
  height: 100px;
  background: skyblue;
  margin: 0 auto;
  border: 1px solid gray;
  /* 
  默認的設定 如果我們添加了 border屬性 該容器的大小會發生改變
  因為他要優先保證內部的內容所占區域 不變
  */
  /*  
  box-sizing  如果不設定 默認的值 就是 
  content-box: 優先保證內容的大小 對盒子進行縮放;
  border-box: 讓 盒子 優先保證自己所占區域的大小,對內容進行壓縮;
  */
  box-sizing: border-box;
}

盒子陰影

語法格式：

box-shadow:水平陰影 垂直陰影 模糊距離 陰影尺寸 陰影顏色  內/外陰影；

1. 前兩個屬性是必須寫的，其余的可以省略，

2. 外陰影 (outset) 但是不能寫 默認 想要內陰影 inset

img {
  border:10px solid orange;
  box-shadow:3px 3px 5px 4px rgba(0,0,0,1);
}

浮動(float)

普通流(normal flow)

這個單詞很多人翻譯為 檔案流 ， 字面翻譯 普通流 或者標準流都可以，

前面我們說過，網頁布局的核心，就是用CSS來擺放盒子位置，如何把盒子擺放到合適的位置？

CSS的定位機制有3種：

普通流（標準流）、浮動和定位，

html語言當中另外一個相當重要的概念----------標準流！或者普通流，普通流實際上就是一個網頁內標簽元素正常從上到下，從左到右排列順序的意思，比如塊級元素會獨占一行，行內元素會按順序依次前后排列；按照這種大前提的布局排列之下絕對不會出現例外的情況叫做普通流布局，

浮動(float)

浮動最早是用來控制圖片，以便達到其他元素（特別是文字）實作“環繞”圖片的效果，

讓任何盒子可以一行排列,因此我們就慢慢的偏離主題，用浮動的特性來布局了，

什么是浮動？

元素的浮動是指設定了浮動屬性的元素會脫離標準普通流的控制，移動到其父元素中指定位置的程序，

在CSS中，通過float屬性來定義浮動，其基本語法格式如下：

選擇器{float:屬性值;}

屬性值	描述
left	元素向左浮動
right	元素向右浮動
none	元素不浮動（默認值）

浮動詳細內幕特性

浮動首先創建包含塊的概念（包裹），就是說， 浮動的元素總是找理它最近的父級元素對齊，但是不會超出內邊距的范圍， 

浮動的元素排列位置，跟上一個元素（塊級）有關系，如果上一個元素有浮動，則A元素頂部會和上一個元素的頂部對齊；如果上一個元素是標準流，則A元素的頂部會和上一個元素的底部對齊，

由2可以推斷出，一個父盒子里面的子盒子，如果其中一個子級有浮動的，則其他子級都需要浮動，這樣才能一行對齊顯示，

浮動脫離標準流，不占位置，會影響標準流，浮動只有左右浮動，

元素添加浮動后，元素會具有行內塊元素的特性，元素的大小完全取決于定義的大小或者默認的內容多少

浮動根據元素書寫的位置來顯示相應的浮動，
tips:

• HTML中的元素都是平面的，只有XY和兩個方向，但是一旦給元素添加float，就有z軸方向
• float之后，元素會離開之前的標準流，默認在另外一個層面靠左考上對齊，
• float之后的元素脫離了標準流，float的元素不會再將外部的元素撐大，要使用clera封閉外面的元素

版心和布局流程

閱讀報紙時容易發現，雖然報紙中的內容很多，但是經過合理地排版，版面依然清晰、易讀，同樣，在制作網頁時，要想使頁面結構清晰、有條理，也需要對網頁進行“排版”，

“版心”(可視區) 是指網頁中主體內容所在的區域，一般在瀏覽器視窗中水平居中顯示，常見的寬度值為960px、980px、1000px、1200px等，

布局流程

為了提高網頁制作的效率，布局時通常需要遵守一定的布局流程，具體如下：

1、確定頁面的版心（可視區），

2、分析頁面中的行模塊，以及每個行模塊中的列模塊，

3、制作HTML結構 ，

4、CSS初始化，然后開始運用盒子模型的原理，通過DIV+CSS布局來控制網頁的各個模塊，

一列固定寬度且居中

最普通的，最為常用的結構

    <style>
        div{
            border: 1px solid #ccc;
            margin: 10px;
            text-align: center;
        }
        .box{
            border: 0;
            margin: auto;
            width: 980px;
        }
    </style>
    <div class="box">
        <div style="height: 100px;">top</div>
        <div style="height: 50px;">banner</div>
        <div style="height: 500px;">main</div>
        <div style="height: 100px;">footer</div>
    </div> 

兩列左窄右寬型

    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        div{
            border: 1px solid #ccc;
            margin: 10px;
            text-align: center;
        }
        .box{
            border: 0px;
            margin: auto;
            width: 980px;
        }
    </style>
    <div >
        <div style="height: 100px;">top</div>
        <div style="height: 50px;">banner</div>
        <div style="height: 500px; border: 0px; padding: 0px;">
            <div style="width:280px; height: 500px; display: inline-block; margin: 0px; ">left</div>
            <div style="width:670px;  height: 500px; display: inline-block; margin: 0px;  ">right</div>
        </div>
        <div style="height: 100px;">footer</div>
    </div>   

通欄平均分布型

    <style>
        *{
            padding: 0px;
            margin: 0px;
        }
        div{
            border: 1px solid #ccc;
            margin-top: 5px;
            text-align: center;
        }
        .box{
            border: 0px;
            margin: auto;
            width: 980px;
        }
        .top,.footer{
            height: 100px;
        }
        .banner{
            height: 50px;
        }
        .content-top,.content-bottom{
            border:0px;
        }
        [class^='content-top-']{
            height: 100px;
            width: 236px;
            display: inline-block;
            margin-right: 2px;
        }

        [class^='content-bottom-']{
            height: 300px;
            width: 236px;
            display: inline-block;
            margin-right: 2px;
        }
    </style>
    <div >
        <div >top</div>
        <div >banner</div>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
        </div>
        <div >
            <div ></div>
            <div ></div>
            <div ></div>
            <div ></div>
        </div>
        <div >footer</div>
    </div> 

清除浮動

為什么要清除浮動

我們前面說過，浮動本質是用來做一些文字混排效果的，但是被我們拿來做布局用，則會有很多的問題出現，

由于浮動元素不再占用原檔案流的位置，所以它會對后面的元素排版產生影響，為了解決這些問題，此時就需要在該元素中清除浮動，

準確地說，并不是清除浮動，而是清除浮動后造成的影響

清除浮動本質

清除浮動主要為了解決父級元素因為子級浮動引起內部高度為0 的問題，

清除浮動的方法

其實本質叫做閉合浮動更好一些, 記住，清除浮動就是把浮動的盒子圈到里面，讓父盒子閉合出口和入口不讓他們出來影響其他元素，

在CSS中，clear屬性用于清除浮動，其基本語法格式如下：

選擇器{clear:屬性值;}

屬性值	描述
left	不允許左側有浮動元素（清除左側浮動的影響）
right	不允許右側有浮動元素（清除右側浮動的影響）
both	同時清除左右兩側浮動的影響

額外標簽法

是W3C推薦的做法是通過在浮動元素末尾添加一個空的標簽例如 <div style=”clear:both”></div>，或則其他標簽br等亦可，

優點： 通俗易懂，書寫方便

缺點： 添加許多無意義的標簽，結構化較差，

父級添加overflow屬性方法

可以給父級添加： overflow為 hidden|auto|scroll  都可以實作，

優點： 代碼簡潔

缺點： 內容增多時候容易造成不會自動換行導致內容被隱藏掉，無法顯示需要溢位的元素，

定位(position)

如果，說浮動， 關鍵在一個 “浮” 字上面， 那么 我們的定位，關鍵在于一個 “位” 上，

元素的定位屬性

元素的定位屬性主要包括定位模式和邊偏移兩部分，

1、邊偏移

邊偏移屬性	描述
top	頂端偏移量，定義元素相對于其父元素上邊線的距離
bottom	底部偏移量，定義元素相對于其父元素下邊線的距離
left	左側偏移量，定義元素相對于其父元素左邊線的距離
right	右側偏移量，定義元素相對于其父元素右邊線的距離

也就說，以后定位要和這邊偏移搭配使用了， 比如 top: 100px; left: 30px; 等等

2、定位模式(定位的分類)

在CSS中，position屬性用于定義元素的定位模式，其基本語法格式如下：

選擇器{position:屬性值;}

position屬性的常用值

值	描述
static	自動定位（默認定位方式）
relative	相對定位，相對于其原檔案流的位置進行定位
absolute	絕對定位，相對于其上一個已經定位的父元素進行定位
fixed	固定定位，相對于瀏覽器視窗進行定位

靜態定位(static)

靜態定位是所有元素的默認定位方式，當position屬性的取值為static時，可以將元素定位于靜態位置， 所謂靜態位置就是各個元素在HTML檔案流中默認的位置，

上面的話翻譯成白話： 就是網頁中所有元素都默認的是靜態定位哦！ 其實就是標準流的特性，

PS： 靜態定位其實沒啥可說的，標準流的定位方式. 當定位方式為static時候，樣式屬性left和top不生效

相對定位relative(自戀型)

相對定位是將元素相對于它在標準流中的位置進行定位，當position屬性的取值為relative時，可以將元素定位于相對位置，

當前元素相對于父級別元素的定位方式，

對元素設定相對定位后，可以通過邊偏移屬性改變元素的位置，但是它在檔案流中的位置仍然保留，如下圖所示，即是一個相對定位的效果展示：

注意：

1. 相對定位最重要的一點是，它可以通過邊偏移移動位置，但是原來的所占的位置，繼續占有，

2. 其次，每次移動的位置，是以自己的左上角為基點移動（相對于自己來移動位置）

就是說，相對定位的盒子仍在標準流中，它后面的盒子仍以標準流方式對待它，（相對定位不脫標）

如果說浮動的主要目的是 讓多個塊級元素一行顯示，那么定位的主要價值就是 移動位置， 讓盒子到我們想要的位置上去，

絕對定位absolute

當position屬性的取值為absolute時，可以將元素的定位模式設定為絕對定位，脫離標準流

注意： 絕對定位最重要的一點是，它可以通過邊偏移移動位置，但是它完全脫標，完全不占位置，

如果檔案可滾動，絕對定位元素會隨著它滾動，因為元素最侄訓相對于正常流的某一部分定位，

　　父級沒有定位

若所有父元素都沒有定位，以瀏覽器為準對齊(document檔案)，

　　父級有定位

絕對定位是將元素依據最近的已經定位（絕對、固定或相對定位）的父元素（祖先）進行定位，

如果絕對定位是沒有設定top和left的，這時絕對定位的元素在父元素內部， 一旦設定了top和left，就要看父元素的定位方式了， 子絕父相

　　子絕父相

這個“子絕父相”太重要了，是我們學習定位的口訣，時時刻刻記住的，

這句話的意思是 子級是絕對定位的話， 父級要用相對定位，

首先， 我們說下， 絕對定位是將元素依據最近的已經定位絕對、固定或相對定位）的父元素（祖先）進行定位，

就是說， 子級是絕對定位，父親只要是定位即可（不管父親是絕對定位還是相對定位，甚至是固定定位都可以），就是說， 子絕父絕，子絕父相都是正確的，

所以，我們可以得出如下結論：

因為子級是絕對定位，不會占有位置， 可以放到父盒子里面的任何一個地方，

父盒子布局時，需要占有位置，因此父親只能是 相對定位.

 

元素居中的問題

普通的盒子是左右margin 改為 auto就可， 但是對于絕對定位就無效了

定位的盒子也可以水平或者垂直居中，有一個演算法，

1. 首先left 50% 父盒子的一半大小

2. 然后走自己外邊距負的一半值就可以了 margin-left，

固定定位fixed(認死理型)

固定定位是絕對定位的一種特殊形式，類似于 正方形是一個特殊的 矩形，它以瀏覽器視窗作為參照物來定義網頁元素，當position屬性的取值為fixed時，即可將元素的定位模式設定為固定定位，

當對元素設定固定定位后，它將脫離標準檔案流的控制，始終依據瀏覽器視窗來定義自己的顯示位置，不管瀏覽器滾動條如何滾動也不管瀏覽器視窗的大小如何變化，該元素都會始終顯示在瀏覽器視窗的固定位置，

固定定位有兩點：

1. 固定定位的元素跟父親沒有任何關系，只認瀏覽器，

2. 固定定位完全脫標，不占有位置，不隨著滾動條滾動，

疊放次序（z-index）

當對多個元素同時設定定位時，定位元素之間有可能會發生重疊，

在CSS中，要想調整重疊定位元素的堆疊順序，可以對定位元素應用z-index層疊等級屬性，其取值可為正整數、負整數和0，

比如： z-index: 2;

注意：

1. z-index的默認屬性值是0，取值越大，定位元素在層疊元素中越居上，

2. 如果取值相同，則根據書寫順序，后來居上，

3. 后面數字一定不能加單位，

4. 只有相對定位，絕對定位，固定定位有此屬性，其余標準流，浮動，靜態定位都無此屬性，亦不可指定此屬性，

四種定位總結

定位模式	是否脫標占有位置	是否可以使用邊偏移	移動位置基準
靜態static	不脫標，正常模式	不可以	正常模式
相對定位relative	不脫標，占有位置	可以	相對自身位置移動
絕對定位absolute	完全脫標，不占有位置	可以	相對于定位父級移動位置
固定定位fixed	完全脫標，不占有位置	可以	相對于瀏覽器移動位置

定位模式轉換

跟 浮動一樣， 元素添加了 絕對定位和固定定位之后， 元素模式也會發生轉換， 都轉換為 行內塊模式，

因此 比如 行內元素 如果添加了 絕對定位或者 固定定位后 浮動后，可以不用轉換模式，直接給高度和寬度就可以了，

元素的顯示與隱藏

在CSS中有三個顯示和隱藏的單詞比較常見，我們要區分開，他們分別是 display visibility 和 overflow，

他們的主要目的是讓一個元素在頁面中消失，但是不在檔案原始碼中洗掉， 最常見的是網站廣告，當我們點擊類似關閉不見了，但是我們重新重繪頁面，它們又會出現

display 顯示

display 設定或檢索物件是否及如何顯示，

display : none 隱藏物件 與它相反的是 display:block 除了轉換為塊級元素之外，同時還有顯示元素的意思，

特點： 隱藏之后，不再保留位置，

visibility 可見性

設定或檢索是否顯示物件，

visible : 　物件可視

hidden : 　物件隱藏

特點： 隱藏之后，繼續保留原有位置，（停職留薪）

overflow 溢位

檢索或設定當物件的內容超過其指定高度及寬度時如何管理內容，

visible : 　不剪切內容也不添加滾動條，

auto : 　 超出自動顯示滾動條，不超出不顯示滾動條

hidden : 　不顯示超過物件尺寸的內容，超出的部分隱藏掉

scroll : 　不管超出內容否，總是顯示滾動條

CSS高級技巧

CSS用戶界面樣式

所謂的界面樣式， 就是更改一些用戶操作樣式， 比如 更改用戶的滑鼠樣式， 表單輪廓等，但是比如滾動條的樣式改動受到了很多瀏覽器的抵制，因此我們就放棄了， 防止表單域拖拽

滑鼠樣式cursor

設定或檢索在物件上移動的滑鼠指標采用何種系統預定義的游標形狀，

cursor :  default  小白 | pointer  小手  | move  移動  |  text  文本

滑鼠放我身上查看效果哦：

<ul>
  <li style="cursor:default">我是小白</li>
  <li style="cursor:pointer">我是小手</li>
  <li style="cursor:move">我是移動</li>
  <li style="cursor:text">我是文本</li>
</ul>

盡量不要用hand 因為 火狐不支持 pointer ie6以上都支持的盡量用

輪廓 outline

是繪制于元素周圍的一條線，位于邊框邊緣的外圍，可起到突出元素的作用，

 outline : outline-color ||outline-style || outline-width 

但是我們都不關心可以設定多少，我們平時都是去掉的，

最直接的寫法是 ： outline: 0; 或者 outline: none;

 <input  type="text"  style="outline: 0;"/>

防止拖拽文本域resize

resize：none 這個單詞可以防止 火狐 谷歌等瀏覽器隨意的拖動 文本域，

右下角不可以拖拽：

<textarea  style="resize: none;"></textarea>

邊框圓角

border-radius： 設定圓角.

一次性設定4個： 左上角，右上角，右下角，左下角

border-radius：5px 10px 20px 30px;

vertical-align 垂直對齊

讓帶有寬度的塊級元素居中對齊，是margin: 0 auto;

讓文字居中對齊，是 text-align: center;

vertical-align 垂直對齊

        img{
            vertical-align: top;
        }

本文來自博客園，作者：{瀟瀟消消氣}，轉載請注明原文鏈接：{https://www.cnblogs.com/xiaoxiaodeboke/}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/421830.html

標籤：Html/Css

上一篇：將過濾后的字串陣列附加到UILables-Swift

下一篇：JS的一些物件