塊級元素和行內元素

yhaolpz 發布于2019-04-23 13:41 / 3298人閱讀

摘要：例效果注為塊級元素行內元素，與塊級元素相對，它不會占一行，兩個甚至多個行內元素一般情況下在同一行。塊級元素各占據一行默認寬度為父元素的，垂直方向排列。塊級元素可以包含行內元素和塊級元素。

一直對塊級元素和行內元素的區別和特性有點模糊，于是各方參考總結一下，方便自己梳理知識：

首先說一下什么是塊級元素和行內元素
塊級元素，指自動占一行的元素，下一個元素（標簽）會在新行開始，這行就是這個塊級元素的地盤。
例：

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為塊級元素）：

行內元素，與塊級元素相對，它不會占一行，兩個（甚至多個）行內元素一般情況下在同一行。
例：

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">
　　我是行內元素1
span>
<span class="span2">
　　我是行內元素2
span>
<span class="span3">
　　我是行內元素3
span>
body>
html>

效果（注：span為行內元素）：

塊級元素和行內元素各自的特性：
塊級元素：

1.默認下自動占一行位置
2.默認情況下，塊級元素的寬度自動填滿其父元素寬度
3.默認情況下，塊級元素可以設置width,height,margin,padding屬性
4.默認情況下，塊級元素容納塊級元素和行內元素

行內元素：

1.默認情況下，和其他行內元素同占一行
2.默認情況下，設置width,height無效；可以設置margin,padding,但上下無效，左右有效
3.默認寬度高度取決于內容
4.默認情況下，只能容納文本和其他行內元素

塊級元素和行內元素的區別（由特性可對比出來）：

1.行內元素會在一條直線上排列（默認寬度只與內容有關），都是同一行的，水平方向排列。塊級元素各占據一行（默認寬度為父元素的100%），垂直方向排列。塊級元素從新行開始，結束接著一個斷行。
2.塊級元素可以包含行內元素和塊級元素。行內元素不能包含塊級元素，只能包含文本或者其它行內元素。
3.行內元素設置width無效，height無效(可以設置line-height)，margin上下無效，padding上下無效

為什么在特性下，我會專門加上“默認情況下”呢？

1.塊級元素和行內元素是可以使用CSS屬性轉換的

塊級元素轉行內元素：

display:inline

行內元素轉塊級元素：

display:block

2.存在一些特殊情況
(1)p標簽里不能放div
(2)a里面不能放a,input,其他都可以(即使是塊級元素）

3.行內塊元素
使用display:inline-block轉換得到
inline-block 的元素（如input、img)既具有 block 元素可以設置寬高的特性，同時又具有 inline 元素默認不換行的特性。

參考文章：
行內元素和塊級元素的具體區別是什么？inline-block是什么？（面試題目）
HTML學習之塊級元素和行內元素的特征和區別（一）
CSS學習筆記——盒模型，塊級元素和行內元素的區別和特性

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/2208.html

前端面試題-行內元素和塊級元素

摘要：二塊級元素塊級元素占據其父元素容器的整個空間，因此創建了一個塊。而塊級元素可以包含行內元素和其他塊級元素。格式默認情況下，行內元素不會以新行開始，而塊級元素會新起一行。一、行內元素一個行內元素只占據它對應標簽的邊框所包含的空間。二、塊級元素塊級元素占據其父元素（容器）的整個空間，因此創建了一個塊。通常瀏覽器會在塊級元素前后另起一個新行。三、行內元素示例 HTML showIm...

int64 2019-08-02 16:01 評論0 收藏0
前端面試題-行內元素和塊級元素

摘要：二塊級元素塊級元素占據其父元素容器的整個空間，因此創建了一個塊。而塊級元素可以包含行內元素和其他塊級元素。格式默認情況下，行內元素不會以新行開始，而塊級元素會新起一行。一、行內元素一個行內元素只占據它對應標簽的邊框所包含的空間。二、塊級元素塊級元素占據其父元素（容器）的整個空間，因此創建了一個塊。通常瀏覽器會在塊級元素前后另起一個新行。三、行內元素示例 HTML showIm...

cucumber 2019-08-30 14:15 評論0 收藏0
行內元素和塊級元素

摘要：行內元素和塊級元素講講行內元素和塊級元素在中標簽元素大都是塊級元素或行內元素。行內元素和塊級元素講講行內元素和塊級元素在HTML中標簽元素大都是塊級元素或行內元素。塊級元素 HTML 我是div CSS .wrap{ width: 200px; ...

GitCafe 2019-08-02 16:09 評論0 收藏0
行內元素和塊級元素

摘要：行內元素和塊級元素講講行內元素和塊級元素在中標簽元素大都是塊級元素或行內元素。行內元素和塊級元素講講行內元素和塊級元素在HTML中標簽元素大都是塊級元素或行內元素。塊級元素 HTML 我是div CSS .wrap{ width: 200px; ...

wushuiyong 2019-08-30 15:56 評論0 收藏0