• 关于 html设置行内元素 的搜索结果

回答

HTML <div class="d1"> <div class="d2">hhhh</div> </div> <button class="but">d1变成inline-block</button> CSS: *{padding:0;margin:0;} .d1{} .d2{position:absolute;background:red;} .but{margin-top:50px;} 默认情况下,d1元素的display属性为block),d1元素display属性为block,是一个块级别的元素,没有显式的设置width和height,那么其元素宽度高度为子元素的高度决定。同时其子运算d2设置了position为absoulte,脱离了正常的文档流,其放置位置的参考元素为根元素(因为其父元素的position为默认值static,不能作为定位参考元素),其不参与父元素实际宽高的计算,但是没有设置top、left偏移量,所以其呆在d1元素的左上角的位置。d1计算出的高度为0,并是一个块级元素,所以button元素作为行内替换元素(和img类似)通过设置margin-top为50px后,放置在d1元素下方50px处。 当将d1元素的display属性为inline-block,其显示为一个行内块元素(好比是一个img元素),那么其和button行内元素将放在一行显示。d1元素形成一个行内框,button也形成一个行内框,行内替换元素可以应用padding,margin等属性d1和button元素形成一个行框,它们的行框高度的计算由最高元素的上外边界和最低元素的下外边界构成,所以你看到的效果为d1元素出现在button元素的前面,并且和顶部有50px的距离 同时还能看到d1元素在button元素的下面,这是因为d1元素的高度是0,行内元素的最低端要和文本行的基线对齐~~你为d1在display:inline-block的情况下,设置其vertical-align的不同属性你就其会出现在行垂直方向的不同位置 为了更好的说明回答,补充如下: <span style="font-size:2em">ABCDEFG</span><!--加大行内元素的显示字体大小--> <div style="display:inline-block" id="d1"> <div id="d2" style="position:absolute;background-color:red">HHHH</div> </div> 以上HTML和CSS配置后,可以看到HHHH显示再ABCDEFG行内元素行的下面。原因在于div#d1为显示为一个行内块元素,其默认的vertical-align属性值为baseline,也就是div#d1将和其所在行的baseline对齐,但是div#d2的position为absolute,脱离正常的文档流渲染。导致div#d1内部没有文本,没有baseline,高度为0,那么div#d1的底端和span的baseline对齐,div#d2的position为absolute但又没有设置top及left值(也就是为默认值auto),就还是呆在div#d1内部的左上角的位置。不加span部分也是如此~~~~如改成如下 <span style="font-size:2em">ABCDEFG</span><!--加大行内元素的显示字体大小--> <div style="display:inline-block" id="d1"> IJKLMN <div id="d2" style="position:absolute;background-color:red">HHHH</div> </div> div#d1就有baseline,"IJKLMN"形成的文本行的baseline和span的对齐,div#d2作为块级元素换行

杨冬芳 2019-12-02 02:39:44 0 浏览量 回答数 0

回答

