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
转载请注明出处,谢谢合作!
查看全文
相关阅读:
(原)x264代码中的码流控制学习
(原)关于OpenSL ES播放音频数据的一个奇怪的问题
(原)理解码率控制模式(x264,x265,vpx)
CentOS清除用户登录记录和命令历史方法
2B销售提升业绩的5项技能
Cookie中的httponly的属性和作用
如何开展HW行动
护网结束,复盘攻防,聊聊安全! 2019
2018-11-21(34)《阿里铁军》阅后记!
你了解渗透测试与红蓝队对抗的区别吗?
原文地址:https://www.cnblogs.com/qikeyishu/p/7436137.html
最新文章
Qt 在Windows下设置Wifi连接和有线连接
Qt 获取程序所在路径等特殊路径的方法
Windows上使用netsh命令设置IP和Wifi
网络基础常识(持续更新)
RTMP推流方案总结
UltraVNC 简体中文版 1.2.2.1
ownCloud安卓android客户端版本2.11.0
数据比较1.0(文本格式)
二代身份Zheng复印(手机正反面拍照生成1:1复印件图像)
旧手机作为USB无线网卡使用(分享WIFI、蓝牙连接)
热门文章
计算机开关损坏无法正常启动维修
限时授权复制文件 1.0(2015.9.2更新)
Mysql自动备份工具1.0(2013年11月15日更新)
(原)FFmpeg.c源码学习笔记1
(原)NSQ源码阅读和分析(1)
ps流格式解析和总结(改了一下排版)
(原)kcp源码阅读学习笔记
(原)android-as_video_player中的OpenGLES视频显示
(原)ffmpeg中filter开发过程遇到的坑<一>
(原)ffmpeg中的writing_filter翻译
Copyright © 2011-2022 走看看