CSS 布局

最新推荐文章于 2024-10-09 20:00:56 发布

菜鸟程序__

最新推荐文章于 2024-10-09 20:00:56 发布

阅读量51

点赞数

文章标签： css 前端 javascript

本文链接：https://blog.csdn.net/qq_64537903/article/details/131864641

版权

本文介绍了弹性布局的原理和主要属性，如flex-wrap、justify-content和align-items，以及固定布局、流体布局的特点和优缺点。此外，还提到了浮动布局、定位布局、BFC布局的概念和应用场景，最后讨论了响应式布局和媒体查询在适应不同设备屏幕中的作用。

摘要由CSDN通过智能技术生成

一、弹性布局

弹性伸缩布局

display：flex

事实上它是一种新类型的盒子模型，也有书上称作弹性伸缩盒布局。比较新的布局方式：旨在提供一个更加有效的方式来布置，对齐和分布在容器之间的各项内容，即使它们的大小是未知或者动态变化的。弹性布局的主要思想是让容器有能力来改变项目的宽度和高度，以填满可用空间 (主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力。

弹性布局属性

属性要写在父盒子上

flex-wrap：是否换行（是否为了弹性布局挤压自己的子盒子

nowrap：默认，不换行

wrap：换行

wrap-reverse：改变朝向（自下而上）

justify-content：子盒子排列方式（水平方向）

center：居中

space-between：两端对齐，中间自适应

space-around：两端对齐，中间自适应。两端留空，值为中间空的一半

space-evenly：两端对齐，中间自适应。空隙均匀分布

flex-direction：改变盒子排列方向

row：默认值，横向排列

column：纵向排列

row-reverse：横向，自右向左

column-reverse：纵向，自下而上

align-items:子盒子纵向排列方式

center:居中

flex-end：靠下排列

flex-start：靠上排列

baseline：与基线对齐

stretch:如果指定侧轴大小的属性值为‘auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸

align-content：定义了多根轴线的对齐方式

stretch（默认值）：轴线占满整个交叉轴。

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐，整体垂直居中。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

align-self:子盒子自身排列方式

center:居中

flex-end：靠下排列

flex-start：靠上排列

baseline：与基线对齐

stretch:如果指定侧轴大小的属性值为‘auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸

二、其他布局

1.固定布局（px）

     优点

1. 固定宽度布局更容易使用，在设计方面更容易定制。

                                 2. 在所有浏览器中宽度一样,不设置 min-width 和max-width，来防止内容缩放引起的布局混乱。

缺点

                                1. 对于使用高分辨率的用户，固定宽度布局会留下很大的空白。

                                2. 屏幕分辨率过小时需要垂直滚动条

2.流体布局（%）

流体布局，主体部分都是用了百分比宽度，因此可以自适应用户的分辨率。

        优点：

1. 流动布局页面对用户更友好，因为它能自适应用户的设置。

2.页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。

         缺点：

1.设计者更难控制用户所见，并可能忽略掉一些错误，因为在特定的分辨率下看起来好的。

                2.视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户。