文章目录
一、布局方式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 = "">一个连接</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>