CSS利用display: inline-block进行初步布局

最新推荐文章于 2023-06-02 10:38:00 发布

k7opi

最新推荐文章于 2023-06-02 10:38:00 发布

阅读量205

点赞数 1

分类专栏： CSS

本文链接：https://blog.csdn.net/qq_44721908/article/details/97152708

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

一、display属性值

1、inline（行内元素）:
使元素变成行内元素，拥有行内元素的特性，即可以与其他行内元素共享一行，不会独占一行。
不能更改元素的height，width的值，大小由内容撑开。
可以使用padding上下左右都有效，margin只有left和right产生边距效果，但是top和bottom就不行。

2、block（块级元素）:
使元素变成块级元素，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度。
能够改变元素的height，width的值。
可以设置padding，margin的各个属性值，top，left，bottom，right都能够产生边距效果。

3、 inline-block（融合行内于块级）:
结合了inline与block的一些特点，结合了上述inline的第1个特点和block的第2,3个特点。
用通俗的话讲，就是不独占一行的块级元素。如图:
原始状态

对两个div设置display: inline-block

我们发现，相比于float布局，使用display: inline-block会使div1与div2之间出现4px的间距。这是因为我们在写HTML代码时，习惯在结束标签后打上回车键，而回车符是占位符，所以两个div之间会出现间距。如要去掉间距，可以使用 { margin: -4px }或在父级标签加上{ font-size: 0 }

二、样例代码及效果演示

1、123.css

p {
    text-align: justify;    
    text-indent: 30px;    
    line-height: 30px;
}
.div1 {
    text-align: center;    
    height: 200px;    
    background-color: antiquewhite;
}
.box {
    text-align: center;    
    margin: 0 auto;    
    padding: 0;
}
.div2 {
    display: inline-block;    
    width: 400px;    
    height: 200px;    
    margin: 50px 25px;    
    border: 1px solid aquamarine;    
    background-color: aquamarine;    
    overflow-y: scroll;
}
.div3 {
    display: inline-block;    
    width: 400px;    
    height: 200px;    
    margin: 50px 25px;    
    border: 1px solid aquamarine;    
    background-color: aquamarine;    
    overflow-y: scroll;
    }
.div4 {
    display: inline-block;    
    width: 400px;    
    height: 200px;    
    margin: 50px 25px;    
    border: 1px solid aquamarine;    
    background-color: aquamarine;    
    overflow-y: scroll;
}
.div5 {
    text-align: center;    
    height: 200px;    
    background-color: antiquewhite;
}

2、index.html

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">    
    <title>利用display: inline-block进行布局</title>    
    <link rel="stylesheet" type="text/css" href="123.css" >
</head>
<body>
    <div class="div1">div1</div>    
        <div class="box">      
        <div class="div2"><p>李鲈习西洋之学，述其言曰：“月本无光，借日之照以为光曜。至望日，与地，日为一线，月见地不见日，不得借光，以是以无光也。”或曰：“不然。曾有一年，月食之时，当在日没后，乃日尚未沉，而出地之月已食矣。东月初升，西日未没，人两见之，则地固未尝遮日月也，何以云见地不见日乎？”答曰：“于所见者非月也，月之影也，月固未尝出地也。何以验之？今试以一文钱置虚器中，前之却之，不见钱形矣，却贮水令满而钱见，则知所见者非钱也。乃钱之影也。日将落时，东方苍苍凉凉，海气升腾，犹夫水然，其映而升之亦月影也。如必以东方之月为真月。则是以水面之钱为真钱也，然乎？否乎？又如渔者见鱼浮水面，而投叉刺之，心稍下于鱼，乃能得鱼，其浮于水面者。鱼之影也。舟人刺篙，其半在水，视之若曲焉，此皆水之能影物也。然则月之受隔于地，又何疑哉。</p>
        </div>      
        <div class="div3"><p>李鲈习西洋之学，述其言曰：“月本无光，借日之照以为光曜。至望日，与地，日为一线，月见地不见日，不得借光，以是以无光也。”或曰：“不然。曾有一年，月食之时，当在日没后，乃日尚未沉，而出地之月已食矣。东月初升，西日未没，人两见之，则地固未尝遮日月也，何以云见地不见日乎？”答曰：“于所见者非月也，月之影也，月固未尝出地也。何以验之？今试以一文钱置虚器中，前之却之，不见钱形矣，却贮水令满而钱见，则知所见者非钱也。乃钱之影也。日将落时，东方苍苍凉凉，海气升腾，犹夫水然，其映而升之亦月影也。如必以东方之月为真月。则是以水面之钱为真钱也，然乎？否乎？又如渔者见鱼浮水面，而投叉刺之，心稍下于鱼，乃能得鱼，其浮于水面者。鱼之影也。舟人刺篙，其半在水，视之若曲焉，此皆水之能影物也。然则月之受隔于地，又何疑哉。</p>
        </div>            
        <div class="div4"><p>李鲈习西洋之学，述其言曰：“月本无光，借日之照以为光曜。至望日，与地，日为一线，月见地不见日，不得借光，以是以无光也。”或曰：“不然。曾有一年，月食之时，当在日没后，乃日尚未沉，而出地之月已食矣。东月初升，西日未没，人两见之，则地固未尝遮日月也，何以云见地不见日乎？”答曰：“于所见者非月也，月之影也，月固未尝出地也。何以验之？今试以一文钱置虚器中，前之却之，不见钱形矣，却贮水令满而钱见，则知所见者非钱也。乃钱之影也。日将落时，东方苍苍凉凉，海气升腾，犹夫水然，其映而升之亦月影也。如必以东方之月为真月。则是以水面之钱为真钱也，然乎？否乎？又如渔者见鱼浮水面，而投叉刺之，心稍下于鱼，乃能得鱼，其浮于水面者。鱼之影也。舟人刺篙，其半在水，视之若曲焉，此皆水之能影物也。然则月之受隔于地，又何疑哉。</p>
        </div>    
        </div>
    <div class="div5">div5</div>
</body>
</html>