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

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

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

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

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

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

主要列出一些常見(jiàn)的啊，不怎么見(jiàn)就拉倒了

塊元素（block element）

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

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

b img span

本文名稱(chēng)：關(guān)于CSS文檔流與塊級(jí)元素(block)內(nèi)聯(lián)元素(inline)那點(diǎn)事
鏈接分享：http://www.muchs.cn/news8/312208.html

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

廣告

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

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