CSS inline-block的作用

最新推荐文章于 2022-02-24 17:26:16 发布
最新推荐文章于 2022-02-24 17:26:16 发布
阅读量255 收藏
点赞数
分类专栏： 前端 文章标签： css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45512210/article/details/108029141
版权
  1. block块级元素中的元素自动填满父级元素占据一行，可以设置宽高，margin和padding。
  2. inline行内元素不会换行，宽高设置无效，对于边距，top和bottom边距设置不会产生相应的效果。
  3. inline-block设置后，可以让一个块级元素拥有行内的一行展示和该元素本身的宽高属性。
qq_45512210
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS inline-block属性概述及其使用示例
01-21
块级元素（block elements）来源于CSS盒子模型。块级元素包含width height,padding,border与margin，他们的排列方式是从上到下排列。 行内元素（inline elements）排列方式是水平排列。行内块元素（inline-block ...
详解CSS display:inline-block的应用
weixin_30270889的博客
11-01 2238
本文详细描述了display:inline-block的基础知识，产生的问题和解决方法以及其常见的应用场景，加深了对inline-block应用的进一步理解。 基础知识 display:inline-block是什么呢？相信大家对这个属性并不陌生，根据名字inline-block我们就可以大概猜出它是结合了inline和block两者的特性于一身，简单的说：设置了inline-block属性的...
inline-block详解
qq_35340281的博客
12-16 1万+
一、首先要了解什么是块级元素和行级元素 块级元素：会占领页面一行，其后多个block元素会自动换行、可以设置width、height属性，设置width后同样占领一行，同样也可以设置padding和margin属性。（常见的块级元素有div、img、ul、form、p等）。 行级元素：与其它元素在同一行上的元素称为行级元素。高度、行高、及底边距不可改变。（常见有em、strong、br、inp...
CSS之使用display:inline-block来布局
weixin_30698527的博客
05-13 1万+
css之display:inline-block布局 1.解释一下display的几个常用的属性值，inline ， block， inline-block inline（行内元素）: 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行. 不能更改元素的height，width的值，大小由内容撑开. 可以使用padding上下左右都有效，margi...
CSS的inline、block与inline-block
weixin_34191845的博客
06-06 217
基本知识点 行内元素一般是内容的容器，而块级元素一般是其他容器的容器，行内元素适合显示具体内容，而块级元素适合做布局。 块级元素(block)：独占一行，对宽高的属性值生效；如果不给宽度，块级元素就默认为浏览器的宽度，即就是100%宽。 行内元素(inline)：可以多个标签存在一行，对宽高属性值不生效，完全靠内容撑开宽高。 行内块元素(...
inline-block和block的区别
gao_zhennan的博客
02-24 3955
一、块级元素和内联（行内）元素的特点 块级元素 1. 独占一行 2. 可以设置属性：width、height、margin-top和margin-bottom 内联元素 1. 多个元素在一行显示
CSS属性display:inline-block用法深入理解
09-25
本文向大家描述一下CSS属性display:inline-block的用法,在使用CSS实现表现的时候，会经常接触到display:inline-block这一属性;可以将对象呈递为内联对象，但是对象的内容作为块对象呈递，旁边的内联对象会被呈递在...
兼容浏览器的css inline-block写法
09-24
主要介绍了兼容浏览器的inline-block,需要的朋友可以参考下
css —— inline、block、inline-block特性总结
huzhenv5的博客
03-24 857
笔者做web前端已经做了很长时间了，常用的display属性就是inline、block和inline-block，对于他们的特性和区别有一个大概的了解，但是并不全面。今天笔者写这篇文章再来重新认识一下这三者和这三者之间的区别，再对平常使用过程中常常碰到的问题做个回顾和总结。 特性 inline： 使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行 不能更改元素的...
inline-block什么意思中文_css中inline-block是什么？inline-block布局的使用
weixin_35674742的博客
01-14 6157
css中inline-block是什么？本篇文章就给大家介绍在css中inline-block是什么意思，让大家了解在css布局中使用inline-block的好处。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。首先我们来了解一下inline-block是什么？inline-block表示的是行内块状元素，比如：img、input在默认情况下即为行内块状元素，即：默认情况下，di...
TOP K问题的算法分析与实现
kodoshinichi的博客
10-21 625
Top k 问题的解决思路与优化。
block，inline和inline-block概念和区别
lihei12345的专栏
07-13 1372
[转]  总体概念 block和inline这两个概念是简略的说法，完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素)。block元素通常被现实为独立的一块，会单独换一行；inline元素则前后不会产生换行，一系列inline元素都在一行内显示，直到该行排满。大体来说HTML元素各有其自身的布局级别（
关于display属性block、inline、inline-block的联系与区别
leejj_520的博客
02-23 1654
display 属性规定元素应该生成的框的类型，这个属性用于定义建立布局时元素生成的显示框类型。 首先来解释一下这三者分别是什么含义： display：block  此元素将显示为块级元素，此元素前后会带有换行符。 display：inline  默认值，此元素会被显示为内联元素，元素前后没有换行符。 display：inline-block  行内块元素（CSS2.1 新增的值），意
inline-block什么意思中文_【CSS深入】之对inline-block的理解
weixin_36382907的博客
02-23 3736
display:inline-block属性是一个很神奇且被低估的属性。inline-block即行内块元素，具体而言就是:将对象呈递为内联对象(inline)，但是对象的内容作为块对象呈递(block)，两旁的内联对象会被呈递在同一行内，允许空格。简而言之就是:inline-block的元素既具有block元素可以设置宽高的特性，同时又具有inline元素默认不换行的特性。目前浏览器支...
html中内联元素（inline），块级元素（block）、inline-block的区别和理解。
qq_29890317的博客
07-07 743
首先，关于display的这三个属性，要先了解其作用的元素，如果元素本来就是块级元素，那么display加block没用，反之亦然。当块级元素想要在行内加入其它块级元素时，需要将两个元素设置为inline-block（方便设置长宽高，如果设置为inline，长宽是无法设置的）。下面是三者的区别。 display:block 1.block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度。 2.block元素可以设置width,height属性。块级元素即使
display：inline-block的特点和作用
a4228492的博客
02-14 570
转载于:https://www.cnblogs.com/konglxblog/p/10374526.html
inline-block的常见应用场景
whaxrl的专栏
11-12 999
 inline-block的特点是结合inline和block两种属性的特性，可以设置width和height，并且元素保持行内排列的特性，基于这一点，所有行内排列并且可以设置大小的场景都是我们可以考虑使用inline-block   1、网页头部菜单 aaa gg
CSS中block和inline的区别
blackwuxin的专栏
11-08 5862
总体概念1、block 块级元素，独立一块，会换行 inline 内联元素，前后不会换行，一系列内联元素在一行显示，直到排满 2、常见的块级元素：div,p,table,h1~h6,ul,li,ol 常见的内联元素：span ,img ,input ,lable,select,a 3、block可以包含block,inline，inline只能包含inline.注：P元素只能包含inlin
display:inline、display:block、display:inline-block三者真实用途及含义是什么？
热门推荐
哈里·雪利博客
12-08 2万+
1、display:block就是将元素显示为块级元素。 　　block元素的特点是： 　　总是在新行上开始； 　　高度，行高以及顶和底边距都可控制； 　　宽度缺省是它的容器的100%，除非设定一个宽度 　　, , , , 和 是块元素的例子。 2、display:inline就是将元素显示为内联行内元素。 　　inline元素的特点是： 　　和其他元素都在一行上；
css中inline-block
最新发布
05-04
inline-block 是 CSS 中常用的一个 display 属性值，它可以让元素既具有 inline 元素的特性，又具有 block 元素的特性。 具体来说，使用 inline-block 可以让元素： 1. 能够在一行内显示，不会像 block 元素一样...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值