CSS3中的弹性流体盒模型技术详解(一)

最新推荐文章于 2023-03-17 09:48:34 发布
最新推荐文章于 2023-03-17 09:48:34 发布
阅读量155 收藏
点赞数
分类专栏： css3 div+css 文章标签： css css3 弹性布局 盒子模型 自适应布局
css3 同时被 2 个专栏收录
25 篇文章 0 订阅
订阅专栏
div+css
18 篇文章 0 订阅
订阅专栏
从这篇文章开始，会利用几个篇幅，我将跟大家分享 从 CSS1到 CSS3都是如何实现页面布局的(当然，所指的范畴是利用CSS技术)。
由于盒子模型技术内容比较多，这篇文章我将着重讲解知识点。
下一篇文章，我会带领大家开发一个兼容 pc端浏览器和 移动端浏览器的弹性布局web界面的实例。希望大家能从中领受到 CSS3在布局方面的强大功能。
 
好了，长话短说，现在开始我们的《CSS3中的弹性流体盒模型技术详解》之旅吧！
 
在讲解CSS3中新增的弹性布局属性之前，我们先回顾一下 CSS1 和 CSS2中都已经定义了哪些布局方面的属性，这样也会增加我们理解弹性布局。
 
其实我们现在有很多一部分人，你们刚刚接触CSS层叠样式表，或者接触有一段时间了，但是却没有很好的去消化与理解。可能平时你们还一直在使用table，然后通过不断了合并单元格来实现网页布局。希望我今天的这篇文章能彻底改变大家的观念。
 
Q：如何理解盒子模型？
A： 大家可以想一想，在现实生活中，如果我们拿一个盒子来装东西，那么盒子里面的东西是不是跟这个盒子之间会有空隙呢？站在里面物品的角度，则它们之间的间隙距离是不是就可以构成 物品到盒子的外边距。如果站在盒子的角度，则从盒子到物品的距离，是不是可以看出盒子的内边距呢。 当然，盒子还是会有宽和高的。外边距的英文就是margin，内边距的英文是padding，宽是width，高是height。下面是盒子模型的2D图：
 
clipboard
CSS 1中定义了盒子模型的基本元素，详细属性请看下表：
margin-top元素顶部外边距
margin-right元素右侧外边距
margin-bottom元素底部外边距
margin-left元素左侧外边距
margin这是一个复合属性，定义 元素 各个边的外边距， 属性值的顺序是: 上，右，下，左
border-top元素上边框样式
border-right元素右边框样式
border-bottom元素下边框样式
border-left元素左边框样式
border-width元素边框宽度
border-top-width元素上边框宽度
border-right-width元素右边框宽度
border-bottom-width元素下边框宽度
border-left-width元素左边框宽度
border复合属性，可以同时设置各个边框样式
padding-top元素上侧内边距
padding-right元素右侧内边距
padding-bottom元素下侧内边距
padding-left元素左侧内边距
padding复合属性，同时设置各个边框内边距
width设置元素的宽度
height设置元素的高度
float设置元素浮动显示
clear清除元素的浮动效果
border-color设置边框颜色
border-style设置边框样式

CSS 2在以上基础上，又做了一些细化：

border-top-color元素上边框颜色
border-right-color元素右边框颜色
border-bottom-color元素下边框颜色
border-left-color元素左边框颜色
border-top-style元素上边框样式
border-right-style元素右边框样式
border-bottom-style元素下边框样式
border-left-style元素左边框样式
 
在CSS2的基础上， CSS3增加了弹性盒模型布局属性，这为我们开发适合现代移动浏览器提供了便利：
box-align子元素在盒子内垂直方向上的空间分配
box-pack子元素在盒子内水平方向的空间分配方式
box-direction盒子的显示顺序
box-flex元素在盒子内的自适应尺寸
box-flex-group自适应子元素群组
box-lines子元素分列显示
box-ordinal-group子元素在盒子内的显示位置
box-orient盒子分布的坐标轴
 
下面我将对CSS3中新增的弹性盒模型属性做详细介绍，并通过实际coding来带领大家深刻认识弹性布局的威力。
 
