HTML+CSS 第一階段學習總結（一）

一、前端認知

1. 前端是做什么的？
前端是做 IT系統工程的，負責信息化系統的設計、建設，包括設備、系統、數據庫、應用系統的建設。
2. 開發流程

開發流程

3. 前端開發的核心語言

  • HTML——結構
  • CSS——樣式
  • JS——行為

二、HTML

HTML（Hypertext Markup Language）翻譯過來就是 超文本標記語言。

超文本即超越文本，可以顯示 文字 圖片 視頻 音頻，最重要的是可以包含超鏈接。

標記語言：當我們把特定的英文單詞放入到我們的標記（單標記:</>、雙標記<></>）當中，我們的標記具有了新的語義,而由具有特定語義的標記的規范，我們可以稱之為標記語言。

當我們將英語單詞放入到標記當中，這時候我們可以稱之為 標簽（單標簽、雙標簽）。

HTML的基本結構

<!DOCTYPE html>
<!-- 
    文檔頭（類型）聲明
        不是標簽，代表的是 HTML 5 的標準
-->
<html>
<!--
    根元素
        所有的標簽都要放在根元素中
-->
<head>
<!--
    頭部
        里面包含的絕大部分內容都是不可見的，
        里面的內容主要用于輔助頁面的展示
-->
    <title>頁面標題</title><!-- 定義頁面標題 -->
    <meta charset="utf-8"/><!-- 定義頁面的元數據 -->
    <!-- chasrt="utf-8" 針對搜索引擎和解析格式的屬性 -->
</head>
<body>
<!-- 
    里面包含的絕大部分在頁面中都是可見的，
    主要用于搭建 HTML 結構
-->
</body>

</html>

三、CSS

CSS(Cascading Style Sheets )翻譯過來就是層疊樣式表。
CSS 就是用來裝飾我們的 HTML 的。就像我用 HTML 寫了一段文字，但是文字的顏色，文字大小，字體等等就得依靠 CSS 來修飾了。

1. CSS 的引入方式

  • 內聯樣式表
<div style="width:100px;height:100px;background-color:red;"></div>
內聯樣式表
  • 內部樣式表
    寫在<head></head>內部
<head>
        <style type="text/css">
          div{
            width: 100px;
            height: 100px;
            background: red;
          }
        </style>
</head>
內部樣式表
  • 外部樣式表
    單獨寫在一個文件中，通過 link 進行引入
    rel：當前引入文件和文件本身的關系
    type：當前引入文件的編碼格式
    href：用于書寫引入外部樣式所處位置
<head>
        <link rel="stylesheet" type="text/css" href="css/style.css">
</head>
外部樣式表

2. CSS 選擇器
當我們使用內聯樣式的時候，CSS 樣式可以明確的修改我們想要修改樣式的標簽。如果我們把 CSS 樣式寫在內部或者外部的時候，就需要通過 CSS 選擇器來選出我們想要修改樣式的標簽。

CSS 選擇器分為三種

  1. 標簽名選擇器div{width:100px;...}
    會直接選擇某一類標簽，會針對這一類標簽全部生效。
    優先級：1
  2. 類選擇器.div{width:100px;...}
    使用類選擇器時，需要我們給標簽寫上類名，如<div class="div"></div>。類選擇器會針對某一類具有相同類名的標簽，同名 class 可以存在多個。
    優先級：10
  3. ID 選擇器#div{width:100px;...}
    使用 ID 選擇器時，需要我們給標簽寫上 ID 名，如<div id="div"></div>。ID 選擇器就會針對這一個 ID 名的標簽，同名 ID 只能存在一個。
    優先級為：100

3. 引入方式的優先級
內聯>內部 和 外部；
內部 和 外部 誰生效

  • 如果選擇器優先級相同的話，誰后引入誰生效。
  • 如果選擇器優先級不同，選擇器優先級高的生效。

四、盒模型

在 HTML 中，萬物皆是盒模型，只要是 HTML 中的標簽，我們都可以通過設置 盒模型 相關的內容，對這個元素產生影響。

盒模型由四個部分組成，分別為 content、padding、border以及margin。如下圖所示。

盒模型

1. content（盒子模型中的內容）
下面通過一個 Demo 一起來學習 盒模型

<!DOCTYPE html>
<html>
<head>
    <title>盒模型</title>
    <meta charset="utf-8"/>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
Demo

通過上面的這一段代碼，我們可以在頁面中看到一個寬高分別為100px的紅色塊。從這里可以看出，盒模型中的content不僅可以設置寬高（內聯元素除外）還可以加背景。（在瀏覽器中按F12即可打開如上圖的開發者工具）

1.1. background 的使用

  1. background-color 設置背景顏色
    屬性值即是顏色值有五種寫法

    1. 英文 如 red,yellow,blue,cyan...
    2. 十六進制 如 #ffffff...
    3. 十六進制簡寫 如 #fff...
    4. rgb 如 rgb(255,0,255)...
    5. rgba 如 rgba(255,255,255,0.5)...

  2. background-image 設置背景圖片
    background-image=url("圖片路徑");

  3. background-position 設置背景定位
    background-position 有兩個屬性值，第一個一般為橫向偏移量，第二個一般為縱向偏移量。如果只設置一個數值，另一個數值默認是 center。
    屬性值可以用：left、right、top、bottom、center 以及 像素。

  4. backfround-repeat 設置背景的重復方式

    1. 默認值為 repeat 會將背景鋪滿整個盒模型。
    2. repeat-x 背景橫向平鋪。
    3. repeat-y 背景縱向平鋪。
    4. no-repeat 不重復。

  5. background 的復合寫法
    書寫順序為： 顏色、圖片、定位、重復方式。

  6. background-attachment 設置背景圖片是否隨頁面滾動
    background-attachment 的默認值為 scroll 即背景圖片隨著頁面的滾動而滾動。也可以填寫 fixed 即背景圖片不會隨著頁面滾動，但是會造成偏移量，一般不使用。
    接下來稍微修改一下 Demo，看一下例子。

