亚洲欧美日韩愉拍自拍美利坚,福利在线视频一区二区,久久久久香蕉国产线看观看伊

HTML+CSS基礎

-3. <html></html>稱為根標簽，所有的網頁標簽都在<html></html>中。

-2. <head> 標簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、 <style>、<link>、 <meta>等標簽，頭部標簽在下一小節(jié)中會有詳細介紹。

-1. 在<body>和</body>標簽之間的內容是網頁的主要內容，如<h1>、<p>、<a>、<img>等網頁內容標簽，在這里的標簽中的內容會在瀏覽器中顯示出來。

0、<meta http-equiv="Content-Type" content="text/html; charset=utf-8">標簽

1、<head></head>頭部，<title></title>索引標題，<p></p>段落，<hx></<hx>（x = 1~6）標題

2、<em>斜體字</em>,<strong>粗體字<strong>，<span>設置單獨的樣式</span>（然后在<style></style>里邊加入<span></span>)

<em>和<strong>標簽是為了強調一段話中的關鍵字時使用，它們的語義是強調。

<span>標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。

3.<q>引用簡短文本</q>　　注意要引用的文本不用加雙引號，瀏覽器會對q標簽自動添加雙引號

<blockquote>引用長文本</blockquote>　　<blockquote>的作用也是引用別人的文本。但它是對長文本的引用，如在文章中引入大段某知名作家的文字，這時需要這個標簽

瀏覽器對<blockquote>標簽的解析是縮進樣式

4、怎么可以讓每一句后面加入一個折行呢？那就可以用到<br />標簽了，在需要加回車換行的地方加入<br />，<br />標簽作用相當于word文檔中的回車

語法：

xhtml1.0寫法：（一般，規(guī)范）

<br />

html4.01寫法：

<br>

與以前我們學過的標簽不一樣，<br />標簽是一個空標簽，沒有HTML內容的標簽就是空標簽，空標簽只需要寫一個開始標簽，這樣的標簽有<br />、<hr />和<img />。

5、要想輸入空格，必須寫入&nbsp。

語法： 

6.認識<hr>標簽，添加水平橫線

語法：

html4.01版本 <hr>

xhtml1.0版本 <hr />

7.<address>聯(lián)系地址信息</address>斜體

8.插入一行代碼

語法：

<code>代碼語言</code>

使用<pre>標簽為你的網頁加入大段代碼

語法：

<pre>語言代碼段</pre>

<pre> 標簽的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。

9.使用ul，添加新聞信息列表

這些列表就可以使用ul-li標簽來完成。ul-li是沒有前后順序的信息列表。

語法：

<ul>
  <li>信息</li>
  <li>信息</li>
   ......
</ul>

10.有前后順序的信息列表，信息展示就可以使用<ol>標簽來制作有序列表來展示。

語法：

<ol>
   <li>信息</li>
   <li>信息</li>
   ......
</ol>
<ol>在網頁中顯示的默認樣式一般為：每項<li>前都自帶一個序號，序號默認從1開始

11.認識div在排版中的作用

在網頁制作過程過中，可以把一些獨立的邏輯部分劃分出來，放在一個<div>標簽中，這個<div>標簽的作用就相當于一個容器。

語法：

<div>…</div>

給div命名，使邏輯更加清晰

我們把一些標簽放進<div>里，劃分出一個獨立的邏輯部分。為了使邏輯更加清晰，我們可以為這一個獨立的邏輯部分設置一個名稱，用id屬性來為<div>提供唯一的名稱，這個就像我們每個人都有一個身份證號，這個身份證號是唯一標識我們的身份的，也是必須唯一的。

語法：

<div id="版塊名稱">…</div>

12.創(chuàng)建表格的四個元素：

table、tbody、tr、th、td

1、<table>…</table>：整個表格以<table>標記開始、</table>標記結束。

2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加載完后才顯示。加上這些表格結構， tbody包含行的內容下載完優(yōu)先顯示，不必等待表格結束后在顯示，同時如果表格很長，用tbody分段，可以一部分一部分地顯示。（通俗理解table 可以按結構一塊塊的顯示，不在等整個表格加載完后顯示。）

3、<tr>…</tr>：表格的一行，所以有幾對tr 表格就有幾行。

4、<td>…</td>：表格的一個單元格，一行中包含幾對<td>...</td>，說明一行中就有幾列。

5、<th>…</th>：表格的頭部的一個單元格，表格表頭。

6、表格中列的個數，取決于一行中數據單元格的個數。

12.caption標簽，為表格添加標題和摘要

摘要

摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內容，還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。

語法：<table summary="表格簡介文本">

標題

用以描述表格內容，標題的顯示位置：表格上方。

語法：

<table>
    <caption>標題文本</caption>
    <tr>
        <td>…</td>
        <td>…</td>
        …
    </tr>
…
</table>

13.使用<a>標簽，鏈接到另一個頁面

