WEB前端學習 Day 1（DIV＋盒子模型＋CSS文字＋例項）

阿新 • • 發佈：2019-01-17

關於html，用得最多的就是DIV。所以先把DIV學好，搞懂他的一些特性。其次，文字在一個網頁裡面也是很重要的，所以先學CSS文字。

從html下手，那麼，DIV是什麼？
DIV就是一個塊，在DIV裡面又可以放很多塊或者別的元素。它就是一個容器。它有面積，它是一個盒子模型。
那麼什麼是盒子模型，看下面這張圖。
這裡寫圖片描述
可以看到上面部分有margin-top,border-top,padding-top，下面部分有margin-bottom,border-bottom,padding-bottom。左邊右邊也都有，這統稱為margin,border.padding。也就是說一個盒子模型是由三層結構組成的。margin指的是邊框離相鄰元素的距離。padding指的是邊框離內部的內容的距離，也就是content，而border就是邊框，它是可以顯示出來的。例如

<html>
    <head></head>
    <body>
       <div style="width:200px;height:200px;padding:20px;margin:10px;border:2px solid red;">
       </div>
   </body>
</html>

那麼這裡的這個div的邊框就是2個畫素，邊框線是細線(solid)，顏色是紅色(red)。邊框以外有10個畫素。邊框以內有20個畫素。
回到DIV元素。它有如下幾個特性：
1）前後換行，也就是一個div預設情況下，不會緊接著前面的元素往後面拼接。而是另起一行來顯示內容。例如

<a href="#">這是一個連結</a><div>這是一個div</div>

這種情況下，div會在連結的下方，而不是在連結的右方。
2）預設寬度是100％，預設的高度由內容決定。前面的例子中，設定了div的width為200px，所以div的寬度為200px。但是如果不設定，那麼div的寬度為100%，是誰的100%?是父元素的100%。例如

<div id="superDiv" style="width:200px;height:100px;">
    <div id="subDiv" style="height:100px;"></div 
>
</div>

這裡ID為superDiv的寬度是200px，ID為subDiv的寬度沒有設定，那麼人就是父元素的100%，所以也是200px;
試想一下，div總是會自動換行，可否不讓它換行，因為很多時候都想讓它跟著後面的元素走。那麼這就是盒子模型的展示方式了。會自動換行的盒子模型，稱之為block，不會自動換行的盒子模型，稱之為inline-block。那麼如何讓div變成inline-block。這裡就需要通過css屬性display來設定了。既

<style>
div{
    display:inline-block;
}
</style>

這樣，所有的div都不會自動換行了。
那麼到現在，我們已經知道如何div換行和不換行以及盒子模型的幾個組成結構。就利用這些知識點作個例子。
如圖：
這裡寫圖片描述
實現程式碼如下：

<html>
<head></head>
<body>
    <div style="width:200px;height:100px;border:1px solid red;padding:20px;margin:100px;">
        這是一個div，這是div的content。padding為20px，margin為100px。
    </div>
</body>
</html>

OK，到這裡，DIV和盒子模型就算告一段落。緊接著就是CSS文字，學完以後，可以設定文字的各種屬性，比如文字與文字之間的間距，文字的顏色，大小，字型，粗細，顯示的位置等。
比如說，我現在想讓文字變成紅色，那麼程式碼是這樣的：

<div style="color:red;">文字</div>

這樣，文字的顏色就是紅色的了。還有更多屬性。

font-size:30px; //文字的大小
font-weight:700;//文字的粗細，取值貌似是100到700，值越大文字就越粗。
color:red;//文字的顏色
text-align:center;
/*
text-align
文字的對齊方式，取值分別為
left(左對齊)
right(右對齊)
center(居中)
justify(兩端對齊，這個值貌似沒有效果)。
注意：對齊的意思就是對於一個顯示文字的容器而言，文字往哪邊靠。左對齊就是往左邊靠。居中就是文字都往中間靠。
*/
line-height:30px;//一行文字的高度。值越大，行與行之間的空隙就越大。
letter-spacing:10px;//文字與文字之間的間隙，值越大，文字捱得就越遠。
word-spacing:10px;
/*
word-spacing
單詞與單詞之間的間隙，值越大，單詞之間就捱得越遠。
這裡需要注意的是，什麼是單詞？
這個單詞可不是真的是一個英文單詞，而是一個字串，
比如說abcd efg，這裡就有兩個字串，分別是"abcd","efg"，
它們之間使用空格隔開的。
這些字串就是所謂的單詞。
*/
text-transform:uppercase;
/*
text-transform
這個屬性會吧把文字再處理一遍，取值有：
uppercase(轉換成大寫)
lowercase(轉換成小寫)
capitalize(把首字母轉成大寫)
none(不處理)
*/
除了這些屬性，還有vertical-align垂直對齊的方式,text-decoration文字的裝飾,text-shadow新增文字陰影等等。以後要處理文字的時候，可以直接百度。或者有空的時候全面到去學習css文本里面的內容。

