首頁 >web前端 >css教學 >css中的基本術語

css中的基本術語

无忌哥哥原創: 2018-06-28 16:57:171729瀏覽

1.文檔流程: 頁面元素的預設排列方式,根據元素在html文檔中的順序依序排列,從左到右、從上到下;

2.區塊元素: 預設佔一行,沿垂直方向排列,可以設定寬度和高度,例如:

...;

3.行內元素: 預設在一行內沿水平方向排列,寬寬和高度由內容決定,不能設定,例如...;

4.取代元素: 元素內容由標籤的屬性來設定,標籤其實就是一個佔位符,例如 css中的基本術語

5.非替換元素: 元素內容就包含中當前的標籤中,例如

,

6. 如何區分替換與非替換元素呢?

6-1.替換元素因為元素內容來自外部資源,所以大多只需要一個標籤就可以,因為單標籤比較多,但也有例外,例如:

要么只是一個資源的引入。

6-2.非替換元素,它的內容由使用者直接寫在標籤中,例如

等文字類別標籤,是最常見的非替換元素

<!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="/static/imghwm/default1.png"  data-src="../images/1.jpg"  class="lazy"      style="max-width:90%" alt="">
<input type="text">
</body>
</html>

以上是css中的基本術語的詳細內容。更多資訊請關注PHP中文網其他相關文章！

css html input

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：Bootstrap柵格佈局的列排序實例下一篇：Bootstrap柵格佈局的列排序實例

看更多