为什么display:block block;没有效果?
来源:蜘蛛抓取(WebSpider)
时间:2019-07-19 08:43
标签:
display:block
-
根据CSS规范的规定每一个网页元素都有一个display属性,用于确定该元素的类型每一个元素都有默认的display属性值,比如div元素它的默认display属性值为“block”,成为“块级”元素(block-level);而span元素的默认display属性值为“inline”称为“行内”元素。
-
动占据一定矩形空间可以通过设置高度、宽度、内外边距等属性,来调整的这个矩形的样孓;
自己的独立空间它是依附于其他块级元素存在的,因此对行内元素设置高度、宽度、内外边距等属性,都是无效的
例子: 链接 a え素,在默认情况下是是“行内元素”因此对a元素设置高度、宽度等属性,都是无效的而比如div,pli,img等默认情况下的display属性值就是“block”所以对于链接a来说只能这样:display:blockblock;强制将它改成块元素。看完概念看代码:
经验内容仅供参考如果您需解决具体问题(尤其法律、医学等领域),建议您详细咨询相关领域专业人士
作者声明:本篇经验系本人依照真实经历原创,未经许可谢绝转载。
displsy:inline-block;顾名思义就是行内块的意思了吔就是说他具血了行内元素的不换行特征,同时也具有块元素的可以设置宽高等特征
inline-block主要的用处是用来处理行內非替换元素的高宽问题的!
行内非替换元素比如span、a等标签,正常情况下士不能设置宽高的加上该属性之后,就可以触发让这类标签表现得如块级元素一样可以设置宽高。
课程设计师 STEAM少儿编程课程设计师 WEB前端(HTML5)开发讲师 WEB前端教学部总监
表示嘚是行内块状元素,img、input在默认情况下即为行内块状元素
行内块状元素的特点是:
既能够设置宽高,又不独自占据一行
(块元素如div、p等,默认情况下能设置宽高但独自占据一行
行元素,如span、strong等默认能够和其他行元素处于同一行,但是不能设置宽高)
作用:将对象呈现为inline对象,但是对象的内容作为block对象呈现之后的内联对象会被排列在同一行内。比如我们可以给一个link(a元素)inline-block属性值使其既具有block的宽度高度特性又具有inline的同行特性。
简单来说就是将对象呈遞为内联对象,但是对象的内容作为块对象呈递旁边的内联对象会被呈递在同一行内,允许空格...