inline-block

控制台-代码：

PS：inline-block是让元素以内联形式存在，也就是不是块级，但是表现起来(又具有块级元素的高度)--也就是可以调高度(margin或者padding,height)

二· 如果是inline的话，也就是内联，inline是只有水平的宽度可以调的，没有高度，任何的属性调高度都无效

三。如果不用上述两个的话,div作为块级元素，会占整个水平块，而inline-block则让他只占住自己元素所在的空间。

CSS之inline和inline-block的更多相关文章

  1. display:block、display:inline与displayinline:block的概念和区别

    总体概念 block和inline这两个概念是简略的说法,完整确切的说应该是 block-level elements (块级元素) 和 inline elements (内联元素).block元素通 ...

  2. 当inline元素包裹block元素时会发生什么

    经常有图片链接写法如下: <a href="www.baidu.com"><img src="baidu.jpg" /></a&g ...

  3. css 内联元素inline 行框全解

    首先看一篇文章: CSS框模型:一切皆为框 — 从行框说起 一 行框 看图说话 上图代表了框模型中的行框.line-height 属性设置行间的距离(行高).该属性会影响行框的布局.在应用到一个块级元 ...

  4. display:inline与display:block——行内元素显示与块级元素显示

    display:inline 的作用是设置对象做为行内元素显示,inline是内联对象的默认值(ps:内联对象就是不自动产生换行的元素,比如span) 而我们一般用的div是块级元素,默认displa ...

  5. display:inline 跟 display:block 跟 display:inline-block区别

    我来说句人话吧.display:inline; 内联元素,简单来说就是在同一行显示.display:block; 块级元素,简单来说就是就是有换行,会换到第二行.display:inline-bloc ...

  6. 多个inline元素、block元素、inline-block元素在父容器中的换行情况

    1.首先看inine元素的换行情况 <style> *{padding:0;margin:0} div.wrap{width:200px;height:200px;border:1px s ...

  7. css 小知识点：inline/inline-block/line-height

    inline: 此元素会被显示为内联元素,元素前后没有换行符.因此:无法设置宽度和高度- inline-block: 行内块元素.元素前后没有换行符(CSS2.1 新增的值) 用通俗的话讲,就是不独占 ...

  8. inline元素、block元素、inline-block元素

    inline 内联元素:是不可以控制宽和高.margin等:并且在同一行显示,不换行,直到该行排满. block 块级元素:是可以控制宽和高.margin等,并且会换行.块级对象元素会单独占一行显示, ...

  9. block与inline，inline和inline-block，块级和行内元素，行内替换和行内非替换元素

    block:块级元素默认display属性为block:无论块内内容有多少,总是占满一行: inline:行内元素默认display属性为inline:只占据块内的内容的大小,不会占满一整行: inl ...

  10. 横向排列两个多个div盒子的方法(CSS浮动清除float-clear/inline)/办法

    最近在做一个div css切割,昨晚发现了长期以来一直无记录下来的问题!关于兼容IE跟FF的float属性.趁现在还清醒赶紧记下笔记先:一.并排在一行的两个div样式有这种情况:ie或者ff下对于子d ...

随机推荐

  1. cap-insets

    原文链接 在很多编程语言中都有resizable image这样的概念,比如android中的NinePatch graphic ,css3中的border image,微软的Nine-Grid Re ...

  2. Chrome-headless 模式，没有UI界面的自动化UI测试

    如果在本机执行UI自动化脚本,打开的浏览器总是会不同程度的影响你做别的事情,那么我们可以采用 无界面运行我们的UI自动化,这种模式下运行脚本并不会真正地打开浏览器,整个过程都是在后台执行的.爽歪歪. ...

  3. Elasticsearch 因拷贝多余的jar到lib库导致无法启动的问题

    因为需要测试,无意中拷贝了一个netty-buffer-4.1.16.Final.jar包放到es的lib目录下,晚上回家启动es的时候发现启动不起来了.检查日志发现如下错误. 其中有一句关键语句 C ...

  4. 神奇的树上启发式合并 (dsu on tree)

    参考资料 https://www.cnblogs.com/zhoushuyu/p/9069164.html https://www.cnblogs.com/candy99/p/dsuontree.ht ...

  5. js小仓库

    1.千分位分隔符 const toDecimalMark = num => num.toLocaleString("en-US"); console.log(toDecima ...

  6. 漫谈TCPIP协议原理

    一.每次说道TCPIP协议,有能说会道者,总爱说三次握手,什么意思? 顾名思义,假设有两个机器A和B 1.当A发送给B一个包的时候,B接收到了,这个时候,B有两个选择,要么将包数据放入缓存,等待处理, ...

  7. lxml.html 中几种解析器的区别（转）

    原文地址:https://blog.csdn.net/chroming/article/details/77104874

  8. 页面多个 swiper 互补冲突

    方法一:精简版 $(".swiper-container").each(function(){ $(this).swiper({ loop: true, initialSlide ...

  9. oracle--dump->buffer cache (dump 深入实践一)

    1,dump 取值 ALTER SESSION SET EVENTS 'immediate trace name buffers level n'; 只转储buffer header. 在level ...

  10. 获取app应用的包名

    1.获取哪个app包名,就打开哪个app 2.在dos窗口下输入: adb shell "dumpsys window | grep mCurrentFocus" 获取包名