搜索
您的当前位置:首页正文

CSS3弹性盒布局的图文实例

2023-11-27 来源:醉满楼美食网
  1. 使用自适应的窗口弹性盒布局

    可以使div总宽度等于浏览器宽度,而且可以随着浏览器的改变而改变。

     1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <title>测试</title> 8 <style> 9 /*弹性盒布局*/10 #container{11 display: -webkit-box;12 display: -moz-box;13 }14 #left-sidebar{15 width: 200px;16 padding: 20px;17 background-color: orange;18 }19 #content{20 -moz-box-flex: 1;21 -webkit-box-flex: 1;22 padding: 20px;23 background-color: yellow;24 }25 #right-sidebar{26 width: 200px;27 padding: 20px;28 background-color: limegreen;29 }30 #left-sidebar, #content, #right-sidebar{31 box-sizing: border-box;32 }33 </style>34 </head>35 <body>36 <div id="container">37 <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>38 <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>39 <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>40 </div>41 </body>42 </html>
  2. 改变元素的显示顺序

    box-ordinal-group可以改变各个元素的显示顺序。

     1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <title>测试</title> 8 <style> 9 /*弹性盒布局*/10 #container{11 display: -webkit-box;12 display: -moz-box;13 }14 #left-sidebar{15 -moz-box-ordinal-group: 2;16 -webkit-box-ordinal-group: 2;17 width: 200px;18 padding: 20px;19 background-color: orange;20 }21 #content{22 -moz-box-ordinal-group: 1;23 -webkit-box-ordinal-group: 1;24 -moz-box-flex: 1;25 -webkit-box-flex: 1;26 padding: 20px;27 background-color: yellow;28 }29 #right-sidebar{30 -moz-box-ordinal-group: 3;31 -webkit-box-ordinal-group: 3;32 width: 200px;33 padding: 20px;34 background-color: limegreen;35 }36 #left-sidebar, #content, #right-sidebar{37 box-sizing: border-box;38 }39 </style>40 </head>41 <body>42 <div id="container">43 <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>44 <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>45 <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>46 </div>47 </body>48 </html>
  3. 改变元素的排列方向

    使用box-orient改变多个元素的排列方向。

     1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <title>测试</title> 8 <style> 9 /*弹性盒布局*/10 #container{11 display: -webkit-box;12 display: -moz-box;13 -moz-box-orient: vertical;14 -webkit-box-orient: vertical;15 }16 #left-sidebar{17 -moz-box-ordinal-group: 2;18 -webkit-box-ordinal-group: 2;19 width: 200px;20 padding: 20px;21 background-color: orange;22 }23 #content{24 -moz-box-ordinal-group: 1;25 -webkit-box-ordinal-group: 1;26 -moz-box-flex: 1;27 -webkit-box-flex: 1;28 padding: 20px;29 background-color: yellow;30 }31 #right-sidebar{32 -moz-box-ordinal-group: 3;33 -webkit-box-ordinal-group: 3;34 width: 200px;35 padding: 20px;36 background-color: limegreen;37 }38 #left-sidebar, #content, #right-sidebar{39 box-sizing: border-box;40 }41 </style>42 </head>43 <body>44 <div id="container">45 <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>46 <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>47 <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>48 </div>49 </body>50 </html>
  4. 元素宽度与高度的自适应

    虽然使用盒布局时,元素的高度与宽度具有了一定的适应性,但是容器中总还是会留出一大片空白区域。

  5. 使用弹性盒布局来消除空白

    使用弹性盒布局可以消除盒布局残留的空白问题。

     1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <title>测试</title> 8 <style> 9 *{10 box-sizing: border-box;11 margin: 0;12 }13 html, body{14 width: 100%;15 height: 100%;16 }17 /*弹性盒布局*/18 #container{19 display: -webkit-box;20 display: -moz-box;21 -moz-box-orient: vertical;22 -webkit-box-orient: vertical;23 border: 2px solid black;24 width: 100%;25 height: 100%;26 }27 #left-sidebar{28 -moz-box-ordinal-group: 2;29 -webkit-box-ordinal-group: 2;30 width: 200px;31 padding: 20px;32 background-color: orange;33 }34 #content{35 -moz-box-ordinal-group: 1;36 -webkit-box-ordinal-group: 1;37 -moz-box-flex: 1;38 -webkit-box-flex: 1;39 padding: 20px;40 background-color: yellow;41 }42 #right-sidebar{43 -moz-box-ordinal-group: 3;44 -webkit-box-ordinal-group: 3;45 width: 200px;46 padding: 20px;47 background-color: limegreen;48 }49 </style>50 </head>51 <body>52 <div id="container">53 <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>54 <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>55 <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>56 </div>57 </body>58 </html>
  6. 对多个元素使用box-flex属性

    如果每个div元素都有box-flex,那么每个元素的宽高等于容器宽高的1/n。容器的空白部分根据box-flex的属性值进行分配。示例代码:

     1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <title>测试</title> 8 <style> 9 *{10 box-sizing: border-box;11 margin: 0;12 }13 html, body{14 width: 100%;15 height: 100%;16 }17 /*弹性盒布局*/18 #container{19 display: -webkit-box;20 display: -moz-box;21 -moz-box-orient: vertical;22 -webkit-box-orient: vertical;23 border: 2px solid black;24 width: 100%;25 height: 100%;26 }27 #left-sidebar{28 -moz-box-ordinal-group: 2;29 -webkit-box-ordinal-group: 2;30 -moz-box-flex: 1;31 -webkit-box-flex: 1;32 padding: 20px;33 background-color: orange;34 }35 #content{36 -moz-box-ordinal-group: 1;37 -webkit-box-ordinal-group: 1;38 -moz-box-flex: 2;39 -webkit-box-flex: 2;40 padding: 20px;41 background-color: yellow;42 }43 #right-sidebar{44 -moz-box-ordinal-group: 3;45 -webkit-box-ordinal-group: 3;46 -moz-box-flex: 1;47 -webkit-box-flex: 1;48 padding: 20px;49 background-color: limegreen;50 }51 </style>52 </head>53 <body>54 <div id="container">55 <div id="left-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>56 <div id="content">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>57 <div id="right-sidebar">示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。示例文字,页面中比较长的示例文字。</div>58 </div>59 </body>60 </html>
  7. 指定水平方向与垂直方向的对齐方式

    可以使用box-pack属性及box-align属性来指定元素中文字、图片水平或垂直方向的对齐方式。

    示例代码:

     1 <!DOCTYPE html> 2 <html lang="zh-CN"> 3 <head> 4 <meta http-equiv="content-type" content="text/html; charset=utf-8"> 5 <meta http-equiv="x-ua-compatible" content="IE=edge"> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"> 7 <title>测试</title> 8 <style> 9 *{10 box-sizing: border-box;11 margin: 0;12 }13 html, body{14 width: 100%;15 height: 100%;16 }17 /*弹性盒布局*/18 #container{19 display: -webkit-box;20 display: -moz-box;21 -moz-box-align: center;22 -webkit-box-align: center;23 -moz-box-pack: center;24 -webkit-box-pack: center;25 -moz-box-orient: vertical;26 -webkit-box-orient: vertical;27 border: 2px solid black;28 width: 50%;29 height: 50%;30 }31 #content{32 display: -webkit-box;33 display: -moz-box;34 -moz-box-align: center;35 -webkit-box-align: center;36 -moz-box-pack: center;37 -webkit-box-pack: center;38 -moz-box-orient: vertical;39 -webkit-box-orient: vertical;40 width: 50%;41 height: 50%;42 padding: 20px;43 background-color: yellow;44 }45 </style>46 </head>47 <body>48 <div id="container">49 <div id="content">示例文字。</div>50 </div>51 </body>52 </html>

