关于inline元素与inline-block元素在width层面的区别（附加了部分block元素的区别）

最新推荐文章于 2022-09-01 17:58:39 发布
最新推荐文章于 2022-09-01 17:58:39 发布
阅读量898 收藏 1
点赞数
分类专栏： css 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/FuChenRenShen/article/details/106434481
版权

2020年5月30日15:58:52

引子：虽然少有人用到inline元素，但是对于inline元素的一些特性我们有时候却又不得不了解，特别是大家在使用width设置宽度值时对此会有许多不解，其与inline-block元素表现如此接近却又有许多不同，这次我只介绍一种，即width层面的不同。

闲话不多说，我们开始正题：

说道设置width，我们不得不先回顾一个重要的概念：盒子，除掉附加盒子这个概念，我们来讨论下盒子的两个组成部分：

①.外在盒子：即盒子的外在表现，诸如块级盒子换行显示，内联盒子同行显示一样

②.内在盒子:  即盒子的内容表现，内容的呈现，与上述概念均同

相信如果自己没有做过实验的话，是很难理解为什么会这样？

甚至于只知其一不知其二，脑子混混沌沌的，因为概念始终模糊不清，笔者之前就是这样，现在也不过是稍微清楚了点

了解了盒子的概念，我们还得知道width作用的细节：

那么width是作用在哪个盒子上的呢？答案当然是内在盒子了，毕竟你要设置的宽度应以内容为主嘛

