1.文檔流程: 頁面元素的預設排列方式,根據元素在html文檔中的順序依序排列,從左到右、從上到下; 2.區塊元素: 預設佔一行,沿垂直方向排列,可以設定寬度和高度,例如:,,...; 3.行內元素: 預設在一行內沿水平方向排列,寬寬和高度由內容決定,不能設定,例如...; 4.取代元素: 元素內容由標籤的屬性來設定,標籤其實就是一個佔位符,例如 5.非替換元素: 元素內容就包含中當前的標籤中,例如,, 6. 如何區分替換與非替換元素呢? 6-1.替換元素因為元素內容來自外部資源,所以大多只需要一個標籤就可以,因為單標籤比較多,但也有例外,例如: <video>...這些標籤大多具有src,指明要引入的資源路徑.如果標籤中有內容要么無效,</p> <p> 要么只是一個資源的引入。 </p> <p> 6-2.非替換元素,它的內容由使用者直接寫在標籤中,例如<p>,<h3>等文字類別標籤,是最常見的非替換元素</p> <div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>css中的基本术语</title> </head> <body> <!--div和p标签写在前面就先显示,因为是块标签,所以都独占一行垂直排列--> <div>div标签是最简单最常用的块标签</div> <!--打开浏览器的开发者工具(调试工具),查看元素样式,可以看到他的display属性: block--> <p>div标签是最简单最常用的块标签</p> <!--a标签写在了后面就在后面显示,因为为行内标签,所以在一行中水平排列--> <a href="index.html"><em>首页</em></a> | <a href="news.html">公司新闻</a> | <a href="about">关于我们</a> <hr> <!--以上的p,div标签是非替换元素,它的内容由当前文档提供,因为外部资源的大小具有不可控性,所以默认为行内元素--> <img src="../images/1.jpg" width="100" alt=""> <input type="text"> </body> </html></pre><div class="contentsignin">登入後複製</div></div>