小编还为您整理了以下内容,可能对您也有帮助:

CSS中的Flexbox布局是怎么使用的? 我们只会用到一点点儿CSS布局的属性,虽然少,但既然要用到,就得把它们总结在这里,搞明白。

在了解CSS布局的相关属性之前,我们先了解一下 盒子模型——CSS会把每个组件都看作是一个盒子,每个盒子从内往外有三个部分:

组件的宽度和高度决定了它在屏幕上显示的尺寸,一个组件的宽度和高度就是它 外边框所包围矩形 的宽度和高度,iOS里也是这样的。

我们可以通过 width 和 height 属性给一个组件设置固定的宽度,不过需要注意 这两个属性只能接收数值,不能带单位,这是因为RN要自己去适配安卓和iOS的单位。

在RN里,我们想让一个组件自适应宽高,要分两步。 首先我们要让该组件撑满它的父视图,即如果我们想自适应宽度,就得先让子视图的宽度撑满它父视图的宽度,如果我们想自适应高度,就得先让子视图撑满它父视图的高度,如果我们宽度和高度都想自适应,就得先让子视图把它父视图的宽度和高度都撑满。然后才能像我们iOS里使用Masonry那样,通过给组件添加上边距、左边距、下边距、右边距等约束来实现宽度和高度的自适应。

这里再对第一步做个解释, item的 flex: 1 属性可以让item在主轴上撑满它的容器,容器的 alignItems: 'stretch' 属性 + item在侧轴上不设置空间可以让item在侧轴上撑满它的容器。 好像有点不明白是吧,我们再通过一个例子来说得明了点,RN里不是默认主轴为竖向、侧轴为横向嘛,我们就采取这个默认状态来举例子。 在RN里,默认主轴为竖向、侧轴为横向的状态下,如果我们想早桥让某个组件自适应高度,就得首先在它自身上设置 flex: 1 属性,来让它的高度撑满它的父视图;如果我们想让某个组件自适应宽度,就得首先在它父视图身上设置 alignItems: 'stretch' 属性(当然默认就是这个值),这还不够,你还得确保不给这个组件设置 width 属性或者 width 属性的值设为 auto ;如果我们想让一个组件自适应宽高,则两者都得做。 当然,如果我们设置了主轴为横向、侧轴为竖向,其实也是一样的道理,自己捋一姿世下就知道怎么做了。如果还是看不懂的话,没有关系,下面我们会详细谈到这几个属性,等你学了这几个属性,反过头来看这里就明白了。

Flex是Flexible Box的缩写,可译为灵活的、有弹性的盒子。那Flex布局就是Flexible Box布局的缩写,就译为弹性盒子布局,用来对一个盒子进行灵活的布局。

在了解Flex布局之前,我们得先了解一下Flex布局里的两对儿 重要的 概念。

采用Flex布局的组件,被称为Flex容器(flex container),简称容器(container)。

这个组件上的子组件,被称为Flex项目(flex item),简称item(项目)。

