inline&block&inline-block
本笔记主要来源于这篇文章,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可以借鉴到这一点吗...
关键字：css, 元素, inline, 内联
版权声明
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处。如若内容有涉嫌抄袭侵权/违法违规/事实不符，请点击 举报 进行投诉反馈！
