CSS3响应式布局之弹性盒子
来源:互联网 发布:广电总局下架网络剧 编辑:程序博客网 时间:2024/05/21 21:35
CSS3弹性盒模型可以轻松的创建自适应浏览器流动窗口的布局或自适应字体大小的布局。同时该盒子决定了一个盒子在其他盒子的分布方式,及如何处理可用的空间。
自己写了一个弹性盒子的demo:
主要HTML代码:
<div class="outer"> <div id="div1">1</div> <div id="div2">2</div> <div id="div3">3</div> <div id="div4">4</div></div>CSS代码:
<style type="text/css"> .outer { width:500px; height:300px; display: -webkit-box; /*使用弹性盒模型*/ -webkit-box-orient:vertical;/*水平或垂直分布 horizional/vertical*/ -moz-box-orient:vertical; -webkit-box-direction:reverse;/*规定子元素的显示方向 normal/reverse/inherit 默认/相反/继承子元素的box-derection*/ -moz-box-direction:reverse; -webkit-box-align:center;/*规定如何对齐子元素的*/ -moz-box-align:center; -webkit-box-pack:center;/*水平或垂直管理子盒子*/ -moz-box-pack:center; } #div1 { background-color:darkcyan; -webkit-box-flex: 1; /*规定子盒子是否可伸缩,值越大占的空间就越大*/ -moz-box-flex:1; } #div2 { background-color:darkmagenta; -webkit-box-flex:1; -moz-box-flex:1; } #div3 { background-color:seagreen; -webkit-box-flex:1; -moz-box-flex:1; } #div4 { background-color:maroon; -webkit-box-flex:1; -moz-box-flex:1;; }</style>在不用 webkit-box-align:center;webkit-box-pack:center;这两个属性的情况下div分布情况;
在使用box-align:center;box-pack:center;情况下,为了方便没写指定内核属性如webkit/moz
最后如有不恰当的地方还希望大家指正;谢谢。
阅读全文
0 0
- CSS3响应式布局之弹性盒子
- Css3响应布局 弹性盒子
- CSS3 弹性盒子布局
- css3弹性盒子布局
- CSS3弹性盒子布局
- css3弹性盒子如何布局
- 响应式布局:CSS3弹性盒flex布局模型
- 响应式布局:CSS3弹性盒flex布局模型
- 响应式布局:CSS3弹性盒flex布局模型
- 网页布局之》》》》弹性盒子》》》
- css3盒子布局-定义盒子的弹性空间(box-flex)
- CSS3之响应式布局
- css3弹性盒子模型之box-flex
- css3弹性盒子模型之box-flex
- css3弹性盒子模型之box-flex
- css3弹性盒子模型之box-flex
- css3中网格布局与弹性盒子布局对比
- css3之flex弹性布局
- 2017年上海金马五校程序设计竞赛:Problem A : STEED Cards
- tar命令
- Java基础回顾之集合
- JS常用正则表达式和JS控制输入框输入限制(数字、汉字、字符)
- Java实现-接雨水
- CSS3响应式布局之弹性盒子
- nfs的一些配置
- Python中的运算符
- ubuntu使用watch命令实时监测显卡
- js事件委托
- 15.activiti工作流-工作流定义的角色组(了解)
- 【ESP8266】在ESP8266上使用JavaScript语言开发
- sg函数的一些题
- [leetcode]99. Recover Binary Search Tree