我们可以把容器和item看做是父视图和子视图的关系, 因此下文中的容器、父组件、父视图将是一样的概念,item、组件、子视图将是一样的概念,组件和视图将是一样的概念。

每个容器都有两根轴,一个是 主轴, 一个是 侧轴 。

容器里众多的 item自动沿主轴进行排列。

一个item在主轴方向上所占据的空间称为 main size ,一个item在侧轴方向上所占据的空陆册猛间称为 cross size 。

RN里主轴的默认方向为竖向,侧轴为横向。 浏览器里主轴的默认方向为横向,侧轴为竖向,下面我们讲Flex布局的属性时会采用浏览器的状态,学会后对应到RN里,换个主轴方向就可以了。

用在容器上的属性,最常用的有 5个 , 而且这些属性还都不是从来设置容器自己的布局,而是用来设置容器里item的布局。

flex-direction 属性用来设置主轴的方向,即容器里item自动排列的方向。 在浏览器里,主轴的方向默认为横向,所以 flex-direction 属性的默认值为 row 。

它有4种取值。

justify-content 属性用来设置item在主轴上的对齐方式。

它有5种取值。

align-items 属性用来设置item在侧轴上的对齐方式。

它有5种取值。

默认情况下,一个容器只有一条主轴,所有的item都会沿着这条主轴自动排列下去,但是如果item太多了,一个屏幕长度的主轴根本串儿不下这么多item,那后面的item就会溢出屏幕,而界面还不是 ScrollView ,不能滚动,怎么办呢?

flex-wrap 属性用来设置换行,即当容器主轴上显示不下那么多的item时,我们可以让item换行来显示,并且一旦设置了换行,那么这个容器就不再是一条主轴了,而是会有多条平行的主轴。

它有3种取值。

align-content 属性用来设置多条主轴的对齐方式, 如果项目只有一根轴线,该属性不起作用, 即 align-content 属性要基于 flex-wrap 属性设置了换行才有使用的意义。

它有6种取值。

用在item上的属性,最常用的有 2个 , 这些属性都是用来设置item自己的布局。

在第1小节容器的属性,我们已经通过 align-items 属性统一设置了容器里item在侧轴上的对齐方式,但如果其中某个item不想遵循这个对齐方式怎么办呢?我们会常见到这种场景,10个里有8个item是一样的对齐方式,就有1、2个item特立独行,那我们就得用item自己的 align-self 属性来单独给它们设置对齐方式了。

align-self 属性用来设置单个item在侧轴上的对齐方式, 注意是给特立独行的单个item设置哦,而且是侧轴,它会覆盖它容器的 align-items 属性,当然如果不设置这个属性,默认值就为 auto ,即item会默认使用容器的 align-items 属性给它设置的对齐方式。

它有6种取值,除了 auto ,其他都与 align-items 属性完全一致。怎么说呢,item的 align-self 属性似乎是用来造反的,反抗它容器的 align-items 属性。

flex 属性接收一个整数值, flex 属性描述起来太麻烦了,可以自行去搜索加深理解,我这里只列举出它的用途及注意事项。

(1) flex 属性有三个用途

(2)使用 flex 属性需注意

iOS里怎么使用Masonry布局的,RN里就怎么使用 Flex布局+CSS布局 来做布局就行了,它们布局的思路是一样的, 一个组件也同样至少需要四个约束。

当然,它们之间有一个极其细小的差别,那就是:上面提到的“RN里组件自适应宽高分两步”,而iOS里Masonry才不管你什么撑满不撑满呢。

当然,它们之间有一个极其巨大的差别,那就是:iOS里是没有主轴和侧轴之分的,你可以在一个父视图上横向、竖向同时放控件,并同时完成横向和竖向的布局。但RN里有主轴和侧轴之分,我们添加的组件只会沿着主轴排列,不可能同时出现横向和竖向排列,并且布局的时候也只能是沿着主轴布局,不可能同时完成两个方向的布局。

下面我们就通过几个小练习,来对比一下Masonry布局和Flex布局+CSS布局的思路,加深对RN里怎么布局组件的理解。

Masonry:

Flex布局+CSS布局:

Masonry:

Flex布局+CSS布局:

Masonry:

Flex布局+CSS布局:

Masonry:

Flex布局+CSS布局:

参考博客:

阮一峰的《Flex布局:语法篇》

阮一峰的《Flex布局:实例篇》

如果我的回答可以帮到您(CSS中的Flexbox布局是怎么使用的),请及时采纳哦!

CSS3之flexbox如何实现水平垂直居中和三列等高布局


最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西。



第一个css属性就没有看懂。于是乎,开始各种找资料,各种看书。这些天把对于css3伸缩布局盒(flexbox)模型的理解写成博文,目的是对flexbox做一个简单的介绍。

以下的内容会分为如下小节:

1.关于css3中flexbox需要掌握的概念

2.flexbox实现水平垂直居中对齐

3.三列等高自适应,页脚区域黏附底部的布局

1.关于css3中flexbox需要掌握的知识

因为对于三列等高自适应布局和水平垂直居中对齐需要一些对css3中flexbox基础概念的理解,所以会对flexbox的概念做一个简单的介绍,以为后面的实例做一个铺垫。本人一直认为,不管学习任何知识,对于概念的理解都十分重要。

a:伸缩容器:是指通过display属性显示地给一个元素设置为flex或者inline-box(标准版本),这个容器就是一个伸缩容器。

