資訊專欄INFORMATION COLUMN
摘要：宋體塊級元素主要有宋體宋體內聯元素不會以新行開始，和相鄰的內聯元素在同一行。也就是說，絕對定位或者浮動的內聯元素，實際表現為塊級元素，可以設置寬高和邊距。
為什么有些內聯（行內）元素如img、input可以設置寬高？
在說明之前我們先來了解一些定義。
①塊級元素總是獨占一行，表現為另起一行開始，而且其后的元素也必須另起一行顯示。
寬度(width)、高度(height)、內邊距(padding)和外邊距(margin)都可控制。
塊級元素主要有:
address , blockquote , center , dir , div , dl , fieldset , form , h1 , h2 , h3 , h4 , h5 , h6 , hr , isindex , menu , noframes , noscript , ol , p , pre , table , ul , li
②內聯元素不會以新行開始，和相鄰的內聯元素在同一行。
一般情況下，寬度(width)、高度(height)、內邊距的top/bottom(padding-top/padding-bottom)和外邊距的top/bottom(margin-top/margin-bottom)都不可改變，只能改變左右邊距。
內聯元素主要有:
a , abbr , acronym , b , bdo , big , br , cite , code , dfn , em , font , i , img , input , kbd , label , q , s , samp , select , small , span , strike , strong , sub , sup ,textarea , tt , u , var
③可變元素，根據上下文關系確定該元素是塊元素還是內聯元素：
applet , button , del , iframe , ins , map , object , script
一般情況下，行內元素只能包含數據和其他行內元素，而塊級元素可以包含行內元素和其他塊級元素。
?
①置換元素
一個內容不受CSS視覺格式化模型控制，CSS渲染模型不考慮對其內容的渲染，且元素本身一般擁有固有尺寸（寬度，高度，寬高比）的元素，被稱之為置換元素。
瀏覽器會根據元素的標簽和屬性，來決定置換元素的具體顯示內容。
它們所具有的特征為：在不使用css修飾時，元素的標簽和屬性也會影響元素的顯示。
例如，瀏覽器會根據
<title>paddingtitle>
<style>
.test {
width: 200px;
height: 50px;
padding: 10px;
border: 1px solid #000;
box-sizing: border-box;
}
style>
head>
<body>
<div class="test">塊級元素div>
<input class="test" type="button" value="行內置換元素"/>
<br />
<label class="test">行內非置換元素label>
<br />
文本
body>
html>
結果：
一些邊距規則： ①所有元素（除 ②所有元素（除? ③當我們為行內非置換元素設置縱向內邊距（padding-top/padding-bottom）或縱向外邊距（margin-top/margin-bottom）時，如果不將之轉化為行內塊（inline-block）或者塊級（block）元素，那么它的縱向邊距屬性不會影響布局。上、下邊距會在當前元素的行框基礎上向頂部和底部外延，但是這些外延不會拓展新的布局大小。 ④如果元素的position不是static | relative或者float不是none或者該元素是根元素，當display: inline | inline-block | run-in | table-*系時，display的計算值為block。也就是說，絕對定位或者浮動的內聯元素，實際表現為塊級元素，可以設置寬高和邊距。table-row-group | table-header-group | table-footer-group | table-column-group | table-row外）都可以設置橫向內邊距(padding-right/padding-left)；所有元素（除 table-row-group | table-header-group | table-footer-group | table-column-group | table-row?和 行內非置換元素?之外）都可以設置縱向內邊距（padding-top/padding-bottom）。非table | inline-table | table-caption的表格類元素之外）都可以設置橫向外邊距（margin-right/margin-left）；所有元素（除?非table | inline-table | table-caption的表格類元素 和 行內非置換元素?之外）都可以設置縱向外邊距（margin-top/margin-bottom）。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/2001.html
摘要：元素分類關于這點我還有些問題，暫且放上來，慢慢修改，非常歡迎糾正中的標簽元素大體被分為三種不同類型塊狀元素，內聯元素和內聯塊狀元素常見的塊狀元素有常見的內聯元素有有類特殊的元素如等，他們被稱為可置換元素。 我們常用的display屬性值有： inline block inline-block none 把 display 設置成 none 不會保留元素本該顯示的空間，但是 vis...
摘要：在中，和就是典型的行內元素元素。內聯元素不單獨占一行，給他設置寬高是沒有用的。在中和就是塊級元素。此元素會根據上下文作為塊級元素或內聯元素顯示。此元素會作為塊級表格來顯示類似，表格前后帶有換行符。 display屬性 首先，所有主流瀏覽器都支持 display 屬性。其次，我們都知道display 屬性規定元素應該生成的框的類型。默認值：inline 我們常用的display屬性值...
摘要：塊元素內聯元素內聯塊元素塊元素內聯元素內聯塊元素元素就是標簽，布局中常用的有三種標簽，塊元素內聯元素內聯塊元素，了解這三種元素的特性，才能熟練的進行頁面布局。css元素溢出 當子元素的尺寸超過父元素的尺寸時，需要設置父元素顯示溢出的子元素的方式，設置的方法是通過overflow屬性來設置。 overflow的設置項：?1、visible 默認值。內容不會被修剪，會呈現在元素框之外。2、hid...
摘要：基于特有的屬性擁有內聯元素的特性同時可以定義寬高，我們可以設置一個行內塊用于定義高度，再讓其他內聯元素與其對齊，實現垂直居中。如果居中的元素超過了視窗會被裁剪掉。使用時，不僅在水平方向上將元素居中，垂直方向上也是如此。 事實上，每次面試前端必問的問題就是這個。及其常見的需求，看起來似乎非常簡單，但是實現起來很費勁，尤其是涉及尺寸不固定的元素。 本篇文章將介紹比較流行的幾種方法。 行內塊...
閱讀 1020·2021-11-22 14:56
閱讀 985·2021-11-11 16:54
閱讀 7746·2021-09-23 11:55
閱讀 3012·2021-09-22 15:57
閱讀 2795·2021-08-27 16:25
閱讀 673·2019-08-30 15:55
閱讀 1664·2019-08-30 15:43
閱讀 1596·2019-08-30 14:23