使用<a>標簽可實現超鏈接，它在網頁制作中可以說是無處不在，只要有鏈接的地方，就會有這個標簽。

語法：

<a  href="目標網址"  title="鼠標滑過顯示的文本">鏈接顯示的文本</a>

例如：

<a    title="點擊進入慕課網">click here!</a>

上面例子作用是單擊click here!文字，網頁鏈接到http://www.imooc.com這個網頁。

<a>標簽在默認情況下，鏈接的網頁是在當前瀏覽器窗口中打開，有時我們需要在新的瀏覽器窗口中打開。

如下代碼：

<a href="目標網址" target="_blank">click here!</a>

14.使用mailto在網頁中鏈接Email地址

注意：如果mailto后面同時有多個參數的話，第一個參數必須以“?”開頭，后面的參數每一個都以“&”分隔。

下面是一個完整的實例:

15.認識<img>標簽，為網頁插入圖片

在網頁的制作中為使網頁炫麗美觀，肯定是缺少不了圖片，可以使用<img>標簽來插入圖片。

語法：

<img src="圖片地址" alt="下載失敗時的替換文本" title = "提示文本">

舉例：

<img src = "myimage.gif" alt = "My Image" title = "My Image" />

講解：

1、src：標識圖像的位置；

2、alt：指定圖像的描述性文本，當圖像不可見時（下載不成功時），可看到該屬性指定的文本；

3、title：提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本)；

4、圖像可以是GIF，PNG，JPEG格式的圖像文件。

五、

15、使用表單標簽，與用戶交互

講解：

1.<form> ：<form>標簽是成對出現的，以<form>開始，以</form>結束。

2.action ：瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。

3.method ：數據傳送的方式（get/post）。

<form    method="post"   action="save.php">
        <label for="username">用戶名:</label>
        <input type="text" name="username" />
        <label for="pass">密碼:</label>
        <input type="password" name="pass" />
</form>

16.當用戶要在表單中鍵入字母、數字等內容時，就會用到文本輸入框。文本框也可以轉化為密碼輸入框。

語法：

<form>
   <input type="text/password" name="名稱" value="文本" />
</form>

1、type：

當type="text"時，輸入框為文本輸入框;

當type="password"時, 輸入框為密碼輸入框。

2、name：為文本框命名，以備后臺程序ASP 、PHP使用。

3、value：為文本輸入框設置默認值。(一般起到提示作用)

17.文本域，支持多行文本輸入

當用戶需要在表單中輸入大段文字時，需要用到文本輸入域。

語法：

<textarea  rows="行數" cols="列數">文本</textarea>

1、<textarea>標簽是成對出現的，以<textarea>開始，以</textarea>結束。

2、cols ：多行輸入域的列數。

3、rows ：多行輸入域的行數。

4、在<textarea></textarea>標簽之間可以輸入默認值。

18.使用單選框、復選框，讓用戶選擇

在使用表單設計調查表時，為了減少用戶的操作，使用選擇框是一個好主意，html中有兩種選擇框，即單選框和復選框，兩者的區(qū)別是單選框中的選項用戶只能選擇一項，而復選框中用戶可以任意選擇多項，甚至全選。請看下面的例子:

語法：

<input   type="radio/checkbox"   value="值"    name="名稱"   checked="checked"/>

1、type:

當 type="radio" 時，控件為單選框

當 type="checkbox" 時，控件為復選框

2、value：提交數據到服務器的值（后臺程序PHP使用）

3、name：為控件命名，以備后臺程序 ASP、PHP 使用

4、checked：當設置 checked="checked" 時，該選項被默認選中

19.使用下拉列表框，節(jié)省空間

設置selected="selected"屬性，則該選項就被默認選中。

20.使用下拉列表框進行多選

21.使用提交按鈕，提交數據

在表單中有兩種按鈕可以使用，分別為：提交按鈕、重置。這一小節(jié)講解提交按鈕：當用戶需要提交表單信息到服務器時，需要用到提交按鈕。

語法：

<input   type="submit"   value="提交">

type：只有當type值設置為submit時，按鈕才有提交作用

value：按鈕上顯示的文字

22.使用重置按鈕，重置表單信息

當用戶需要重置表單信息到初始時的狀態(tài)時，比如用戶輸入“用戶名”后，發(fā)現書寫有誤，可以使用重置按鈕使輸入框恢復到初始狀態(tài)。只需要把type設置為"reset"就可以。

語法：

<input type="reset" value="重置">

type：只有當type值設置為reset時，按鈕才有重置作用

value：按鈕上顯示的文字

23.form表單中的label標簽

label標簽不會向用戶呈現任何特殊效果，它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本，就會觸發(fā)此控件。就是說，當用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉到和標簽相關的表單控件上（就自動選中和該label標簽相關連的表單控件上）。

語法：

<label for="控件id名稱">

注意：標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。

例子：