b:伸缩项目:一个伸缩项目是伸缩容器的子元素。一个伸缩容器的内容具有零个以上的伸缩项目--伸缩容器的每个子元素都会成为一个伸缩项目(包括文字,称为匿名伸缩项目)。

c:伸缩流方向:是指伸缩容器中的主轴方向,可以理解成x轴的方向。伸缩流方向主要通过flex-direction属性(标准标准版本)来设置,默认值为row。

d:伸缩行换行:伸缩项目在伸缩容器中有时候会溢出伸缩容器。在伸缩容器属性中,主要通过flex-wrap属性来设置伸缩容器是否换行,默认值为nowrap。

e:伸缩性:定义伸缩项目可改变伸缩容器的宽度或高度填补可用的空间。可以将伸缩容器的额外空间分发给其伸缩项目或将他们缩小以防止伸缩项目溢出。

2.flexbox实现水平垂直居中对齐



html, body {
height: 100%;
width: 100%;
}
body {
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-box-pack: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.content {
width: 300px;
height: 300px;
background-color: lightblue;
text-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-box-pack: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}
水平垂直居中对齐
首先,设置html和body的宽度和高度都为100%,目的是让其拥宽度和高度,否侧主轴对齐(box-pack)和侧轴对齐(box-align)无法让伸缩项目之前分布伸缩容器的额外空间。

然后,让body成为伸缩容器,设置display属性为box,设置box-pack和box-align来控制主轴对齐和侧轴对齐,让其属性值都为center。

最后,.content元素成为伸缩容器,这样其内部文字块会成为匿名伸缩项目。此时的.content元素即为伸缩容器,又为伸缩项目。当作为伸缩容器的时候,h1元素为其伸缩项目;当作为伸缩项目的时候,body为其伸缩容器。同样为.content设置box-align和box-pack,来控制侧轴对齐和主轴对齐方式 。

效果图如下,.cotent元素和h1都实现了水平垂直居中对齐。



3.三列等高自适应,页脚区域黏附底部的布局

对于三列布局的方法有非常多种,可以通过对float+百分比宽度来实现,也可以用inline-block配合百分比实现,但是很难实现页脚黏附浏览器可视窗口底部的布局。这里只对css3三列等高布局做介绍。

做任何的布局效果,都离不开HTML结构。


头部



主内容


左边栏


右边栏



页脚


假设头部和页脚的宽度为100%,左右两栏宽度为200px,而主内容自适应宽度。

body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#header, #footer {
width: 100%;
padding: 10px;
background-color: #ccc;
}
#footer {
margin-top: 10px;
}
#sidebar-left, #sidebar-right {
width: 200px;
padding: 10px;
background-color: #f36;
}
这里为body设置box-sizing是为了让盒模型的宽度=内容宽度+border+padding,避免在设置padding值时需要计算width的宽度。

接下来,使用伸缩布局盒模型box(旧版本,仍然可以使用),让#page元素成为伸缩容器,设置box-flex让其子元素拥有伸缩性,自适应伸缩容器的剩余空间。

#page {
margin-top: 10px;
width: 100%;
display: -moz-box;
display: -webkit-box;
}
#main {
background-color: #e66;
padding: 10px;
margin: 0 10px;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
上面代码中,使用为#page元素设置了display属性让其成为一个伸缩容器。这里要注意的是必须设置width。如果没有设置width,这里的#main元素的box-flex属性会失效,原因在于父容器没有宽度,自然无法填充伸缩容器的额外空间,(这里的额外空间指的是#page元素所占的面积,而不单单指宽度)。为#main元素设置box-flex属性是让其自适应伸缩容器的额外宽度。因为webkit内核的浏览器(Chrome,Safari)和Gecko内核(Firefox)不支持box-flex属性和box属性,所以必须添加厂商前缀。



上面实例中,需要修改一下主内容和左边栏,右边栏的排列方式,使用box-ordinal-group属性。

#sidebar-right {
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
}
#main {
background-color: #e66;
padding: 10px;
margin: 0 10px;
-moz-box-flex: 1;
-moz-box-ordinal-group: 2;
-webkit-box-flex: 1;
-webkit-box-ordinal-group: 2;
}
上面代码中,使用了box-ordinal-group属性,这个属性是用于修改伸缩项目在伸缩容器中的显示顺序,默认值为1,也就是按照DOM文档流出现的先后顺序进行排序。下面重置了box-ordinal-group属性之后的效果。



至此,这个页面就已经做好了。但是出现了一个问题,就是页脚区域不会黏附在浏览器窗口可视区域底部,这让用户体验非常糟糕。

