CSS - display:(inline | block)和display:box之间的区别？
CSS display:(inline | block)和display:box之间的区别如下：
display:(inline | block)
- display:inline：
- 行内元素，如
<a>，<b>，<i>，<u>，<h1>到<h6>，<p>，<div>，<span>，<img>，<input>，<button>等。 - 不允许更改元素在文档中的布局。元素按照文档流排列，不可对其应用宽度、高度、行高以及浮动等属性。
- 继承父元素的字体和字符属性（如
font-size，font-family，text-decoration等）。 - 可以使用
<span>和<i>标签对文本进行样式修饰。
- display:block：
- 块级元素，如
<p>，<div>，<h1>到<h6>，<ul>，<ol>，<li>等。 - 默认宽度为100%。可以通过
width或者padding等属性进行设置。 - 在默认情况下，块级元素在垂直方向上堆叠，可以通过
float或者position（尤其是absolute或relative）进行水平布局。 - 可以使用
<div>，<p>，<h1>到<h6>等标签进行页面布局。
display:box
display:box是 CSS Flexbox 布局体系的一部分，用于创建灵活和响应式的布局。- 它可以轻松地创建自适应的盒装布局，从而让内容在父容器中沿水平方向排列。
display:box与display:flex相当类似，但针对旧版本的浏览器可能需要进行前缀，如display: -webkit-box。
总结来说，这三种显示模式都有各自的应用场景和优劣。选择适当的显示模式取决于项目需求和兼容性要求。
相关·内容
2回答
我试图创建一个有7个块的C形状，所以我为顶部的3个和底部的3个设置了display inline-block，中间块和顶部块之间的边界在哪里？摆脱它的最好方法是什么？
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>vanillaJavascript</title>
<link rel="stylesheet" href="styles.css"&g
浏览 1提问于2015-12-18得票数 0
我使用了CSS：
div.half {
width: 50%;
display: inline-block;
}
以及HTML：
<div>
<div class="half">...</div>
<div class="half">...</div>
</div>
当然，正如预期的那样，由于边界和垫子的关系，DIV太宽了。所以我增加了盒子大小，这帮了我，得到了这个CSS：
div.half {
box-sizing: border-box;
width: 50%;
浏览 4提问于2014-06-06得票数 0
回答已采纳
1回答
我想知道在html/css中是否可以将不同类的对象放在同一行中。例如正方形。一个的高度和宽度为300px，第二个为150px，第三个的高度和宽度为75px。
Html：
<!DOCTYPE HTML>
<lang="en">
<head>
<meta charset="utf-8">
<title="Boxes"/>
<link rel="stylesheet" href="folder/css/exercise14.css"
浏览 1提问于2017-04-12得票数 0
2回答
这个是这个的结果。在它里面，我有一个3div的挠曲盒和一个4div的挠曲盒。(此时，它与角度无关)
理想情况下，flex将适合于它们的容器内，但是即使它们整体上比它们的容器窄，它们也不适合(一个div被推开)。更令人困惑的是，它们的数量不同。
当有4个div时，4的宽度之和为814 is，而容器的宽度为819 is。如果我缩小最宽的div的宽度9像素，使总宽度804，他们都符合他们的容器内的预期。
#hbox1: width is 819, inner is 819, outer is 821
0 Object {borderWidth: 0, marginWidth: 0, paddingW
浏览 2提问于2013-09-12得票数 0
回答已采纳
4回答
doc.html
.column {
background-color: orange;
width: 75%;
vertical-align: top;
display: inline-block;
height: 200px;
}
.nav {
vertical-align: top;
display: inline-block;
width: 25%;
background-color: lightgreen;
height: 200px;
}
* {
box-sizing: border-box;
padding: 0px;
ma
浏览 4提问于2016-10-02得票数 2
回答已采纳
我在CSS问题上有点纠结：
我想要两个div使用"display: inline-block“水平对齐，但是当我向其中一个div添加文本时，对齐是关闭的。
有没有一种方法可以让两个div对齐而不使用浮点数？
这是我的标记：
<div class="box">
<p>Some text</p>
</div><!-- /box -->
<div class="box">
<!-- No text -->
</div><!-- /box --
浏览 0提问于2011-11-01得票数 6
回答已采纳
4回答
这是密码。
CSS代码：
body {
margin: 0;
padding: 0;
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
}
.parent {
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
}
.child1 {
width: 30%;
height: 100%;
display: inline-block;
}
.child2 {
width: 70%;
height: 10
浏览 3提问于2014-02-20得票数 1
回答已采纳
1回答
我的内部div有这个CSS：
.square3 {
border:solid 1px #008CBA;
background-color:white;
position: relative;
width: 100%;
max-width:500px;
box-sizing: border-box;
display: inline-block;
float:left;
}
.square3:after {
content: "";
display: inline-block;
padding-bottom: 100%;
box-s
浏览 4提问于2017-05-03得票数 0
回答已采纳
1回答
我正在开发一个web应用程序，我必须在标题中添加按钮；共享和选项。当在一个按钮上裁剪时，它的相关内容会下降，当再次单击该按钮时，它又会重新出现。两个按钮都工作正常。但是，如果用户要单击“共享”按钮，然后单击“选项”按钮而不关闭“共享内容”，则“选项”的内容将在“共享内容”下打开。
我想一次只显示一个按钮的内容。如果用户要在另一个按钮未折叠时单击该按钮，则应首先折叠该按钮。
我没有使用jquery的经验，我不确定如何解决这个问题。
另外，如果你认为我可以以任何方式优化我的代码，我将感谢你的建议。
谢谢。。
$('.pull_box_share_triger').click(f
浏览 0提问于2013-06-29得票数 0
回答已采纳
请帮助，当鼠标移到另一个div中的图像上时，我正在尝试更改另一个div中的内容。我正在尝试使用这个：-
$(document).ready(function(){
// icons
$('#iconone img').mouseover(function(){
$('#stop').css('display', 'inline-block');
});
$('#iconone img').mouseout(function(){
$('#stop').css('displ
浏览 1提问于2014-06-02得票数 0
2回答
我是新的引导，目前需要更改搜索框的宽度。我也想给它一个空间，因为它在一个容器，但搜索框和按钮是触摸上面的图片和我的导航栏下面，它看起来不太好。我用 来修补它，但是它留下了一个很大的差距，确实不是很好。这是我的CSS和HTML。JS文件和CSS文件都是从引导程序本身下载的默认文件。任何指点都能帮上忙
.form-inline .form-control {
display: inline-block;
width: auto;
vertical-align: middle
}
.form-inline .form-control-plaintext {
di
浏览 1提问于2018-01-25得票数 1
回答已采纳
我有以下HTML和CSS：
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
margin: 0;
}
.row {
background-color: red;
/* display: inline-block; */
}
ul {
list-style: none;
padding: 0;
}
ul li {
border: 2px solid green;
display: inline-bl
浏览 15提问于2017-08-22得票数 2
回答已采纳
2回答
我有以下HTML代码：
<section class="container">
<div class="search"></div>
</section>
这些CSS规则：
*, *:before, *:after {
box-sizing: border-box;
}
body, section, div {
margin: 0;
padding: 0;
}
html, body { height: 100%; }
.container {
display: inli
浏览 1提问于2013-06-28得票数 4
回答已采纳
不太清楚在标题里该怎么表达。总之，我想说的是，我有三个同类名的div。我想添加一个mouseover函数，它只在select div上工作，而不是一次全部工作。例如:()这使得所有的div显示/隐藏，我只希望选择的一个对jQuery函数起作用。
Html：
<div class="box">
<p class="show">Show</p>
<p class="hide">hide</p>
</div>
<div class="box">
浏览 12提问于2016-06-28得票数 4
回答已采纳
1回答
默认情况下，在某些设置中，元素之间似乎存在4px差距(参见示例)，它为什么会存在？我怀疑如果修好它会有什么不好的影响。
使用flex-box解决了这个问题，但我仍然不知道它为什么存在，以及它是在加载时生成的还是用JavaScript创建的元素之间的区别。
for(var i = 0; i < 8; i++) {
$(".js").append('<div class="box"></div>');
}
body {
font-family: sans-serif;
}
body > div {
浏览 0提问于2017-02-19得票数 0
回答已采纳
2回答
我创建了一个类似于so ()的网格布局：
HTML：
<div class="grid-box">
<div class="item-9">
<div class="box-1"></div>
<div class="box-2"></div>
<div class="box-3"></div>
<div class="box-4
浏览 2提问于2013-10-10得票数 0
回答已采纳
我研究过Google Docs的css样式，我注意到了这样一件事：
.goog-inline-block {
position : relative;
display : -moz-inline-box;
display : inline-block
}
* html .goog-inline-block {
display : inline
}
*:first-child + html .goog-inline-block {
display : inline
}
ht
浏览 2提问于2011-08-25得票数 0
回答已采纳
1回答
我在这个问题上绞尽脑汁，我真的不知道该向你展示什么代码，因为我没有任何直接影响这个输入的代码，但是我会把我能想到的任何东西都放进去。
我在使用的html表单上有一个文本输入。我见过这个在使用中，它看起来和工作很棒，但由于某种原因，我的数据报头条太大了。请参阅左侧的正常版本，以及右侧的程序显示的内容：
HTML:
<input title="The last day the individual received a service" type="text" class="datepicker frm-field" id="
浏览 0提问于2016-04-01得票数 1
回答已采纳
我在一行中有6个带有display:inline-block的DIV。但是它们之间有一个奇怪的空白，我怎么才能摆脱它呢？它们应该在容器中排成一行。
小提琴：
HTML：
<div id="container">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box">&
浏览 0提问于2012-03-12得票数 3
回答已采纳
我有两个内联图像在一个div中，我不能让div调整它的宽度到它的内联图像在我如何做呢?？
我试过做家长
显示:内联块，内联，浮动:左
但它们都不管用..。
html：
<div id="box1">
<div id="box2">
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
</div>
</div>
css：
#box1{
width:
浏览 0提问于2011-11-01得票数 0
回答已采纳
3回答
我有两个元素，都有display: inline-block，父元素有空格: nowrap。
当屏幕调整大小时，右侧的div不会像那样调整大小。
我尝试只调整蓝色div的大小。
(jsfiddle)
html的结构如下所示：
<div class="container">
<div class="header">...</div> <!-- red -->
<div class="aside">...</div> <!-- pink -->
浏览 1提问于2014-07-08得票数 1
4回答
我正在float和inline-block上做一些测试，我注意到它们之间有区别。
正如您从中看到的那样，如果我使用display:inline-block，div在它们之间有一点空白，但是如果我使用float:left，它就会像预期的那样工作。
请注意，我正在使用Eric的重置CSS v2.0。
是因为我做错了什么，还是inline-block的行为方式(在这种情况下，它不是很可靠)。
<!DOCTYPE html>
<html>
<head>
<title>How padding/margin affect floats</titl
浏览 4提问于2012-11-26得票数 8
回答已采纳
这不是一个表，我只是使用“行”，因为没有一个更好的词。
我的问题是，我在这些元素下面有一组display:inline-block元素和一个元素，但是它们之间有一个缺口。请注意，我不是在讨论内联元素之间的空间，而是指内联元素行和其他元素之间的空间。我尝试过提到的解决方案，设置了一个line-height和font-size，但是这一点都没有帮助(这就是为什么它不在下面的代码中)。
这是我的密码：
<div id="letterhead">
<div class="name"></div><div
浏览 4提问于2014-06-02得票数 1
回答已采纳
该网页为，它在除IE9之外的所有浏览器上都正确显示。CSS是：
#primary { display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex; }
IE7和IE8的条件css是：
.ie8 .content-area1{
width: 70%;
display: inline-block; }
.ie7 .content-area1{
width: 70%;
display: inline-block; }
IE9没有条件css文件。因此，请建议我可
浏览 2提问于2014-04-03得票数 1
回答已采纳
9回答
我有以下html
<div class="main-conteiner">
<div class="block">First</div>
<div class="block">Second</div>
</div>
而这个css
.main-conteiner {
width: 600px;
margin: 0 auto;
}
.block {
width: 50%;
display: inline-block;
background:
浏览 6提问于2014-05-02得票数 2
回答已采纳
5回答
我创造了三个盒子。和UL/LI。但它似乎没有水平地排列自己。
我试过了，float:right;和display: inline-block;都没有对齐。
这是我的密码
#box1 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
#box2 {
height: 300px;
width: 250px;
background-color: grey;
display: inline-block
}
#box3 {
height: 300px;
浏览 0提问于2018-08-09得票数 2
回答已采纳
我试着让这4个div坐在同一条垂直线上。为什么按钮的存在会改变第一个div的位置？
HTML
<div class="box">
<button>Y</button> <button>N</button>
</div>
<div class="box">
</div>
<div class="box">
</div>
<div class="box">
</div>
C
浏览 0提问于2012-02-22得票数 0
回答已采纳
2回答
我正在尝试在我的网站上包括一些游戏推荐，我试图有标题以上的三个盒子的游戏。 这就是它现在的样子。我需要标题在中间和其他框的上方。 ? 下面是我使用的代码： Html： <div class="second-box">
<div class="game-section">
<h1 id="games"> Game Recommendations </h1>
<div class="box1">
<p> This is the first
浏览 56提问于2021-09-06得票数 0
回答已采纳
在这里看我的小提琴：
HTML：
<div class="box box1"><a href=#delete">Delete</a></div>
<div class="box box2"><a href=#delete">Delete</a></div>
<div class="box box3"><a href=#delete">Delete</a></div>
<
浏览 0提问于2013-04-20得票数 1
回答已采纳
2回答
我正在尝试为我的主页显示一个漂亮的方框布局，我可以在每个方框中添加图片或文字。我用div的方法实现了这个想法，一切都很顺利，直到我尝试将文本插入到中间的div(框)中。我想要一只手，因为当我这样做的时候，它会搞乱我的整个方向。
这是我的HTML：
<!DOCTYPE html>
<html lang:en>
<head>
<title>MitoGraphics | Branding and Promotions</title>
<link rel="stylesheet" href="main.css&#
浏览 2提问于2014-04-08得票数 0
我想设置按钮的宽度取决于它的子元素(这是标记)。
但是，按钮只考虑子元素的纯内容宽度，而忽略子元素的填充。
我试图设置按钮的宽度以适应-内容，最大内容，自动等等，但没有工作。
我怎么才能解决这个问题？
CSS
*,
*::before,
*::after {
box-sizing: border-box;
}
button {
display: inline-block;
padding: 0;
margin: 0;
& > a {
display: inline-block;
padding: calc(13px /
浏览 4提问于2021-12-13得票数 1
演示：
我遇到了问题，我的印象是display: inline-block使元素表现为内联元素和块元素。
这个box-sizing: border-box使块元素变宽以补偿边框的宽度，但是这似乎不是inline-block的情况。
边框宽度根本不包括在内。
解决此问题的方法是什么，以及出现这种情况的原因。
代码
<ul>
<li>home</li>
<li>about</li>
<li>work</li>
<li>portfolio</li>
&l
浏览 0提问于2015-10-24得票数 1
5回答
我一直在为我的本地童子军组制作一个网站，我在创建菜单时遇到了问题，原因是我无法确定css不适用于前两个元素，而是应用到最后两个元素。有人能帮忙吗？我想是因为悬停下降，但正如我说的，我不确定。
谢谢,
罗山
看看JSFiddle：
下面是HTML：
<div class="fluid menu" align="right">
<ul>
<li>
<a href="index.php">Home</a>
浏览 10提问于2015-03-29得票数 0
回答已采纳
2回答
我忙着做一个非常简单的CSS。假设我有四个正方形，在另一个正方形里面。我希望我的布局看起来像这样：
但看起来是这样的：
但我搞错了。这四个方块被组合成一个元素，显示被设置为内联块。我想移动他们父母里面的小盒子，我想我应该用"display: flex“和”their content: flex-end“来做，比如下面的代码。我在HTML和CSS中的代码如下所示。
{
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: honeydew
浏览 5提问于2020-10-02得票数 1
回答已采纳
我正在尝试使用CSS选择一个div的独生子。
HTML：
<div class="wrapper">
<div>Child
<div>GrandChild</div>
</div>
<div>Child</div>
<div>Child</div>
</div>
CSS：
.wrapper div:first-child {
display: inline-block;
}
小提琴：
上面的CSS仅应用于孙子的CSS属性。我删除了:
浏览 2提问于2018-09-03得票数 0
在Firefox中，选择下拉列表有错误的选项。见以下图片：
关于我能做些什么使选项排列起来有什么建议吗？
CSS用于此：
.dob-selects-container {
display: block;
-moz-box-sizing: border-box;
float: left;
min-height: 30px;
margin-left: 2.12766%;
:nth-child(1) {
width: 120px;
display: inline-block
}
:nth-child(2) {
width: 60p
浏览 1提问于2014-04-09得票数 0
回答已采纳
<style>
* {
margin: 0;
padding: 0;
}
.navbar {
background-color: black;
color: white;
}
.navbar ul li {
display: inline-block;
margin-
浏览 2提问于2021-07-02得票数 0
回答已采纳
3回答
我有div，它显示在页面的左侧，我想将它们显示在页面的中央，我还附上了div的屏幕截图：
$array = [
'Summary' => [
'data' => '<div align="center"style="display: inline-block;width: 10%;" class="page_sum"><h1>Scan Summary:</h1></div>
<d
浏览 0提问于2020-03-06得票数 0
6回答
好吧，我以为我的CSS技巧终于到了我不需要问这些问题的地步了，但是.
我在一个家长区里有三个孩子。我希望它们都显示在同一条线上，每一行占父母宽度的33%。就像你在我的小提琴上看到的，事情不是这样的。我做错了什么？
小提琴：
HTML
<div id="parent-div">
<div id="div1" class="child-div">
<p>Div 1</p>
</div>
<div id="div2" class=
浏览 4提问于2014-01-15得票数 0
回答已采纳
2回答
我按照上面的描述写了一个布局。我通过简单地使用具有不同宽度和高度的display: inline-block和article元素实现了这一点，如下所示：
width: 50%; /* this is variable*/
height: 160px; /* this is also variable*/
padding: 10px;
box-sizing: border-box;
display: inline-block;
vertical-align: top;
现在这已经很好用了，但是:你看到4和5上面的空隙了吗？我是否可以编写一个纯CSS布局，让这些框直接填充1下面的空间？
浏览 0提问于2018-06-23得票数 1
<div id="colorscheme">
</div>
<div id="content">
<div id="display_saved">
TEXT TEXT TEXT
</div>
这是与问题文档相关的HTML结构。
CSS：
#colorscheme{
width:25%;
display:inline-block;
height: 50px;
background:green;
}
#content{
width:50%;
浏览 0提问于2013-06-24得票数 3
回答已采纳
1回答
我正在尝试制作一个手柄栏元素与一个漂亮的纹理线伪元素，这是水平和垂直居中在它的中间。
我知道很多人对背景图像做这种效果，但我希望它是矢量的，这样即使在高密度的显示器上也能工作。
演示：
整个过程只使用了一个元素，并使用了这个CSS：
html, body
{
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
*
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
浏览 0提问于2013-06-27得票数 0
回答已采纳
让我们看看这段代码 :)
HTML
<div class="mid">
test inline-block
</div>
<div class="mid">
test inline-block
</div>
<div class="floated">
test block floated
</div>
<div class="floated">
test block floated
</div>
CSS
浏览 0提问于2014-03-26得票数 2
回答已采纳
我有块，里面有三个盒子。CSS是
.blocks {
display: block;
margin: 0 auto;
width: 60%;
height: 350px;
}
.box1, .box2, .box3 {
width: 33.333%;
height: 300px;
vertical-align: top;
display: inline-block;
zoom: 1;
}
在框中，有一个图像和一个文本。我要它们水平居中。所以我做了
.box1, .box2, .box3 {
width: 33.333%
浏览 0提问于2016-03-01得票数 0
回答已采纳
2回答
或多或少地，通过CSS和div对表进行处理，并将其设置好，但由于某些原因，高度不一致，每个框都会发生变化。在没有运气的情况下尝试了各种高度变化和命令。不确定问题是否与下面的CSS有关，还是与其他CSS编码发生冲突。
CSS：
.collection{
width:600px;
border-collapse:collapse;
}
.collection td{
padding:5px;
}
.collection-box{
border-style:solid;
border-width:2px 2px;
border-color:#29FDF
浏览 6提问于2016-05-18得票数 1
回答已采纳
2回答
我试图使它，当你点击一个图标在一个div，有一个下拉框，显示和覆盖div的内容。但是现在，我的下拉框只是简单地将div的内容按下，而不是覆盖它。在浏览了这个网站上类似的问题后，我几乎可以肯定，问题在于我的CSS必须设置一些元素位置:相对元素和其他元素位置:绝对，但是我已经玩了很长一段时间了，似乎无法让它正常工作。下面是我的代码的一个干净版本(没有不同的位置尝试)。
有关的CSS代码是：
#ideas_box {
display: inline-block;
*display: inline;
background-color: white;
min-width:
浏览 1提问于2017-09-03得票数 1
回答已采纳
我知道很多技术可以将div并排定位.然而，我从来不明白为什么采取两个边框的宽度: 50%不会产生并排的div。根据我对css的理解，边距、填充边和边框超出等式，这是绝对可行的。
body {
padding: 0;
margin: 0;
border: 0;
}
div {
height: 300px;
box-sizing: border-box;
display: inline-block;
margin: 0;
}
.left {
background-color: blue;
}
.right {
background-color: red;
}
.h
浏览 4提问于2015-09-24得票数 3
回答已采纳
2回答
作为一个与HTML5 + CSS3打交道的新手，我正在为菜单、文本和菜单中的图标对齐而苦苦挣扎。这就是场景:菜单的每一行都有一个图标和一个文本(描述)。问题是，我不能将它们分开足够多，使其更具可读性。它们看起来太近了，我想在它们之间留出空间。下面是html和css3代码，谢谢！
最好的！
HTML代码
<div id="sidebar">
<ul class="menu">
<li><a href="#" class="home">Home</a>
浏览 1提问于2015-03-04得票数 0
1回答
当用户向下滚动时，我有固定在页面顶部的导航条。当用户水平滚动时，我还需要将其固定在右上角。怎么做？谢谢你的建议。
CSS：
#box {
margin: 0 auto;
}
#content {
height: 500px;
width: 1000px;
}
#left {
max-width: 20%;
display: inline-block;
background: #aaa;
}
#right {
max-width: 80%;
display: inline-block;
background: red;
heigh
浏览 3提问于2015-03-29得票数 2
回答已采纳
4回答
我对HTML和CSS都很陌生。作为一个课程模块，我必须对齐下面三个猫图片，如下所述。然而，我确实很难让他们在适当的位置。这些图片现在正在排队，但第二张图片必须是“下面”的一条水平线。
有人能告诉我怎么做吗？在下面你可以找到我想要的结果以及我的代码。
body {
background-color: white;
}
.box-wrap {
display: flex;
}
#cat1 {
border: 3px solid blue;
position: relative;
display: inline-block;
}
#cat2 {
borde
浏览 1提问于2018-05-13得票数 2
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
