整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
<div>元素是個(gè)有故事的元素，這個(gè)元素很早就出現(xiàn)在html超文本標(biāo)記語(yǔ)言中，它設(shè)計(jì)之初就是為了解決網(wǎng)頁(yè)頁(yè)面布局的需求。但是遺憾的是它出生后一直懷才不遇。
在我還上初中的時(shí)候，智能手機(jī)還沒(méi)有出現(xiàn)，更沒(méi)有平板電腦等移動(dòng)設(shè)備。上網(wǎng)是通過(guò)擺在桌子上的計(jì)算機(jī)來(lái)完成的。
那時(shí)，大街小巷上有好多網(wǎng)吧。
那時(shí)，馬云剛剛辭去工作準(zhǔn)備創(chuàng)業(yè)。
那時(shí)，發(fā)送郵件的操作都會(huì)出現(xiàn)在計(jì)算機(jī)課程中。
那時(shí)，對(duì)頁(yè)面還沒(méi)有現(xiàn)在的跨平臺(tái)要求。
那時(shí)，flashplayer大行其道。
那時(shí)，dreamwaver、flash、fireworks被稱為網(wǎng)頁(yè)三劍客！
那時(shí)，制作網(wǎng)頁(yè)可以不用懂的html的寫(xiě)法！
第一次接觸網(wǎng)頁(yè)制作是在大學(xué)的專業(yè)課上，使用三劍客，通過(guò)點(diǎn)擊軟件菜單中的按鈕就能制作網(wǎng)頁(yè)，精力都放在了如何使用flash制作酷炫的交互動(dòng)畫(huà)上了。
那時(shí)，對(duì)html還沒(méi)有深刻的認(rèn)識(shí)，但是卻對(duì)<table></table>這個(gè)標(biāo)簽有著極深的印象。
因?yàn)楫?dāng)時(shí)的dreamwaver通過(guò)非代碼方式生成的頁(yè)面都是使用<table>表格元素進(jìn)行布局的！
也就是說(shuō)，在移動(dòng)智能設(shè)備誕生之前，在用戶對(duì)頁(yè)面還沒(méi)有可以適應(yīng)不同屏幕比例的要求前，<table>這個(gè)本來(lái)用來(lái)做表格的元素同時(shí)兼職了<div>的頁(yè)面布局工作，而且把兼職干成了主業(yè)，讓<div>這個(gè)專業(yè)的塊元素閑置了好久。
直到智能手機(jī)，平板電腦產(chǎn)生后，由于對(duì)頁(yè)面的跨平臺(tái)顯示的要求的出現(xiàn)（這類適應(yīng)多平臺(tái)的頁(yè)面布局叫做響應(yīng)式布局），<table>表格制作的頁(yè)面在響應(yīng)式布局大行其道的今天，用它布局的頁(yè)面開(kāi)始出現(xiàn)代碼冗余，維護(hù)困難等諸多問(wèn)題。手機(jī)端的瀏覽器在播放視頻或其他交互動(dòng)畫(huà)時(shí)也不再依賴flashplayer這個(gè)給我們帶來(lái)無(wú)數(shù)反感和惱火的插件。
從此，頁(yè)面制作的世道變了，從不需要編程就能制作頁(yè)面的三劍客，變成了必須懂得相關(guān)代碼寫(xiě)法才能使用的HTML+CSS+JavaScript了。dreamwaverCC版本也恢復(fù)了寫(xiě)代碼做頁(yè)面的操作方式，過(guò)去的點(diǎn)擊加拖拽的制作方式也消失了。這讓很多不懂編程和HTML等頁(yè)面制作核心技術(shù)的從業(yè)人感到難受。
dreamwaver的老東家Adobe后來(lái)也嘗試過(guò)推出新模式下通過(guò)界面操作來(lái)制作網(wǎng)頁(yè)的軟件，還搞出一個(gè)叫做Muse的軟件，但是依舊沒(méi)能撬動(dòng)代碼書(shū)寫(xiě)的方式。
這個(gè)故事在開(kāi)始學(xué)習(xí)<div>和css布局之前我都會(huì)講給學(xué)生（一群文科生）聽(tīng)，我只是想告訴大家，學(xué)習(xí)任何計(jì)算機(jī)技術(shù)，我們可以從簡(jiǎn)單易學(xué)的方式入手，但要有透過(guò)這種方式向下挖掘核心知識(shí)的決心和勇氣！對(duì)于自己從事的工作我們不能滿足于會(huì)做，還要盡量透析它的原理，這樣才能在技術(shù)換代中不會(huì)被輕易淘汰。
在我研究生階段，有一門讓我終生難忘的選修課，這門課叫做《數(shù)字娛樂(lè)技術(shù)概述》，這門課既不娛樂(lè)也不概述，但是通篇都是數(shù)字，那位年輕的教授為我們透析了游戲、影視特效的核心----計(jì)算機(jī)圖形學(xué)。
從此我開(kāi)始學(xué)習(xí)數(shù)學(xué)。因?yàn)槔蠋煹囊痪湓挘?strong>從2000年到現(xiàn)在（2014）雖然各種軟件層出不窮，但是計(jì)算機(jī)圖形學(xué)的核心算法卻幾乎沒(méi)什么改變。
向下挖掘雖然很難，但是有必要！與各位共勉！
下面開(kāi)始今天的內(nèi)容。
首先，我們將之前的"第一個(gè)頁(yè)面.html"文件復(fù)制一個(gè)，叫做"塊元素學(xué)習(xí).html"。然后把<body></body>中間的內(nèi)容清空。
如圖：
下面，我們?cè)?lt;body></body>中間添加<div></div>標(biāo)簽。示例代碼如下：
<body><div></div></body>我們看看效果：
啦啦啦，什么都沒(méi)有！
為了讓大家可以看出來(lái)不同，我們?yōu)?lt;div>添加邊框?qū)傩裕?/p>
我們使用style屬性為<div>添加邊框，style屬性里的代碼就是以后在CSS中使用的代碼！實(shí)際上我們已經(jīng)開(kāi)始接觸CSS的一些內(nèi)容了。具體寫(xiě)法的講解大家可以看這個(gè)教程，這里不再贅述。
示例代碼如下：（通過(guò)style = "border-style: solid;"可以為很多元素添加邊框，就不需要大家記憶或查詢不同元素的不同寫(xiě)法，是不是很方便！）
<div style = "border-style: solid;">效果如圖：
因?yàn)槔锩鏇](méi)有內(nèi)容，所以<div>的寬度是0，因此顯示的就是一條直線。下面我們向<div>中添加內(nèi)容。
為了看起來(lái)花哨些，加張圖片吧！
示例圖片
示例代碼如下：
<div style = "border-style: solid;"><img src = "img/示例圖片/image4.jpg"/ style = "width:50%；"></div>大家請(qǐng)按照<img>中的scr自行建立文件夾和命名吧！如果您看不懂請(qǐng)參照《HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作》
效果如下：
其中，我們也是使用了style的方式為<img>設(shè)置的寬度，這個(gè)設(shè)置方法在<div>中一樣使用！
代碼示例：大家注意寫(xiě)法，不同的屬性都添加到style的雙引號(hào)中即可，同時(shí)使用；隔開(kāi)！
<div style = "border-style: solid; width:50%;">
<img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
</div>效果如圖：
整個(gè)邊框縮小了50%，圖片更有趣，尺寸變成了div的50%乘以自身的50%。這個(gè)特性大家要記住。
為了方便觀看，我們?nèi)サ鬱iv的width設(shè)置。同時(shí)在<div>中繼續(xù)添加<div>標(biāo)簽。為了方便顯示，我們?cè)谛碌?lt;div>中添加一段文字！
示例代碼如下：
<div style = "border-style: solid;">
<img src = "img/示例圖片/image4.jpg"/ style = "width:50%;">
<div>
<p>學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣！</p>
</div>
</div>效果如下：
如果為了美觀，我們讓文字到圖片右邊的空間中怎么做呢？
示例代碼如下：
<div style = "float:right;"><p>學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣！</p></div>
我們通過(guò)為新的<div>標(biāo)簽中的style屬性添加float（浮動(dòng)）屬性，同時(shí)設(shè)置為right（右）。
頁(yè)面效果如圖：
大家思考一下如何讓圖片與文字都靠在左邊呢？
是不是為圖片style添加float:left;同時(shí)把新<div>的float改為left？
我們?cè)囋嚳矗?/p>
示例代碼如下：
<div style = "border-style: solid;">
<img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣！</p>
</div>
</div>頁(yè)面效果：
效果完全不對(duì)，圖片和文字跑到外邊來(lái)了。
這是div布局中經(jīng)常出現(xiàn)的一個(gè)問(wèn)題！解決方案有點(diǎn)奇葩，既不是修改<img>屬性也不是修改<div>屬性，而是增加一組空的<div></div>標(biāo)簽！給這個(gè)新的空的<div>的style設(shè)置為"clear:both"即可修正。
示例代碼如下：
<div style = "border-style: solid;">
<img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
<div style = "float:left;">
<p>學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣！</p>
</div>
<div style = "clear:both;"></div>
</div>頁(yè)面效果如下：
值得注意的是，如果您不使用<div>的話直接使用<img>和<p>，同時(shí)對(duì)兩個(gè)標(biāo)簽的style設(shè)置為float：left，是沒(méi)有問(wèn)題的，只有把它們放到<div>中才會(huì)出現(xiàn)上面的情況。
代碼如下：
<body>
<img src = "img/示例圖片/image4.jpg" style = "width:50%; float:left;"/>
<p style = "float:left;">學(xué)習(xí)網(wǎng)頁(yè)制作非常有趣！</p>
</body>頁(yè)面顯示效果如下：
大家觀察一下，文字也變小了。至于為什么去掉<div>之后就不會(huì)出現(xiàn)上面那種出框的情況，而且文字也變小的問(wèn)題在以后的講解中我們?cè)偕钊胩接懀?/p>
現(xiàn)在希望大家可以記牢這個(gè)情況和操作，更多布局問(wèn)題我們會(huì)在CSS的浮動(dòng)（float）的講解中詳細(xì)說(shuō)明。
疫情期間，請(qǐng)大家少出門，不聚會(huì)，沒(méi)事在家學(xué)學(xué)網(wǎng)頁(yè)制作，即抗擊疫情又提高自己!
喜歡的小伙伴請(qǐng)關(guān)注我，閱讀中遇到任何問(wèn)題請(qǐng)給我留言，如有疏漏或錯(cuò)誤歡迎大家斧正，不勝感激！
HTML序章（學(xué)習(xí)目的、對(duì)象、基本概念）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML是什么？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
第一個(gè)HTML頁(yè)面如何寫(xiě)？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML頁(yè)面中head標(biāo)簽有啥用？——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)meta標(biāo)簽與SEO——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的元素使用方法2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML元素中的屬性2（路徑詳解）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格1（基本元素）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格2（表格頭部與腳部）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格3（間距與顏色）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
使用HTML添加表格4（行顏色與表格嵌套）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
16進(jìn)制顏色表示與RGB色彩模型——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中的塊級(jí)元素與內(nèi)聯(lián)元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
初識(shí)HTML中的<div>塊元素——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
在HTML頁(yè)面中嵌入其他頁(yè)面的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
封閉在家學(xué)網(wǎng)頁(yè)制作！為頁(yè)面嵌入PDF文件——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)1——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單元素初識(shí)2——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單3（下拉列表、多行文字輸入）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML表單4（form的action、method屬性）——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML列表制作講解——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
為HTML頁(yè)面添加視頻、音頻的方法——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
音視頻格式轉(zhuǎn)換神器與html視頻元素加字幕——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
HTML中使用<a>標(biāo)簽實(shí)現(xiàn)文本內(nèi)鏈接——零基礎(chǔ)自學(xué)網(wǎng)頁(yè)制作
5移動(dòng)端頁(yè)面自適應(yīng)普遍使用的方法，理論上講使用這個(gè)標(biāo)簽是可以適應(yīng)所有尺寸的屏幕的，但是各設(shè)備對(duì)該標(biāo)簽的解釋方式及支持程度不同造成了不能兼容所有瀏覽器或系統(tǒng)。
在HTML文檔頭部添加viewport標(biāo)簽，設(shè)置meta屬性值為“width=device-width”，可以讓瀏覽器根據(jù)設(shè)備屏幕的寬度自動(dòng)調(diào)整頁(yè)面的縮放比例，從而實(shí)現(xiàn)頁(yè)面自適應(yīng)。
<meta
name="viewport"
content="width=device-width,initial-scale=1.0, minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no"/>每個(gè)屬性的詳細(xì)介紹：
width：#viewport 的寬度，可以指定為一個(gè)像素值，如：600，或者為特殊的值，如：device-width （設(shè)備的寬度）。 height：#viewport的高度。 initial-scale：#初始縮放比例，即當(dāng)瀏覽器第一次加載頁(yè)面時(shí)的縮放比例。 maximum-scale：#允許瀏覽者縮放到的最大比例，一般設(shè)為1.0。 minimum-scale：#允許瀏覽者縮放到的最小比例，一般設(shè)為1.0。 user-scalable：#瀏覽者是否可以手動(dòng)縮放，yes或no。 |
媒體查詢可以根據(jù)設(shè)備屏幕的寬度和高度來(lái)匹配不同的樣式規(guī)則，從而實(shí)現(xiàn)響應(yīng)式布局。通過(guò)設(shè)置不同的CSS樣式，可以讓頁(yè)面在不同的設(shè)備上呈現(xiàn)不同的布局和樣式。
@media screen and (max-width: 767px) {
/* 在寬度小于767px的設(shè)備上應(yīng)用以下樣式 */
body {
font-size: 14px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
/* 在寬度在768px到1023px之間的設(shè)備上應(yīng)用以下樣式 */
body {
font-size: 16px;
}
}
@media screen and (min-width: 1024px) {
/* 在寬度大于等于1024px的設(shè)備上應(yīng)用以下樣式 */
body {
font-size: 18px;
}
}彈性布局可以根據(jù)設(shè)備屏幕的寬度自動(dòng)調(diào)整元素的大小和位置，從而實(shí)現(xiàn)頁(yè)面自適應(yīng)。通過(guò)設(shè)置元素的flex屬性，可以讓元素按照一定的比例分配剩余空間，從而實(shí)現(xiàn)頁(yè)面的自適應(yīng)性。
.container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.item {
flex: 1 1 300px;
margin: 10px;
}rem單位是相對(duì)于根元素(html元素)的字體大小來(lái)計(jì)算的單位，可以根據(jù)設(shè)備屏幕的字體大小自動(dòng)調(diào)整元素的大小和位置，從而實(shí)現(xiàn)頁(yè)面自適應(yīng)。通過(guò)設(shè)置根元素的字體大小，可以讓整個(gè)頁(yè)面的元素按照一定的比例進(jìn)行縮放。
html {
font-size: 16px;
}
@media screen and (max-width: 767px) {
/* 在寬度小于767px的設(shè)備上將根元素的字體大小設(shè)置為14px */
html {
font-size: 14px;
}
}
@media screen and (min-width: 768px) and (max-width: 1023px) {
/* 在寬度在768px到1023px之間的設(shè)備上將根元素的字體大小設(shè)置為16px */
html {
font-size: 16px;
}
}
@media screen and (min-width: 1024px) {
/* 在寬度大于等于1024px的設(shè)備上將根元素的字體大小設(shè)置為18px */
html {
font-size: 18px;
}
}rem是CSS3新增的一個(gè)相對(duì)單位（root em，根em）,使用rem為元素設(shè)定字體大小時(shí)，是相對(duì)大小，但相對(duì)的只是HTML根元素。通過(guò)它既可以做到只修改根元素就成比例地調(diào)整所有字體大小，又可以避免字體大小逐層復(fù)合的連鎖反應(yīng)。
(其他)默認(rèn)html的font-size是16px，即1rem=16px，如果某p寬度為32px你可以設(shè)為2rem。
通常情況下，為了便于計(jì)算數(shù)值則使用62.5%，即默認(rèn)的10px作為基數(shù)。當(dāng)然這個(gè)基數(shù)可以為任何數(shù)值，視具體情況而定。設(shè)置方法如下：
Html{font-size:62.5%(10/16*100%)}具體不同屏幕下的規(guī)則定義，即基數(shù)的定義方式：可以通過(guò)CSS定義，不同寬度范圍里定義不同的基數(shù)值，當(dāng)然也可以通過(guò)js一次定義方法如下：
<script type="text/javascript">
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';//其中“20”根據(jù)你設(shè)置的html的font-size屬性值做適當(dāng)?shù)淖兓? };
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</script>
vw和vh是根據(jù)設(shè)備的寬度和高度來(lái)決定的，設(shè)備的寬就是100vw，設(shè)備的高就是100vh，
你設(shè)置的50vw就是相當(dāng)于設(shè)備寬度的50%，你設(shè)置的100vh就是相當(dāng)于設(shè)備高度的100%。
切記：不要把vw和vh弄混淆了，如果你給元素寬度設(shè)置100vh，那么基本上(設(shè)備的寬小于高的情況)就會(huì)超出你的屏幕X軸出現(xiàn)滾動(dòng)條。如果你給元素高度設(shè)置100vw，那么就滿足不了你想要把這個(gè)元素鋪滿整個(gè)設(shè)備高度的愿望了。
一般情況下筆者寬度，和字體大小，左右邊距間距等都是用vw單位，
高度，行高，上下邊距間距等都是用vh單位。
使用方法：
1. 將設(shè)計(jì)圖放到PS里面，查看整個(gè)圖片的寬度和高度，分別放在設(shè)計(jì)稿寬度和設(shè)計(jì)稿高度當(dāng)中。（注意是px單位哦）
2. 然后量出你想要量的地方，將寬度和高度分別放置到量出的寬度和量出的高度當(dāng)中。（注意還是px單位哦）
3. 然后點(diǎn)擊換算按鈕，就可以將換算出來(lái)的寬度和高度大小放置到你的代碼當(dāng)中了哦。（注意是vw和vh單位哦）
一般移動(dòng)端的布局可分為三個(gè)部分，頭部->主體->tabbar的腳部。
所以我們可以把項(xiàng)目的外層這樣設(shè)置一下：
.body {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
}
/* 頭部部分 */
header {
height: 10vh; /* 固定的高度，根據(jù)你的設(shè)計(jì)圖調(diào)整 */
}
/* 主體部分 */
main {
flex: 1; /* 占據(jù)頁(yè)面剩余所有部分 */
}
/* tabbar腳部部分 */
footer {
height: 10vh; /* 固定的高度，根據(jù)你的設(shè)計(jì)圖調(diào)整 */
}使項(xiàng)目中的字體大小自適應(yīng)：
果給你一些文本文字，要讓它變得美，你將會(huì)采用什么方法？用過(guò)PPT的人都知道，可以調(diào)整顏色，可以設(shè)定字體，可以進(jìn)行對(duì)齊、縮進(jìn)等操作。這些在PPT中常用的方法，在CSS中也是很容易實(shí)現(xiàn)的，代碼也簡(jiǎn)單。
在CSS中，設(shè)置文本顏色，用color屬性，值可為16進(jìn)制、一個(gè)RGB值或顏色名稱。十六進(jìn)制用#號(hào)開(kāi)始，后接#RGB，比如 #ff0000；RGB值為rgb(255,0,51)形式；顏色名稱名稱直接就是英語(yǔ)單詞，如red。
樣色表ys2.css文件內(nèi)容
body {
color:#00ff00;
}
h3 {
color:CadetBlue;
}
p {
color:rgb(0,0,255);
}HTML文件內(nèi)容
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字體顏色</title>
<link rel="stylesheet" type="text/css" href="ys2.css"/>
</head>
<body>
<h3>年底了，還能找工作不?</h3>
<p>
昨晚七點(diǎn)多收到通知，說(shuō)老板抽查了幾次監(jiān)控，發(fā)現(xiàn)一些人上班渾水摸魚(yú)玩手機(jī)，
要召開(kāi)緊急視頻會(huì)議，<br/>
全體員工必須參會(huì)，視頻里老板很生氣，正火冒三丈的批評(píng)那些財(cái)務(wù)人員上班玩手機(jī)，
說(shuō)再不多提升自己，<br/>
以后早晚被電腦和機(jī)器代替， 然后我忘記關(guān)麥了，說(shuō)了句：機(jī)器能替你吃牢飯？<br/>
唉，也不知道年底了工作好不好找。</p>
</body>
</html>輸出結(jié)果
CSS字體屬性定義字體，加粗，大小，文字樣式。在用軟件時(shí)，你是不是見(jiàn)過(guò)宋體什么的，沒(méi)錯(cuò)，那個(gè)就是字體了。在CSS中，可以使用Font Family："宋體"的方式指定字體；樣式，就是加粗、傾斜那個(gè)，用font-style指定；大小則用font-size。
/* ys2.css里的樣式表內(nèi)容 */
.f {
font-family: "宋體";
/* 加粗 */
font-style: oblique;
font-size: 40px;
}
<!--html文件內(nèi)容-->
<div class="f">
牛的程序員，羊一樣的女孩
</div>輸出結(jié)果
文本在元素內(nèi)水平對(duì)齊，可以使用 text-align: 值的方式，center居中對(duì)齊，left居左對(duì)齊，right居右對(duì)齊；垂直居中對(duì)齊，可用vertical-align和line-height結(jié)合的方式進(jìn)行指定，這個(gè)平時(shí)會(huì)經(jīng)常用到，記下來(lái)。
/*css文件里的內(nèi)容*/
/*水平居中*/
.div-width {
width: 800px;
}
.txt-left {
text-align: left;
color: aquamarine;
}
.txt-center {
text-align: center;
color: darkcyan;
}
.txt-right {
text-align: right;
color: darkgreen;
}
/*垂直居中*/
.txt-vertical {
border: 2px solid green;
height: 100px;
line-height: 100px;
vertical-align: middle;
text-align: center;
}
<!-- HTML文件里的內(nèi)容 -->
<div class="div-width">
<!--水平居中-->
<p class="txt-left">向左看齊</p>
<p class="txt-center">居中對(duì)齊</p>
<p class="txt-right">向右看齊</p>
<!--垂直居中-->
<div class="txt-vertical">垂直居中方法1</div>
<div>垂直居中方法2</div>
</div>輸出結(jié)果
如果要對(duì)標(biāo)簽進(jìn)行水平居中的話，可以使用 margin: auto;用position: absolute; 屬性來(lái)對(duì)齊元素的話，有些瀏覽器不支持，所以不推薦。
/* 在樣式表文件中 */
.div-center {
margin: auto;
width: 50%;
border: 1px solid green;
height: 300px;
text-align: center;
vertical-align: center;
line-height: 300px;
}
<!--在html文件中-->
<div class="div-center">我站在，人海中間：div在Web居中，文字在div中居中</div>輸出結(jié)果
為了讓閱讀舒服，在進(jìn)行文本排版之時(shí)，會(huì)考慮字與字之間的間距，有行與行之間的距離，還有段落的縮進(jìn)等。在CSS中，字符間距可用letter-spacing:值；行間距依然用line-height:值；段落字符縮進(jìn)，用text-indent即可。溫馨提醒：text-indent只對(duì)div和p標(biāo)簽有效。
/* 在樣式表文件中 */
.text-spacing {
width: 900px;
border: 1px solid green;
letter-spacing: 50px;
}
p.row {
line-height: 3.0em;
}
p.i {
/*em是相對(duì)單位，2em即現(xiàn)在一個(gè)字大小的兩倍*/
text-indent: 2em;
}
<!--在html文件中-->
<div class="text-spacing">
他說(shuō)風(fēng)雨中，這點(diǎn)痛算什么
</div>
<p class="row">
秋季降溫快的特點(diǎn)，使得秋收、秋耕、秋種的“三秋”大忙顯得格外緊張。<br/>
秋分棉花吐絮，煙葉也由綠變黃，正是收獲的大好時(shí)機(jī)。華北地區(qū)已開(kāi)始播種冬麥，<br/>
長(zhǎng)江流域及南部廣大地區(qū)正忙著晚稻的收割，搶晴耕翻土地，準(zhǔn)備油菜播種。
</p>
<p class="i">
當(dāng)我以為我無(wú)法繼續(xù)走下去時(shí)，我強(qiáng)迫自己要繼續(xù)前進(jìn)。<br/>
我的成功是基于我的堅(jiān)持，并非運(yùn)氣。<br/>
努力,是為了跳出你厭惡的圈子。<br/>
讀書(shū),是為了遠(yuǎn)離渣貨垃圾人。<br/>
健身,是為了讓討厭的人心平氣和...
</p>輸出結(jié)果
好了，有關(guān)CSS文本或元素對(duì)齊的內(nèi)容，老陳講完了，如果覺(jué)得對(duì)你有所幫助，希望老鐵能轉(zhuǎn)發(fā)點(diǎn)贊，讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點(diǎn)贊，就是對(duì)老陳繼續(xù)創(chuàng)作和分享最大的鼓勵(lì)。
一個(gè)當(dāng)了10年技術(shù)總監(jiān)的老家伙，分享多年的編程經(jīng)驗(yàn)。想學(xué)編程的朋友，可關(guān)注：老陳說(shuō)編程。分享Python，前端(小程序)、App和嵌入式方面的干貨。關(guān)注我，沒(méi)錯(cuò)的。
#前端##HTML5##CSS##程序員##Web#
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
