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

2024-01-06    分類： 網(wǎng)站建設

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

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

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

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

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

塊元素（block element）

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

內(nèi)聯(lián)元素（inline element）

b img span

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

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供定制網(wǎng)站、靜態(tài)網(wǎng)站、品牌網(wǎng)站建設、搜索引擎優(yōu)化、自適應網(wǎng)站、電子商務

廣告

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

網(wǎng)站優(yōu)化排名