CSS随笔

作者: 抱着熊喵啃什么 | 来源:发表于2016-06-28 10:38 被阅读21次

inline-block
在CSS中通过display:inline-block对一个对象指定inline-block属性,可以将对象呈递为内联对象,但是对象的内容作为块对象呈递。
在CSS中,块级对象元素会单独占一行显示,多个block元素会各自新起一行,并且可以设置width,height属性;而内联对象元素前后不会产生换行,一系列inline元素都在一行内显示,直到该行排满,对inline元素设置width,height属性无效。
我们有个时候既希望元素具有宽度高度特性,又具有同行特性,这个时候我们可以使用inline-block。在CSS中通过display:inline-block对一个对象指定inline-block属性,简单来说就是将对象呈现为inline对象,但是对象的内容作为block对象呈现。之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值,使其既具有block的宽度高度特性又具有inline的同行特性。

display:inline-block元素间的换行符空格间隙问题:
解决办法一:父元素设置fontsize:0px 子元素设置正常文字大小
解决办法二:使用letter-spacing属性,一般设置为-4px即可,具体参见张鑫旭的博客

margin的值是不会和左右宽度耦合的,只会垂直宽度合并

通过min-width设定一定的值,解决Firefox浏览器窗口极端情况下的效果。

相关文章

  • CSS随笔

    左右圆角实现 微信浏览器,点击a标签出现蓝色的选择框,如何去除

  • CSS随笔

    inline-block在CSS中通过display:inline-block对一个对象指定inline-bloc...

  • css随笔

    字体间隔中文:letter-space英文:word-space 清除ios网页中的点击高亮效果 table合并边...

  • 你不知道css特性

    1. css做表单的验证 随笔记录: 获取url中的hash值 location.hash 行内元素span, ...

  • js css随笔

    感觉自己css与js滥的一匹,在这写点乱七八糟的吧,等写完再整理。 jQuery获取值("#aaa').val('...

  • html css随笔

    在学习CSS背景过程中,遇到一个问题就是display属性。1.display有三种属性(block)(inlin...

  • CSS随笔浅析

    CSS的编写格式是键值对形式的,比如color: red;background-color: blue;font-...

  • css布局随笔

    学习地址:http://zh.learnlayout.com/display.html 1,把display设置成...

  • CSS学习随笔

    必考:两种盒模型分别说一下。IE盒模型border-box和W3C盒模型content-box。区别在于IE的co...

  • Css内容复习随笔

    Em 基于父元素的字体大小 : :: 单冒号 双冒号区别 低版本浏览器支持: 高版本都支持默认将:变为::, h5...

网友评论

      本文标题:CSS随笔

      本文链接:https://www.haomeiwen.com/subject/csktjttx.html