css中display属性区别

最新推荐文章于 2023-02-11 21:18:39 发布
最新推荐文章于 2023-02-11 21:18:39 发布
阅读量363 收藏
点赞数
分类专栏： css 文章标签： css display 属性
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_37954086/article/details/101158189
版权

display 属性区别

display:block

占据一整行，如果固定宽度，则会以margin的形式展现

display: inline

占据自己的一部分，设置padding对上下不生效

display: inline-block

占据自己的一部分，对padding生效

display: none

元素不显示，但是依然存在于dom文档流中

嗜码
关注
专栏目录
CSS总结（一）—— display三种元素（区别、重点、扩展）
weixin_30314793的博客
03-21 108
display元素： block/inline/inline-block; 1、display:block(块级元素)： 会独占一行 可设其宽、高、margin、padding属性 可容纳内联元素与其他块元素 2、display：inline(行内元素)： 与其他元素在同一行 设置宽、高无效 padding-left/right，margin-left/right...
CSS:display各个值区别
雨夜星辰03--的博客
06-19 439
inline:内联元素可以多个非block元素共占一行,设置的height和width无效! block:块元素独占一行,可以设置height,width inline-block:是上面的结合,height和width起作用 ,默认以元素底部对齐,可以使用vertical-align:top改成顶部对齐 inline-table:用于table元素,table默认和block元素...
css-display属性辨析
永不止步！！！！
01-15 439
经常看到这样的属性，block、inline也用的比较多，但是什么让它们产生的差异，并没有深究过，inline-block不太明白怎么回事，今天做一个小结。 block、inline就不多说，一个块儿级，一个行级，inline-block则是对外表现是行级，包含的元素则表现块儿级属性。具体看下边解释以及样例。 1、display:block       块儿级对象，默认宽度是100%，如
display可能的值
lj17610803573的博客
08-01 210
none 此元素不会被显示。 block 此元素将显示为块级元素，此元素前后会带有换行符。 inline 默认。此元素会被显示为内联元素，元素前后没有换行符。 inline-block 行内块元素。（CSS2.1 新增的值） list-item 此元素会作为列表显示。 run-in 此元素会根据上下文作为块级元素或内联元素显示。 compact CSS 中有值 compa...
CSS display
VLilyLUE的博客
07-13 773
display 常用值： inline; inline-block; block; 区别： 注：这几个元素都设置了同样的宽高 inline: 行内元素 inline-block: 行内块级元素 block: 块级元素(自成一行) 当我们给这三个元素加float属性的时候 注： 属性值不为none 让我们看一下代码提示是怎么说的： 当带inline属性的...
详解css中的display属性
09-25
CSS中的`display`属性是一个非常重要的样式属性，用于定义元素的布局方式。它规定了元素应该生成的框的类型，从而影响元素的显示效果和周围的元素如何排列。在CSS布局中，`display`属性通常与`block`、`none`、`...
CSS display属性的table表格布局
01-19
项目改造中遇到DIV+CSS实现的table，新需求需要在表格...一、CSS display属性的表格布局相关属性的解释： table 此元素会作为块级表格来显示（类似 ），表格前后带有换行符。table-row-group 此元素会作为一个或多个
浅谈CSS3中display属性的Flex布局的方法
01-21
最近在学习微信小程序，在设计首页布局的时候，新认识了一种布局方式display:flex .container { display: flex; flex-direction: column; align-items: center; background-color: #b3d4db; } 编译之后的效果...
Csss属性display，visibility区别，对渲染页面的影响
星下云的博客
02-11 1029
display，visibility
CSS常用属性之display属性（六）
全粘小谭的博客
10-02 4175
display属性在日常使用中会经常用到，但是它的一些特点及作用可能有很多小伙伴都不太清楚，接下来就让我来详细介绍一下吧。
深入理解页面布局常用属性 css -- display
辞忧*的博客
05-13 2175
display 属性在网页布局中非常常见，是用于控制布局的最重要的 CSS 属性,每个 HTML 元素都有一个默认的 display 值,取决于元素的类型，大部分默认值为 block 或 inline。 浏览器支持 常用属性值 display: none; 常用于显示和隐藏属性，而不需要删除和重建。 相对于 visibility:hidden；的隐藏属性，隐藏后移除元素不影响页面布局，不占位置。 通常搭配javascript 或vue项目中三目运算进行使用 display: block; 可.
CSS中display属性：block、inline和inline-block的区别
aty
02-28 1万+
设置span的高度和宽度无效,span的margin和padding无效
CSS:display标签常用属性区别讲解
艾塔SEO
12-16 162
CSS:display标签常用属性区别讲解
CSS Display与Visibility区别和用法
m0_54889555的博客
03-07 1411
CSS Display与Visibility区别和用法 CSS属性display和visibility容易混淆，visibility和display两个属性都有隐藏元素的功能。visibility属性所控制的元素虽然不在浏览器里面显示出来，但他在浏览区里是存在的，只是不显示而已。而display属性设置为none，这个元素就变成了一个不显示的元素。 一、Display的属性值 block：表现为一个块级元素（一般情况下独占一行） 当display被设置为block(块)时，容器中所有的元素将会被当作一个单独
web第四讲 display三种用法
weixin_44597072的博客
12-10 4080
display三种用法 display三种用法 display:inline 让块状元素成为一行 display:block 让行内元素成为块状元素 display:inline-block 将对象呈现为内联(行)，但对象的内容作为块对象呈现出来。《行内块状元素》 <!DOCTYPE html> <html lang="en"> <head> &l...
【CSS知识点】——display属性详解
m0_50785976的博客
10-29 6979
display属性详解以及部分常用布局
实例分析CSS属性DISPLAY与VISIBILITY不同
02-09 771
大多数人很容易将CSS属性display和visibility混淆，它们看似没有什么不同，其实它们的差别却是很大的。visibility属性用来确定元素是显示还是隐藏，这用visibility="visible|hidden"来表示，visible表示显示，hidden表示隐藏。当visibility被设置为"hidden"的时候，元素虽然被隐藏了，但它仍然占据它原来所在的位置。例： functi
display:none和visibility:hidden两者的区别
热门推荐
越努力，越幸运！
06-24 12万+
使用css让元素不可见的方法有很多种，裁剪、定位到屏幕外边、透明度变换等都是可以的。但是最常用两种方式就是设置元素样式为display: none或者visibility: hidden。很多公司的面试官也常常会问面试者这两者之间的区别。 display与元素的隐藏 如果给一个元素设置了display: none，那么该元素以及它的所有后代元素都会隐藏，它是前端开发人员使用频率最高的一种隐藏方...
CSS的display属性
最新发布
05-05
CSS的display属性用于设置HTML元素的显示方式。常见的取值包括： 1. block：将元素显示为块级元素，占据整个父容器的宽度，并且可以设置宽度、高度、内边距和外边距等属性。 2. inline：将元素显示为行内元素，只占据元素本身所需的宽度，无法设置宽度、高度等属性，但可以设置内边距和外边距等属性。 3. inline-block：将元素显示为行内块级元素，既可以设置宽度、高度等属性，又可以设置内边距和外边距等属性。 4. none：将元素隐藏，不占据页面空间。 5. flex：将元素设置为弹性容器，可以使用弹性布局属性来控制子元素的排列方式。 6. grid：将元素设置为网格容器，可以使用网格布局属性来控制子元素的排列方式。 除了以上常见的取值外，还有table、table-row、table-cell等取值，用于设置表格的显示方式。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值