首页 > 使用before伪元素出现的问题?

使用before伪元素出现的问题?

before,after会占据元素里边的空间,我一直以为是占据外边的空间。
如果不用nowrap元素就会换行是为什么?
为什么设置inline-block不会包含整个标签了?
怎样让他全部都包含到?
伪元素为什么用不了百分比设置高度,宽度却可以用百分比?
考虑到自适应手机端这样做是不是最好的选择?

<div class="wrap_column column_05">
            <h2 class="til">哈哈哈啊哈哈哈哈哈哈哈哈</h2>
</div>
.column_05,.column_06{
    text-align: center;
}
.column_05 .til,.column_06 .til{
    display: inline-block;
    position: relative;
    text-align: center;
    font-size: 2.4rem;
    color: #16003a;
    margin: 20px auto;
    line-height: 25px;
    text-align: center;
    white-space: nowrap;
}
.column_05 .til:before,.column_06 .til:before{
    content: "";
    display: inline-block;
    width: 10%;
    height: 20px;
    margin-left: 5%;
    background: url(../images/title_before.png) no-repeat;
    background-size: contain;
}
.column_05 .til:after,.column_06 .til:after{
    content: "";
    margin-right: 5%;
    display: inline-block;
    width: 10%;
    height: 20px;
    background: url(../images/title_after.png) no-repeat;
    background-size: contain;
}

white-space的默认值是normal,而且父元素有具体高度的话,伪元素可以用百分比高度啊,而且你说的那个不能包含全部标签应该是由于white-space引起的而不是display,自己测试下吧。


如果不用nowrap元素就会换行是为什么?

no wrap 翻译过来就是不换行。一个容器宽度不够,自然要换行。强行不换行,自然要超出。

为什么设置inline-block不会包含整个标签了?

这个跟inline-block没有关系,真正的原因是容器宽度不够。为什么设置成block就可以呢?因为block元素默认的宽度是100%。

怎样让他全部都包含到?

让元素变宽

伪元素为什么用不了百分比设置高度,宽度却可以用百分比?

高度宽度都可以使用百分比。如果父元素本身没有设置高度,是由子元素撑起来的,使用百分比高度的子元素是不会有正确的高度。但是宽度又可以,我猜测是,宽度的改变只影响本行的渲染与重绘,而高度会导致整个页面渲染与重绘。so...

考虑到自适应手机端这样做是不是最好的选择?

肯定不是好的选择,而且我觉得是一个糟糕的写法。我觉得应该使用非百分比写法设置伪元素的高度与宽度;如果使用百分比的写法,应该给外层的容器设置一个宽和高。

【热门文章】
【热门文章】