浮動，影響width:auto塊級元素的預設寬度（寬度值與浮動之間的關係）

阿新 • • 發佈：2019-01-21

如果塊級元素的width屬性設定為auto的話（如果不設定，預設是auto），塊級元素的寬度等同於瀏覽器視窗所顯示的大小，也就是會盡可能佔據可以佔據的空間。

但當width:auto的塊級元素遇到浮動（float）之後，其寬度不再等同於根據瀏覽器視窗所顯示的大小，而是隨著盒模型中的內容而產生變化，即width會根據元素裡的內容儘可能小地佔用空間（收縮以適應內容，shrink-to-fit，參考文件：http://www.w3.org/TR/CSS21/visudet.html#float-width）。

為了更好地理解關於寬度值跟浮動之間的關係，附上《CSS那些事兒》裡的相關程式碼：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style type="text/css">
* {
	margin:0;
	padding:0;
	font-size:12px;
}
div {
	height:30px;
	line-height:30px;
}
hr {
	clear:both;
}
.header, .footer {
	height:50px;
	text-align:center;
	line-height:50px;
}
</style>
<title>寬度值與浮動之間的關係</title>
</head>

<body>
<div class="header">頭部資訊</div>
<hr />
<div style="width:auto;background-color:#999999;">width:auto;background-color:#999999;</div>
<hr />
<div style="width:auto;padding:0 200px;background-color:#EEEEEE;">width:auto;padding:0 200px;background-color:#EEEEEE;</div>
<hr />
<div style="width:auto;margin:0 100px;background-color:#999999;">width:auto;margin:0 100px;background-color:#999999;</div>
<hr />
<div style="width:auto;padding:0 200px;margin:0 100px;background-color:#EEEEEE;">width:auto;padding:0 200px;margin:0 100px;background-color:#EEEEEE;</div>

<hr />

<div style="float:left;width:auto;background-color:#999999;">float:left;width:auto;background-color:#999999;</div>
<hr />
<div style="float:left;width:auto;padding:0 200px;background-color:#EEEEEE;">float:left;width:auto;padding:0 200px;background-color:#EEEEEE;</div>
<hr />
<div style="float:left;width:auto;margin:0 100px;background-color:#999999;">float:left;width:auto;margin:0 100px;background-color:#999999;</div>
<hr />
<div style="float:left;width:auto;padding:0 200px;margin:0 100px;background-color:#EEEEEE;">float:left;width:auto;padding:0 200px;margin:0 100px;background-color:#EEEEEE;</div>
<hr />
<div class="footer">底部資訊</div>
</body>
</html>

浮動，影響width:auto塊級元素的預設寬度（寬度值與浮動之間的關係）

如果塊級元素的width屬性設定為auto的話（如果不設定，預設是auto），塊級元素的寬度等同於瀏覽器視窗所顯示的大小，也就是會盡可能佔據可以佔據的空間。但當width:auto的塊級元素遇到浮動（float）之後，其寬度不再等同於根據瀏覽器視窗所顯示的大小，而是隨

CSS 塊級元素block ，行內元素 inline，以及行內塊級元素inline-block

block元素（div、p、h1~h6、ul、ol、dl、li、dd、table、hr、blockquote、address、table、menu、pre，HTML5新增的header、section、aside、footer等）從瀏覽器的顯示結果可以看出，塊級元素新開啟一行（即

大前端學習筆記整理【三】行內元素與塊級元素的區別以及絕對定位與固定定位的差異

1.簡要說明： 1. 行內元素會再一條直線上，是在同一行的。比如span和strong; 2. 塊級元素各佔一行。是垂直方向的！比如div和p 假如你要將行內元素變成塊級元素，那麼就只需要在該標籤上加上樣式 display:block; 塊級元素可以用樣式控制其高、寬的值，而行內元素不可以。行內元素和wi

html中內聯元素和塊級元素的區別（超級詳細）

1.下表列出了內聯元素和塊級元素的主要區別 html中內聯元素和塊級元素的區別塊級元素行內元素獨佔一行,預設情況下，其寬度自動填滿其父元素寬度相鄰的行內元素會排列在同一行裡，直到一行排不下，才會換行，其寬度隨元素的內容而變化可以設定wid

css學習體會之——塊級元素，行內元素長寬設置

寬高 lec 實戰 display 所有 splay 但是 isp 內聯元素在做一些實戰的布局時，總會發現一些元素設置寬高有用，一些元素沒有用。下面來總結一下：（1）塊級元素：所有的會級元素設置寬高都有效（2）內聯元素：一般的內聯元素設置寬高沒有用，但是一些特殊的，如

總結一下各種居中（內聯元素、塊級元素、浮動元素、絕對定位元素）*（水平、垂直）

一個常見一是 -a flex 樣式有一個 margin round 　　在平時寫網頁樣式的時候，元素居中應該是最常見不過的了，在這裏我們把常見居中的情況簡單總結一下。本文討論以下幾種情況：內聯元素、塊級元素、浮動元素、絕對定位元素。居中的情況分兩種情況：水平居中和垂直