<form>
  <label for="male">男</label>
  <input type="radio" name="gender" id="male" />
  <br />
  <label for="female">女</label>
  <input type="radio" name="gender" id="female" />
  <label for="email">輸入你的郵箱地址</label>
  <input type="email" id="email" placeholder="Enter email">
</form>

認識CSS樣式

1.CSS全稱為“層疊樣式表 (Cascading Style Sheets)”，它主要是用于定義HTML內容在瀏覽器內的顯示樣式，如文字大小、顏色、字體加粗等。

如下列代碼：

p{
   font-size:12px;
   color:red;
   font-weight:bold;
}

使用CSS樣式的一個好處是通過定義某個樣式，可以讓不同網頁位置的文字有著統(tǒng)一的字體、字號或者顏色等。

第一步：把這三個短語用<span></span>括起來

第二步：寫入下列代碼：

span{
    color:red;
}

3.內聯(lián)式css樣式，直接寫在現有的HTML標簽中

CSS樣式可以寫在哪些地方呢？從CSS 樣式代碼插入的形式來看基本可以分為以下3種：內聯(lián)式、嵌入式和外部式三種。這一小節(jié)先來講解內聯(lián)式。

內聯(lián)式css樣式表就是把css代碼直接寫在現有的HTML標簽中，如下面代碼：

<p style="color:red">這里文字是紅色。</p>

并且css樣式代碼要寫在style=""雙引號中，如果有多條css樣式代碼設置可以寫在一起，中間用分號隔開。如下代碼：

<p style="color:red;font-size:12px">這里文字是紅色。</p>

嵌入式css樣式，就是可以把css樣式代碼寫在<style type="text/css"></style>標簽之間。如下面代碼實現把三個<span>標簽中的文字設置為紅色：

<style type="text/css">
span{
color:red;
}
</style>

嵌入式css樣式必須寫在<style></style>之間，并且一般情況下嵌入式css樣式寫在<head></head>之間

4.外部式css樣式，寫在單獨的一個文件中

外部式css樣式(也可稱為外聯(lián)式)就是把css代碼寫一個單獨的外部文件中，這個css樣式文件以“.css”為擴展名，在<head>內（不是在<style>標簽內）使用<link>標簽將css樣式文件鏈接到HTML文件內，如下面代碼：

<link href="base.css" rel="stylesheet" type="text/css" />

注意：

1、css樣式文件名稱以有意義的英文字母命名，如 main.css。

2、rel="stylesheet" type="text/css" 是固定寫法不可修改。

3、<link>標簽位置一般寫在<head>標簽之內。

CSS選擇器

1. 標簽選擇器其實就是html代碼中的標簽。如右側代碼編輯器中的<html>、<body>、<h1>、<p>、<img>。例如下面代碼：

p{font-size:12px;line-height:1.6em;}

上面的css樣式代碼的作用：為p標簽設置12px字號，行間距設置1.6em的樣式。

2. 類選擇器

類選擇器在css樣式編碼中是最常用到的，如右側代碼編輯器中的代碼:可以實現為“膽小如鼠”、“勇氣”字體設置為紅色。

語法：

.類選器名稱{css樣式代碼;}

注意：

1、英文圓點開頭

2、其中類選器名稱可以任意起名（但不要起中文噢）

使用方法：

第一步：使用合適的標簽把要修飾的內容標記起來，如下：

<span>膽小如鼠</span>

第二步：使用class="類選擇器名稱"為標簽設置一個類，如下：

<span class="stress">膽小如鼠</span>

第三步：設置類選器css樣式，如下：

.stress{color:red;}/*類前面要加入一個英文圓點*/

3. ID選擇器

在很多方面，ID選擇器都類似于類選擇符，但也有一些重要的區(qū)別：

1、為標簽設置id="ID名稱"，而不是class="類名稱"。

2、ID選擇符的前面是井號（#）號，而不是英文圓點（.）。

4. 類和ID選擇器的區(qū)別

相同點：可以應用于任何元素
不同點：

ID選擇器只能在文檔中使用一次。與類選擇器不同，在一個HTML文檔中，ID選擇器只能使用一次，而且僅一次。而類選擇器可以使用多次。

5. 子選擇器

還有一個比較有用的選擇器子選擇器，即大于符號(>),用于選擇指定標簽元素的第一代子元素。如右側代碼編輯器中的代碼：

.food>li{border:1px solid red;}

這行代碼會使class名為food下的子元素li（水果、蔬菜）加入紅色實線邊框。

6. 包含(后代)選擇器

包含選擇器，即加入空格,用于選擇指定標簽元素下的后輩元素。如右側代碼編輯器中的代碼：

.first  span{color:red;}

這行代碼會使第一段文字內容中的“膽小如鼠”字體顏色變?yōu)榧t色。

請注意這個選擇器與子選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一代后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進行選擇，而子選擇器是通過“>”進行選擇。

總結：>作用于元素的第一代后代，空格作用于元素的所有后代。

