CSS的display的多种布局方式总结(inline-block,table,flex)

最新推荐文章于 2024-09-29 20:42:21 发布

吃不胖的猫o(=^ェ^=)m

最新推荐文章于 2024-09-29 20:42:21 发布

阅读量9k

点赞数 8

分类专栏：前端文章标签： css3 html5

本文链接：https://blog.csdn.net/Yueqin0512/article/details/109445204

版权

本文总结了CSS中display属性的三种布局方式：inline-block、table和flex。inline-block可实现不独占一行的块级元素布局，避免浮动布局的缺点。display:table和display:table-cell结合能实现元素的垂直居中和两端对齐。而flex布局提供了更强大的容器和项目控制，如自动平均分配空间、灵活的对齐方式等。

摘要由CSDN通过智能技术生成

1.display:inline-block布局

一：display的几个常用的属性值

inline（行内元素）
1.和其他元素都在一行上，可以与其他行内元素共享一行，不会独占一行
2.高，行高及顶和底边距不可改变，大小由内容撑开
3.可以使用padding,margin上下左右都有效

块级元素	说明
a	超链接
span	常用行级
strong	加粗，强调
b	加粗，不强调
em	斜体，强调
i	斜体，不强调
img	图片
input	输入框
select	下拉列表

block（块级元素）
1.总是在新行上开始，独占一行，在不设置自己的宽度的情况下，块级元素会默认填满父级元素的宽度
2.高度，行高以及顶和底边距都可控制，宽度是它的容器的100%，除非设定一个宽度
3.可以设置padding，margin的属性值，top，left，bottom，right都能够产生边距效果

块级元素	说明
div	最典型的块元素
p	表示段落
h1-h6	六级标题，默认加粗
br	表示换行
ol	有序刘表
ul	无序列表行

inline-block（融合行内于块级）
不独占一行的块级元素

测试一下：

<div class="box">
    <div class="child1">child1</div>
    <div class="child2">child2</div>
</div>

.box{
   
    width: 280px;
    background-color: rgb(240, 192, 192);
}

.child1{
   
    width: 100px;
    height: 100px;
    background-color: lightblue;
}

.child2{
   
    width: 100px;
    height: 100px;
    background-color: rgb(44, 168, 209);
}

图一：不设置
在这里插入图片描述
图二：对child1,child2样式添加display: inline-block;

两个图可以看出，display：inline-block后块级元素能够在同一行显示，有人这说不就像浮动一样吗。没错，display：inline-block的效果几乎和浮动一样，但也有不同