HTML哪些是塊級元素，哪些是行內元素

enter 鏈接 tab 結構縮進開始格式 lock marquee 塊級元素：塊級大多為結構性標記 <address>...</adderss> <center>...</center> 地址文字

【CSS基礎筆記】——盒模型、塊級元素、行內元素、浮動、對齊、定位

小技巧特性 ott lan 解決字母無效其中決定 CSS3 box-sizing 屬性分為content-box和border-box content-box：在該盒屬性下，對元素設定的width和height會被應用到元素內容框，在內容框寬高之外繪制元素的內邊距

行級，塊級元素

行級元素 inline ：內容決定元素所佔位置，不可通過css改變寬高 span strong em a del 塊級元素 block ：獨佔一行，可通過css改變寬高 div p ul

HTML 塊級元素，內聯元素

塊級元素行級元素？塊級（block）元素的特點： ①總是在新行上開始； ②高度，行高以及外邊距和內邊距都可控制； ③寬度預設是它的容器的100%，除非設定一個寬度； ④它可以容納內聯元素和其他塊元素。內聯（inline）元素的特點： ①和其他元素都

塊級元素與內聯元素（行內元素）及浮動知識總結

塊級元素顧名思義就是以塊顯示的元素，高度寬度都是可以設定的。比如我們常用的div、p、ul預設狀態下都是屬於塊級元素。塊級元素比較霸道，預設狀態下每次都佔據一整個行，寬度始終是與瀏覽器寬度一樣，塊級

CSS裡的各種水平垂直居中基礎寫法心得分享（附內聯元素，塊級元素的基本概念）

首先，依舊是概念。介紹一下行內元素和塊級元素，這個很重要，因為有的屬性只能用於塊元素，而有的正好相反，在一定的情況下，它們也可以相互轉換，比如用display來進行設定。行內元素（又叫內聯元素inline element）: ①不佔據一整行，隨內容而定，有以下特點： ②不可以設定寬高，也不可以

【css】浮動的影響及解決方法(父元素無高度，而子元素有高度)

當一個元素內只包含浮動元素的時候，它會出現高度摺疊，即元素的上下底邊重合，即出現高度為0的情況，這樣會導致後面接著的內容與上面內容出現重疊現象，針對這個問題分享幾種解決方法： 1、直接給父元素設定height ul { list-style-ty

行內元素和塊級元素的區別，為何img、input等行內元素可以設定寬高??（夯實基礎）

<spanstyle="display: inline-block;width:400px;height:60px;border:1px solid blue;">當使用display：inline-block；後，行內元素可以設定寬高</span> (ads

內外邊距對行內元素塊級元素的影響

1、內邊距對父級元素的影響當塊級元素裡面還是塊級元素且沒有定義寬高時，子塊級元素的內邊距會將父塊級元素撐開；但是當子元素為行內元素的時候，內邊距對父級元素是無影響的。如下例： div和span的內邊距對父級div的影響 <!DOCTYPE html> &l

VUE單頁面應用，如何判斷元件內塊級元素中內容滾動到底

第一次寫自己的原創技術部落格，歡迎大家批評指正。最近在用VUE框架做一個移動端的單頁面應用，專案中碰到了一個關於滾動載入的問題，由於某些原因，用已有的滾動載入的框架實現不了UI小GG設計出來的效果，無奈之下只能自己去摸索。在網上面看了很久，發現滾動載入的關鍵就是如何去判斷使用

盒子模型，塊級元素和行內元素特性與區別

盒模型到底是什麼？盒模型是CSS實現頁面佈局的一種思想：把頁面的所有元素都看成一個類似於禮品盒的盒子，禮品盒可能會有好多層包裝組成，那麼頁面元素也對應的有內容、邊框、內外邊距等組成。這裡特別提醒一下，盒模型是要把元素看成立體的，它確實有空間的屬性，我在後面詳細介紹。

【html】塊級元素、內聯元素之間的轉換，以及高度適應

一般的HTML元素分兩種：塊級元素、內聯元素怎麼區分他們呢？最簡單的方法就是：塊級元素都是獨佔一行，也就是說如果它後面再跟一個元素（不管是塊級還是內聯）的話，那個元素都是另起一行的很好！明白了這個我們再來說說日常開發過程中經常碰到的一種情況。一個內聯

CSS3 塊級元素，文字溢位操作 -webkit-line-clamp

限制在一個塊元素顯示的文字的行數。 -webkit-line-clamp 是一個不規範的屬性（unsupported WebKit property），它沒有出現在 CSS 規範草案中。為了實現該效果，它需要組合其他外來的WebKit屬性。常見結合屬性： display: -webkit-box; 必

塊級元素和行內元素

計算機引用 table 同一行 com tab 源碼 div display 塊級元素：塊元素又名塊級元素(block element)，和其對應的是內聯元素(inline element)，都是html規範中的概念。塊元素和內聯元素的基本差異是塊元素一般都從新行開始，相

浮動，影響width:auto塊級元素的預設寬度（寬度值與浮動之間的關係）

相關推薦