HTML中display:inline;特性

最新推荐文章于 2018-06-09 10:15:32 发布
最新推荐文章于 2018-06-09 10:15:32 发布
阅读量1.3w 收藏 8
点赞数 4
分类专栏： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/lanseguhui/article/details/80444154
版权
display属性inline
内嵌式
布局特点:
1.可以支持同行排列
2.不支持宽高的设置,不支持上下margin设置,支持左右margin的设置,大小由内部的文字撑开
3.内部的标签的只能是文字或者Inline型标签,项目中的inline主要用来套文字
4.浏览器会解析文档中两个inline型标签之间的空白符为间隙,该间隙大小不可控,不同浏览器大小不一致
消除该间隙的方法
1.为其父级设置font-size:0;并在子级中恢复字体大小,恢复的原因是font-size具有继承性
七上八下的爆米花
关注
  • 4
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CSS属性display:inline-block用法深入理解
12-13
在CSS布局中，`display:inline-block`是一个非常重要的属性，它结合了`block`和`inline`两种显示方式的优点，使得元素既能保持内联元素的特性（如同行排列，允许空格），又能拥有块级元素的特性（如设置宽高，垂直居...
有关display:inline-block在FF出现空白的解决方案
03-17
在网页布局设计中，`display:inline-block` 是一个非常常用且强大的CSS属性，它允许元素在保持块级元素特性的同时，像内联元素一样并排显示。然而，在不同浏览器之间，尤其是在Firefox（FF）上，可能会遇到一些显示...
如何解决IE6/IE7不识别display:inline-block属性
01-19
这样可以达到同样的效果，但是问题是inline元素的特性：默认无法设置宽度，高度，以及上下margin，（关于padding，情况有点特殊，在ie6，7中 inline元素是无法设置上下padding的，但是在标准浏览器里面是可以设置...
css解决display:inline-block;产生的缝隙（间隙）的方法
09-27
在CSS布局中，`display: inline-block` 是一个常用的属性，它允许元素以行内元素的方式排列，同时具有块级元素的部分特性，如指定宽度和高度。然而，使用`display: inline-block` 时，元素之间往往会出现一些...
css中display:block;的用法及适用标签详解
12-13
在CSS（层叠样式表）中，`display` 属性是一个至关重要的属性，它控制着元素如何在页面上布局和显示。`display: block;` 是 `display` 属性的一个值，它对元素的行为有着显著的影响。理解这个属性的用法和适用场景是...
html5编写一个手机app的首页
热门推荐
lanseguhui的博客
06-09 2万+
头部和底部固定不动，用fixed固定定位中间用overflow:scroll;<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width&am
html5写一个简单的手机app的设置界面
lanseguhui的博客
06-09 2万+
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <me
html编写一个手机app的的订单页面
lanseguhui的博客
06-09 1万+
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <me
html中设置色彩透明度rgba
lanseguhui的博客
06-01 1万+
  rgba(0,0,0,0)   前三个是rgb值，0~255，0表示最深，r是red,g是green,b是blue   整个颜色由rgb三色配成        a:透明度0-1;        0:完全透明;        1：完全不透明...
html中display:block;布局特性
lanseguhui的博客
05-24 1万+
display:block;块级标签:布局特性:1.独占父级标签的一行2.在不设置宽度时,其内容区域的宽度方向,是自动变化margin+border+padding+content等于父级的内容区域大小3.这种盒子支持所有的css样式block块页面布局中,主要是用来将内容从上到下排列的...
html中盒子模型的基本知识点 盒子大小的计算
lanseguhui的博客
05-23 1万+
盒子模型边框的样式有 solid dashed(虚线) dotted(点线) border-style:solid;边框的宽度:border-style:1px;边框颜色:border-color:red;简写属性:线宽 线型 颜色 例如: border:1px solid red;1.所有带有前缀的样式属性名 都有一个简写属性,前缀就是他们的简写属性名 例如 border-colo...
html编写一个静态的左侧导航页面
lanseguhui的博客
05-25 1万+
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>汽车配件</title> <style type="text/css"> .content{ width: 900
html中如何隐藏一个盒子，然后用hover让其显示
lanseguhui的博客
06-06 1万+
1.第一种：opacity: 0;表示透明度为0；此时盒子看不见 当设置opacity: 1;表示盒子完全显示出来2.第二种：display:none;表示盒子被隐藏不存在，display:block;表示盒子存在，被显示出来个人认为第二种好用，合适各种情景，配合hover使用。...
html中写一个天猫商城的购物模块界面
lanseguhui的博客
05-25 9868
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .main{ width: 10
网页设计基本规范
lanseguhui的博客
06-01 9578
UI设计:  界面设计  交互设计(UE) 平面设计：手册，海报，电商视觉设计，不涉及产品的操作流程，静态，设计区域有限        网页构成：        1.页眉        2.条幅广告区        3.内容区域        4.页脚:  页面的颜色较多，页脚尽量使用深色系，如果使用灰色系是基本通用的，头脚在颜色搭配上要呼应        页面尺寸：        1.页眉  ...
sublime text3 中设置默认浏览器,并且设置快捷键
lanseguhui的博客
05-22 8309
1、打开packageControl   对应快捷键  command + shift + p2、输入install package3、安装插件 SideBarEnhancements4、打开Settings-Default5、找到："default_browser": "", //one of this list: firefox, chrome, canary, chromium, opera...
HTML中定位之绝对定位position:absolute;
lanseguhui的博客
06-01 7872
position: absolute;盒子发生绝对定位，将脱离原来文本，盖在其他盒子之上，进行定位操作时，将按照某一个 父级进行定位，该父级具有以下特点： 1.position 属性是非static一般情况下父级设置相对定位：常作为定位父级标志 position: relative; 2.在文档结构上距离该绝对定位的盒子最近 盒子绝对定位后，其宽高将按照定位...
HTML中padding内边距的基本知识点
lanseguhui的博客
05-23 7835
一般情况下如果标签内部有内容,样式不设置高度,靠内容撑开 内边距:padding 边界到内容和之间的距离padding 简写属性后面的值1值:代表4个方向设置相同的内边距2值:上下 左右3值:上 左右 下4值:上 右 下 左padding :内边距可以让内容远离边界,页面上我们看到的其实是两段内容之间 要设置距离,我们可以利用padding来实现,在盒子不动的情况下让各个内容...
html中display: inline-block;
最新发布
04-28
在 HTML 中，`display: inline-block` 是一种 CSS 属性值，用于将元素呈现为内联块级元素。它可以使元素在同一行内显示，同时具有块级元素的特性，如能够设置宽高和内外边距等。 与 `display: inline` 不同的是，`display: inline-block` 允许元素设置宽高和内外边距，而 `display: inline` 不支持这些属性。与 `display: block` 不同的是，`display: inline-block` 可以使元素在同一行内显示，而 `display: block` 会让元素独占一行。`display: inline-block` 可以用于创建水平排列的元素，比如按钮、图像、输入框等。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值