css中大div中的块级元素转为内联块产生的问题

来源：互联网发布：金汇宝软件编辑：程序博客网时间：2024/06/08 14:21

问题一:块级元素变为内连元素之后的间隙问题

这个问题也是一个很经典的问题,每一个块级元素,变为内联块的时候,中间都会产生一个间隙,如下图所示

代码:

    <style>        div{            display: inline-block;            width: 100px;            height: 100px;            border: 1px solid;        }        .big-box{            width: 500px;            height: 200px;            padding: 20px 20px;        }    </style></head><body><div class="big-box">    <div class="box1"></div>    <div class="box1"></div>    <div class="box1"></div>

这个问题产生的原因是大div的font-size;它将下图的回车也作为大div的内容,它是占位置的,所以才有间据,

解决方法是设置它的font-size = 0或者说将小div之间的回车间隙删除掉就好了,或者说将小div的margin设为负值,强制要求他到对应位置

问题二:当内联块元素(从块级元素转换来的)中含有内连元素或者文字的时候,对齐方式会发生很大的变化

代码:

    <style>        div{            display: inline-block;            width: 100px;            height: 100px;            border: 1px solid;        }        .big-box{            width: 500px;            height: 200px;            padding: 20px 20px;        }    </style></head><body><div class="big-box">    <div class="box1">我是div1</div>    <div class="box1">        我是页面中的第二个div    </div>    <div class="box1"></div></div>

效果

原因:是因为块级元素在变为内连块的时候,它的vertical-align属性值为baseline(基线),垂直反向的对齐方式改变了

解决方式:只要设定它的垂直方式不是baseline都可以了,top,bottom都可以,我个人经常设置为top

那么什么是基线呢,一张图说明白

阅读全文

0 0