使用css3的flexbox属性实现就很简单。最关键的技巧就是让body元素变成一个伸缩容器,并且使用伸缩性属性box-flex让页脚区域之前的div具有伸缩性(也就是#page元素)。也就是说,页脚区域前的div会变成一个伸缩项目,会根据伸缩容器的高度自适应填充伸缩容器的额外空间,也就是自动拉伸页脚区域前的div填充浏览器可视区域中的所有空间。

如果希望整个页面的布局要和浏览器窗口可视区域一样高,

首先必须设置html和body元素的高度和浏览器窗口可视区域高度一样高。如果少了body高度的设置,body本身就没有高度,当然伸缩项目的伸缩性也就无法体现。

html, body {
height: 100%;
}
其次,让body元素自身成为一个伸缩容器,并且设置伸缩流方向(box-orient)为vertical(旧版本中的属性)。

body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -moz-box;
-moz-box-orient: vertical;
display: -webkit-box;
-webkit-box-orient: vertical;
width: 100%;
}
最后,设置页脚区域前的div(#page元素)中的box-flex属性,让其根据伸缩容器(这里是指body)的高度自适应伸缩容器body的额外空间,也就是自动拉伸#page元素的高度。这样就会是页脚一直在浏览器可视窗口底部显示。

#page {
margin-top: 10px;
width: 100%;
display: -moz-box;
-moz-box-flex: 1;
-moz-box-align: stretch;
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-align: stretch;
}
上面代码中,#page元素本身是一个伸缩容器,现在变成伸缩项目。在伸缩布局盒模型中,伸缩项目在侧轴的对齐方式box-align(旧版本)默认值为stretch,(css中可不写box-align属性)致使#page元素的三个伸缩项目都会自动拉伸,不管内容高度有多少都具有伸缩容器#page的高度,从而实现三列等高布局并且页脚黏附浏览器可视区域底部的效果。最后附上效果图。





完。

感谢大家的阅读。


CSS3之flexbox如何实现水平垂直居中和三列等高布局


最近这些天都在弥补css以及css3的基础知识,在打开网页的时候,发现了火狐默认首页上有这样一个东西。



第一个css属性就没有看懂。于是乎,开始各种找资料,各种看书。这些天把对于css3伸缩布局盒(flexbox)模型的理解写成博文,目的是对flexbox做一个简单的介绍。

以下的内容会分为如下小节:

1.关于css3中flexbox需要掌握的概念

2.flexbox实现水平垂直居中对齐

3.三列等高自适应,页脚区域黏附底部的布局

1.关于css3中flexbox需要掌握的知识

因为对于三列等高自适应布局和水平垂直居中对齐需要一些对css3中flexbox基础概念的理解,所以会对flexbox的概念做一个简单的介绍,以为后面的实例做一个铺垫。本人一直认为,不管学习任何知识,对于概念的理解都十分重要。

a:伸缩容器:是指通过display属性显示地给一个元素设置为flex或者inline-box(标准版本),这个容器就是一个伸缩容器。

b:伸缩项目:一个伸缩项目是伸缩容器的子元素。一个伸缩容器的内容具有零个以上的伸缩项目--伸缩容器的每个子元素都会成为一个伸缩项目(包括文字,称为匿名伸缩项目)。

c:伸缩流方向:是指伸缩容器中的主轴方向,可以理解成x轴的方向。伸缩流方向主要通过flex-direction属性(标准标准版本)来设置,默认值为row。

d:伸缩行换行:伸缩项目在伸缩容器中有时候会溢出伸缩容器。在伸缩容器属性中,主要通过flex-wrap属性来设置伸缩容器是否换行,默认值为nowrap。

e:伸缩性:定义伸缩项目可改变伸缩容器的宽度或高度填补可用的空间。可以将伸缩容器的额外空间分发给其伸缩项目或将他们缩小以防止伸缩项目溢出。

2.flexbox实现水平垂直居中对齐



html, body {
height: 100%;
width: 100%;
}
body {
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-box-pack: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}
.content {
width: 300px;
height: 300px;
background-color: lightblue;
text-align: center;
display: -moz-box;
-moz-box-orient: vertical;
-moz-box-align: center;
-moz-box-pack: center;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-box-align: center;
-webkit-box-pack: center;
}
水平垂直居中对齐
首先,设置html和body的宽度和高度都为100%,目的是让其拥宽度和高度,否侧主轴对齐(box-pack)和侧轴对齐(box-align)无法让伸缩项目之前分布伸缩容器的额外空间。

然后,让body成为伸缩容器,设置display属性为box,设置box-pack和box-align来控制主轴对齐和侧轴对齐,让其属性值都为center。

最后,.content元素成为伸缩容器,这样其内部文字块会成为匿名伸缩项目。此时的.content元素即为伸缩容器,又为伸缩项目。当作为伸缩容器的时候,h1元素为其伸缩项目;当作为伸缩项目的时候,body为其伸缩容器。同样为.content设置box-align和box-pack,来控制侧轴对齐和主轴对齐方式 。

效果图如下,.cotent元素和h1都实现了水平垂直居中对齐。



3.三列等高自适应,页脚区域黏附底部的布局

对于三列布局的方法有非常多种,可以通过对float+百分比宽度来实现,也可以用inline-block配合百分比实现,但是很难实现页脚黏附浏览器可视窗口底部的布局。这里只对css3三列等高布局做介绍。

做任何的布局效果,都离不开HTML结构。


头部



主内容


左边栏


右边栏



页脚


假设头部和页脚的宽度为100%,左右两栏宽度为200px,而主内容自适应宽度。

body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
#header, #footer {
width: 100%;
padding: 10px;
background-color: #ccc;
}
#footer {
margin-top: 10px;
}
#sidebar-left, #sidebar-right {
width: 200px;
padding: 10px;
background-color: #f36;
}
这里为body设置box-sizing是为了让盒模型的宽度=内容宽度+border+padding,避免在设置padding值时需要计算width的宽度。

接下来,使用伸缩布局盒模型box(旧版本,仍然可以使用),让#page元素成为伸缩容器,设置box-flex让其子元素拥有伸缩性,自适应伸缩容器的剩余空间。

