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

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

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

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

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

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

本文名稱：關(guān)于CSS文檔流與塊級元素(block)內(nèi)聯(lián)元素(inline)那點事
鏈接分享：http://jinyejixie.com/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)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容

成人午夜视频全免费观看高清-秋霞福利视频一区二区三区-国产精品久久久久电影小说-亚洲不卡区三一区三区一区

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