首先我们先创建一个html页面，代码如下所示：
 
运行页面，查看一下目前样式的应用效果:
clipboard02
 
 
首先声明：要想运用CSS3的弹性布局，需要将父容器设置为display:box 或 display:inline-box，下面不在赘述。
 

 

 
box-orient 作用： box-orient属性规定了子元素应该是水平方向还是垂直方向显示。
box-orient 语法： box-orient: horizontal | vertical | inline-axis | block-axis | inherit;
 
语法解释: horizontal 和 inline-axis 规定了子元素以水平方向显示，两者的显示效果差不多，具体差异不清。vertical 和 block-axis 规定了子元素以垂直方向显示， 两者的显示效果差不多，具体差异不清 。
 
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上 -webkit-前缀，Mozilla核心的浏览器，需要加上前缀 -moz-。
 
示例：
 
    修改样式表文件，添加如下样式代码：
 
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box; /*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient:horizontal; /*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
}
 
运行demo页面，效果如下：
clipboard03
 
通过以上效果图，大家可以发现div已经变成了水平布局，且宽度是正好包裹内容， css2.1如果需要实现此效果，就得通过float:left;来实现了。
 
我们再次修改代码，实现垂直方向上布局：
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient: vertical ;/*垂直方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient: vertical ;
box-orient: vertical ;
}
运行页面，效果如下图所示:
clipboard04
 
inline-axis 和 block-axis 运行效果分别与horizontal和vertical一样，这里大家可以自行去测试。
inherit属性值是布局方式继承自父元素，如果父元素是水平的，则它也使用水平布局，这个大家可以自行去测试。

 

box-align 作用：box-align规定了如何在垂直方向上对齐框内的子元素。
box-align 语法：box-align: start | end | center | baseline | stretch;
 
start
对于正常方向的框，每个子元素的上边缘沿着框的顶部放置。
对于反方向的框，每个子元素的下边缘沿着框的底部放置。
end
对于正常方向的框，每个子元素的下边缘沿着框的底部放置。
对于反方向的框，每个子元素的上边缘沿着矿的顶部放置。
center均等地分割多余的空间，一半位于子元素之上，一半位于子元素之下。
baseline如果box-orient是inline-axis或horizontal，所有子元素均与其基线对齐。
stretch拉伸子元素以填充包含块
 
注意：由于此属性还处于测试当中，所以为了兼容webkit核心的浏览器，需要加上 -webkit-前缀，Mozilla核心的浏览器，需要加上前缀 -moz-。
 
示例:
 
    添加start样式，代码如下:
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient: horizontal ;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient: horizontal ;
box-orient: horizontal ;
 
-webkit-box-align:start; /*正常布局下，吸附在顶端显示，相反布局下，吸附在底部显示*/
-moz-box-align:start;
box-align:start;
}
运行效果如下所示：
clipboard05
 
接着，我们让子元素吸附在底部显示，修改代码如下：
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-align: end ;/*正常布局下，吸附在底部显示，相反布局下，吸附在顶部显示*/
-moz-box-align: end ;
box-align: end ;
}
此时的运行效果如下所示：
clipboard06
 
center和baseline的功能，大家可以自行测试，这里着重强调一下，如果属性值设为 stretch，则它会拉伸填充满父元素，其实也就是未设置box-align时候的样式，所以说如果你要设置stretch，那你直接就别设置box-align属性，因为没意义了。
 
修改属性值为stretch，代码如下：
.row{/*设置外围容器样式*/
margin:auto;
border:1px solid black;
width:600px;
height:400px;
margin-top:50px;
 
display:-webkit-box;/*兼容webkit或mozilla核心浏览器，启用弹性盒子模型*/
display:-moz-box;
display:box;
 
-webkit-box-orient:horizontal;/*水平方向显示，兼容webkit和mozilla核心浏览器*/
-moz-box-orient:horizontal;
box-orient:horizontal;
 
-webkit-box-align: stretch ;/*其实此效果就是不设置box-align时候的样式*/
-moz-box-align: stretch ;
box-align: stretch ;
}
效果如下：
clipboard07
 
