八：以理论结合实践方式梳理前端 CSS 3 ——— 弹性布局特性
2024-05-31 17:04:20
基本概念
- 设置
display: flex;的元素称为 Flex 容器，其中所有的子元素称为 Flex 项目 - 容器存在两根用于定位的轴，分别是水平的 主轴 和垂直的 交叉轴，项目默认沿主轴排列
容器属性（设置在容器上）
- flex-direction：设置主轴的方向，可选值如下
- row（默认）：主轴沿水平方向，起点在左边
- row-reverse：主轴沿水平方向，起点在右边
- column：主轴沿垂直方向，起点在上边
- column-reverse：主轴沿垂直方向，起点在下边
- flex-wrap：定义换行的方式，可选值如下
- nowrap（默认）：不换行
- wrap：换行，第一行在上面
- wrap-reverse：换行，第一行在下面
- justify-content：定义项目在主轴上的对齐方式，可选值如下
- flex-start（默认）：起点对齐
- flex-end：终点对齐
- center：居中对齐
- space-between：两端对齐，项目之间间隔相等
- space-around：两端对齐，项目两侧间隔相等
- align-items：定义项目在交叉轴上的对齐方式，可选值如下
- flex-start：起点对齐
- flex-end：终点对齐
- center：居中对齐
- baseline：项目的第一行文字的基线对齐
- stretch（默认）：如果项目未设置 height 或者设置为 auto，那么项目占满容器的高度
项目属性（设置在项目上）
order：定义项目的排列顺序，属性接受一个整数，数值越小排列越前，默认为 0
flex-grow：定义项目的放大比例，默认为 0，表示即使存在剩余空间，也不放大
如果所有项目设置为 1，并且还有剩余空间，那么它们将会等分剩余空间
如果一个项目设置为 2，其它项目设置为 1，那么该项目占据的剩余空间将会比其它项目多一倍
flex-shrink：定义项目的缩小比例，默认为 1，表示如果空间不足，就会缩小
如果所有项目设置为 1，并且空间不足，那么它们将会等比缩小
如果一个项目设置为 0，其它项目设置为 1，那么该项目不会缩小，而其它项目正常缩小
flex-basis：在分配多余空间前，项目占据的主轴空间，默认为 auto，表示项目原来的大小
align-self：定义项目的对齐方式，覆盖 align-items 设置，默认为 auto，表示继承父元素设置
弹性盒子样式
| 属性 | 说明 | CSS |
|---|---|---|
| flex | 复合属性，设置或检索弹性盒模型对象的子元素如何分配空间 | 3 |
| flex-flow | 复合属性，设置或检索弹性盒模型对象的子元素排列方式 | 3 |
| align-content | 在弹性容器内的各项没有占用交叉轴上所有可用的空间时对齐容器内的各项（垂直） | 3 |
| align-items | 定义flex子项在flex容器的当前行的侧轴（纵轴）方向上的对齐方式 | 3 |
| align-self | 定义flex子项单独在侧轴（纵轴）方向上的对齐方式 | 3 |
| justify-content | 设置或检索弹性盒子元素在主轴（横轴）方向上的对齐方式 | 3 |
| order | 设置或检索弹性盒模型对象的子元素出现的順序 | 3 |
<!doctype html>
<html>
<head><style>div.main {width: 330px;height: 200px;display: flex;}div.item { flex: 1; }div.item:nth-child(1) { background-color: coral; }div.item:nth-child(2) { background-color: lightblue; }div.item:nth-child(3) { background-color: lightgreen; }</style>
</head>
<body><div class="main"><div class="item"></div><div class="item"></div><div class="item"></div></div>
</body>
</html>
<!doctype html>
<html>
<head><style>div.main {width: 330px;height: 200px;display: flex;align-items: center;}div.item { flex: 1; }div.item:nth-child(1) { background-color: coral; }div.item:nth-child(2) { background-color: lightblue; }div.item:nth-child(3) { background-color: lightgreen; }</style>
</head>
<body><div class="main"><div class="item"></div><div class="item"></div><div class="item"></div></div>
</body>
</html>
多列样式
| 属性 | 说明 | CSS |
|---|---|---|
| column-fill | 指定如何填充列（仅火狐浏览器支持） | 3 |
| column-gap | 指定列之间的差距 | 3 |
| column-rule | 对于设置所有column-rule-*属性的简写属性 | 3 |
| column-span | 指定元素应该跨越多少列 | 3 |
| columns | 缩写属性设置列宽和列数 | 3 |
<!doctype html>
<html>
<head><style>div.main {columns:100px 3;}</style>
</head>
<body><div class="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div>
</body>
</html>
<!doctype html>
<html>
<head><style>div.main {columns:100px 3;column-gap:40px;}div.main h2 {column-span: all;}</style>
</head>
<body><div class="main"><h2>英国维斯米斯特教堂碑文</h2>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div>
</body>
</html>
<!doctype html>
<html>
<head><style>div.main {columns:100px 3;column-gap:40px;column-rule:4px outset #ff00ff;}</style>
</head>
<body><div class="main">Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.</div>
</body>
</html>
圆角样式
允许你为元素添加圆角边框
语法：border-radius: 1-4 length|%; 1-4 表示可取1-4个值
顺序：左上角、右上角、右下角、左下角（顺时针方向）
拆分：border-top-left-radius、border-top-right-radius、border-bottom-right-radius、border-bottom-left-radius
- 一个值：四个圆角值详情哦那个
- 两个值：第一个值为左上角与右下角，第二个值为右上角与左下角
- 三个值：第一个值为左上角, 第二个值为右上角和左下角，第三个值为右下角
- 四个值：第一个值为左上角，第二个值为右上角，第三个值为右下角，第四个值为左下角
border-radius: 20px; -- 表示左上角、右上角、右下角、左下角圆角都为 20px
border-radius: 10px 20px; -- 表示左上角、右下角圆角为 10px，右上角、左下角圆角为 20px
border-radius: 10px 20px 5px; -- 表示左上角圆角为 10px，右上角、左下角圆角都为 20px，右下角圆角为 5px
border-radius: 10px 20px 5px 10px; -- 表示左上角圆角为 10px，右上角圆角为 20px，右下角圆角为 5px，左下角圆角为 10pxborder-radius: 20%; -- 表示左上角、右上角、右下角、左下角圆角都为 20%
border-radius: 10% 20%; -- 表示左上角、右下角圆角为 10%，右上角、左下角圆角为 20%
border-radius: 10% 20% 5%; -- 表示左上角圆角为 10%，右上角、左下角圆角都为 20%，右下角圆角为 5%
border-radius: 10% 20% 5% 10%; -- 表示左上角圆角为 10%，右上角圆角为 20%，右下角圆角为 5%，左下角圆角为 10%
<!doctype html>
<html>
<head><style>div {width: 300px;height: 200px;}.border1 {border-radius: 20px;}.border2 {border-radius: 10px 20px;}.border3 {border-radius: 10px 20px 5px;}.border4 {border-radius: 10px 20px 5px 10px;}.border5 {border-radius: 20%;}.border6 {border-radius: 10% 20%;}.border7 {border-radius: 10% 20% 5%;}.border8 {border-radius: 10% 20% 5% 10%;}</style>
</head>
<body><div class="border1"></div><div class="border2"></div><div class="border3"></div><div class="border4"></div><div class="border5"></div><div class="border6"></div><div class="border7"></div><div class="border8"></div>
</body>
</html>
边界图片样式
设置或检索对象的边框样式使用图像来填充
语法：border-image: source slice width outset repeat;
| 值 | 描述 |
|---|---|
| border-image-source | 用于指定要用于绘制边框的图像的位置 |
| border-image-slice | 图像边界向内偏移 |
| border-image-width | 图像边界的宽度 |
| border-image-outset | 用于指定在边框外部绘制 border-image-area 的量 |
| border-image-repeat | 这个例子演示了如何创建一个border-image 属性的按钮 |
<!doctype html>
<html>
<head><style>div {width: 300px;height: 200px;}div.main1 {background-color:lightgrey;border:30px solid transparent;border-image: url('https://www.runoob.com/images/border.png');border-image-slice: 30 30 30 30;border-image-width: 1 1 1 1;border-image-outset: 0;border-image-repeat:stretch;}div.main2 {background-color:lightgrey;border:30px solid transparent;border-image: url('https://www.runoob.com/images/border.png');border-image-slice: 30 30 30 30;border-image-width: 1 1 1 1;border-image-outset: 0;border-image-repeat:repeat;}div.main3 {background-color:lightgrey;border:30px solid transparent;border-image: url('https://www.runoob.com/images/border.png');border-image-slice: 30 30 30 30;border-image-width: 1 1 1 1;border-image-outset: 0;border-image-repeat:round;}div.main4 {background-color:lightgrey;border:30px solid transparent;border-image: url('https://www.runoob.com/images/border.png');border-image-slice: 30 30 30 30;border-image-width: 1 1 1 1;border-image-outset: 0;border-image-repeat:initial;}</style>
</head>
<body><div class="main1"></div><div class="main2"></div><div class="main3"></div><div class="main4"></div>
</body>
</html>
背景裁切样式
| 属性 | 描述 | CSS |
|---|---|---|
| background-clip | 指定对象的背景图像向外裁剪的区域 | 3 |
| background-origin | S设置或检索对象的背景图像计算 background-position 时的参考原点(位置) | 3 |
| background-size | 检索或设置对象的背景图像的尺寸大小 | 3 |
- background-size 指定背景图像的大小
- background-origin 属性指定了背景图像的位置区域
- background-clip 背景剪裁属性是从指定位置开始绘制
- background-image 可设置多张图片，哪个在前哪个就在上层
- background-position 可对应多个背景图设置位置
- background-repeat 可对应多个背景图设置填充方式
外观样式
| 属性 | 说明 | CSS |
|---|---|---|
| appearance | 定义元素的外观样式 | 3 |
| box-sizing | 允许您为了适应区域以某种方式定义某些元素 | 3 |
| icon | 为元素指定图标（暂无浏览器支持） | 3 |
| nav-down | 指定用户按向下键时向下导航的位置（暂无浏览器支持） | 3 |
| nav-index | 指定导航（tab）顺序（暂无浏览器支持） | 3 |
| nav-left | 指定用户按向左键时向左导航的位置（暂无浏览器支持） | 3 |
| nav-right | 指定用户按向右键时向右导航的位置（暂无浏览器支持） | 3 |
| nav-up | 指定用户按向上键时向上导航的位置（暂无浏览器支持） | 3 |
| outline-offset | 设置轮廓框架在 border 边缘外的偏移（IE 浏览器不支持） | 3 |
| resize | 定义元素是否可以改变大小 | 3 |
<!doctype html>
<html>
<head><style>div.main {width: 300px;height: 200px;padding: 20px;background-color: pink;box-sizing: border-box;}</style>
</head>
<body><div class="main"></div>
</body>
</html>
八：以理论结合实践方式梳理前端 CSS 3 ——— 弹性布局特性相关推荐
- 一：以理论结合实践方式梳理前端 CSS 3 ———真正了解样式表
真的了解 CSS 3 吗 在学习 CSS 3 之前,首先要了解的是,什么是 CSS 3.CSS 3 能做什么?学习 HTML 的都知道,HTML 是网页的结构,那么 CSS 就是网页的表现,就像美女和 ...
- 七：以理论结合实践方式梳理前端 CSS 3 ——— 字体颜色独特性
样式单位 相对长度单位指定了一个长度相对于另一个长度的属性,对于不同的设备相对长度更适用 绝对长度单位是一个固定的值,它反应一个真实的物理尺寸,绝对长度单位视输出介质而定,不依赖于环境(显示器.分辨率 ...
- 十：以理论结合实践方式梳理前端 React 框架 ———集成框架
dva 框架简介 dva 首先是一个基于 redux 和 redux-saga 的数据流方案,然后为了简化开发体验,dva 还额外内置了 react-router 和 fetch,所以也可以理解为一个 ...
- 二：以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 基础语法
ES 6+ 基础语法 虽说 JavaScript 是一门非编程式语言,但它又具备编程思想,这也是因为 JavaScript 在设计之初参考了 Java 的设计思路所带来的捆绑思想,也间接的导致了前期的 ...
- 十一：以理论结合实践方式梳理前端 React 框架 ———框架架构
前言书明观念 从第一代码农写下第一行代码开始到上个世纪的80年代的软件危机,码农一直在考虑一个问题,怎么让代码写起来更容易.更简单.更舒适?抛开大牛.大神(大牛.大神哪那么容易找到啊 _-)级别的人员 ...
- 九：以理论结合实践方式梳理前端 React 框架 ——— 简述中间件
redux-saga 基本简介 中间件是一种独立运行于各个框架之间的代码,以函数的形式存在,连接在一起,形成一个异步队列,可以访问请求对象和响应对象,可以对请求进行拦截处理,再将处理后的控制权向下传递 ...
- 四：以理论结合实践方式梳理前端 React 框架 ——— React 高级语法
事件处理 react 内置组件的事件处理 react 内置组件是指 react 中已经定义好的,可以直接使用的如 div.button.input 等与原生 HTML 标签对应的组件 <!DOC ...
- 五：以理论结合实践方式梳理前端 ES 6+ ——— ES 6+ 全局对象
全局对象 全局属性 属性描述 Infinity 代表正的无穷大的数值. NaN 指示某个值是不是数字值. undefined 指示未定义的值 函数 描述 函数 描述 decodeURI() 解码某个编 ...
- OOAD实践之路——真实案例解析OO理论与实践（二、第一项任务：特性列表）
查看本系列全部文章: <OOA&D实践之路--真实案例解析OO理论与实践>索引贴 第一份说明 当这个项目开始时,我们得到的关于我们要做的系统的唯一说明是一页Word文档 ...
最新文章
- 在Ubuntu下编译安装atom编辑器
- java基础学习总结（一）
- C#方法中的反射方式和委托方式(小实例)
- Linux进行设置环境变量
- C和指针之memmove函数 memcpy函数 strcspn函数 strspn函数 strrstr函数实现
- 端到端测试_端到端测试的滥用–测试技术2
- tableau连接mysql_tableau 连接mysql的操作步骤
- linux 下进程和线程指定CPU运行
- java作业——Day0014
- Maven 无法下载依赖包的解决方法---三步dao！！！
- HDU——1257最少拦截系统（贪心）
- SQL在线练习 工具
- excel多元线性拟合_使用Excel数据分析工具进行多元回归分析的方法
- 【企业邮箱注册】管理员如何设置定期修改密码？
- js 里奇数的判断条件
- 2008 NBA 全明星周未之扣篮大赛
- 2020 奇安信前端秋招笔试选择题
- 20年上海站D题Walker（二分，简洁）
- Redis的使用和认识
- Cubase pro 12