一、display:box;

  在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;。

二、可在其子代设置如下属性

  前提:使用如下属性,必须在父代设置display:box;

  1.box-flex:number;

    1)占父级元素宽度的number份

    2)若子元素设置固定宽度,则该子元素应用固定宽度,其他未设置固定宽度的字元素将余下的父级宽度(父级-已设置固定宽度的子代元素的总宽度按 number占份数

    3)若子元素有margin值,则按余下(父级宽度-子代固定总宽度-总margin值)宽度占number份

  2.box-orient:horizontal/vertical

    在父级上设置该属性,则子代按水平排列或竖直排列。

    注:所有主流浏览器不支持该属性,必须加上前缀。

    1)horizontal  水平排列,子代总width=父级width。若父级固定宽度,则子代设置的width无效,子代会撑满父级宽度。

    2)vertical  垂直排列,子代总height=父级height。若父级固定高度,则子代设置的height无效,子代会撑满父级高度。

  3.box-direction:normal/reverse

    在父级上设置该属性,确认子代的排列顺序。

    1)normal  默认值,子代按html顺序排列

    2)reverse  反序

  4.box-align:start/end/center/stretch

    在父级设置,子代的垂直对齐方式。

    1)start  垂直顶部对齐

    2)end 垂直底部对齐

    3)center 垂直居中对齐

    4)stretch 拉伸子代的高度,与父级设置的高度一致。子代height无效。

  5.box-pack:start/end/center

    在父级设置,子代的水平对齐方式。

    1)start  水平左对齐

    2)end  水平右对齐

    3)center  水平居中对齐

css display:box 新属性的更多相关文章

  1. css display和vertical-align 属性

    display 定义和用法 display 属性规定元素应该生成的框的类型. 实例 <html> <head> <style type="text/css&qu ...

  2. CSS性能优化新属性:will-change

    ---恢复内容开始--- will-change属性通过告诉浏览器什么属性.什么元素将会发生变化,可以对这些操作进行可能性的优化,由此提高CSS动画的执行效率. 这个属性可以有4个值: auto: 实 ...

  3. 【前端】display: box布局教程 [转]

    css display:box 新属性   一.display:box; 在元素上设置该属性,可使其子代排列在同一水平上,类似display:inline-block;. 二.可在其子代设置如下属性 ...

  4. CSS——display(Block none inline等)属性的用法

    在一般的CSS布局制作时候,我们常常会用到display对应值有block.none.inline这三个值.下面我们来分别来认识和学习什么时候用什么值.这里通过CSS display知识加实例.图演示 ...

  5. display:box属性

    在移动端开发的时候,圣杯布局,弹性盒,是我们经常会用得到的,W3C很久以前就有一个display:box属性 flex是最新的,但是在实际的浏览器测试中,display: flex 不能完全替代dis ...

  6. CSS display:table属性用法- 轻松实现了三栏等高布局

    display:table:此元素会作为块级表格来显示(类似 <table>); display:table-cell属性指让标签元素以表格单元格的形式呈现,类似于td标签.目前IE8+以 ...

  7. 利用css新属性appearance优化select下拉框

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  8. css display属性详解

    css display属性在对css做layout设计时非常重要,它的值有以下几种: Value Description Play it inline Default value. Displays ...

  9. CSS display 属性详解

    定义display 属性设置是否及如何显示元素. 继承性: No 说明 这个属性用于定义建立布局时元素生成的显示框类型.对于 HTML 等文档类型,如果使用 display 不 谨慎会很危险,因为可能 ...

随机推荐

  1. 关于 IDEA 自动识别问题,jsp页面Controller路径自动识别的问题

    idea之所以强大,就是强大的代码提示和联想功能,写起代码来简直不要太爽.但是这几天我发现在我的jsp页面中访问controller路径的时候不会自动提示了,对于这么严谨的我肯定要找出原因啊,哈哈. ...

  2. 一天搞定CSS---终篇CSS总结

    虽然说是一天搞定CSS,实际上也没有那么简单.只能说让你快速了解常见的CSS知识,解决基本的页面样式布局和设置. 每个独立的CSS知识点都比较简单,但是它们的应用非常灵活,特别是在综合应用中. 粗略说 ...

  3. ActionContext、ServletContext、pageContext的区别?

    ActionContext是当前的Action的上下文环境,通过ActionContext可以获取到request.session.ServletContext等与Action有关的对象的引用: Se ...

  4. 邪恶改装:TPYBoard制作廉价WIFI干扰器

    转载请注明:@小五义http://www.cnblogs.com/xiaowuyi 0X01 引言 想不想搞个WIFI干扰器?网上搜集了一下资料,发现用esp8266可以实现简单的干扰功能,包括断网. ...

  5. loadrunner学习理论之一

    1.负载测试.压力测试的区别? 答:负载测试是在被测系统所承受的正常范围内进行的 压力测试可以在极端的条件下进行 2.loadrunner的三大组件是什么,有什么作用? 答:虚拟用户生成器(virtu ...

  6. Elasticsearch索引和文档操作

    列出所有索引 现在来看看我们的索引 GET /_cat/indices?v 响应 health status index uuid pri rep docs.count docs.deleted st ...

  7. js对手机软键盘的监听

    js还没有办法对手机软键盘直接进行监听的,但是可以有其他角度来判断软键盘是否弹起.比如输入框是否获取焦点等.focusin和focusout支持冒泡,对应focus和blur, 使用focusin和f ...

  8. Vulkan Tutorial 15 Framebuffers

    操作系统:Windows8.1 显卡:Nivida GTX965M 开发工具:Visual Studio 2017 我们在前面的章节中已经讨论了很多次framebuffers帧缓冲区,到目前为止我们配 ...

  9. 安装xampp出错,安装xampp出错,windows找不到-n ?

    安装路径错误的问题 安装参考路径:D:\xampp\子文件

  10. HTML里的哪一部分Javascript 会在页面加载的时候被执行?

    最近遇到一个问题:HTML里的哪一部分Javascript 会在页面加载的时候被执行()A : 文件头部 B : 文件尾 C : <head>标签部分 D : <body>标签 ...