7. 通用選擇器

通用選擇器是功能最強大的選擇器，它使用一個（*）號指定，它的作用是匹配html中所有標簽元素，如下使用下面代碼使用html中任意標簽元素字體顏色全部設置為紅色：

* {color:red;}

8.文字排版--字體

我們可以使用css樣式為網頁中的文字設置字體、字號、顏色等樣式屬性。下面我們來看一個例子，下面代碼實現：為網頁中的文字設置字體為宋體。

body{font-family:"宋體";

9..文字排版--字號、顏色

可以使用下面代碼設置網頁中文字的字號為12像素，并把字體顏色設置為#666(灰色)：

body{font-size:12px;color:#666}

10 .文字排版--字號、顏色

可以使用下面代碼設置網頁中文字的字號為12像素，并把字體顏色設置為#666(灰色)：

body{font-size:12px;color:#666}

11。文字排版--粗體

我們還可以使用css樣式來改變文字的樣式：粗體、斜體、下劃線、刪除線，可以使用下面代碼實現設置文字以粗體樣式顯示出來。

p span{font-weight:bold;}

12.

以下代碼可以實現文字以斜體樣式在瀏覽器中顯示：

p a{font-style:italic;}

13 .文字排版--下劃線

有些情況下想為文字設置為下劃線樣式，這樣可以在視覺上強調文字，可以使用下面代碼來實現：

p a{text-decoration:underline;}

14 .文字排版--刪除線

刪除線使用下面代碼就可以實現：

 .oldPrice{text-decoration:line-through;}

 15 .段落排版--縮進

中文文字中的段前習慣空兩個文字的空白，這個特殊的樣式可以用下面代碼來實現：

p{text-indent:2em;}

16 .段落排版--行間距（行高）

這一小節(jié)我們來學習一下另一個在段落排版中起重要作用的行間距（行高）屬性（line-height），如下代碼實現設置段落行間距為1.5倍。

p{line-height:1.5em;}

17 .段落排版--中文字間距、字母間距

中文字間隔、字母間隔設置：

如果想在網頁排版中設置文字間隔或者字母間隔就可以使用 letter-spacing 來實現，如下面代碼：

h1{
    letter-spacing:50px;
}

18.段落排版--對齊

可以使用text-align樣式代碼，如下代碼可實現文本居中顯示。

h1{
    text-align:center;
}
<h1>了不起的蓋茨比</h1>

同樣可以設置居左：

h1{
    text-align:left;
}
<h1>了不起的蓋茨比</h1>

還可以設置居右：

h1{
    text-align:right;
}
<h1>了不起的蓋茨比</h1>

CSS盒模型

1.元素分類

在講解CSS布局之前，我們需要提前知道一些知識，在CSS中，html中的標簽元素大體被分為三種不同的類型：塊狀元素、內聯(lián)元素(又叫行內元素)和內聯(lián)塊狀元素。

常用的塊狀元素有：

常用的內聯(lián)元素有：

常用的內聯(lián)塊狀元素有：

1.盒模型--寬度和高度

盒模型寬度和高度和我們平常所說的物體的寬度和高度理解是不一樣的，css內定義的寬（width）和高（height），指的是填充以里的內容范圍。

因此一個元素實際寬度（盒子的寬度）=左邊界+左邊框+左填充+內容寬度+右填充+右邊框+右邊界。

元素的高度也是同理。

比如：

css代碼：

div{
    width:200px;
    padding:20px;
    border:1px solid red;
    margin:10px;    
}

html代碼：

<body>
   <div>文本內容</div>
</body>

元素的實際長度為：10px+1px+20px+200px+20px+1px+10px=262px。在chrome瀏覽器下可查看元素盒模型，如下圖：

盒模型--填充

元素內容與邊框之間是可以設置距離的，稱之為“填充”。填充也可分為上、右、下、左(順時針)。如下代碼：

div{padding:20px 10px 15px 30px;}

順序一定不要搞混?？梢苑珠_寫上面代碼：

div{
   padding-top:20px;
   padding-right:10px;
   padding-bottom:15px;
   padding-left:30px;
}

如果上、右、下、左的填充都為10px;可以這么寫

div{padding:10px;}

如果上下填充一樣為10px，左右一樣為20px，可以這么寫：

div{padding:10px 20px;}

盒模型--邊界

元素與其它元素之間的距離可以使用邊界（margin）來設置。邊界也是可分為上、右、下、左。如下代碼：

div{margin:20px 10px 15px 30px;}

也可以分開寫：

div{
   margin-top:20px;
   margin-right:10px;
   margin-bottom:15px;
   margin-left:30px;
}

如果上右下左的邊界都為10px;可以這么寫：

div{ margin:10px;}

如果上下邊界一樣為10px，左右一樣為20px，可以這么寫：

div{ margin:10px 20px;}

總結一下：padding和margin的區(qū)別，padding在邊框里，margin在邊框外。

css布局模型

清楚了CSS 盒模型的基本概念、盒模型類型，我們就可以深入探討網頁布局的基本模型了。布局模型與盒模型一樣都是 CSS 最基本、最核心的概念。但布局模型是建立在盒模型基礎之上，又不同于我們常說的 CSS 布局樣式或 CSS 布局模板。如果說布局模型是本，那么 CSS 布局模板就是末了，是外在的表現形式。
CSS包含3種基本的布局模型，用英文概括為：Flow、Layer 和 Float。
在網頁中，元素有三種布局模型：
1、流動模型（Flow）
2、浮動模型 (Float)
3、層模型（Layer）

浮動模型

任何元素在默認情況下是不能浮動的，但可以用 CSS 定義為浮動，如 div、p、table、img 等元素都可以被定義為浮動。如下代碼可以實現兩個 div 元素一行顯示。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    float:left;
}
<div id="div1"></div>
<div id="div2"></div>

什么是層模型？

什么是層布局模型？層布局模型就像是圖像軟件PhotoShop中非常流行的圖層編輯功能一樣，每個圖層能夠精確定位操作，但在網頁設計領域，由于網頁大小的活動性，層布局沒能受到熱捧。但是在網頁上局部使用層布局還是有其方便之處的。下面我們來學習一下html中的層布局。

如何讓html元素在網頁中精確定位，就像圖像軟件PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。CSS定義了一組定位（positioning）屬性來支持層布局模型。

層模型有三種形式：

1、絕對定位(position: absolute)

2、相對定位(position: relative)

3、固定定位(position: fixed)

什么是層模型？

層模型有三種形式：

1、絕對定位(position: absolute)

2、相對定位(position: relative)

3、固定定位(position: fixed)

層模型--絕對定位

如果想為元素設置層模型中的絕對定位，需要設置position:absolute(表示絕對定位)，這條語句的作用將元素從文檔流中拖出來，然后使用left、right、top、bottom屬性相對于其最接近的一個具有定位屬性的父包含塊進行絕對定位。如果不存在這樣的包含塊，則相對于body元素，即相對于瀏覽器窗口。

如下面代碼可以實現div元素相對于瀏覽器窗口向右移動100px，向下移動50px。

div{
    width:200px;
    height:200px;
    border:2px red solid;
    position:absolute;
    left:100px;
    top:50px;
}
<div id="div1"></div>

層模型--相對定位

如果想為元素設置層模型中的相對定位，需要設置position:relative（表示相對定位），它通過left、right、top、bottom屬性確定元素在正常文檔流中的偏移位置。相對定位完成的過程是首先按static(float)方式生成一個元素(并且元素像層一樣浮動了起來)，然后相對于以前的位置移動，移動的方向和幅度由left、right、top、bottom屬性確定，偏移前的位置保留不動。后邊的元素不動

如下代碼實現相對于以前位置向下移動50px，向右移動100px;

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:relative;
    left:100px;
    top:50px;
}

<div id="div1"></div>

層模型--固定定位

fixed：表示固定定位，與absolute定位類型類似，但它的相對移動的坐標是視圖（屏幕內的網頁窗口）本身。由于視圖本身是固定的，它不會隨瀏覽器窗口的滾動條滾動而變化，除非你在屏幕中移動瀏覽器窗口的屏幕位置，或改變?yōu)g覽器窗口的顯示大小，因此固定定位的元素會始終位于瀏覽器窗口內視圖的某個位置，不會受文檔流動影響，這與background-attachment:fixed?屬性功能相同。以下代碼可以實現相對于瀏覽器視圖向右移動100px，向下移動50px。并且拖動滾動條時位置固定不變。