#page {
margin-top: 10px;
width: 100%;
display: -moz-box;
display: -webkit-box;
}
#main {
background-color: #e66;
padding: 10px;
margin: 0 10px;
-moz-box-flex: 1;
-webkit-box-flex: 1;
}
上面代码中,使用为#page元素设置了display属性让其成为一个伸缩容器。这里要注意的是必须设置width。如果没有设置width,这里的#main元素的box-flex属性会失效,原因在于父容器没有宽度,自然无法填充伸缩容器的额外空间,(这里的额外空间指的是#page元素所占的面积,而不单单指宽度)。为#main元素设置box-flex属性是让其自适应伸缩容器的额外宽度。因为webkit内核的浏览器(Chrome,Safari)和Gecko内核(Firefox)不支持box-flex属性和box属性,所以必须添加厂商前缀。



上面实例中,需要修改一下主内容和左边栏,右边栏的排列方式,使用box-ordinal-group属性。

#sidebar-right {
-moz-box-ordinal-group: 3;
-webkit-box-ordinal-group: 3;
}
#main {
background-color: #e66;
padding: 10px;
margin: 0 10px;
-moz-box-flex: 1;
-moz-box-ordinal-group: 2;
-webkit-box-flex: 1;
-webkit-box-ordinal-group: 2;
}
上面代码中,使用了box-ordinal-group属性,这个属性是用于修改伸缩项目在伸缩容器中的显示顺序,默认值为1,也就是按照DOM文档流出现的先后顺序进行排序。下面重置了box-ordinal-group属性之后的效果。



至此,这个页面就已经做好了。但是出现了一个问题,就是页脚区域不会黏附在浏览器窗口可视区域底部,这让用户体验非常糟糕。

