css布局有哪几种 |css 图片鼠标经过样式

css opacity用法，1997.css.boy，css 图像居中代码，css过渡从下面出来，css超链接打开新网页，css倾斜英文字体，css 图片鼠标经过样式 css布局有哪几种 |css 图片鼠标经过样式

流式布局（Fluid Layout）也叫自适应布局，即在不同的屏幕尺寸下，网页能够自适应排列和缩放。这种布局方式基于百分比、em等相对长度单位，可以适应各种屏幕尺寸的设备。

.container{
width: 90%;
margin: 0 auto;
}

2. 固定布局

固定布局（Fixed Layout）是指在浏览器窗口大小不变时，网页的宽度是固定的。这种方式利用像素作为元素的单位，在打开相同的网页时布局不会发生变化，但不适应不同分辨率的设备。

.container{
width: 960px;
margin: 0 auto;
}

3. 弹性布局

弹性布局（Flexible Layout）也叫响应式布局，主要基于Media Query媒体查询和弹性盒子模型进行实现。它可以根据访问设备的屏幕大小和分辨率来自动调整布局，在实现多端适配时很常用。

.container{
display: flex;
flex-direction: column;
}
@media(max-width: 768px){
.container{
display: flex;
flex-direction: row;
}
}

4. 栅格布局

栅格布局（Grid Layout）是以固定的行和列为基础进行布局的方式，通过网格容器（Grid Container）和网格项（Grid Item）来实现。它较适用于复杂的网页设计和布局。

.container{
display: grid;
grid-template-columns: 1fr 1fr 1fr;
grid-template-rows: 100px 100px 100px;
grid-gap: 20px;
}

以上就是一些常见的CSS布局方法，当然还有其他的布局方法，如浮动布局、定位布局等。在实际开发中，大家需要根据网页设计和需求进行选择，并灵活应用。