#div1{
    width:200px;
    height:200px;
    border:2px red solid;
    position:fixed;
    left:100px;
    top:50px;
}

Relative與Absolute組合使用

學習了12-6小節(jié)的絕對定位的方法：使用position:absolute可以實現被設置元素相對于瀏覽器（body）設置定位以后，大家有沒有想過可不可以相對于其它元素進行定位呢？答案是肯定的，當然可以。使用position:relative來幫忙，但是必須遵守下面規(guī)范：

1、參照定位的元素必須是相對定位元素的前輩元素：

<div id="box1"><!--參照定位的元素-->
    <div id="box2">相對參照元素進行定位</div><!--相對定位元素-->
</div>

從上面代碼可以看出box1是box2的父元素（父元素當然也是前輩元素了）。

2、參照定位的元素必須加入position:relative;

#box1{
    width:200px;
    height:200px;
    position:relative;        
}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right來進行偏移定位了。

#box2{
    position:absolute;
    top:20px;
    left:30px;         
}

這樣box2就可以相對于父元素box1定位了（這里注意參照物就可以不是瀏覽器了，而可以自由設置了）。

盒模型代碼簡寫

還記得在講盒模型時外邊距(margin)、內邊距(padding)和邊框(border)設置上下左右四個方向的邊距是按照順時針方向設置的：上右下左。具體應用在margin和padding的例子如下：