使用css3的flexbox属性实现就很简单。最关键的技巧就是让body元素变成一个伸缩容器,并且使用伸缩性属性box-flex让页脚区域之前的div具有伸缩性(也就是#page元素)。也就是说,页脚区域前的div会变成一个伸缩项目,会根据伸缩容器的高度自适应填充伸缩容器的额外空间,也就是自动拉伸页脚区域前的div填充浏览器可视区域中的所有空间。

如果希望整个页面的布局要和浏览器窗口可视区域一样高,

首先必须设置html和body元素的高度和浏览器窗口可视区域高度一样高。如果少了body高度的设置,body本身就没有高度,当然伸缩项目的伸缩性也就无法体现。

html, body {
height: 100%;
}
其次,让body元素自身成为一个伸缩容器,并且设置伸缩流方向(box-orient)为vertical(旧版本中的属性)。

body {
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: -moz-box;
-moz-box-orient: vertical;
display: -webkit-box;
-webkit-box-orient: vertical;
width: 100%;
}
最后,设置页脚区域前的div(#page元素)中的box-flex属性,让其根据伸缩容器(这里是指body)的高度自适应伸缩容器body的额外空间,也就是自动拉伸#page元素的高度。这样就会是页脚一直在浏览器可视窗口底部显示。

#page {
margin-top: 10px;
width: 100%;
display: -moz-box;
-moz-box-flex: 1;
-moz-box-align: stretch;
display: -webkit-box;
-webkit-box-flex: 1;
-webkit-box-align: stretch;
}
上面代码中,#page元素本身是一个伸缩容器,现在变成伸缩项目。在伸缩布局盒模型中,伸缩项目在侧轴的对齐方式box-align(旧版本)默认值为stretch,(css中可不写box-align属性)致使#page元素的三个伸缩项目都会自动拉伸,不管内容高度有多少都具有伸缩容器#page的高度,从而实现三列等高布局并且页脚黏附浏览器可视区域底部的效果。最后附上效果图。





完。

感谢大家的阅读。


CSS3中的弹性框布局Flexbox可以实现的效果有哪些?

flex-box 弹性布局可以实现的效果:自适应布局,效果图如下:

代码如下:

<!DOCTYPE HTML>

<html>

<head>

 <meta charset="utf-8">

 <title> flex box 弹性布局 </title>

 <meta name="Keywords" content="">

 <meta name="Description" content="">

 <style type="text/css">

html,body{height:100%;margin:0;}/*需要添加高度控制,否则无法撑满整个屏幕*/

body{

display:-webkit-box;

-webkit-box-orient:vertical;/*按照垂直方向上进行自适应处理*/

}

.content{-webkit-box-flex:1;/*分配剩余的所有空间*/} .header{height:50px;min-width:500px;}/*顶部模块高度定死*/

.logo{width:100px;height:50px;background:#99f;}/*为区分模块,设置了背景色 logo部分固定宽高*/

.nav{height:50px;background:#ccc;}/*nav模块不固定宽度*/

.content{min-height:100px;}/*为防止之后的调整窗口大小是出现影响视觉效果的问题,特设置最小高度*/

.content,.header{display:-webkit-box;/*为content,header部分也添加box的展示模式*/}

.nav{-webkit-box-flex:1;}

.con2{-webkit-box-flex:1;}

.con1{width:200px;background:#f99;}/*固定宽度,高度不定*/

.con2{min-width:200px;background:#999;}/*同上的min-height*/

.con3{width:100px;background:#9f9;}/*固定宽度,高度不定*/

.footer{height:50px;min-width:500px;background:#ccc;}/*固定高度*/

 </style>

 <link href="" style="text/css" rel="stylesheet"/>

</head>

<body>

 <div class="header">

<div class="logo">logo部分,宽高固定</div>

<div class="nav">nav部分,高度固定,宽度自适应</div>

 </div>

 <div class="content">

<div class="con1">内容初始化第1模块</div>

<div class="con2">内容初始化第2模块</div>

<div class="con3">内容初始化第3模块</div>

 </div>

 <div class="footer">底部,宽度不定,高度固定</div>

</body>

</html>

如何通过flex进行网页布局


flex称为弹性布局,当父元素设置为flex值后子元素会自动成为其成员,再通过设置属性值来实现各种布局效果。例通过给父元素设置justify-content属性实现水平垂直居中效果
通过Flex可以简便、完整、响应式地实现各种页面布局。随着浏览器的发展,目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。接下来将和大家分享如何通过flex进行网页布局
【推荐课程:CSS教程】
flex布局
称为"弹性盒模型", 当父容器设置了display:flex时,子元素自动成为其成员, 容器默认存在两根轴:水平方向的主轴和垂直的交叉轴,项目默认沿主轴排列。
flex容器(父容器)的一些属性:
flex-direction:决定主轴的方向(即项目的排列方向)
flex-wrap:如果一条轴线排不下,如何换行
flex-flow:是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
justify-content:定义了项目在主轴上的对齐方式
align-items:定义项目在交叉轴上如何对齐
align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
实例
flex实现水平垂直居中

* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
display: flex;
width: 100%;
height: 100%;
background: #eee;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
background:pink;
}效果图:

两列等高布局:
左边固定宽度,右边占据剩余宽度:
<style>
*{
margin: 0;
padding:0;
}
.grid{
display: flex;
border: 1px solid #ccc;
}
.left{

background-color:pink;
flex-basis: 200px;
}
.right{

background-color:skyblue;
flex-basis:calc(100% - 200px);
}
</style>效果图:
总结:

如何通过flex进行网页布局


flex称为弹性布局,当父元素设置为flex值后子元素会自动成为其成员,再通过设置属性值来实现各种布局效果。例通过给父元素设置justify-content属性实现水平垂直居中效果
通过Flex可以简便、完整、响应式地实现各种页面布局。随着浏览器的发展,目前,它已经得到了所有浏览器的支持,这意味着,现在就能很安全地使用这项功能。接下来将和大家分享如何通过flex进行网页布局
【推荐课程:CSS教程】
flex布局
称为"弹性盒模型", 当父容器设置了display:flex时,子元素自动成为其成员, 容器默认存在两根轴:水平方向的主轴和垂直的交叉轴,项目默认沿主轴排列。
flex容器(父容器)的一些属性:
flex-direction:决定主轴的方向(即项目的排列方向)
flex-wrap:如果一条轴线排不下,如何换行
flex-flow:是flex-direction属性和flex-wrap属性的简写形式,默认值为row nowrap
justify-content:定义了项目在主轴上的对齐方式
align-items:定义项目在交叉轴上如何对齐
align-content:定义了多根轴线的对齐方式。如果项目只有一根轴线,该属性不起作用
实例
flex实现水平垂直居中

* {
margin: 0;
padding: 0;
}
html {
width: 100%;
height: 100%;
}
body {
display: flex;
width: 100%;
height: 100%;
background: #eee;
justify-content: center;
align-items: center;
}
.box {
width: 200px;
height: 200px;
background:pink;
}效果图:

两列等高布局:
左边固定宽度,右边占据剩余宽度:
<style>
*{
margin: 0;
padding:0;
}
.grid{
display: flex;
border: 1px solid #ccc;
}
.left{

background-color:pink;
flex-basis: 200px;
}
.right{

background-color:skyblue;
flex-basis:calc(100% - 200px);
}
</style>效果图:
总结:

div+css3弹性盒子(flex box)布局

弹性盒子是CSS3的一种新布局模式。

CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。

引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。

首先要明白几个概念:

主轴 :Flex容器的主轴主要用来配置Flex项目,默认是水平方向

侧轴 :与主轴垂直的轴称作侧轴,默认是垂直方向的

方向 :默认主轴从左向右,侧轴默认从上到下

主轴和侧轴并不是固定不变的,通过flex-direction可以互换。

表格中的数字表示支持该属性的第一个浏览器的版本号。

紧跟在数字后面的 -webkit- 或 -moz- 为指定浏览器的前缀。

弹性盒子由弹性容器(Flex container)和弹性子元素(Flex item)组成。

弹性容器通过设置 display 属性的值为 flex 或 inline-flex将其定义为弹性容器。

弹性容器内包含了一个或多个弹性子元素。

注意: 弹性容器外及弹性子元素内是正常渲染的。弹性盒子只定义了弹性子元素如何在弹性容器内布局。

弹性子元素通常在弹性盒子内一行显示。默认情况每个容器只有一行。

以下元素展示了弹性子元素在一行内显示,从左到右:

决定项目的方向。

注意: 如果元素不是弹性盒对象的元素,则 flex-direction 属性不起作用。

属性值

flex-wrap 属性规定flex容器是单行或者多行,同时横轴的方向决定了新行堆叠的方向。

可以取三个值:

(1) nowrap (默认):不换行。

(2)wrap:换行,第一行在上方。

(3)wrap-reverse:换行,第一行在下方。

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

justify-content 用于设置或检索弹性盒子元素在主轴(横轴)方向上的对齐方式。

align-items 属性定义flex子项在flex容器的当前行的侧轴(纵轴)方向上的对齐方式。

数值越小,排列越靠前,默认为0。

<integer>:用整数值来定义排列顺序,数值小的排在前面。可以为负值,默认为0。

<integer>:一个数字,规定项目将相对于其他灵活的项目进行扩展的量。默认值是 0。

flex 元素仅在默认宽度之和大于容器的时候才会发生收缩,其收缩的大小是依据 flex-shrink 的值。默认为1,即如果空间不足,该项目将缩小。负值对该属性无效

<integer>:一个数字,规定项目将相对于其他灵活的项目进行收缩的量。默认值是 1。

如果设置为0不进行收缩,值越大收缩越多。

4. css弹性盒子模型

备注 :我们需要在不同设备的不同尺寸屏幕下去浏览网页,传统的网页布局方式很难满足响应式布局的需要。因此css3提出了一些全新的布局属性,包括: 弹性盒子模型 , 多列属性 , 响应式布局 等等。弹性盒子模型的最大特征在于动态修改子元素的宽度和高度,以满足在不同尺寸屏幕下的恰当布局。

说明 :盒子模型的内容范围包括内容(content)、内边距(padding)、边框(border)和外边距(margin)。盒子模型就是通过div和css样式来设计一个可以添加逻辑的效果。

备注 :内边距(padding)在 content 外,边框内。内边距有1个参数时,上下左右外边距都为该参数值;2个参数时,第一个参数为 上下 外边距值,第二个参数为 左右 外边距值;4个参数分别代表 上右下左 外边距值。

边框可以创造出效果出色的边框,并可以应用于任何元素。 基本的边框属性 :

简化写法

备注: border: 1px solid red; 三个参数分别为边框的宽度、样式和颜色属性。

css3提供的边框属性

eg1 :圆角边框的绘制

阴影属性(box-shadow)的4个参数分别代表:背景阴影 向右 移动10个像素,再 向下 移动20个像素;阴影 透明度 ;阴影 颜色 。

备注:围绕在内容边框的区域就是外边距(margin),外边距默认是透明区域,外边距接受任何长度单位和百分数值。外边距和内边距的属性比较相似。margin的参数个数和对应代表大含义和padding一致。

盒子模型示例

说明:最外层的div为容器层,之后为边框、内边距和内容区域。

说明:外边距合并就是一个叠加的概念。外边距合并遵循边距大的一方,即元素1的外边距为10px,元素2的外边距为20px,则元素1和元素2间的距离为20px;元素1的外边距为10px,元素2的外边距为10px,则元素1和元素2间的距离为10px。

(1) 弹性容器属性

(2) 弹性子元素属性

eg1 :

醉满楼美食网还为您提供以下相关内容希望对您有帮助:

CSS3中的弹性框布局Flexbox可以实现的效果有哪些?

flex-box 弹性布局可以实现的效果:自适应布局,效果图如下:代码如下:&lt;!DOCTYPE HTML&gt; flex box 弹性布局 html,body{height:100%;margin:0;}/*需要添加高度控制,否则无法撑满整个屏幕*/body{display:...

三个div呈品字形排列用css3的flex方式怎么写?

既然楼主说是弹性盒,那就用弹性盒的相关术语来进行分析。首先分析图片,一个大容器中包含三个项目,你会发现单纯的给容器加一个display:flex;的声明是不可以的,因为这个声明默认容器内的项目在一行显示,并且不会溢出。那么...

用CSS2及CSS3弹性盒两种方式实现如下布局,要求自适应浏览器窗口宽高...

样式一: css3弹性 {margin: 0;padding: 0;} .top{width: 100%;height: 100px;background: greenyellow;} .flex{display: flex;} .left{width: 200px;background: orangered;} .right{flex-grow: 1;background...

css3的弹性框模型是什么意思?

弹性盒模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间。这与XUL(火狐使用的用户交互语言)相似,其它语言也使用相同的盒模型,如XAML 、GladeXML。使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自...

div+css3弹性盒子(flex box)布局

弹性盒子是CSS3的一种新布局模式。 CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。 引入弹性盒布局模型的目的是提供一种更加有效的...

flex弹性布局

弹性布局可以响应式的实现各种页面布局,所有浏览器都支持。让所有的li在ul当中垂直居中,实现如下:效果如下:接下来再细聊每个属性的特性。任何一个容器都能使用flex布局,这里有一个flex-container的概念。ul即为flex-...

弹性盒子flex布局

弹性盒子布局 1.flex-direction属性 取值:row(默认) | row-reverse | column | column-reverse 用于控制项目排列方向与顺序,默认row,即横向排列,项目排列顺序为正序1-2-3;row-reverse同为横向排列,但项目顺序为...

前端面试题系列之-CSS及页面布局篇

CSS3 弹性盒( Flexible Box 或 flexbox),是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和...

RN笔记:样式布局总结

flex 弹性布局 number 用于设置弹性盒模型分配空间,比如: flex:1 flexDirection 主轴的方向 enum('row','row-reverse','column','column-reverse')justifyContent 主轴对齐方式 enum('flex-start','flex-end','...

CSS3 display:flex和display:box有什么区别

如果父级box的总宽度为300px,#P1将有一个100px的宽度,#P2将有一个200px的宽度,也就是呈固定比例划分,多看看css3的新属性,去了下弹性盒子模型。以上是自己的一点拙见,欢迎批评指正。希望能够帮助到你,望采纳。

Top