文章目錄
- 一、布局方式
-
- 1. 外部顯示類型
-
- a.塊級盒子/元素
- b.行内盒子/元素
- 2. 内部顯示類型
-
- 2.1 flex 流式布局
- 二、行内塊元素inline-block 顯示類型
-
- 2.1行内塊的空白間隙解決方案
一、布局方式
tip:以下示例代碼為友善觀察已在css中加上邊框
布局方式分為外部顯示類型和内部顯示類型兩種：
1. 外部顯示類型
浏覽器預設的布局方式，控制的是相鄰盒子之間的布局，分為塊級盒子和行内盒子兩種：
a.塊級盒子/元素
- 塊級元素就可以設定寬度和高度，
- 隻有文字内容不設定寬度高度，寬度為父元素的一行，高度為内容撐開的高度。
- 寬度高度可以設定
- 内外邊距設定均有效果
- 排列方式，從上至下
比如
<div>
，
<h1>..<h6>
,
<p>
等，單獨成行，排列從上向下
它的寬度（指盒子的整體寬度）會占滿整個浏覽器，後邊的盒子會被擠占到下一行去顯示。
<!--塊級盒子-->
<p>這是一段段落</p>
<p>這是第二段</p>
<h1>這是一個h1</h1>
<div>這是一個盒子</div>
b.行内盒子/元素
- 内聯元素的寬高是auto，寬高隻會一直随内容的寬高在同步變化。
- 寬度高度是auto，靠内容撐開
- 設定寬度高度無效
- 設定上下内外邊距無效
- 排列方式，從左至右
比如
<span>
,
<a>
,
<i>
,
<b>
,
<s>
等，它的寬度是内容的寬度，後邊的盒子會跟在它的後邊繼續排列
包括行内塊
<span >這是一行文字</span>
<a href = "http://www.baidu.com">一個連接配接</a>
<b>粗體</b>
差別：
-
行内盒子：無法手動設定寬高
padding 和 margin :
垂直方向上生效，但不會擠占其他盒子的空間， 導緻重疊；
水準方向上則會擠占其他盒子的空間。
.inline {
margin: 25px;
padding: 25px;
}
<p>在裡邊有一個<span class="inline">行内</span>元素</p>
<p>這是另一塊級元素</p>
- 塊級盒子：寬高、padding 和 margin 都生效并且擠占空間。
<style>
#block2 {
border: yellow 2px solid;
height: 100;
width: 300;
padding: 10;
margin: 10;
}
</style>
<p id = "block2">我是一個塊級</p>
<p id = "block2">我是另一塊級盒子</p>
2. 内部顯示類型
控制這個盒子内部的 “子盒” 之間的排列方式。
行内盒子裡邊隻能有行内盒子，不能有塊級盒子
設定 display 的值修改内部盒子的排列方式
-
display: flex
-
display: grid
栅格布局
一種自适應布局，能根據不同終端自動伸縮容器的寬高
它們屬于非正常的文檔流。
2.1 flex 流式布局
display:flex
首先，放置兩個塊級盒子：
<div class="container">
<p>一yiyiyi</p>
<p>二ererer</p>
</div>
可以看到兩個盒子單獨占了一行:
但此時我們想讓一個盒子裡的兩個塊級元素放在相同的一行，那麼也相當簡單~
隻要在style中設定兩個塊級的父元素
display: flex;
就可以實作啦！
<style>
.container {
display: flex;
}
</style>
<div class="container">
<p>一yiyiyi</p>
<p>二ererer</p>
</div>
讓我們看看效果：
Amazing！兩個塊級元素排列在一行了！
這個排列方式似曾相識，很像行内盒子的布局方式，但在這裡我們稱為流式布局
二、行内塊元素inline-block 顯示類型
display:inline-block
例：
input
、
img
屬于行内元素/盒子，但以塊級元素顯示
适用：
- 盒子的外部類型是行内盒子inline （不把後邊的盒子擠占到下一行）
- 且想同時設定寬高、padding 和 margin
使用inline-blcok顯示類型：這個盒子有了寬高，并且無論是水準還是垂直方向上的 padding 和 margin，都可以把周圍的盒子的空間擠占掉。
<style>
.inline-block {
display: inline-block;
width: 100px;
padding: 10px;
margin: 10px;
}
.inline-block, p {
border: 1px solid red;
}
</style>
<p>這是一個塊級<span class="inline-block">這是一個行内元素</span>元素</p>
<p>這是另一個塊級元素</p>
可以看到此時，行内元素的寬度、padding和margin在水準和垂直方向上已經生效，且擠占空間，而不是重疊。
2.1行内塊的空白間隙解決方案
當使用行内塊元素時，會發現一條多出來的空白間隙：
<style>
.box {
/* 設定背景顔色友善檢視間隙 */
background-color: violet;
}
img {
width: 200px;
}
</style>
<div class = 'box'>
<img src = "./pic.jpg">
<img src = "./pic.jpg">
</div>
如果要使兩個行内塊元素之間的空白間隙消失，
解決方案:style中給父元素中添加
font-size:0
<style>
.box {
background-color: violet;
/* 幽靈空白節點：兩張圖檔中間的空白，解決如下 */
font-size: 0px;
}
img {
width: 200px;
}
</style>
<div class = 'box'>
<img src = "./pic.jpg">
<img src = "./pic.jpg">
</div>