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

it2022-05-09 34

一、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>

3、效果

*参考：

https://www.cnblogs.com/Ry-yuan/p/6848197.html

专利

最新回复(0)