好了，由于篇幅有限，这篇就先讲到这里。
 

欢迎大家加入互联网技术交流群：62329335 

个人申明：所分享博文，绝对原创，并力争每一个知识点都通过实战演示来进行验证。

刺客团队
关注
专栏目录
Label和Horizontal/Vertical Line简介及示例代码
ByteHackerX的博客
09-06 126
在本文中，将详细介绍Label和Horizontal/Vertical Line的作用和用法，并提供相应的示例代码。通过使用Label和Horizontal/Vertical Line，我们可以在数据可视化中更好地展示和标记数据，提高图表的可读性和信息传达效果。然后，我们创建了一个Label，并设置了文本为"Hello, Label!"，字体样式为Arial字体，大小为18。在上述代码中，我们首先使用Matplotlib库创建了一个简单的折线图，x轴表示数据点的位置，y轴表示数据点的值。
css3实现瀑布流图片特效
weixin_45932157的博客
02-28 455
htmL: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <!-- <link rel="stylesheet" type="text/css" href="./css/pubuliu.css"/> --> <link rel="stylesheet" type="text/css" href="c
CSS特效--流动字体
weixin_52283867的博客
05-25 778
前言 这里我们要实现这一个特效需要使用新的属性——‘clip-path’，它是css3的一个强大属性，我们可以利用它来绘制各种各样的图形，不过自己写需要时间，一些常用的我们可以用生成器 这里我给个网站大家如果参考下： 生成器 代码版块 <div class="top"> <div class="con"> <h2 class="ico1">我想睡觉 啊啊啊啊</h2> <h2 class="
css3化学试管容器液体流动动画js特效
最新发布
ICode联盟
03-17 333
css3化学试管容器液体流动动画特效，各种颜色的液体在化学试管内波动起伏动画效果。
css3 3D立方体流星动画特效
热门推荐
诗水人间
07-20 12万+
css代码 *{ padding:0; margin: 0; } html{ background:linear-gradient(#032861 0%,#000000 80%); height: 100%; width: 100%; overflow: hidden; } /*满天星*/ .wall{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; overflow: h.
css3动画仿加速球水波流动效果
05-17
css3动画仿加速球水波流动效果 参考地址： https://reportvalue.com/wordpress-plugins/gauge-plugin-for-wordpress/ http://codepen.io/wiseguy12851/pen/mJZNqN
CSS 移动端内容总结(二)流式布局和弹性布局
qq_47735503的博客
03-07 932
CSS 内容总结 1.流式布局（百分比布局） 2.京东移动端首页制作 3.flex布局 1.流式布局 流式布局，就是百分比布局，也称非固定像素布局 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充 流式布局方式是移动web开发使用的比较常见的布局方式 <style> * { padding: 0; margin: 0; } .box { width: 100%; max-wi
全宇宙最深入的CSS3 姬成 渡一学习记录
m0_46424423的博客
07-21 1265
全宇宙最深入的CSS3 一、introduction 兼容性前缀 prefix（前缀） browser -webkit chrome/safari -moz firefox -ms IE -o opera 1.历史 更新迭代，兼容性 ---- 加不加前缀 div{ border-radius: ; -webkit-border-radius:; -o-border-radius:; -moz-border-radius:; } 兼容性手册
CSS布局 案例详解
03-03
Flexbox（弹性盒布局）是CSS3引入的一种新的布局模式，适用于单行或单列的复杂布局。它允许元素在容器中灵活地调整大小和位置。通过设置`display: flex;`，容器变为flex容器，可以调整`flex-direction`、`justify-...
网站制作中CSS层叠样式表视频详解
03-19
3. **布局技术**：讲解流体布局（使用百分比单位）、网格系统、Flexbox（弹性盒模型）和Grid布局，这些都是创建响应式网站的关键工具，可以适应不同屏幕尺寸。 4. **响应式设计**：探讨媒体查询@media，用于根据...
CSSReference一个最流行CSS属性的可视化指南
08-10
3. **布局模式**：流体布局（block）、网格布局（grid）和弹性布局（flexbox）是现代CSS布局的主要方式，其中Flexbox特别适用于一维布局，而Grid则擅长二维布局。 4. **响应式设计**：通过媒体查询（@media query）...
HTML5 Canvas流体加载动画特效特效代码
03-20
HTML5 Canvas流体加载动画特效是一款圆形彩色流体环形加载动画特效。
html5液体效果,HTML5 SVG和CSS3炫酷液态菜单按钮特效
weixin_33275503的博客
06-04 357
这是一款使用HTML5 SVG Filters 和CSS3制作的效果非常炫酷的液态菜单按钮特效。该菜单特效开始时显示一个主菜单按钮，当点击该按钮时，子菜单按钮会像液态物质一样依次展开，其效果就像一粒水滴分离为两粒一样。制作方法SVG FiltersSVG filters是十分有用的属性。虽然名字是SVG，但是 SVG filters 也可以通过CSS来使用在规则的HTML DOM元素上。下面是定义...
4种基本布局
weixin_44110537的博客
03-23 945
4种基本布局线性布局（LinearLayout）排列方向（orientation）水平(horizontal)垂直(vertical)对齐方式（layout_gravity）水平方向topcenter_verticalbottom垂直方向leftcenter_horizontalright权重（layout_weight）相对布局（RelativeLayout）控件相对于父布局进行定位layout_alignParentLeftlayout_alignParentToplayout_alignParent.
jq动态渲染后获取不到元素高度_基于 Ant Design 进行表单配置渲染
weixin_39891262的博客
12-01 205
基于 Ant Design 开发了一个表单配置渲染库，可以帮助你通过配置数据快速渲染一个表单并进行表单操作。Github：https://github.com/beyondxgb/afmsExamples: https://beyondxgb.github.io/afms✔︎开箱即用，基于最受欢迎的 React 组件库 Ant Design，非常容易上手。✔︎数据驱动，对表单的任何操作都可以通过操...
Ant Design Vue-Form 学习 --持续更新
做一只有梦想的蚂蚁
01-08 3220
Ant Design Vue FORM
html div 垂直排列,CSS3 box-orient：horizontal|vertical 水平垂直排列子元素 属性
weixin_35106463的博客
06-16 1125
浏览器支持目前没有浏览器支持 box-orient 属性。Firefox 支持替代的 -moz-box-orient 属性。Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性语法：box-orient:horizontal|vertical|inline-axis|block-axis|inherit;值描述测试horizontal在水平行中从左...
H5移动端知识点总结
weixin_33869377的博客
02-04 1086
H5移动端知识点总结 阅读目录 移动开发基本知识点 calc基本用法 box-sizing的理解及使用 理解display:box的布局 理解flex布局 Flex布局兼容知识点总结 回到顶部 移动开发基本知识点 一. 使用rem作为单位 html { font-size: 100px; } @media(min-width: 320px) { html...
基于antd pro二次封装的组件库react-antd-super-form
szsk2021的博客
03-10 1550
基于antd pro二次封装的组件库react-antd-super-form 该组件库是我们对antd pro进行二次封装的一个偏业务层面的一个React ui组件库。 该组件库诞生的初衷？ 该组件库主要是为了提升中后台管理系统开发效率，将antd封装好的各个组件进行组合以达到页面高度配置化。 后台管理系统需求接触多了之后我们会发现各个模块间的区别其实并不大，无非就是表格、表单、弹窗这些组件里面嵌套各个粒度更小的组件。 所以我们就考虑一般组件封装都是将大的组件拆分成粒度更小的组件，那为什么
CSS3弹性盒模型详解：兼容性与关键属性
CSS3弹性盒模型开发笔记（一）主要介绍了弹性盒模型，这是一种用于控制网页布局的创新技术，它使得开发者能够更灵活地管理元素在页面中的分布和响应不同屏幕尺寸。弹性盒模型的核心在于其兼容性和一系列专有的CSS...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值