block,inline,inline-block的区别
最近正在复习,紧张地准备几天后的笔试,然后刚好看到这个地方。
block:块级元素,会换行,如div,p,h1~h6,table这些,可以设置宽高;
inline:行内元素,不换行,挤在一行显示,如span,a,i,em,strong,mark,input,button之类,不能设置宽高。
inline-block:行内块级元素,本质还是块级元素,可以设置宽高,只不过多了一个挤在一行显示的特性,但是这种特性会有一个问题,就是会有一个默认间距。
下面贴个代码:
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>测试界面</title>
6 <style type="text/css">
7 *{
8 padding: 0;
9 margin: 0;
10 }
11
12 .div{
13 display:inline-block;
14 width: 100px;
15 height: 100px;
16 background-color: aqua;
17 text-align: center;
18 line-height: 100px;
19 font-size: 25px;
20 border:1px solid #000;
21 }
22
23 </style>
24 </head>
25 <body>
26 <div class="div">111</div>
27 <div class="div">222</div>
28 <div class="div">333</div>
29
30 </body>
31 </html>
可以看到是有默认间隙的,而要去除这种间隙的方法我目前知道两种,一种是在其父级容器中将font-size设置为0,另外一种则是将自身设置为浮动;选用任意一种方法后,默认间距都消失不见了。
另外还有一个很容易被忽略的问题,就是对于行内元素来说,无论是padding还是margin,都是只有左右的真实有效,而上下的是无效的。把上面代码改一下,换成一堆span元素,并设置每个元素的margin为30px;去掉line-height,代码如下:
1 .span{
2 margin: 30px;
3 width: 100px;
4 height: 100px;
5 background-color: aqua;
6 text-align: center;
7 font-size: 25px;
8 border:1px solid #000;
9 }
可以看到最后的效果是这样的:
block,inline,inline-block的区别相关推荐
- display:inline、block、inline-block的区别
display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都可控制: 宽度缺省是它的容器的100%,除非设定一个宽度 <div& ...
- display:inline、block、inline-block的区别以及该死的ie6兼容问题
2019独角兽企业重金招聘Python工程师标准>>> display:block就是将元素显示为块级元素. block元素的特点是: 总是在新行上开始: 高度,行高以及顶和底边距都 ...
- [css] inline、block、inline-block这三个属性值有什么区别?
[css] inline.block.inline-block这三个属性值有什么区别? inline: 行内元素,元素不独占一行,不可以修改宽高 block: 块级元素,元素独占一行,可以修改宽高 i ...
- display:inline-block,block,inline的区别与用法
一.首先要了解什么是块级元素与行级元素 块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margi ...
- html——inline、block与block-inline区别
块级元素 会占领页面的一行,其后多个block元素自动换行. 可以设置width,height,设置了width后同样也占领一行.同样也可以设置 margin与padding属性. ps:常见的块 ...
- block,inline和inline-block概念和区别
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- CSS 中 display 的 block,inline,inline-block 这三个属性的区别
基本概念 1.block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元 ...
- display:inline、block、inline-block
总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...
- block,inline和inlinke-block细节对比
block,inline和inline-block概念和区别 总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 ...
- block、inline和inline-block
block.inline.inline-block 行内元素和块级元素 block inline inline-block 行内元素和块级元素的区别 常见用法 display 案例(简单实现导航栏) ...
最新文章
- anaconda创建环境
- Android之自定义控件显示点赞用户并通过用户名称进入该用户主页的功能
- tomcat 编译版本
- [转]linq to sql (Group By/Having/Count/Sum/Min/Max/Avg操作符)
- Android PowerImageView实现,可以播放动画的强大ImageView
- CF758 D. Ability To Convert 细节处理字符串
- 算法- 分治算法(实现汉诺塔)
- 好程序员前端教程之JavaScript闭包和匿名函数的关系详解...
- UI学习笔记---EasyUI panel插件使用---03
- 哈佛机器人,学会了轻功水上漂
- dbeaver导出建表语句_「mysql基础」MySQL常用语句命令总结(文字版)
- PHP 空数组转Json字符串的问题
- 怎么使用ABBYY中的Bates编号
- 爱词霸翻译接口 破解
- “无法访问 您可能没有权限使用网络资源”解决办法
- 强化学习中 on-policy与off-policy 的理解;如何区分on-policy 与 off-policy;RL更新策略、policy结构总结
- 别让职场形象毁了你的职场前程
- java网课|内部类
- 仪器仪表制造业采购数字化方案:集中采购系统为供采双方打造更高效运转平台
- 2022-2028全球军事高空无线电干扰系统行业调研及趋势分析报告