inline&block&inline-block

Ryan_Li 发布于2019-08-30 13:06 / 2302人阅读

摘要：本笔记主要来源于这篇文章还有我的一些想法杂糅而成另外这是我自己写的一个大家感兴趣的话都可以打开来看看在进入正文之前做一些说明今天的主题是比较主要的三个属性值其实还有许多与表格布局相关的取值除去列表比如使

本笔记主要来源于这篇文章,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可以借鉴到这一点吗...

云服务器 GPU云服务器 inline-block inline_block inline_block间隙 asp &amp&amp逻辑

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/115309.html

tiktok培训班是不是割韭菜

想做Tik Tok做跨境电商的速看！！！谨防被割伤六月份想了解tiktok跨境电商，从网上加了几个自称tiktok运营服务商的人，然后选了一个花了几千块钱，最后教的东西都是一些基础搭建，比如资料修改网络连接下载软件[流泪][泪奔]最关键的是！花了几千块给我看的全是录播课[发怒]所谓的导师，面都没见过[祈祷]学习完一点实质性的东西都没有，这些网上教程一大把我又何必花几千块钱[流泪]吹的天花乱坠，结果...

白马啸西风 2022-09-08 11:06 评论0 收藏0
UCloud优刻得2024双11大促，解锁超值优惠原

创业路上狂奔，业务波动让你心跳加速？短期项目狂潮，数据如山，高并发让你夜不能寐？稳扎稳打经营，更注重服务体验和极致性价比？优刻得年底大促，一降到底！活动截止时间：2024年12月31日无论你是来自电商、金融、医疗还是人工智能、大数据等各个行业领域都可以在这找到适合你的一款云产品！选购指南大放送一文解析如何选购更省钱！活动直达：https://www.ucloud.cn/site/active/ku...

miguel.jiang 2024-11-06 13:38 评论0 收藏0
文档流&amp;文字&amp;CSS常用命令

摘要：文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排注意事项内联元素中有英文单词，流动时宽度不够，英文单词会整体迁移，不会被打断若想打断上述联结，请使用属性想打断的内联元文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排 sho...

zebrayoung 2019-08-30 14:13 评论0 收藏0
文档流&amp;文字&amp;CSS常用命令

摘要：文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排注意事项内联元素中有英文单词，流动时宽度不够，英文单词会整体迁移，不会被打断若想打断上述联结，请使用属性想打断的内联元文档流文档流就是文档内元素流动方向流动方向内联元素从左往右流，宽度不够，之字形，且元素会被截断块元素从上往下流动，一排一排 sho...

pingink 2019-08-01 18:43 评论0 收藏0
UAPI-SDK 示例代码使用

摘要：示例代码使用操作步骤进入产品，选择需要使用的。填写相关字段。查看示例代码，选择语言，即可获得该语言的代码获取账户公私钥替换示例代码中的及复制代码，并在本地运行，即可获得相应的查询结果。SDK 示例代码使用操作步骤Step1：进入UAPI产品，选择需要使用的API。Step2：填写相关字段。以获取弹性IP信息-DescribeEIP为例，查询账户中北京二地域某一项目的EIP资源列表。Step...

ernest.wang 2022-07-12 11:50 评论0 收藏0