<style>
    div{
        width: 70%;
        height: 1000px;
        background: red url("http://cdn-qn0.jianshu.io/assets/apple-touch-icons/
                    228-0765f118055a1d942fc286fb55f37773.png")center top no-repeat;
        background-attachment: fixed;
    }
</style>

Demo.gif

可以看到簡書的背景圖是固定不動的，將background-attachment: fixed;注釋掉即可觀察到偏移量了。

2. padding（盒子模型中的內邊距）
還是用一個栗子來看看內邊距到底是什么。

<!DOCTYPE html>
<html>
<head>
    <title>盒模型</title>
    <meta charset="utf-8"/>
    <style>
        div{
            width: 100px;
            height: 100px;
            padding: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div></div>
</body>
</html>
Demo

當我的鼠標移到 div 標簽上是，顯示出來 div 的寬高是 300 x 300 。

這是因為我給 div 設置了 width: 100px; height: 100px;所以 div 的寬高為 100 x 100，中間那塊就是 100 x 100。

另外我給 div 設置了 padding: 100px;所以 div 的上右下左四個方向都有了 100px 的內邊距，為圖中外面一圈所示的，因為內邊距是在盒子內部的，所以內邊距會把我們的盒子撐大。

所以 div 的寬為：padding-left + width+ padding-right = 100 + 100 + 100。同理 div 的高為：padding-top + height + padding-bottom = 100 + 100 + 100。

從上面的式子中可以知道 padding 是分 上右下左 的，我們也可以給每一個邊設置不同的寬度。例如 上右下左 分別為 10px 20px 30px 40px 就可以這樣寫。

<style>
  div{
     padding-top: 10px;
     padding-right: 20px;
     padding-bottom: 30px;
     padding-left: 40px;
  }
</style>

但是這樣寫還是太過于麻煩了，還有一種更加簡潔的寫法。

<style>
  div{
    padding: 10px 20px 30px 40px;
  }
</style>

這種寫法同樣能夠實現 上右下左 分別為 10px 20px 30px 40px 的內邊距。
當然，padding 的屬性值可以填寫 1 ~ 4 個不等，不同個數的屬性值所控制的方向如下圖所示。


padding 屬性值所對應的邊

3. border（盒子模型中的邊框）
在原來的基礎上給 div 加上 border

  <style>
    div{
      border: 5px solid blue;
    }
  </style>

border

可以看到 border 也是算在盒模型之內的，border 同樣會影響盒模型的大小。我用的是 border 的復合寫法，其中包括 邊框的寬度 、邊框的樣式、邊框的顏色，我們也可以拆開來寫。屬性的寫法見下圖。
border

4. margin（盒子模型中的外邊距）
margin 和 padding 比較相似，但是 margin 是在盒子之外的，用來控制盒子與盒子之間的位置。margin 可以設置負數。

margin 有兩種特殊情況

  • 如果兩個元素是兄弟關系時，第一個元素的 margin-bottom 與 第二個元素的 margin-top 產生疊壓
<!DOCTYPE html>
<html>
<head>
    <title>盒模型</title>
    <meta charset="utf-8"/>
    <style>
        div{
            width: 100px;
            height: 100px;

            margin: 100px;
        }
        .div_1{
            background: red;
        }
        .div_2{
            background: blue;
        }
    </style>
</head>
<body>
    <div class="div_1"></div>
    <div class="div_2"></div>
</body>
</html>

margin 的疊壓

從代碼上來看，紅色塊與藍色塊的距離應該是 紅色塊的 margin-bottom，加上藍色塊的 margin-top，但實際上是取盒子之間最大的 margin 值。但是 margin-right 與 margin-left 就不是這樣的情況。

  • 如果兩個元素是父子關系，子級第一個元素的 margin-top 會傳遞給父級
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>盒模型</title>
    <style>
        .div_1{
            width: 300px;
            height: 300px;
            background: cyan;
        }
        .div_2{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
    <div class="div_1">
        <div class="div_2"></div>
    </div>
</body>
</html>

然后給 div_2 設置 margin-top: 50px;

margin-top 的傳遞.png

這明明不是我想要的效果，那怎么才能夠解決這個問題呢？下面一起來看一下解決辦法。

  1. 給父級設置 border
  2. 給父級設置 padding
  3. 給父級設置 overflow:"hidden";

辦法已經告訴你們了，具體的還得你們自己去試。

接下來看一下盒模型的實際大小的計算
橫向：border-left + padding-left + width + padding-right + border-right
縱向：border-top + padding-top + height + padding-bottom + border-bottom

如果文章對你有所幫助，那么請您點一下?
由于本人水平有限，如有錯誤，歡迎大家指正。如果你在操作過程中發現一些沒有講到的錯誤或者問題，歡迎在評論留言，一起探討，共同學習進步！
下一篇文章利用GitHub搭建一個你的博客

最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案？ 參考答案 (1)瀏覽器兼容問題一：不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,805評論 1贊 92
  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    wzhiq896閱讀 1,805評論 0贊 2
  • 選擇qi：是表達式 標簽選擇器 類選擇器 屬性選擇器 繼承屬性： color，font，text－align，li...
    love2013閱讀 2,337評論 0贊 11
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,621評論 32贊 459
  • 你的人生有什么意義？ 大部分人對此并沒有答案 少部分人則各有各的的答案 關于人生意義，有兩個被大眾所接受的觀點： ...
    王祚閱讀 699評論 1贊 2