上節(jié)課自晰，將css文件獨立為一個樣式文件，達(dá)到了將內(nèi)容和樣式進(jìn)行分離的目的陨亡。
這節(jié)課遮糖，要學(xué)習(xí)如何調(diào)整網(wǎng)頁元素的邊距和邊框绣的。

上節(jié)課的課后練習(xí)

使用css樣式將工作經(jīng)歷和工作經(jīng)驗部分的文字大小修改為14px，文字顏色修改為#222222。
修改css文件屡江，新增一個樣式smallcontent2：

2-6-1.jpg

修改html文件芭概，新增調(diào)用樣式的div，同時將過長的代碼行調(diào)整一下惩嘉，增加換行谈山，讓代碼不要太長，這樣的調(diào)整并不影響頁面顯示：

2-6-2.jpg

刷新頁面：

2-6-3.jpg

頁面效果看起來越來越好了宏怔，但是發(fā)現(xiàn)標(biāo)題部分的文字上下和左邊沒有一點空間奏路，并且標(biāo)題div距離瀏覽器的邊緣還有一段空間，感覺不太好臊诊，如何修改呢鸽粉？

設(shè)置div的寬度和高度

一般使用css屬性值 width 和 height 設(shè)置寬度和高度。
寬度和高度的值一般可以使用像素單位或者百分比單位抓艳。
修改css文件触机，設(shè)置標(biāo)題bigtitle的width為50%:

2-6-4.jpg

刷新頁面：

2-6-5.jpg

修改css文件，修改標(biāo)題bigtitle的width為200px

2-6-6.jpg

刷新頁面：

2-6-7.jpg

修改css文件玷或，修改標(biāo)題bigtitle的height為40px

2-6-8.jpg

刷新頁面

2-6-9.jpg

發(fā)現(xiàn)雖然標(biāo)題框的高度是增加了儡首，但文字默認(rèn)是靠上對齊的，最好垂直居中比較美觀偏友。
修改css文件蔬胯，增加一行l(wèi)ine-height:40px;

2-6-10.jpg

刷新頁面，發(fā)現(xiàn)文字垂直居中了位他。

2-6-11.jpg

注意line-height是設(shè)置單行文字的文字占用高度氛濒，只有確定是單行文字的情況下才適合使用。
那么鹅髓，假如bigtitle里面有兩行文字舞竿，又不能用line-height，該如何讓文字垂直居中呢窿冯？
那么就需要先了解一個div的框模型原理骗奖。

內(nèi)邊距和外邊距和邊框是什么

一個div是一個元素，每個元素都有元素框的概念醒串，也就是每個元素都有寬度执桌、高度、邊框厦凤、內(nèi)邊距和外邊距鼻吮。
具體都是怎樣定義這些概念或者屬性呢，請看下面這個示意圖：

2-6-12.jpg

可以看到最里面是元素的實際部分较鼓，比如一個div元素椎木，那么最當(dāng)中的就是div的里面的包含的實際內(nèi)容违柏。
可以看到width和height都是指的實際包含內(nèi)容區(qū)域的寬度和高度。因此修改內(nèi)邊距香椎、邊框和外邊距的尺寸對內(nèi)容的寬度和高度沒有影響漱竖，但是會增加元素框的總尺寸。
內(nèi)邊距就是邊框和內(nèi)容之間的區(qū)域畜伐，可以看到背景色是包含了內(nèi)邊距區(qū)域的馍惹，也就是修改元素背景色，內(nèi)邊距區(qū)域的背景色會改變玛界。
邊框是內(nèi)外邊距的分界線万矾，它不一定是一條線，邊框可以設(shè)置樣式慎框、寬度和顏色良狈。
外邊距是元素和父容器或其它相鄰元素的距離。外邊距默認(rèn)是透明的笨枯。
來看一個實際例子薪丁，假設(shè)有這樣的css樣式定義：
.box {
width: 70px;
margin: 10px;
padding: 5px;
}
那么顯示的效果示意圖是這樣的：

2-6-13.jpg

設(shè)置div的內(nèi)邊距和外邊距

來設(shè)置bigtitle的外邊距為0，讓標(biāo)題框緊貼瀏覽器的邊緣馅精。
修改bigtitle严嗜，增加margin:0x;

2-6-14.jpg

刷新頁面，發(fā)現(xiàn)沒有變化：

2-6-15.jpg

那么說明div的margin本來就是0洲敢，那么只有另外一種可能漫玄，就是div的父元素body的內(nèi)邊距或者外邊距不是0，修改css代碼：

