zoukankan
html css js c++ java
CSS3盒子模型
web前端必须了解的CSS3盒子模型
1、需要了解的属性以及属性值
display:box或者display:inline-box
box-orient:horizontal | vertical (水平 垂直) 定义盒模型的布局方向
box-direction:normal reverse(正序 反序) 元素排列顺序
box-ordinal-group:number(数值) 设置元素具体位置
2、示例源码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>html5盒子模型</title>
<style>
*{
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{
100px;
height: 100px;
color: red;
font-size: 35px;
text-align: center;
line-height: 100px;
border: 1px solid #666;
margin: 5px;
}
</style>
</head>
<body>
<section id="box">
<div class="">1</div>
<div class="">2</div>
<div class="">3</div>
<div class="">4</div>
<div class="">5</div>
</section>
</body>
</html>
3、示例效果图
图2.1 display:box(div水平摆放)
图2.2 display:inline-box(外部的box盒子自动适应里面的内容 宽改变)
图2.3 box-direction(这里是reverse倒序排列)
图2.4 box-ordinal-group(这里可以自由设置元素的位置)
【示例源码】您可点击这里进行下载:
CSS弹性盒模型.zip
转载请注明出处,谢谢合作!
查看全文
相关阅读:
最新macOS 11.4+Xcode 12.5+iOS 14.6 编译安装WebDriverAgent填坑记
python +pytest +yaml + Allure 实现接口自动化框架
DNS原理及其解析过程
jmeter性能测试--ramp_up和同步定时器的区别
jmeter常用定时器
基本sql语句
MySQL连表查询
MySQL约束条件
MySQL单表查询
linux 查看文件的前几行 或者 某些行
原文地址:https://www.cnblogs.com/qikeyishu/p/7436137.html
最新文章
jsp 的作用域
针对 idea 创建的 web 项目的问题汇总【持续更新中】
cmd中输入net start mysql 提示:服务名无效或者MySQL正在启动 MySQL无法启动(转)下述方式还可解决 10061 问题
redis 报错问题解决
集合面试题 (持续更新中...)
oracle 编码集和 Java 编码集不契合解决办法
前端面试闭包(转)
Maven
git
多标签图像分类
热门文章
Python基础
Tensorflow笔记二
Tensorflow笔记一
生活英语读写MOOC-Literature Tutor-有声名著阅读推荐
CNN解析和模型分析
神经网络
人工智能的实现工具—35个方便使用的算法
深度学习笔记
mathJax基础语法-0基础开始,(这是网上抄来的如果有权限和版权问题联系本人处理,仅供学术参考)
pytest 运行报错:HINT: remove __pycache__ / .pyc files and/or use a unique basename for your test file modules
Copyright © 2011-2022 走看看