LZ的问题: 一切皆为框div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容,即“块框”。与之相反,span 和 strong 等元素称为“行内元素”,这是因为它们的内容显示在行中,即“行内框”。您可以使用 display 属性改变生成的框的类型。这意味着,通过将 display 属性设置为 block,可以让行内元素(比如 元素)表现得像块级元素一样。还可以通过把 display 设置为 none,让生成的元素根本没有框。这样的话,该框及其所有内容就不再显示,不占用文档中的空间。——《W3School:CSS 定位》块框和行内框有明确的包含关系: 块框可以包含块框行内框可以包含行内框块框可以包含行内框行内框不应该包含块框(若违法这条规则,结果很复杂,但绝对难以达成想要的效果)更多区别: block元素默认宽度自适应于外层,而inline元素宽度自适应于内部block元素默认从上往下铺排,inline元素默认从左往右铺排block元素可以设置上下margin,inline元素不可以至于float,它主要是为了满足环绕的效果,请阅读:CSS float浮动的深入研究、详解及拓展(一)、(二)。 由于LZ缺的知识点太多,这里实在是写不完。还是建议完成w3school的相关课程学习,和codecademy的CSS Positioning类目下的课程。 如果LZ有英文阅读能力,在实践后可以以这篇文章来指导知识的深化:《【译】理解 CSS 规范》 下面主要是反驳“块级元素前后会带有换行符”的误导性观点。 CSS的问题,越基础,就越容易出现误解。 “块级元素前后会带有换行符”这种说法应该是来自于实战,用类比的方式做了相应知识点的内化。读到这句话,大家也可以很轻松地联想起word之类的文本排版软件的操作:Q: 如果我有文字段A和文字段B,我想让A和B左右不交叠,折开一行,我该怎么办?A: 按回车。Q: 如果我有文字段C和图片D,我想让D不出现在C中间,从C下延排起,我该怎么办?A: 按回车。 是这样的吗?把word之类的文本排版软件的思维带到HTML里面来,下面的思维应该很常见: 在两个元素之间死命摁回车,想让两个元素上下隔得远一些 标签放在任意两个元素之间,想让两个元素上下隔得远一些。http://jsfiddle.net/humphry/3Lk2Q/点击预览 我敢相信到现在都有人是用(或者另外一个有高度的 标签)而非margin来做的垂直间隔。用Word的方式来理解HTML,用来做间隔,等到试验出来用font-size和line-height去控制的高度,以调节两个div之间的垂直距离的时候,就彻彻底底被带到沟里去了。(《你真的了解HTML吗》)“块级元素前后会带有换行符”的误导性大于它的帮助,LZ甚至已经问出了“如果是display:inline;的话那元素没有换行符就会全挤在一行上是吗?”这样的问题。 换行符不是重点,重点是盒子。 要正确理解CSS排版中的这个基础部分,得先从文档流开始。 CSS为了达到日常排版的需求,给予了文档流以现实依据:我们的书写/阅读习惯:这里就展现了从右向左,从上到到下的语言书写。因此跟这个世界的现象一致,文档流的顺序不总是从左往右从上到下,一系列属性可以改变它,不过我们这里不谈这个,我们只谈常规流。 CSS中的文档流中的两种元素,行内框的堆叠方向对应着我们的书写顺序,而块框则默认从上往下堆叠: 行内框——inline——从左往右,从上往下块框——block——从上往下换行在这个顺序中重不重要?不重要,这个过程中,重点是框往哪个方向堆叠。 更加深入的常规流介绍:《w3help:常规流( Normal flow )》 前端是一个由实践发展起的方向,相关知识点的理解大家经常用的是类比,这很正常。盒子堆叠的机制用类比,说成是换行符,对不对呢? 对也不对。说对,是因为,让盒子不左右交叠、而是上下比邻的机制跟文本排版软件里面的回车分割确实相似;说不对,是因为,如果理解到了盒子的层面,理解了块级元素和行内元素是如何按照文档流方向进行排版,理解了float元素是如何做到环绕,理解了浮动和清除浮动,就会明白,“块级元素天生自带换行符”的说法带有根深蒂固的Word排版的思想,也很有误导性。 最好的理解CSS和HTML的办法,是用CSS和HTML的方式进行思考,而不是用其他的经验来套。这就像是英语口语,有英语思维,才能流利地表达。 更新:感谢P酱,这里将容易混淆的部分修改了。“行内框不应该包含块框”是CSS相关,标签无关的,“默认是行内的元素不应该包含默认是块级的元素”跟DTD声明和浏览器有关。但总体来说,破坏这两条规则很难达成想要的效果。

a123456678 2019-12-02 02:21:19 0 浏览量 回答数 0

问题

IE6滴FUCK-BUG-HTML报错

montos 2020-05-31 22:59:24 0 浏览量 回答数 1

中小企业与商标那些事

企业品牌保护从商标开始,如何挑选一家靠谱的渠道注册商标,解读品牌权益维护的重要节点。

回答