2-6-16.jpg

刷新頁面沦疾，達(dá)到目的了：

2-6-17.jpg

div緊貼瀏覽器邊緣之后称近，看起來舒服了，但是發(fā)現(xiàn)div里面的文字太靠近邊緣哮塞，又不太美觀。
增加bigtitle的padding為20px:

2-6-18.jpg

刷新頁面凳谦，發(fā)現(xiàn)div內(nèi)邊距的上下左右都增加了20px

2-6-19.jpg

看起來忆畅，左邊距離比較合適了，上下邊距好像有點大尸执，因為前面設(shè)置了height和line-height都為40px家凯，文字大小為20px
因此文字上邊緣和邊框的距離就是(40-20)/2+20=30px。
那么有兩種辦法減少文字上下邊緣和邊框的距離如失。
第一種辦法绊诲，刪除height和line-height屬性設(shè)置，讓文字占滿div內(nèi)部的上下褪贵。

2-6-20.jpg

刷新頁面掂之，看到上下邊距各減少了10px抗俄。

2-6-21.jpg

第二種辦法，將padding拆分為padding-left,padding-top,padding-right,padding-bottom世舰，分別控制內(nèi)邊距的上下左右动雹。

2-6-22.jpg

刷新頁面，看到上下邊距從20px減少為10px跟压。

2-6-23.jpg

設(shè)置div的邊框

每個元素的邊框可以設(shè)置3個方面：樣式胰蝠、寬度、顏色震蒋。
樣式是這樣設(shè)置：border-style: solid;
邊框樣式的值有10個可能的值：例如：solid表示單實線茸塞；double表示雙線；dashed表示虛線查剖，其它更多請自己查看手冊钾虐。
寬度是這樣設(shè)置：border-width: 2px;
寬度可以用px或者em單位。
顏色是這樣設(shè)置：border-color: #909090;
由于邊框有上下左右4條線梗搅，也可以分別針對進(jìn)行單獨設(shè)置禾唁，類似于內(nèi)邊距和外邊距。
樣式：border-top-style无切，border-right-style荡短，border-bottom-style，border-left-style哆键。
寬度：border-top-width掘托，border-right-width，border-bottom-width籍嘹， border-left-width闪盔。
顏色：border-top-color，border-right-color辱士，border-bottom-color泪掀，border-left-color。
能設(shè)置的值和前面統(tǒng)一4條線一起設(shè)置是一樣的類型值颂碘。
4條線也可以一起設(shè)置异赫，采用簡化方式，例如：
border-style: solid dotted dashed double; 表示設(shè)置為：實線上邊看头岔、點線右邊框塔拳、虛線下邊框和雙線左邊框。
4個值的順序是：上峡竣、右靠抑、下、左适掰。
還可以采用省略-style颂碧、-width荠列、-color的方式，一起設(shè)置某個邊框稚伍，例如：
border-top: solid 1px #909090; 表示設(shè)置上邊框為：單實線寬度為1px顏色為#909090弯予。
還可以一起設(shè)置4個邊框為同樣的屬性，例如：
border: double 2px #232323; 表示設(shè)置4個邊框都是：雙線寬度為2px顏色為#232323个曙。
來給每個具體的詳細(xì)內(nèi)容部分增加一個單實線的邊框锈嫩，顏色和bigtitle背景色一樣：

2-6-24.jpg

刷新頁面，看到邊框了：

2-6-25.jpg

最后垦搬，調(diào)整一下具體詳細(xì)內(nèi)容的內(nèi)邊距和刪除空行：
修改css文件：

2-6-26.jpg

修改html文件：

2-6-27.jpg

刷新頁面呼寸，終于變得更美觀了：

2-6-28.jpg

課后練習(xí)

1.將標(biāo)題行的寬度變成100%，緊貼瀏覽器右側(cè)猴贰。
2.將工作經(jīng)歷當(dāng)中的職位職責(zé)技術(shù)這3行用div包起來对雪，并設(shè)置padding，上邊距為15px米绕，左邊距20px瑟捣，去掉上面多余的

3.在工作經(jīng)驗下面增加一塊內(nèi)容，標(biāo)題是“技術(shù)經(jīng)驗”栅干，內(nèi)容是：
java 8年
C# 3年
html 10年
CSS 5年
Android 5年
iOS 5年

往期教程

因為教程是系列教程迈套，前后關(guān)聯(lián)性非常強，請大家按照歷史消息發(fā)布時間先后次序進(jìn)行閱讀碱鳞。