css三种布局方式总结

CSS是网页开发中常用的样式语言，其中布局方式是网页设计中不可缺少的一个部分。CSS有三种主要的布局方式，分别是：

1. 块级元素布局
2. 行内元素布局
3. 弹性盒子布局 

接下来，我们将对这三种布局方式进行详细介绍。

1. 块级元素布局

块级元素指的是其中的内容在网页中以独立的块展现。块级元素布局方式会让元素累加在一起，并且每个元素默认在单独的一行上。这种布局方式可以利用CSS来控制元素的宽度、高度、边距、内边距、浮动和定位等属性。

div {
    width: 300px;
    height: 200px;
    margin: 10px;
    padding: 20px;
    float: left;
    position: relative;
} 

2. 行内元素布局

行内元素指的是其中的内容根据上下文关系在同一行上展现。行内元素布局方式会让元素排在一起，每个元素默认不另起一行。这种布局方式在网页设计中不需要像块级元素布局方式那样另起一行，从而能够节省网页空间。但是，行内元素布局方式无法对宽度和高度进行自由控制。

span {
    font-size: 16px;
    color: #ff0000;
    text-decoration: underline;
} 

3. 弹性盒子布局

弹性盒子布局方式是CSS3中新增的布局方式，它采用了弹性技术，可以很好地控制页面元素的宽度、高度和位置，并且不需要使用浮动等传统的布局方式。弹性盒子布局方式有助于开发响应式网页，并且可以适应各种不同尺寸的设备。

.container {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
} 

以上就是CSS三种布局方式的总结。根据实际需求，我们可以根据需要灵活选择不同的布局方式。在实际开发中，我们可以利用CSS来控制布局方式和样式，从而实现网页的视觉效果。