CSS標準文檔流

時間 2019-12-02

標籤 css 標準文檔欄目 CSS 简体版

原文原文鏈接

標準文檔流介紹

咱們在製做HTML網頁的時候，都必須遵循一個流的規則如：從左至右、從上至下規則。
讓咱們進入HTML網頁的標準文檔流基本原理實踐。
代碼塊html

<!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>標準文檔流</title>
</head>
  
<body>
   <h1>微笑是最初的信仰</h1>
   <span>微笑是最初的信仰</span>
</body>
</html>

結果圖學習

標準文檔流要注意的事項

空白摺疊現象。
高矮不齊，底部對齊。
讓咱們進入空白摺疊現象實踐。
代碼塊ui

<!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>空白摺疊現象</title>
</head>
  
<body>
   加
   油
   <img src="./img/001.png" >
</body>
</html>

結果圖spa

注意：咦結果圖之間怎麼有了空白的縫隙呢？是什麼緣由致使的呢？往下看。code
咱們如今將文本與文字之間換行和文本與圖片之間換行先給去除掉實踐。
代碼塊htm

<!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>空白摺疊現象</title>
</head>
  
<body>
   加油<img src="./img/001.png" >
</body>
</html>

結果圖blog

咦如今文本與文本之間和文本與圖片之間空白縫隙消失了，如今你們應該知道了，空白縫隙是由於什麼致使了，由於文本與文本之間和文本與圖片之間存在換行現象，因此纔有了空白縫隙。圖片
讓咱們進入文檔流高矮不齊，底部對齊的實踐。
認真的園友確定從上面一個實踐中就已經發現了這個高矮不齊，底部對齊現象了。
代碼塊文檔

<!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>空白摺疊現象</title>
</head>
  
<body>
   加油<img src="./img/001.png" >
</body>
</html>