資訊專(zhuān)欄INFORMATION COLUMN
摘要：例效果注為塊級(jí)元素行內(nèi)元素，與塊級(jí)元素相對(duì)，它不會(huì)占一行，兩個(gè)甚至多個(gè)行內(nèi)元素一般情況下在同一行。塊級(jí)元素各占據(jù)一行默認(rèn)寬度為父元素的，垂直方向排列。塊級(jí)元素可以包含行內(nèi)元素和塊級(jí)元素。
一直對(duì)塊級(jí)元素和行內(nèi)元素的區(qū)別和特性有點(diǎn)模糊，于是各方參考總結(jié)一下，方便自己梳理知識(shí)：
首先說(shuō)一下什么是塊級(jí)元素和行內(nèi)元素
塊級(jí)元素，指自動(dòng)占一行的元素，下一個(gè)元素（標(biāo)簽）會(huì)在新行開(kāi)始，這行就是這個(gè)塊級(jí)元素的地盤(pán)。
例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>block and inlinetitle>
<style>
body {
margin-top: 100px;
}
div {
height: 200px;
}
.block1 {
background-color: red;
}
.block2 {
background-color: green;
}
style>
head>
<body>
<div class="block1">
div>
<div class="block2">
div>
body>
html>
效果（注：div為塊級(jí)元素）：
行內(nèi)元素，與塊級(jí)元素相對(duì)，它不會(huì)占一行，兩個(gè)（甚至多個(gè)）行內(nèi)元素一般情況下在同一行。
例：
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>block and inlinetitle>
<style>
body {
margin-top: 100px;
}
div {
height: 200px;
}
.span1 {
background-color: red;
}
.span2 {
background-color: green;
}
.span3 {
background-color: #ccc;
}
style>
head>
<body>
<span class="span1">
我是行內(nèi)元素1
span>
<span class="span2">
我是行內(nèi)元素2
span>
<span class="span3">
我是行內(nèi)元素3
span>
body>
html>
效果（注：span為行內(nèi)元素）：
塊級(jí)元素和行內(nèi)元素各自的特性：
塊級(jí)元素：
1.默認(rèn)下自動(dòng)占一行位置
2.默認(rèn)情況下，塊級(jí)元素的寬度自動(dòng)填滿(mǎn)其父元素寬度
3.默認(rèn)情況下，塊級(jí)元素可以設(shè)置width,height,margin,padding屬性
4.默認(rèn)情況下，塊級(jí)元素容納塊級(jí)元素和行內(nèi)元素
行內(nèi)元素：
1.默認(rèn)情況下，和其他行內(nèi)元素同占一行
2.默認(rèn)情況下，設(shè)置width,height無(wú)效；可以設(shè)置margin,padding,但上下無(wú)效，左右有效
3.默認(rèn)寬度高度取決于內(nèi)容
4.默認(rèn)情況下，只能容納文本和其他行內(nèi)元素
塊級(jí)元素和行內(nèi)元素的區(qū)別（由特性可對(duì)比出來(lái)）：
?
1.行內(nèi)元素會(huì)在一條直線(xiàn)上排列（默認(rèn)寬度只與內(nèi)容有關(guān)），都是同一行的，水平方向排列。塊級(jí)元素各占據(jù)一行（默認(rèn)寬度為父元素的100%），垂直方向排列。塊級(jí)元素從新行開(kāi)始，結(jié)束接著一個(gè)斷行。
2.塊級(jí)元素可以包含行內(nèi)元素和塊級(jí)元素。行內(nèi)元素不能包含塊級(jí)元素，只能包含文本或者其它行內(nèi)元素。
3.行內(nèi)元素設(shè)置width無(wú)效，height無(wú)效(可以設(shè)置line-height)，margin上下無(wú)效，padding上下無(wú)效
為什么在特性下，我會(huì)專(zhuān)門(mén)加上“默認(rèn)情況下”呢？
1.塊級(jí)元素和行內(nèi)元素是可以使用CSS屬性轉(zhuǎn)換的
塊級(jí)元素轉(zhuǎn)行內(nèi)元素：
display:inline
行內(nèi)元素轉(zhuǎn)塊級(jí)元素：
display:block
2.存在一些特殊情況
(1)p標(biāo)簽里不能放div
(2)a里面不能放a,input,其他都可以(即使是塊級(jí)元素）
3.行內(nèi)塊元素
使用display:inline-block轉(zhuǎn)換得到
inline-block 的元素（如input、img)既具有 block 元素可以設(shè)置寬高的特性，同時(shí)又具有 inline 元素默認(rèn)不換行的特性。
參考文章：
行內(nèi)元素和塊級(jí)元素的具體區(qū)別是什么？inline-block是什么？（面試題目）
HTML學(xué)習(xí)之塊級(jí)元素和行內(nèi)元素的特征和區(qū)別（一）
CSS學(xué)習(xí)筆記——盒模型，塊級(jí)元素和行內(nèi)元素的區(qū)別和特性
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://m.hztianpu.com/yun/2208.html
摘要：二塊級(jí)元素塊級(jí)元素占據(jù)其父元素容器的整個(gè)空間，因此創(chuàng)建了一個(gè)塊。而塊級(jí)元素可以包含行內(nèi)元素和其他塊級(jí)元素。格式默認(rèn)情況下，行內(nèi)元素不會(huì)以新行開(kāi)始，而塊級(jí)元素會(huì)新起一行。 一、行內(nèi)元素 一個(gè)行內(nèi)元素只占據(jù)它對(duì)應(yīng)標(biāo)簽的邊框所包含的空間。 二、塊級(jí)元素 塊級(jí)元素占據(jù)其父元素（容器）的整個(gè)空間，因此創(chuàng)建了一個(gè)塊。通常瀏覽器會(huì)在塊級(jí)元素前后另起一個(gè)新行。 三、行內(nèi)元素示例 HTML showIm...
摘要：二塊級(jí)元素塊級(jí)元素占據(jù)其父元素容器的整個(gè)空間，因此創(chuàng)建了一個(gè)塊。而塊級(jí)元素可以包含行內(nèi)元素和其他塊級(jí)元素。格式默認(rèn)情況下，行內(nèi)元素不會(huì)以新行開(kāi)始，而塊級(jí)元素會(huì)新起一行。 一、行內(nèi)元素 一個(gè)行內(nèi)元素只占據(jù)它對(duì)應(yīng)標(biāo)簽的邊框所包含的空間。 二、塊級(jí)元素 塊級(jí)元素占據(jù)其父元素（容器）的整個(gè)空間，因此創(chuàng)建了一個(gè)塊。通常瀏覽器會(huì)在塊級(jí)元素前后另起一個(gè)新行。 三、行內(nèi)元素示例 HTML showIm...
摘要：行內(nèi)元素和塊級(jí)元素講講行內(nèi)元素和塊級(jí)元素在中標(biāo)簽元素大都是塊級(jí)元素或行內(nèi)元素。 行內(nèi)元素和塊級(jí)元素 講講行內(nèi)元素和塊級(jí)元素在HTML中標(biāo)簽元素大都是塊級(jí)元素或行內(nèi)元素。 塊級(jí)元素 HTML 我是div CSS .wrap{ width: 200px; ...
摘要：行內(nèi)元素和塊級(jí)元素講講行內(nèi)元素和塊級(jí)元素在中標(biāo)簽元素大都是塊級(jí)元素或行內(nèi)元素。 行內(nèi)元素和塊級(jí)元素 講講行內(nèi)元素和塊級(jí)元素在HTML中標(biāo)簽元素大都是塊級(jí)元素或行內(nèi)元素。 塊級(jí)元素 HTML 我是div CSS .wrap{ width: 200px; ...
閱讀 4358·2021-09-26 10:11
閱讀 2731·2021-07-28 00:37
閱讀 3278·2019-08-29 15:29
閱讀 1255·2019-08-29 15:23
閱讀 3190·2019-08-26 18:37
閱讀 2543·2019-08-26 10:37
閱讀 649·2019-08-23 17:04
閱讀 2403·2019-08-23 13:44
