inline&block&inline-block

2024年1月29日 118次阅读 来源: 南赐

本笔记主要来源于这篇文章,w3school-cn-display,mdn-en-display还有我的一些想法杂糅而成,另外这是我自己写的一个Demo,大家感兴趣的话都可以打开来看看.

在进入正文之前,做一些说明.今天的主题是比较display主要的三个属性值block,inline,inline-block.其实display还有flex,inline-flex,grid,inline-grid,ruby,ruby-base,ruby-text...许多与表格布局相关的取值(除去列表list-item)比如run-in,table,table-caption,table-cell,table-column,table-column-group,table-row,table-row-group...;使用较少的inherit,initial,unset;已经移除的compact和marker等等...但是本文只涉及最常用的那三个取值.

display属性

w3school表明该属性用于定义建立布局时元素生成的显示框类型,规定元素应该生成的框类型;mdn表明该属性指定了元素的渲染盒子类型,在HTML文档内,默认值是从HTML规范描述的行为或者浏览器/用户样式表里取得.XML文档内默认取值是inline,对于HTML也一样.没有继承性,指定的属性值在非static定位元素,浮动元素,根元素情况下会失效,属性值变换过程当中没有动画.

块级元素

有如下特点:

  • 另起一行开始,使得元素前后会有换行符.

  • 宽高(分别默认取值auto,相对于父容器的100%),行高,上下边距都可以控制.

  • 块级元素通常作为其他元素的容器,可以容纳其他内联和块级元素.

常见块级标签:

div,p,pre,h1...h6,table,address,blockquote,dl,form,hr,ol,ul,li,noscript等等

内联元素

  • 元素前后没有换行符,和其他元素都在一行里面.

  • 宽高取决于所容纳文字或者图片的宽高,行高,上下边距不可改变.

  • 有行内框,围绕这个框框有许多内联特性比如vertical-align,line-height等等.

  • 一般都是基于semantic的元素,只能容纳文本或者其他内联元素.

常见内联标签

a,img,input,button,em,strong,br,sub,sup,script,map,del,iframe
,strike,acronym,small,abbr,label,select,textarea等等

inline&block&inline-block

inline&block

display:inline就是将元素显示为行内元素,display:block就是将元素显示为块级元素.
两者主要用途如下:让一个inline元素从新行开始,让块级元素和其他元素保持在同行,控制inline元素的宽度–可用于导航条,控制inline元素的高度,无需设定宽度即可为一个块级元素设置与文字等宽的背景色.

inline-block

元素生成一个和周围内容一起流动的块级盒子,看起来就像一个行内盒子,和旁边的内联元素出现在同一行内,允许空格.也就是说,inline-block的元素可以设置高宽等块级元素才具有的特征.此时,若想使得该行所有元素高度相等,需要设置vertical-align: top使得顶部对齐.

兼容性

主要是对IE做兼容:
第一种办法
先使用display: inline-block触发块级盒子,然后再定义display: inline让块级元素呈现为内联对象.注意这两步要分离在先后两个不同的rule里面:

.ie-inline-block {
    display: inline-block;
    width: 100%;
    ...
}
.ie-inline-block {
    display: inline;
}

第二种办法
首先作为内联元素呈现,然后再触发块级盒子,要做的事情和第一种办法相同,但是顺序相反:

.ie-inline-block {
    display: inline;
    zoom: 1;
    ...
}

给segmentfault的一些反馈

  • 记笔记能不能也增加个像写文章,提问题那样的标签选项,方便整理分类.

  • firefox或者chrome Command T之后新标签能不能就加到当前标签后面,加到最后搞得我有点难受…T_T QQ浏览器就可以个性化定制到这一点,其实这个默认无法更改就行了还用什么定制,本来就应该人性化一点,没想到chrome,firefox不是这样…

  • sefmentfault写文章,记笔记,提问题都有自动保存的功能很好,但是会不会带来较大的服务器压力,,,如果有个快捷键(不要像CSDN上的button,因为全屏撰写的话十分不方便..)的话比如Command/Ctrl + Shift + S就感觉很棒.

  • 还有segmentfault记笔记的markdown很不错(写文章好像是正常模样),各种语法都有相应的样式提示,’即写即得’蛮不错,比csdn要好,我转移到segmentfault的原因有这一点;还有记笔记,提问题,写文章都在一个社区挺好的…氛围不错;csdn和cnblogs对于前端来说,好像氛围都比较差,不过还是经常看得到大神们的文章和讨论,这一点甚是兴奋;不过sf提问题现在不太成熟,好像有时候提问者和回答者并不是很专业,态度也都比较随便,不过我有时候也这样…

  • csdn博客有一点做得很好,那就是排名积分机制.不知道segmentfault可以借鉴到这一点吗…

    原文作者：南赐
    原文地址: https://segmentfault.com/a/1190000005691442
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