css布局

最新推荐文章于 2024-11-01 12:26:05 发布

王大眼睛�

最新推荐文章于 2024-11-01 12:26:05 发布

阅读量60

点赞数

分类专栏： # css 文章标签： css 前端

本文链接：https://blog.csdn.net/pong_dong/article/details/131858391

版权

css 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

一、弹性布局

flex 简单介绍

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

优点：

应用恰当的弹性布局对用户十分友好。页面中所有元素可以随着用户的偏好缩放。
对于同时喜欢流动和定宽布局的设计师来说，弹性布局是完美的，因为前两种布局的优点在弹性布局中都能找到。

缺点：

需要花更多时间理解和测试，让布局适合所有用户。这种布局类型相对于其他两个更难制作。

注：设为Flex布局后,子元素的float、clear和vertical-align属性将失效

容器的属性–以下6个属性设置在容器上。

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

1、flex-direction属性
它可能有4个值。

flex-direction: row | row-reverse | column | column-reverse;
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

2、flex-wrap属性
它可能取三个值。
flex-wrap: nowrap | wrap | wrap-reverse;

nowrap（默认）：不换行

在这里插入图片描述

wrap：换行，第一行在上方

在这里插入图片描述

wrap-reverse：换行，第一行在下方

在这里插入图片描述

3、 flex-flow属性

flex-flow属性是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap。

4、justify-content属性

justify-content属性定义了项目在主轴上的对齐方式。
它可能取5个值，具体对齐方式与轴的方向有关。
justify-content: flex-start | flex-end | center | space-between | space-around;
下面假设主轴为从左到右。

flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

在这里插入图片描述

5、align-items属性

align-items属性定义项目在交叉轴上如何对齐。
它可能取5个值。具体的对齐方式与交叉轴的方向有关，
align-items: flex-start | flex-end | center | baseline | stretch;
下面假设交叉轴从上到下。

flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline:：项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

在这里插入图片描述

6、 align-content属性

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

子元素的属性-以下6个属性设置在子元素上
1、order
2、flex-grow
3、flex-shrink
4、flex-basis
5、flex
6、align-self

1、order属性

order属性定义项目的排列顺序。数值越小，排列越靠前，默认为0。
order: 0;
在这里插入图片描述

2、flex-grow属性

flex-grow属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
flex-grow: 0;
在这里插入图片描述

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍，如果为0，则如果存在剩余空间，也不放大。

3、flex-shrink属性

flex-shrink属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
flex-shrink: 1;

在这里插入图片描述

如果所有项目的flex-shrink属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小，负值对该属性无效。

4、flex-basis属性

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。它可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间。
flex-basis: auto | 350px;

5、flex属性

flex属性是flex-grow, flex-shrink 和 flex-basis的合写，默认值为0 1 auto。后两个属性可选。
flex: none | flex-grow flex-shrink flex-basis；
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。

6、align-self属性

二、固定布局与流体布局的优缺点

固定布局：

注：设置了固定宽度的外包裹，里面的各个模块也是固定宽度而非百分比。

大多数设计者选择 960 或 760px 的固定宽度。960px 最适合 1024×768或者更高的分辨率，有一点空间设置 margin。如果设计者想让布局适应 800×600 分辨率的用户，可以使用 760px 的宽度，它仍然适用于更大的分辨率。

优点：固定宽度布局更容易使用，在设计方面更容易定制。在所有浏览器中宽度一样,不设置 min-width
和max-width，来防止内容缩放引起的布局混乱。

缺点：对于使用高分辨率的用户，固定宽度布局会留下很大的空白。屏幕分辨率过小时需要垂直滚动条。

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

优点：流动布局页面对用户更友好，因为它能自适应用户的设置。页面周围的空白区域在所有分辨率和浏览器下都是相同的，在视觉上更美观。

缺点：设计者更难控制用户所见，并可能忽略掉一些错误，因为在特定的分辨率下看起来好的。
视频以及其他设置了宽度的内容可能需要多种宽度以适应不同分辨率的用户。

三、其他布局

浮动布局：

根据内容是固定尺寸还是百分比又可以划分为：

流体浮动布局
固定浮动布局

定位布局：

根据内容是固定尺寸还是百分比又可以划分为：

流体定位布局
固定定位布局

使用定位布局的重要知识点—设置参照基准点：
将父元素设为相对定位，且不设置坐标
如果父元素设置了相对定位，子元素的决定定位将以父元素的基准点为参照基准点

了解css3新增的多列布局：

通过 CSS3，您能够创建多个列来对文本进行布局 - 就像报纸那样！
传统布局实现多列 (3 列及以上) 布局的问题

实现起来麻烦，很不方便
后期维护更改困难

多列属性:

columns 规定设置 column-width 和 column-count 的简写属性。
column-width 规定列的宽度。 (该宽度为缩放时的最小宽度，默认为 auto)
column-count 规定元素应该被分隔的列数。默认为 auto
column-rule 设置所有 column-rule-* 属性的简写属性。
column-rule-color 规定列之间规则的颜色。
column-rule-style 规定列之间规则的样式。
column-rule-width 规定列之间规则的宽度。
column-span 规定元素应该横跨的列数。默认值为 1，可以设置为 all
column-gap 规定列之间的间隔。
column-fill 规定如何填充列。（主浏览器都不支持该属性）