用html语言定义盒子类,CSS3盒子模型

web前端必须了解的CSS3盒子模型

1、需要了解的属性以及属性值

display:box或者display:inline-box

box-orient:horizontal | vertical (水平 垂直)  定义盒模型的布局方向

box-direction:normal reverse(正序 反序)  元素排列顺序

box-ordinal-group:number(数值) 设置元素具体位置

2、示例源码

html5盒子模型

*{

margin: 0;

padding: 0;

}

#box{

height: 150px;

border: 1px solid red;

/*display:-moz-box;!*火狐支持最好*!*/

/*display: -webkit-box;*/

/*display: -moz-inline-box;*/

/*display: -webkit-inline-box;*/

/*box-orient定义盒模型布局方向*/

/*display: -webkit-box;*/

/*-moz-box-orient:vertical; !*horizontal默认*!*/

/*-webkit-box-orient: vertical;*/

/*元素排列顺序*/

/*display: -webkit-box;*/

/*-moz-box-direction:reverse ;*/

/*-webkit-box-direction:reverse;*/

display: -webkit-box;

}

#box div:nth-child(1){

/*box-ordinal-group设置元素的具体位置*/

-webkit-box-ordinal-group:2;

-moz-box-ordinal-group: 2;

-ms-box-ordinal-group: 2;

}

#box div:nth-child(2){

/*box-ordinal-group设置元素的具体位置*/

-webkit-box-ordinal-group:3;

-moz-box-ordinal-group: 3;

-ms-box-ordinal-group: 3;

}

#box div:nth-child(3){

/*box-ordinal-group设置元素的具体位置*/

-webkit-box-ordinal-group:4;

-moz-box-ordinal-group: 4;

-ms-box-ordinal-group: 4;

}

#box div:nth-child(4){

/*box-ordinal-group设置元素的具体位置*/

-webkit-box-ordinal-group:5;

-moz-box-ordinal-group: 5;

-ms-box-ordinal-group:5 ;

}

#box div:nth-child(5){

/*box-ordinal-group设置元素的具体位置*/

-webkit-box-ordinal-group:1;

-moz-box-ordinal-group: 1;

-ms-box-ordinal-group: 1;

}

section div{

width: 100px;

height: 100px;

color: red;

font-size: 35px;

text-align: center;

line-height: 100px;

border: 1px solid #666;

margin: 5px;

}

1

2

3

4

5

3、示例效果图

图2.1 display:box(div水平摆放)

图2.2 display:inline-box(外部的box盒子自动适应里面的内容 宽改变)

图2.3 box-direction(这里是reverse倒序排列)

图2.4 box-ordinal-group(这里可以自由设置元素的位置)

【示例源码】您可点击这里进行下载：CSS弹性盒模型.zip

转载请注明出处，谢谢合作！

CSS自学笔记(10):CSS3盒子模型

CSS3为CSS技术的升级版本.最新版本. 就CSS而言,它是一个模块,是一个庞大而又复杂的模块,但是在CSS3中,将这一个庞大的模块分解为一个个容易理解的同时又很精简的小模块,同时CSS3中又添加了 ...

Css3盒子模型-css学习之旅(5)

主要内容: 盒子模型内边距,外边距,边框,外边距合并 主要包括:margin(外边距)padding(内边距) border(边框)centent(内容) 内边距:padding,paddinglef ...

CSS3盒子模型(上)

CSS的盒子模型分为三个大模块: 盒子模型 . 浮动 . 定位,其余的都是细节.要求这三部分,只要是学前端的无论如何也要学的非常精通. 所谓盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就 ...

CSS3盒子模型(中)

在CSS盒子模型(上)讲到了盒子模型的边框,内外边距,外边距合并等知识,接下来要总结的是盒子模型的布局常用到的一些CSS属性,比如:float.position等知识. 盒子模型布局稳定性 开始学习盒 ...

css3盒子模型及其定位

盒子模型常见相关属性和属性取值 /*基本属性*/ padding: padding-left/right/top/bottom border: border-left/right/top/bottom ...

CSS3 —— 盒子模型

盒子模型 主要的属性就5个:width.height.padding.border.margin.如下:  width和height:内容的宽度.高度(不是盒子的宽度.高度). padding:内边距 ...

CSS3——盒子模型 border(边框) 轮廓(outline)属性 margin外边距 padding填充

盒子模型 包括——边距,边框,填充,和实际内容 Margin(外边距) - 清除边框外的区域,外边距是透明的. Border(边框) - 围绕在内边距和内容外的边框. Padding(内边距) - 清 ...

css3盒子模型中的box-sizing属性的使用_box sizing常用的3种属性

box-sizing属性用来定义元素的width和height所表示的区域,该属性一般有三种值:content-box.border-box.inherit.其中inherit表示box-sizing ...

鼠标经过盒子出现边框(伪元素，定位，css3盒子模型)

div{ width: ...

随机推荐

.Net多线程编程—任务Task

1 System.Threading.Tasks.Task简介 一个Task表示一个异步操作,Task的创建和执行是独立的. 只读属性: 返回值 名称 说明 object AsyncState 表示在 ...

Linux命令的类型

1.内建命令: 由shell程序自带的命令,最常见的有cd.pwd等. 使用type命令即可查看命令属于哪种,比如: #type cd cd is a shell builtin ————>看到 ...

bzoj1146

这是一道无比繁琐的题目话说这道题使我第一次练dfs序,比较感动:首先dfs序就是在dfs过程中按照访问的顺序给每个点标上两个“时间戳”一个是第一次访问到点i时的时间戳c[i],一个是访问完以i为根时的 ...

The connection to adb is down, and a severe error has occured.问题解决

遇到问题描述: 运行android程序控制台输出 [2013-06-25 11:10:32 - MyWellnessTracker] The connection to adb is down, an ...

asp:cookies的属性

Expires – 过期时间.指定cookie的生命期.具体是值是过期日期.如果想让cookie的存在期限超过当前浏览器会话时间,就必须使用这个属性.当过了到期日期时,浏览器就可以删除cookie文件 ...

python中的文件处理

一 文件操作 (----------------------------------------------------------------------) 一 介绍 计算机系统分为:计算机硬件,操 ...

【总结】Java异常分类

链接:https://www.nowcoder.com/questionTerminal/3ded1983c85c4ae197e005bd31777bc7来源:牛客网 Throwable是所有异常的根 ...

『Python』装饰器

一.参考 作者:zhijun liu 链接:https://www.zhihu.com/question/26930016/answer/99243411 来源:知乎 建议大家去原答案浏览 二.装饰器 ...

string替换字符串，路径的斜杠替换为下划线

场景 替换某个路径的所有"\"为"_". 很多时候取证需要把恶意代码文件取回来,然后清除. 如果在D:\WEB\模板制作插件\需要覆盖\CodeColoring ...

Understanding How Graal Works - a Java JIT Compiler Written in Java

https://chrisseaton.com/truffleruby/jokerconf17/ https://chrisseaton.com/truffleruby/tenthings/ http ...