Q1:浮动和定位本就属于CSS两大“定位”技术,浮动之后用绝对定位是什么鬼?一般来说浮动和定位是搭配使用的。举个例子,float可以用来布局,类似2列布局3列布局之类的,而定位则多用来实现布局内部视图模块的多样性,比如轮播图底部的轮播控制按钮。Q2:《CSS权威指南》浮动章节有详细记载。浮动元素的确脱离正常文档流,这里且不说BFC,像你这种浮动方式的确div1会在div2上面,但对于文本框而言,它会避开浮动的元素,也就是你说的div2里面内容会挤到下面,而不是正常被正常左浮动的div1覆盖。这是浏览器对标准的执行,建议多看一些基础书,当然最好是W3C的草案。Q3: clear属性木有bottom...在HTML中,每个元素都是一个相对独立的个体,这些元素按照语言习惯(一般是从左往右)排列,能放在一行的就不会换行,当一行实在放不下时默认会另起一行,所以一个浮动元素设置clear应该明确指明它的左边或右边不能有浮动元素(相当于有浮动元素的那一行已经满了,告诉浏览器从第二行开始渲染元素)所以clear的bottom值是没有必要存在的。存手打,个人意见,有错误欢迎指正。------10/14 更新 --------最近有了解一些关于z-index的知识,发现可以回答你q2的问题,z-index相当于在z轴对css视图的层次进行了描述。详情可以看这里这里只贴出你这个问题的分析-浏览器的部分绘制顺序:1 根元素的背景与边框2 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序堆叠3 浮动块元素4 常规流中的后代行内元素5 后代中的定位元素按照它们在 HTML 中出现的顺序堆叠所以浏览器先绘制浮动的div1,接着绘制常规流中的后代行内元素,也就是你这里面所说的div2/div3的内容(这个内容姑且认为是文本内容,也就是行内元素),对于div2/3的行内元素,因为已经被div1占据了位子,只能避开div1的内容进行内容的绘制(但是div2/3的背景是在div1绘制之前绘制的,所以和div1发生重叠,见顺序2和3)。不知你有没有听懂我的意思,总之对于浏览器来说,除了对水平面的元素进行放置计算外,对于z轴的渲染顺序也得明白,建议你多看多写写实验一下。有疑意欢迎提出。

杨冬芳 2019-12-02 02:34:13 0 浏览量 回答数 0

回答

简化的答案是span里面字体的“深度”减去所在行框的“深度” 这个高度还真的不太好计算,分不同的字体,因为不同字体的的baseline的位置不一样,同样字号的不同字体大小也不一样(标准里都没说怎么计算)。行内元素的位置根据vertical-align对齐所在的行框。所以要计算行内元素的位置就要先计算行框的高度,然后根据vertical-algn确定行内元素的位置,再根据元素的大小计算覆盖的大小。覆盖的高度理论上可以计算,可是涉及一些上述值的不同(而且未知),就显得没办法计算了。告诉你计算方法,自己想办法实现。 先看看如何计算行框(line box)的高度。display是inline,inline-block等这样的元素,他们其实也是一个“block”,也有一个高度(见后面)。为了排版这些元素,CSS规定了一个行框(line box),这个行框就是一个正常的类似div的display:block的元素,行内元素就这样从左到右“堆”在行框里面,行框的高度通过某种方式计算。 CSS2.1 是这样计算的: 1.计算所有行内元素的高度。inline-box的高度就是这个元素的margin box的高度,就是margin外边缘的高度。inline这种“block”的高度,就是line-height设置的高度,而不管其中的元素占用了多少位置。就像给block设置高度之后,即使无论其中有多少元素,block就是占用那么大的高度。 2.每个元素根据设置的vertical-align放入这个行框。其实这个与行框的高度有关,这是一个相互依赖的关系,可能有多个解,尽量使得行框的高度最小。但是这样也不能保证只有一个解,所以出现这种情况就真的看浏览器的实现了。 3.行框的高度就是最上“block”的上边缘与最下"block"下边缘的差值。 可见,对于inline的元素,其高度就是line-height设置的高度,而不管其中字体到底有多大。因此,span占用的高度就是 line-height设置的 10px;无论其中的字体是多大。于是行框的高度就是10px。那么如果字体大于10px,就会出现类似div设置了一个较小的高度,其中内容又太多,overflow:visible的效果。如下效果,hellog xxmmggg 的位置不同,是因为他们的vertical-align不同(上述第二条)。后面的block就是display:block设置了一个小的高度的结果。 再说这个 vertical-align可取的值其他值还好吧(不常用或是可计算),但是有个baseline,而且是默认值。对于字,根据字体可能位置不同。inline-table的baseline是其中第一行字的baseline,inline-block 的baseline是其中最后一行字的baseline,如果其中没有字,其baseline就是包括margin在内的这个元素的下边缘。baseline 到字体下边缘的高度叫做字的“深度”。因此,楼主的例子的话,覆盖的高度应该是span里面字体的“深度”减去所在行框的“深度”(当然还要考虑有多行的问题)。 字的“深度”取决与字体字号,行框的深度取决于其中的内容。。。。只说 CSS2.1标准,不说浏览器的兼容性。。涉及太多写不下去了,先写到这吧 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width"> <title>JS Bin</title> <style> span{ font-size: 50px; border: 1px solid red; line-height:10px; } .baseline { vertical-align:baseline;} .middle {vertical-align:middle;} .block {display:inline-block;height:10px;vertical-align:middle} div{ border:1px solid; } </style> </head> <body> <div>world</div> <div>world</div> <div>world</div> <div>world</div> <div>world</div> 参考位置 xxmmgg <span class="baseline">hellog</span><span class="middle">xxmmggg</span><div>world</div> <div>world</div> <div>world</div> <div>world</div> <div>world</div> <span class="block">block</span> <div>world</div> <div>world</div> <div>world</div> <div>world</div> </body> </html>

