css 有几中 布局方式 |css a标签内容居中

CSS是网页开发中十分重要的一部分，它可以用来修饰、美化网页。CSS有很多种布局方式，本文将会介绍其中的三种。 第一种布局方式：流式布局（Flow Layout）。 流式布局是最基本的布局方式。HTML中的元素的默认宽度都是100%。流式布局将元素一个接一个地按照文档流排列，如果页面大小改变，元素的尺寸和位置也会相应地改变。在CSS中使用的是display: block或者display: inline的方式进行设置。使用流式布局会使网页具备更好的适应性，但是它的缺点也令人无法忍受。当页面缩放到一定程度，元素的排版将会无法再减小，导致页面失去原有的美观。例如：

p {
display: block;
}

第二种布局方式：浮动布局（Float Layout）。 浮动布局利用CSS中的float属性实现。它将元素从文档流中解除，让元素悬浮在页面上，可以通过margin进行控制。在浮动布局下，页面上的元素会像游动在水中的浮萍一样漂浮着。对于多列布局，可以使用float将多列元素悬浮在页面上。但是，由于浮动的元素离开了文档流，所以大家需要用清除浮动的方式清除一下。例如：

p {
float: left;
margin: 10px;
}
.clearboth {
clear: both;
}

第三种布局方式：弹性布局（Flex Layout）。 弹性布局是在CSS3中新增加的一种布局方式，它可以非常方便的实现等高布局。Flex布局以父容器为基准，通过设置一些属性来决定子容器的宽度和高度。Flex布局可以使子容器按照一定方式进行伸缩，从而实现网页的响应式布局。例如：

.flex-container {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.flex-item {
flex: 1;
margin: 10px;
}

以上是CSS中的三种常见布局方式，每种布局方式都可以根据具体的需求灵活运用。对于网页设计来说，布局的选择也是非常重要的一个环节。