css3盒子布局-定义盒子布局的位置(box-ordinary-group)

最新推荐文章于 2024-04-14 20:17:04 发布
最新推荐文章于 2024-04-14 20:17:04 发布
阅读量2.1k 收藏 1
点赞数
分类专栏： css3 文章标签： css3 布局
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xyy_933/article/details/51314839
版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>css3定位布局-盒子布局的位置(box-ordinary-group)</title>
<style>
   
body{
margin:0;
padding:0;
text-align: center;
background-color: #d9bfe8;
}
.box{
margin:auto;
text-align:center;
width:988px;
display: box;
display: -moz-box;
display:-webkit-box;
-moz-orient: vertical;
-webkit-box-orient: vertical;
box-orient:vertical;
}
.box1{
-webkit-box-ordinal-group: 2;
-moz-box-ordinal-group: 2;
box-ordinary-group:2;
}
.box2{
-webkit-box-ordinal-group: 1;
-moz-box-ordinal-group: 1;
box-ordinary-group:1;
}
.box3{
-webkit-box-ordinal-group: 3;
-moz-box-ordinal-group: 3;
box-ordinary-group:3;
}
</style>
</head>
<body>
<h1>box-ordinary-group:integer,参数值是一个自然数,表示设置子元素的位置编号,如果没有指定值,默认为1,序号相同的按照加载的顺序进行排列</h1>
<div class="box">
<div class="box1">布局1</div>
   <div class="box2">布局2</div>
   <div class="box3">布局3</div>
</div>
</body>
</html>