杨冬芳 2019-12-02 02:41:59 0 浏览量 回答数 0

问题

浏览器是怎么计算行内元素高度的

杨冬芳 2019-12-01 19:38:25 844 浏览量 回答数 1

问题

浏览器是怎么计算行内元素高度的?

a123456678 2019-12-01 19:32:19 780 浏览量 回答数 2

问题

【精品问答】前端技术1000个问答

茶什i 2019-12-01 22:05:13 206 浏览量 回答数 0

回答

png24位的图片在iE6浏览器上出现背景 解决方案:做成PNG8,也可以引用一段脚本处理. 浏览器默认的margin和padding不同 解决方案:加一个全局的 *{margin:0;padding:0;} 来统一。 IE6双边距bug:在IE6下,如果对元素设置了浮动,同时又设置了margin-left或margin-right,margin值会加倍。 这种情况之下IE会产生20px的距离 解决方案:在float的标签样式控制中加入 _display:inline; 将其转化为行内属性。( _ 这个符号只有ie6会识别) 渐进识别的方式,从总体中逐渐排除局部。 首先,巧妙的使用“\9”这一标记,将IE游览器从所有情况中分离出来。 接着,再次使用 "+" 将IE8和IE7、IE6分离开来,这样IE8已经独立识别。 5.IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用 getAttribute() 获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性 解决方法:统一通过getAttribute()获取自定义属性 IE下,event对象有 x、y 属性,但是没有 pageX、pageY属性; Firefox下,event对象有 pageX、pageY 属性,但是没有 x、y 属性 解决方法:(条件注释)缺点是在IE浏览器下可能会增加额外的HTTP请求数。 Chrome 中文界面下默认会将小于 12px 的文本强制按照 12px 显示 解决方法:可通过加入 CSS 属性 -webkit-text-size-adjust: none; 解决 超链接访问过后 hover 样式就不出现了,被点击访问过的超链接样式不在具有 hover 和 active 了 解决方法:改变CSS属性的排列顺序 L-V-H-A 怪异模式问题:漏写 DTD 声明,Firefox 仍然会按照标准模式来解析网页,但在 IE 中会触发怪异模式。为避免怪异模式给我们带来不必要的麻烦,最好养成书写 DTD 声明的好习惯。现在可以使用html5 推荐的写法: 上下margin重合问题:ie和ff都存在,相邻的两个div的margin-left和margin-right不会重合,但是margin-top和margin-bottom却会发生重合。 解决方法:养成良好的代码编写习惯,同时采用margin-top或者同时采用margin-bottom。 ie6对png图片格式支持不好 解决方案:引用一段脚本处理

小柯卡力多 2019-12-02 03:21:58 0 浏览量 回答数 0

问题

【CSS学习全家桶】416道CSS热门问题,阿里百位技术专家答疑解惑

管理贝贝 2019-12-01 20:07:24 8458 浏览量 回答数 1
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 云栖号物联网 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站 云栖号弹性计算 阿里云云栖号 云栖号案例 云栖号直播