1.關(guān)于行內(nèi)元素和塊級元素的說明
塊級元素會自動占據(jù)一定矩形空間舌菜,可以通過設(shè)置高度萌壳、寬度、內(nèi)外邊距等屬性日月,來調(diào)整這個矩形的樣子袱瓮;與之相反,行內(nèi)元素爱咬,則沒有自己的獨立空間尺借,它是依附于其他塊級元素存在的,因此精拟,對行內(nèi)元素設(shè)置高度燎斩、寬度、內(nèi)外邊距等屬性蜂绎,都是無效的栅表。(置換元素除外)
2.行內(nèi)、塊級元素區(qū)別:
1师枣,塊級元素獨占一行怪瓶,其寬度自動填滿父元素寬度
行內(nèi)元素不獨占一行,相鄰行內(nèi)元素排在同一行践美,直到排不下劳殖,才換行,其寬度隨元素的內(nèi)容而變化
2拨脉,一般情況下哆姻,塊級元素可設(shè)置 width, height屬性,行內(nèi)元素設(shè)置width, height無效(置換元素除外)
(注意:塊級元素即使設(shè)置了寬度玫膀,仍然是獨占一行的)
3矛缨,塊級元素可以設(shè)置margin 和 padding. 行內(nèi)元素的水平方向的padding-left,padding-right,margin-left,margin-right 都產(chǎn)生邊距效果,但豎直方向的padding-top,padding-bottom,margin-top,margin-bottom都不會產(chǎn)生邊距效果帖旨。(水平方向有效箕昭,豎直方向無效)
3.行內(nèi)、塊級元素:
常見塊級元素(block element)
address - 地址
center - 居中對齊塊
div - 常用塊級元素解阅,也是css layout的主要標簽
dl - 定義列表
form - 交互表單
h1 - 大標題
h2 - 副標題
h3 - 3級標題
h4 - 4級標題
h5 - 5級標題
h6 - 6級標題
hr - 水平分隔線
menu - 菜單列表
ol - 有序列表
ul - 無序列表
li - 列表項
p - 段落
pre - 格式化文本
table - 表格
tr - 表格中的行
常見內(nèi)聯(lián)元素(inline element)
a - 錨點
b - 粗體(不推薦)
big - 大字體
br - 換行
dfn - 定義字段
em - 強調(diào)
i - 斜體
img - 圖片
input - 輸入框
label - 表格標簽
q - 短引用
select - 項目選擇
span - 常用內(nèi)聯(lián)容器落竹,定義文本內(nèi)區(qū)塊
strong - 粗體強調(diào)
textarea - 多行文本輸入框
u - 下劃線
var - 定義變量
4.行內(nèi)元素和塊級元素之間的轉(zhuǎn)換
1.設(shè)置display
塊級元素,默認display:block;
行內(nèi)不可置換元素货抄,默認為display:inline;
行內(nèi)置換元素述召,默認為display:inline-block;
display:none;不顯示該元素朱转,也不會保留該元素原先占有的文檔流位置。
display:block;轉(zhuǎn)換為塊級元素积暖。
display:inline;轉(zhuǎn)換為行內(nèi)元素藤为。
display:inline-block;轉(zhuǎn)換為行內(nèi)塊元素。
2.設(shè)置float
當把行內(nèi)元素設(shè)置完浮動(float:left/right)后夺刑,該行內(nèi)元素的display屬性會被賦予block值缅疟,且擁有浮動特性。(當它浮動時遍愿,行內(nèi)元素就會生成一個塊級框存淫。也可以說是行內(nèi)框)與此同時,行內(nèi)元素去除了之間的莫名空白沼填。
3.設(shè)置position
當為行內(nèi)元素進行定位時纫雁,position:absolute沸柔,與position:fixed绿店。都會使原先的行內(nèi)元素變?yōu)閴K級元素。
注意
轉(zhuǎn)換為塊級元素只是举庶,float與position的副作用羞海,他們本身的作用還會干擾布局效果忌愚。
介紹塊級元素時,會說却邓,塊級元素的寬度會繼承其父元素硕糊。但是,只有為行內(nèi)元素設(shè)置display:block;才會有這樣的效果腊徙,其他轉(zhuǎn)換之后并不會默認帶來這個效果简十。