到這裡，知道了div和盒子模型以及使用CSS對文字的控制就告一段落了。最重要的是自己敲。那麼下面有兩個例子：
例子一：

程式碼為：

<div style="width:600px;padding:40px;border:1px solid #ccc;">
        <div style="font-size:30px;font-weight:700;text-align:center;">擊壤歌</div>
        <div style="font-size:14px;font-weight:500;text-align:center;">作者：佚名</div>
        <div style="padding-top:20px;font-size:20px;font-weight:500;text-align:center;">
            <div>
                日<span style="color:red;">出</span>而作，日<span style="color:red;">入</span>而息。
            </div>
            <div>
                鑿<span style="color:red;">井</span>而飲，耕<span style="color:red;">田</span>而食。
            </div>
            <div>
                帝力於我何有哉！
            </div>
        </div>
</div>

例子二
這裡寫圖片描述
程式碼如下：

<div style="padding:40px;border:1px solid #ccc;">
        <div>聯絡方式<span style="color:#2b81a9;font-size:14px;">僅自己可見</span></div>
        <div style="margin-top:30px;">
            <div style="display:inline-block;width:300px;">電子郵箱：[email protected]</div>
            <div style="display:inline-block;width:300px;margin-left:100px;">手機號碼：18612312312</div>
        </div>
        <div style="margin-top:30px;">
            <div style="display:inline-block;width:300px;">QQ好嗎：23413431243</div>
            <div style="display:inline-block;width:300px;margin-left:100px;">微訊號：sdfafa</div>
        </div>
    </div>

到這裡，DIV，盒子模型，css文字常用屬性就告一段落了。
總結一下：
div是一個盒子模型，預設情況下為block，也就是會前後換行，通過css的display屬性可以讓它不換行。
盒子模型由三部分組成，margin,border,padding。最裡面就是content了。
css文字屬性有color設定文字顏色，text-align設定對齊，font-weight設定文字粗細,font-size設定文字大小，line-height設定行高，letter-spacing設定文字之間的間距，word-spacing設定字串之間的間距等等等等。

在例子中，慢慢的你會發現程式碼的缺點所在。

WEB前端學習 Day 1（DIV＋盒子模型＋CSS文字＋例項）

WEB前端學習 Day 1（DIV＋盒子模型＋CSS文字＋例項）

WEB前端學習 Day 2（邊框）

WEB前端學習 Day 6（Javascript 初識+變數+邏輯判斷+資料型別）

一張圖概括必學的web前端學習知識路線圖（儲存收藏）

2018 年最新傳智播客黑馬 WEB 前端 36 期全套（贈1000套HTML模板+前端面試題彙總）

web前端學習（四）JavaScript學習筆記部分（1）-- JavaScript基礎教程

web前端學習的基礎知識1

web前端學習（2）：開始編寫HTML

web前端學習（3）：認識HTML基本標簽

前端學習之HTML（1）

web前端學習路線（含20個真實web開發專案集合）

web前端學習（二）html學習筆記部分（7）--web儲存2

web前端學習（二）html學習筆記部分（8）--伺服器推送事件3

web前端學習（二）html學習筆記部分（8）--服務器推送事件3

web前端學習（二）html學習筆記部分（9）-- 響應式布局

web前端學習（二）html學習筆記部分（10）-- HTML5構建應用佈局和頁面

（純乾貨）最新WEB前端學習路線彙總初學者必看

web前端學習（三）css學習筆記部分（3）-- css常用操作

web前端學習（三）css學習筆記部分（5）-- CSS動畫--頁面特效、HTML與CSS3簡單頁面效果實例

web前端學習（三）css學習筆記部分（6）-- 選擇器詳解

WEB前端學習 Day 1（DIV＋盒子模型＋CSS文字＋例項）

相關推薦