CSS里面有两种非常流行的布局方式,分别是浮动布局和弹性布局。下面我们来详细了解一下这两种布局方式吧。浮动布局浮动布局是CSS中一种非常常用的布局方式。通过使用float属性可以实现元素在一个容器内自
CSS里面有两种非常流行的布局方式,分别是浮动布局和弹性布局。下面我们来详细了解一下这两种布局方式吧。
浮动布局是CSS中一种非常常用的布局方式。通过使用float属性可以实现元素在一个容器内自左向右或自右向左浮动,同时也支持元素的层叠。
.container{ width: 800px; padding: 20px; } .box{ width: 200px; height: 200px; float: left; } .clearfix{ clear: both; }
以上代码实现了一个将3个宽度为200px的块级元素在一个容器内进行浮动布局的方式,并添加了一个样式为“clearfix”的元素在容器的末尾添加以清除浮动影响。
相对于浮动布局的自由度较低,弹性布局则是更为灵活和自由度更高的一种布局方式。通过使用flex布局和对应的属性,可以非常容易的实现元素的对齐、伸缩等一系列效果。
.container{ display: flex; justify-content: space-between; align-items: center; } .box{ flex: 1; height: 200px; margin: 10px; }
以上代码实现了一个弹性布局的呈现,在一个具有flex布局的容器内,使用justify-content属性来控制装载的元素之间的间距,使用align-items属性来控制盒子的垂直间距。另外还可以用flex属性来控制元素的平分比例,比如以上代码为让容器内的3个块级元素平分整个容器的宽度。
粉丝
0
关注
0
收藏
0