margin:10px 15px 12px 14px;/*上設置為10px、右設置為15px、下設置為12px、左設置為14px*/

通常有下面三種縮寫方法:

1、如果top、right、bottom、left的值相同，如下面代碼：

margin:10px 10px 10px 10px;

可縮寫為：

margin:10px;

2、如果top和bottom值相同、left和 right的值相同，如下面代碼：

margin:10px 20px 10px 20px;

可縮寫為：

margin:10px 20px;

3、如果left和right的值相同，如下面代碼：

margin:10px 20px 30px 20px;

可縮寫為：

margin:10px 20px 30px;

注意：padding、border的縮寫方法和margin是一致的。

顏色值縮寫

關于顏色的css樣式也是可以縮寫的，當你設置的顏色是16進制的色彩值時，如果每兩位的值相同，可以縮寫一半。

例子2：

p{color: #336699;}

可以縮寫為：

p{color: #369;}

字體縮寫

網頁中的字體css樣式代碼也有他自己的縮寫方式，下面是給網頁設置字體的代碼：

body{
    font-style:italic;
    font-variant:small-caps; 
    font-weight:bold; 
    font-size:12px; 
    line-height:1.5em; 
    font-family:"宋體",sans-serif;
}

這么多行的代碼其實可以縮寫為一句：

body{
    font:italic  small-caps  bold  12px/1.5em  "宋體",sans-serif;
}

注意：

1、使用這一簡寫方式你至少要指定 font-size 和 font-family 屬性，其他的屬性(如 font-weight、font-style、font-variant、line-height)如未指定將自動使用默認值。

2、在縮寫時 font-size 與 line-height 中間要加入“/”斜扛。

一般情況下因為對于中文網站，英文還是比較少的，所以下面縮寫代碼比較常用：

body{
    font:12px/1.5em  "宋體",sans-serif;
}

只是有字號、行間距、中文字體、英文字體設置。

顏色值

在網頁中的顏色設置是非常重要，有字體顏色（color）、背景顏色（background-color）、邊框顏色（border）等，設置顏色的方法也有很多種：

1、英文命令顏色

前面幾個小節(jié)中經常用到的就是這種設置方法：

p{color:red;}

2、RGB顏色

這個與 photoshop 中的 RGB 顏色是一致的，由 R(red)、G(green)、B(blue) 三種顏色的比例來配色。

p{color:rgb(133,45,200);}

每一項的值可以是 0~255 之間的整數，也可以是 0%~100% 的百分數。如：

p{color:rgb(20%,33%,25%);}

3、十六進制顏色

這種顏色設置方法是現在比較普遍使用的方法，其原理其實也是 RGB 設置，但是其每一項的值由 0-255 變成了十六進制 00-ff。

p{color:#00ffff;}

配色表：

長度值

長度單位總結一下，目前比較常用到px（像素）、em、% 百分比，要注意其實這三種單位都是相對單位。

1、像素

像素為什么是相對單位呢？因為像素指的是顯示器上的小點（CSS規(guī)范中假設“90像素=1英寸”）。實際情況是瀏覽器會使用顯示器的實際像素值有關，在目前大多數的設計者都傾向于使用像素（px）作為單位。

2、em

就是本元素給定字體的 font-size 值，如果元素的 font-size 為 14px ，那么 1em = 14px；如果 font-size 為 18px，那么 1em = 18px。如下代碼：

p{font-size:12px;text-indent:2em;}

上面代碼就是可以實現段落首行縮進 24px（也就是兩個字體大小的距離）。

下面注意一個特殊情況：

但當給 font-size 設置單位為 em 時，此時計算的標準以 p 的父元素的 font-size 為基礎。如下代碼：

html:

<p>以這個<span>例子</span>為例。</p>

css:

p{font-size:14px}
span{font-size:0.8em;}

結果 span 中的字體“例子”字體大小就為 11.2px（14 * 0.8 = 11.2px）。

3、百分比

p{font-size:12px;line-height:130%}

設置行高（行間距）為字體的130%（12 * 1.3 = 15.6px）

水平居中設置-行內元素

我們在實際工作中常會遇到需要設置水平居中的場景，比如為了美觀，文章的標題一般都是水平居中顯示的。

這里我們又得分兩種情況：行內元素還是塊狀元素，塊狀元素里面又分為定寬塊狀元素，以及不定寬塊狀元素。今天我們先來了解一下行內元素怎么進行水平居中？

如果被設置元素為文本、圖片等行內元素時，水平居中是通過給父元素設置 text-align:center 來實現的。(父元素和子元素：如下面的html代碼中，div是“我想要在父容器中水平居中顯示”這個文本的父元素。反之這個文本是div的子元素 )如下代碼：

html代碼：

<body>
  <div class="txtCenter">我想要在父容器中水平居中顯示。</div>
</body>

css代碼：

<style>
  .txtCenter{
    text-align:center;
  }
</style>

水平居中設置-定寬塊狀元素

當被設置元素為塊狀元素時用 text-align：center 就不起作用了，這時也分兩種情況：定寬塊狀元素和不定寬塊狀元素。

這一小節(jié)我們先來講一講定寬塊狀元素。(定寬塊狀元素：塊狀元素的寬度width為固定值。)

滿足定寬和塊狀兩個條件的元素是可以通過設置“左右margin”值為“auto”來實現居中的。我們來看個例子就是設置 div 這個塊狀元素水平居中：

html代碼：

<body>
  <div>我是定寬塊狀元素，哈哈，我要水平居中顯示。</div>
</body>

css代碼：

<style>
div{
    border:1px solid red;/*為了顯示居中效果明顯為 div 設置了邊框*/
    
    width:200px;/*定寬*/
    margin:20px auto;/* margin-left 與 margin-right 設置為 auto */
}

</style>

也可以寫成：

margin-left:auto;
margin-right:auto;

注意：元素的“上下 margin” 是可以隨意設置的。

水平居中總結-不定寬塊狀元素方法（一）

在實際工作中我們會遇到需要為“不定寬度的塊狀元素”設置居中，比如網頁上的分頁導航，因為分頁的數量是不確定的，所以我們不能通過設置寬度來限制它的彈性。(不定寬塊狀元素：塊狀元素的寬度width不固定。)

不定寬度的塊狀元素有三種方法居中（這三種方法目前使用的都很多）：

加入 table 標簽
設置 display: inline 方法：與第一種類似，顯示類型設為行內元素，進行不定寬元素的屬性設置
設置 position:relative 和 left:50%：利用相對定位的方式，將元素向左偏移 50% ，即達到居中的目的

第一種方法：

為什么選擇方法一加入table標簽? 是利用table標簽的長度自適應性---即不定義其長度也不默認父元素body的長度（table其長度根據其內文本長度決定），因此可以看做一個定寬度塊元素，然后再利用定寬度塊狀居中的margin的方法，使其水平居中。

第一步：為需要設置的居中的元素外面加入一個 table 標簽 ( 包括 <tbody>、<tr>、<td> )。

第二步：為這個 table 設置“左右 margin 居中”（這個和定寬塊狀元素的方法一樣）。

舉例如下：

html代碼：

<div>
 <table>
  <tbody>
    <tr><td>
    <ul>
        <li>我是第一行文本</li>
        <li>我是第二行文本</li>
        <li>我是第三行文本</li>
    </ul>
    </td></tr>
  </tbody>
 </table>
</div>

css代碼：

<style>
table{
    border:1px solid;
    margin:0 auto;
}
</style>

水平居中總結-不定寬塊狀元素方法（二）

除了上一節(jié)講到的插入table標簽，可以使不定寬塊狀元素水平居中之外，本節(jié)介紹第2種實現這種效果的方法，改變元素的display類型為行內元素，利用其屬性直接設置。

第二種方法：改變塊級元素的 display 為 inline 類型（設置為行內元素顯示），然后使用 text-align:center 來實現居中效果。如下例子：

html代碼：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代碼：

<style>
.container{
    text-align:center;
}
/* margin:0;padding:0（消除文本與div邊框之間的間隙）*/
.container ul{
    list-style:none;
    margin:0;
    padding:0;
    display:inline;
}
/* margin-right:8px（設置li文本之間的間隔）*/
.container li{
    margin-right:8px;
    display:inline;
}
</style>

水平居中總結-不定寬塊狀元素方法（三）

除了前兩節(jié)講到的插入table標簽，以及改變元素的display類型，可以使不定寬塊狀元素水平居中之外，本節(jié)介紹第3種實現這種效果的方法，設置浮動和相對定位來實現。

方法三：通過給父元素設置 float，然后給父元素設置 position:relative 和 left:50%，子元素設置 position:relative 和 left: -50% 來實現水平居中。

我們可以這樣理解：假想ul層的父層（即下面例子中的div層）中間有條平分線將ul層的父層（div層）平均分為兩份，ul層的css代碼是將ul層的最左端與ul層的父層（div層）的平分線對齊；而li層的css代碼則是將li層的平分線與ul層的最左端（也是div層的平分線）對齊，從而實現li層的居中。

代碼如下：

<body>
<div class="container">
    <ul>
        <li><a href="#">1</a></li>
        <li><a href="#">2</a></li>
        <li><a href="#">3</a></li>
    </ul>
</div>
</body>

css代碼：

<style>
.container{
    float:left;
    position:relative;
    left:50%
}

.container ul{
    list-style:none;
    margin:0;
    padding:0;
    
    position:relative;
    left:-50%;
}
.container li{float:left;display:inline;margin-right:8px;}
</style>

垂直居中-父元素高度確定的單行文本

我們在實際工作中也會遇到需要設置垂直居中的場景，比如好多報紙的文章標題在左右一側時，常常會設置為垂直居中，為了用戶體驗性好。

這里我們又得分兩種情況：父元素高度確定的單行文本，以及父元素高度確定的多行文本。

本節(jié)我們先來看第一種父元素高度確定的單行文本, 怎么設置它為垂直居中呢？

父元素高度確定的單行文本的豎直居中的方法是通過設置父元素的 height 和 line-height 高度一致來實現的。(height: 該元素的高度，line-height: 顧名思義，行高（行間距），指在文本中，行與行之間的基線間的距離 )。

line-height 與 font-size 的計算值之差，在 CSS 中成為“行間距”。分為兩半，分別加到一個文本行內容的頂部和底部。

這種文字行高與塊高一致帶來了一個弊端：當文字內容的長度大于塊的寬時，就有內容脫離了塊。

如下代碼：

<div class="container">
    hi,imooc!
</div>

css代碼：

<style>
.container{
    height:100px;
    line-height:100px;
    background:#999;
}
</style>

垂直居中-父元素高度確定的多行文本（方法一）

父元素高度確定的多行文本、圖片等的豎直居中的方法有兩種：

方法一：使用插入 table (包括tbody、tr、td)標簽，同時設置 vertical-align：middle。

css 中有一個用于豎直居中的屬性 vertical-align，在父元素設置此樣式時，會對inline-block類型的子元素都有用。下面看一下例子：

html代碼：

<body>
<table><tbody><tr><td class="wrap">
<div>
    <p>看我是否可以居中。</p>
</div>
</td></tr></tbody></table>
</body>

css代碼：

table td{height:500px;background:#ccc}

因為 td 標簽默認情況下就默認設置了 vertical-align 為 middle，所以我們不需要顯式地設置了。

垂直居中-父元素高度確定的多行文本（方法二）

除了上一節(jié)講到的插入table標簽，可以使父元素高度確定的多行文本垂直居中之外，本節(jié)介紹另外一種實現這種效果的方法。但這種方法兼容性比較差，只是提供大家學習參考。

在 chrome、firefox 及 IE8 以上的瀏覽器下可以設置塊級元素的 display 為 table-cell（設置為表格單元顯示），激活 vertical-align 屬性，但注意 IE6、7 并不支持這個樣式, 兼容性比較差。

html代碼：

<div class="container">
    <div>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
        <p>看我是否可以居中。</p>
    </div>
</div>

css代碼：

<style>
.container{
    height:300px;
    background:#ccc;
    display:table-cell;/*IE8以上及Chrome、Firefox*/
    vertical-align:middle;/*IE8以上及Chrome、Firefox*/
}
</style>

這種方法的好處是不用添加多余的無意義的標簽，但缺點也很明顯，它的兼容性不是很好，不兼容 IE6、7而且這樣修改display的block變成了table-cell，破壞了原有的塊狀元素的性質

隱性改變display類型

有一個有趣的現象就是當為元素（不論之前是什么類型元素，display:none 除外）設置以下 2 個句之一：

1. position : absolute

2. float : left 或 float:right

簡單來說，只要html代碼中出現以上兩句之一，元素的display顯示類型就會自動變?yōu)橐?span id="w0obha2h00" class="apple-converted-space"> display:inline-block（塊狀元素）的方式顯示，當然就可以設置元素的 width 和 height 了，且默認寬度不占滿父元素。

如下面的代碼，小伙伴們都知道 a 標簽是行內元素，所以設置它的 width 是沒有效果的，但是設置為 position:absolute 以后，就可以了。

<div class="container">
    <a href="#" title="">進入課程請單擊這里</a>
</div>

css代碼

<style>
.container a{
    position:absolute;
    width:200px;
    background:#ccc;
}
</style>

posted on 2018-10-13 20:47 寶寶不開心閱讀(239) 評論(0) 收藏舉報

刷新頁面返回頂部

寶寶不開心

HTML+CSS基礎

認識CSS樣式

CSS盒模型

1.元素分類

1.盒模型--寬度和高度

盒模型--填充

盒模型--邊界

css布局模型

浮動模型

什么是層模型？

什么是層模型？

層模型--絕對定位

層模型--相對定位

層模型--固定定位

Relative與Absolute組合使用

盒模型代碼簡寫

顏色值縮寫

字體縮寫

顏色值

長度值

水平居中設置-行內元素

水平居中設置-定寬塊狀元素

水平居中總結-不定寬塊狀元素方法（一）

水平居中總結-不定寬塊狀元素方法（二）

水平居中總結-不定寬塊狀元素方法（三）

垂直居中-父元素高度確定的單行文本

垂直居中-父元素高度確定的多行文本（方法一）

垂直居中-父元素高度確定的多行文本（方法二）

隱性改變display類型

導航

公告

什么是層模型？