网页设计广州网站,站长工具永久更新,wordpress nginx apache,做电信网站运营web前端必须了解的CSS3盒子模型
1、需要了解的属性以及属性值
display:box或者display:inline-box
box-orient:horizontal | vertical (水平 垂直) 定义盒模型的布局方向
box-direction:normal reverse(正序 反序) 元素排列顺序
box-ordinal-group:number(数值) 设置元素…web前端必须了解的CSS3盒子模型
1、需要了解的属性以及属性值
display:box或者display:inline-box
box-orient:horizontal | vertical (水平 垂直) 定义盒模型的布局方向
box-direction:normal reverse(正序 反序) 元素排列顺序
box-ordinal-group:number(数值) 设置元素具体位置
2、示例源码
!DOCTYPE htmlhtml langenhead meta charsetUTF-8 titlehtml5盒子模型/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{ width: 100px; height: 100px; color: red; font-size: 35px; text-align: center; line-height: 100px; border: 1px solid #666; margin: 5px; } /style/headbody section idbox div class1/div div class2/div div class3/div div class4/div div class5/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
转载请注明出处谢谢合作
更多专业前端知识请上
【猿2048】www.mk2048.com