關于CSS文檔流與塊級元素(block)內聯元素(inline)那點事

2024-01-06 分類：網站建設

今天jquery博客遇上CSS文檔流與塊級元素(block)內聯元素(inline)之間的關系，最近一直加班，睡眠不好，有點糊涂了，簡單的問題復雜化了。

項目多了，有些需要和同事們齊心協力，有些放進去出錯，頭大啊。

文檔流將窗體自上而下分成一行行，并在每行中按從左至右的順序排放元素，即為文檔流。每個非浮動塊級元素都獨占一行，浮動元素則按規定浮在行的一端。若當前行容不下，則另起新行再浮動。內聯元素也不會獨占一行。幾乎所有元素(包括塊級，內聯和列表元素）均可生成子行，用于擺放子元素。有三種情況將使得元素脫離文檔流而存在，分別是浮動，絕對定位，固定定位。

基于文檔流，我們可以很容易理解以下的定位模式：相對定位，即相對于元素在文檔流中位置進行偏移。但保留原占位。絕對定位，即完全脫離文檔流，相對于position屬性非static值的最近父級元素進行偏移。固定定位，即完全脫離文檔流，相對于視區進行偏移。《CSS權威指南》中文字顯示：任何不是塊級元素的可見元素都是內聯元素。其表現的特性是“行布局”形式，這里的“行布局”的意思就是說其表現形式始終以行進行顯示。比如，我們設定一個內聯元素border-bottom:1px solid #000;時其表現是以每行進行重復，每一行下方都會有一條黑色的細線。如果是塊級元素那么所顯示的的黑線只會在塊的下方出現。 1 行內就是在一行內的元素，只能放在行內；塊級元素，就是一個四方塊，可以放在頁面上任何地方。 2 說白了，行內元素就好像一個單詞；塊級元素就好像一個段落，如果不另加定義的話，它將獨立一行出現。 3 一般的塊級元素諸如段落<p>、標題<h1><h2>…、列表。<ul><ol><li> 、表格<table>、表單<form>、DIV<div>和BODY<body>等元素。而內聯元素則如: 表單元素<input>、超級鏈接<a>、圖像<img>、<span> …….. 4 塊級無素的顯著特點是：每個塊級元素都是從一個新行開始顯示，而且其后的無素也需另起一行進行顯示。 5 <span>在CSS定義中屬于一個行內元素，而<div>是塊級元素。

主要列出一些常見的啊，不怎么見就拉倒了

塊元素（block element）

div? dl ul? h1 h2 h3 h4 h5 h6 hr ol table

內聯元素（inline element）

b img span

本文名稱：關于CSS文檔流與塊級元素(block)內聯元素(inline)那點事
鏈接分享：http://m.kartarina.com/news8/312208.html

成都網站建設公司_創新互聯，為您提供定制網站、靜態網站、品牌網站建設、搜索引擎優化、自適應網站、電子商務

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

猜你還喜歡下面的內容