清濛
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML样式布局以及盒子定位
XuWenXin1的博客
07-25 7737
一、页面布局   1.div盒子 盒子模型，定义页面某一块区域范围 &lt;div&gt;&lt;/div&gt;,块级标签   与table表格布局：整齐，规则，需要行和列组成，布局死板   2.css内部样式 样式设置方式： 1)内联样式，行式样式 写在标签内，通过style来定义样式 &lt;div style="width: 1000px;height: 500p...
前端攻城狮---css3之布局(3)
GYH的博客
09-14 188
本章节主要讲解box em rem 媒体和表格 display：box 大家可能见到很多display：box； display：flex； display：flex-box； 其实可以这么理解，display：box是旧版的伸缩布局，display：flex-box是过渡板的，display：flex是最新版本。因为一些兼容性问题，所以我们还是有必要去学习一下display：box的用法，...
CSS盒子的定位
zys72716的博客
04-14 225
当盒子设置上定位属性之后，那么，这个盒子就具有了 left | right | bottom | top 四个方向。绝对定位的盒子，也可以进行四个方向的移动，四个方向参考的是绝对定位盒子的《父级》！B. 固定定位的盒子也可以写四个方向的移动，参考对象就是浏览器。块级盒子的从上到下，行级盒子的从左到右，这个顺序就是文档流。4> fixed 固定定位（永远相对于浏览器的固定定位）距离父级右侧50px的距离。距离父级左侧50px的距离。绝对定位的盒子是脱离《文档流》的！A. 固定定位也是脱离文档流的。
html盒子位置如何设置吗,css盒子的定位
weixin_35473667的博客
06-04 3865
CSS盒子定位：什么是盒子定位呢，顾名思义，就是元素盒子(以下主要以块级盒讲解)在页面中的位置，定位就是确定他的位置，盒子定位分为以下四种 ：1、静态位置(position：static)也就是默认值：每一个元素在没有float值的时候，都有position值，就是static，可以直接理解它在是默认值的时候就是常规流，所有规则与常规流一样；2、相对位置(position：relative)：相对...
css五大布局方式详解
热门推荐
lin1072368472的博客
10-09 1万+
css布局方式 table布局 float布局 flex布局 响应式布局 Grid布局 table布局 table布局在如今已经很少使用，原因是：table布局比其它html标记占更多的字节，会阻挡浏览器渲染引擎的渲染顺序，会影响其内部的某些布局属性的生效。 使用table布局有两种方式 table标签 display：table 标签与js的对应 table { display: table } tr { display: table-row } thead { displ
调整盒子位置的方式
weixin_小白鼠的博客
07-06 2314
调整盒子位置的方式 1 边距margin/padding： 标准流内调整, 注意可能存在盒子塌陷的问题 2 弹性布局flex： flex布局之后，就不用考虑盒子类型的概念了，行内元素也可以直接设置宽高了 3 浮动float: 特点：脱离标准流，不再保留原来的位置，其他盒子可能会占有它原来的位置 缺点：无法撑开父盒子，脱标不占位，可能与其他内容重叠 清除浮动：清楚浮动带来的影响，多种方法，给父盒子设置高度、clear:both、伪元素 4 定位position： 绝对定位的特点：脱离标准流，不再保留原来的位置
盒子的定位
阿牛哥的博客
10-21 2090
盒子的定位 一、 定位 （position） 定位position 说明： 设置对象的定位方式，可以让布局层容易位置绝对定位，控制盒子对象更加准确。 定位 position 语法： position : static 、absolute 、relative、fixed 。 static : 称为静态定位，这是默认的属性值，也就是该盒子按照标准流（包括浮动方式）进行布局。 relative ：称为相对定位，使用相对的盒子的位置常以标准流动排版方式为基础，然后使盒子相对于它在原来的位置偏移指定的距离。相对
flex布局-仿x程网源码.zip
06-15
Flex布局，全称为“Flexible Box”，也被称为弹性盒布局，是CSS3中的一种布局模式，旨在提供更加灵活的盒状模型来处理复杂和多变的网页布局。在仿x程网源码中，我们可以深入理解Flex布局在实际项目中的应用。 在...
GitConverter-ordinary:将1C扩展为1C
05-16
1C：用于普通应用程序的GitConverter 1C扩展1C 允许您转换“常规应用程序”的配置。 注意力！ EDT不支持使用“普通应用程序”启动模式开发配置，但要转换1C存储的历史记录（其中配置的初始版本可能包含此设置），则...
响应式布局-仿阿里百秀项目前端源码项目.zip
最新发布
06-15
响应式布局是一种网页设计技术，它允许网页在不同的设备上自动调整其布局，以适应不同尺寸的屏幕，如桌面电脑、平板电脑和智能手机。阿里百秀项目是一个展示响应式设计优秀实践的实例，通过仿造这个项目，我们可以...
shuji.rar_runge-kutta method
09-21
四阶龙格库塔法（Runge-Kutta 4th Order Method）是一种数值积分方法，常用于求解常微分方程（Ordinary Differential Equation, ODE）的初值问题。这种方法通过迭代的方式逼近真实解，尤其适用于无法解析求解的情况...
RK.zip_Runge-Kutta_range kutta method
09-23
**Runge-Kutta方法**是数值积分领域中的一个重要算法，用于求解常微分方程（Ordinary Differential Equations, ODEs）的初值问题。这个方法通过一系列迭代步骤来逼近真实解，而非直接得到解析解。在MATLAB中，Runge-...
盒子定位
ahui610324的博客
06-03 1165
在页面布局设计中，盒子定位是十分重要的内容。在 CSS中控制盒子的位置有多种方式：盒子的浮动定位，盒子的流动定位，以及通过 position属性控制盒子的位置。在此，主要介绍盒子的position定位。1.静态定位（static）：HTML元素的默认值，即没有定位，元素出现在正常的流中。静态定位的元素不会受到top, bottom, left, right影响2.固定定位（fixed）：元素的位置...
CSS3------盒模型
m0_59749255的博客
11-25 1569
内边距是用来改变内容位置，由于默认页面的布局方向是从上到下，从左到右的。内边距是用来改变内容位置，由于默认页面的布局方向是从上到下，从左到右的。属性指定一个元素（静态的，相对的，绝对或固定）的定位方法的类型。盒子自身不动，将水平方向上的相邻盒子向右推。盒子自身不动，将垂直方向上的相邻盒子向下推。盒子自身不动，将水平方向上的相邻盒子向右推。盒子自身不动，将水平方向上的相邻盒子向右推。盒子自身不动，将垂直方向上的相邻盒子向下推。盒子自身不动，将垂直方向上的相邻盒子向下推。
CSS笔记（八）盒子模型-----定位
weixin_45904557的博客
03-10 2989
1.当某个元素可以自由的在盒子内移动，并且压住其它盒子 2.当我们滚动窗口时，盒子是固定屏幕某个位置的 以前的标准流和浮动无法实现上述效果 所以， 浮动和定位的区别： 1.浮动可以让多个块级盒子一行没有缝隙排列显示，经常用于横向排列盒子 2.定位则是可以让盒子自由的在某个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子 定位： 将盒子定在某一个位置，所以定位也是在摆放盒子，按照定位的方式移动盒子 定位=定位模式+边偏移 定位模式用于指定一个元素在文档中的定位方式，边偏移则决定
html怎样定义盒子的位置,css盒子的定位有哪些方法？
weixin_36051064的博客
06-04 2632
所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：边距，边框，填充，和实际内容。什么是盒子定位呢，顾名思义，就是元素盒子(以下主要以块级盒讲解)在页面中的位置，定位就是确定他的位置，盒子定位分为以下四种 ：推荐：css手册1、静态位置(position：static)也就是默认值：每一个元素...
CSS之盒子定位
fcc627的博客
04-20 4165
文章目录定位导读1.1 为什么需要定位1.2 定位组成1.3 静态定位1.4 相对定位（==重要==）1.5 绝对定位（==重要==）1.6 子绝父相的由来1.7 固定定位fixed（==重要==）1.8 定位叠放次序 z-index1.8 定位的拓展1.9 定位案例元素的显示与隐藏2.1 display 属性2.2 visibility 属性2.3 overflow 溢出属性2.4 仿土豆网显示隐藏遮罩案例 定位导读 1.1 为什么需要定位 定位可以让盒子自由地在某个盒子内移动位置或固定屏幕中的某个位置
css的盒子模型（相对位置，绝对位置）
wyqwilliam的博客
11-05 4129
&lt;html&gt; &lt;head&gt; &lt;title&gt;CSS的定位和盒子模型&lt;/title&gt; &lt;meta charset="UTF-8"/&gt; &lt;!--声明css代码域--&gt; &lt;style type="text/css"&gt; #showdiv{ border

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值