css各类布局方式 |css选择大于4的

1. 盒模型布局
在CSS中，每个元素都是一个盒子，这个盒子包含了内容，内边距，边框以及外边距等等。盒模型布局就是通过设置和调整这些盒模型，来实现网页的布局。
.box {
width: 100px;
height: 100px;
padding: 20px;
border: 1px solid #ccc;
margin: 20px;
}
2. 浮动布局
浮动布局是通过设置元素的float属性来使元素脱离文档流，从而可以进行自由的定位和排列。
.box {
width: 100px;
height: 100px;
float: left;
margin: 20px;
}
3. 弹性布局
弹性布局是通过设置容器的display属性为flex来实现的。它可以让子元素根据容器的尺寸来自动调整自己的大小，让容器中的元素更具有弹性和灵活性。
.container {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
4. 网格布局
网格布局是通过设置容器的display属性为grid来实现的。它可以将容器中的元素划分为一个网格，然后通过设置每个网格的大小和位置，来实现网页的排版和布局。
.container {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: repeat(3, 1fr);
grid-gap: 10px;
}
5. 定位布局
定位布局是通过设置元素的position属性来实现的。它可以将元素的位置根据浏览器窗口或者父元素来自由调整，实现定位和排列的目的。
.box {
position: absolute;
top: 100px;
left: 100px;
}

上面介绍了CSS布局的各种方式，它们都有各自的特点和适用场景。在实际网站设计中，大家需要根据具体情况来选择合适的布局方式，来实现更加灵活和优美的网页布局。