CSS標(biāo)準(zhǔn)文檔流的基本原理是什么

本文小編為大家詳細(xì)介紹“CSS標(biāo)準(zhǔn)文檔流的基本原理是什么”，內(nèi)容詳細(xì)，步驟清晰，細(xì)節(jié)處理妥當(dāng)，希望這篇“CSS標(biāo)準(zhǔn)文檔流的基本原理是什么”文章能幫助大家解決疑惑，下面跟著小編的思路慢慢深入，一起來學(xué)習(xí)新知識吧。

10年積累的成都網(wǎng)站設(shè)計、網(wǎng)站建設(shè)經(jīng)驗，可以快速應(yīng)對客戶對網(wǎng)站的新想法和需求。提供各種問題對應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識你，你也不認(rèn)識我。但先網(wǎng)站制作后付款的網(wǎng)站建設(shè)流程，更有喀什免費網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

CSS標(biāo)準(zhǔn)文檔流

標(biāo)準(zhǔn)文檔流介紹

我們在制作HTML網(wǎng)頁的時候，都必須遵循一個流的規(guī)則如：從左至右、從上至下規(guī)則。
讓我們進入HTML網(wǎng)頁的標(biāo)準(zhǔn)文檔流基本原理實踐。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>標(biāo)準(zhǔn)文檔流</title>
</head>
  
<body>
   <h2>微笑是最初的信仰</h2>
   <span>微笑是最初的信仰</span>
</body>
</html>

結(jié)果圖

CSS標(biāo)準(zhǔn)文檔流的基本原理是什么

標(biāo)準(zhǔn)文檔流要注意的事項

空白折疊現(xiàn)象。
高矮不齊，底部對齊。
讓我們進入空白折疊現(xiàn)象實踐。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>空白折疊現(xiàn)象</title>
</head>
  
<body>
   加
   油
   <img src="./img/001.png" >
</body>
</html>

結(jié)果圖

CSS標(biāo)準(zhǔn)文檔流的基本原理是什么

注意：咦結(jié)果圖之間怎么有了空白的縫隙呢？是什么原因?qū)е碌哪?？往下看?/p>
我們現(xiàn)在將文本與文字之間換行和文本與圖片之間換行先給去除掉實踐。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>空白折疊現(xiàn)象</title>
</head>
  
<body>
   加油<img src="./img/001.png" >
</body>
</html>

結(jié)果圖

CSS標(biāo)準(zhǔn)文檔流的基本原理是什么

咦現(xiàn)在文本與文本之間和文本與圖片之間空白縫隙消失了，現(xiàn)在大家應(yīng)該知道了，空白縫隙是因為什么導(dǎo)致了，因為文本與文本之間和文本與圖片之間存在換行現(xiàn)象，所以才有了空白縫隙。
讓我們進入文檔流高矮不齊，底部對齊的實踐。
認(rèn)真的園友肯定從上面一個實踐中就已經(jīng)發(fā)現(xiàn)了這個高矮不齊，底部對齊現(xiàn)象了。
代碼塊

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>空白折疊現(xiàn)象</title>
</head>
  
<body>
   加油<img src="./img/001.png" >
</body>
</html>

結(jié)果圖

CSS標(biāo)準(zhǔn)文檔流的基本原理是什么

讀到這里，這篇“CSS標(biāo)準(zhǔn)文檔流的基本原理是什么”文章已經(jīng)介紹完畢，想要掌握這篇文章的知識點還需要大家自己動手實踐使用過才能領(lǐng)會，如果想了解更多相關(guān)內(nèi)容的文章，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

當(dāng)前文章：CSS標(biāo)準(zhǔn)文檔流的基本原理是什么
網(wǎng)頁URL：http://m.kartarina.com/article34/pgoepe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供動態(tài)網(wǎng)站、微信公眾號、Google、品牌網(wǎng)站制作、網(wǎng)站建設(shè)、商城網(wǎng)站

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容