最低0.47元/天 解锁文章
FuChenRenShen
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery实现元素不确定时，如何确定宽度 && inline-block
cloud_guo的博客
11-16 814
实际项目中遇到的一个需求是：左边宽度固定，右边不固定，且大小为水平方向剩余宽度。 自己的实现是这样的： HTML代码<p>需求 左边宽度固定，右边不固定，大小为水平剩余宽度</p><div class="left"></div><!-- --><div class="right"></div>
CSS学习笔记（八）CSS 布局 - display 属性，width 和 max-width，溢出，浮动和清除
qq_43625134的博客
05-17 1530
CSS 布局 - display 属性 display 属性是用于控制布局的最重要的 CSS 属性。 display 属性 display 属性规定是否/如何显示元素。 每个 HTML 元素都有一个默认的 display 值，具体取决于它的元素类型。大多数元素的默认 display 值为 block 或 inline。 块级元素（block element） 块级元素总是从新行开始，并占据可用的全部宽度（尽可能向左和向右伸展）。 块级元素的一些例子： <div> <h1> - &lt
inline和inline-block的区别
qq_33960741的博客
01-22 918
inline-block才具有可以设置的高度 inline不具有高度，即使设置height和line-height也不会生效
inline-block的三个元素，width均为33.33%却不能并排显示,两个50%也不能平分，处理
清风古韵
01-25 998
inline-block的三个元素，width均为33.33%却不能并排显示 html: &lt;div class="container"&gt; &lt;div class="col"&gt; 1111 &lt;/div&gt; &lt;div class="col"&gt; 2222 &lt;/div&
css之min-width 和 inline-block
continue my dream
08-27 638
大家可以试试看看有什么不同,这个蛮有意思的 #test { width:97%; height:80px; z-index:0; position:relative; text-indent:60px; } label { background-color:#eeeeee; display:inline-block; min-width:60px; position
display: inline-block的多个元素width相加100%，结果元素错位
ListenToSennTyou的博客
11-10 1609
两个或多个display为inline-block的元素，如果以下几种情况：1. 两个元素之间本来没有空格或者间距，而展示出来的页面两个元素之间却有空格； 2. 两个或多个元素相加本来是100%的，却出现了错位，最后一个元素被挤到下一行去了； 那么，原因是：display为inline-block的元素之间（源代码上），如果之间有空格，那么渲染出来的页面元素时间也会有空格，也就是间距。多个元素之间之
inline-block带来的元素间距问题解决
09-24
首先，`display: inline-block` 是一种混合型布局模式，它结合了`inline`元素的并排显示特性与`block`元素的宽高控制能力。在`inline-block`模式下，元素可以像文本一样排列在同一行，但也可以设置宽度、高度、内...
详解CSS 去掉inline-block元素间隙的几种方法
12-13
最近做移动端页面时，经常会用到inline-block元素来布局，但无可避免都会遇到一个问题，就是inline-block元素之间的间隙。这些间隙会导致一些布局上的问题，需要把间隙去掉。对于inline-block元素及去掉间隙的方法，...
使用font-size：0 来去掉inline-block元素之间的空隙方法
12-13
像下面图中的布局，如果排列的元素是等高的话，相信很多人都会使用浮动来布局，不过如果元素不等高的话，不添加多余的标签，浮动布局是很难实现下图中的效果。如果遇到这种情况，可以使用inline-block来布局。 现代...
IE6的inline-block
12-13
1、display:inline-block 让一个元素具有“区块元素”的属性（可以设置width和height），又具有“内联元素”的属性（不产生换行）。 2、IE中的inline-block IE6不支持这个属性，但IE8开始支持这个属性。 让IE6...
浅谈inline-block及解决空白间距
11-30
在网页布局中，`display: inline-block` 是一个非常有用的 CSS 属性，它允许元素表现得像内联元素（inline）一样，同时可以设置宽高（block-like）。然而，在使用 `display: inline-block` 时，经常会遇到一个问题，...
html inline-block 铺满,浅谈inline-block_html/css_WEB-ITnose
weixin_30974905的博客
06-09 1388
一、区分block，inline，inline-block1、blockblock元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。block元素可以设置width,height属性。块级元素即使设置了宽度,仍然是独占一行。block元素可以设置margin和padding属性。2、inlineinline元素不会独占一行，多个相邻的行内元素会排...
行内元素能否设置width,height,padding,margin
chq11106004389的博客
11-23 3930
1.直观体现在排列上. 行内元素在直线上水平排开,处于同一行. 块级元素在垂直方向上排列,各个块级元素单独占据一行. 2.包容性 一般会使用块级包含行内元素. 3.行内元素可以设置line-height,但盒子模型中的其余属性均无效(width/margin/padding)
CSS中的label,input和select的宽度问题
12-18 425
firefox下 label如果要设置宽度,则应该设置显示方式为display:inline-block; input和select的盒子模型不一样, select 设置width包括内边距 input设置width不包括内边距 其他浏览器未做测试 border-width 设置了没有效果可能是因为border-style没有设置值,或为none值
div宽度设置无效问题解决
weixin_46312949的博客
09-01 2999
div宽度设置无效问题解决
block、inline和inline-block
热门推荐
每个人为不同的理由带着面具说谎，动机也只有一种名字那 叫做欲望
01-07 1万+
block、inline、inline-block行内元素和块级元素blockinlineinline-block行内元素和块级元素的区别常见用法 行内元素：又叫内联元素， 块级元素：是一个元素，占用了全部宽度，在前后都是换行符
C/C++ 二维码的实现，并放大显示。（目标平台MT2523）
u013255351的博客
08-10 2681
前面在做MT2523 UI显示的时候需要用到二维码，于是上网查了很多资料。 移植了二维码生成的C语言库到自己的项目。然后调用接口生成二维码数据。 最后显示到自己的LCD上面。   如果不知道库的可以查看博客：https://blog.csdn.net/qq_21475601/article/details/71480028#commentsedit 里面介绍了如何使用代码库文件，需要自己...
inline-block
最新发布
06-09
`inline-block` 是 CSS 中一个常用的属性，它可以将元素设置为内联块级元素，使其既具有内联元素的特性，又具有块级元素的特性。 具体来说，`inline-block` 可以使元素在一行内并排展示，同时可以设置宽高、内外...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值