资讯频道 → Web前端
阅读更多

7顶
1踩

Web前端

原创新闻 CSS 3 灵活的 Box Model

2009-08-27 14:31 by 副主编 zly06 评论(3) 有5662人浏览
CSS Flex webkit

声明：ITeye资讯文章的版权属于ITeye网站所有，严禁任何网站转载本文，否则必将追究法律责任！

Alex Russell之前有许多很有意思的讨论-当前网络上的哪些东西是错误的！他最近的一篇帖子提到了CSS 3 progress和一个特别灵活的box model：

David Baron（Mozilla公司）编写了一个灵活的Box Layout Module，又名“hbox and vbox”（横向盒和纵向盒）。使用Gecko和WebKit的浏览器都能支持hbox 和 vbox。你应该忽略IE浏览器，这样你创建box布局将会更容易。 

    /* hbox and vbox classes */
     
      .hbox {
              display: -webkit-box;
              -webkit-box-orient: horizontal;
              -webkit-box-align: stretch;
       
              display: -moz-box;
              -moz-box-orient: horizontal;
              -moz-box-align: stretch;

       
              display: box;
              box-orient: horizontal;
              box-align: stretch;
      }
       
      .hbox> * {
              -webkit-box-flex: 0;
              -moz-box-flex: 0;
              box-flex: 0;
              display: block;
      }
       
      .vbox {
              display: -webkit-box;
              -webkit-box-orient: vertical;
              -webkit-box-align: stretch;
       
              display: -moz-box;
              -moz-box-orient: vertical;

              -moz-box-align: stretch;
       
              display: box;
              box-orient: vertical;
              box-align: stretch;
      }
       
      .vbox> * {
              -webkit-box-flex: 0;
              -moz-box-flex: 0;
              box-flex: 0;
              display: block;
      }
       
      .spacer {
              -webkit-box-flex: 1;
              -moz-box-flex: 1;
              box-flex: 1;
      }
       
      .reverse {
              -webkit-box-direction: reverse;
              -moz-box-direction: reverse;
              box-direction: reverse;
      }
       
      .boxFlex0 {
              -webkit-box-flex: 0;
             -moz-box-flex: 0;
              box-flex: 0;
      }
       
      .boxFlex1, .boxFlex {
              -webkit-box-flex: 1;
              -moz-box-flex: 1;
              box-flex: 1;
      }
       
      .boxFlex2 {
              -webkit-box-flex: 2;
              -moz-box-flex: 2;

              box-flex: 2;
      }
       
      .boxGroup1 {
              -webkit-box-flex-group: 1;
              -moz-box-flex-group: 1;
              box-flex-group: 1;
      }
       
      .boxGroup2 {
              -webkit-box-flex-group: 2;
              -moz-box-flex-group: 2;
              box-flex-group: 2;
      }
       
      .start {
              -webkit-box-pack: start;
              -moz-box-pack: start;
              box-pack: start;
      }
       
      .end {
              -webkit-box-pack: end;
              -moz-box-pack: end;
              box-pack: end;
      }
       
      .center {
              -webkit-box-pack: center;
              -moz-box-pack: center;
              box-pack: center;

      }

有了这个核心的CSS，你就可以轻松的做到垂直对齐 
<div class="hbox center">
    <div class="vbox center">
        <div>...</div>
        <div>...</div>
    </div>
</div>

分组： 
<form action="handler.cgi" method="POST" class="hbox">
        <div class="vbox">
                <label>First Name (required):</label>
                <label>Last Name:</label>
        </div>
        <div class="vbox">
                <input type="text" name="first"/>
                <input type="text" name="last"/>
                <input type="submit"/>
        </div>
</form>


点击查看文章详情：http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
来自: ajaxian
7
顶
1
踩
评论 共 3 条 请登录后发表评论
3 楼 softsnow 2009-08-31 15:55
nombx 写道
night_stalker 写道
一看到 webkit-box 和 moz-box 就头痛 ……

??? 蛮简单的
  http://searchnombx.appspot.com/ 用了些webkit-box和moz-box特性.

我理解的，他说的应该是标准问题。。。webkit-和moz-
2 楼 nombx 2009-08-31 09:04
night_stalker 写道
一看到 webkit-box 和 moz-box 就头痛 ……

??? 蛮简单的
  http://searchnombx.appspot.com/ 用了些webkit-box和moz-box特性.
1 楼 night_stalker 2009-08-27 22:20
一看到 webkit-box 和 moz-box 就头痛 ……

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 防火墙之filter表(一)---AF_INET协议族

    在Netfilter中，各个table、match和target都是以模块形式存在的。这篇笔记以AF_INET协议族的filter表为例，看看各个协议族是如何与Netfilter框架配合，实现table的。 1. 初始化 AF_INET协议族的filter表的实现模块是/net/ipv4/netfilter/iptable_filter.c，其初始化函数如下： static int __net_i...

  • linux下的防火墙Netfilter配置：iptables的了解与使用（详细）

    iptables什么是iptables实验环境配置火墙管理工具切换 什么是iptables 防火墙的基础知识：点击查看 linux系统在内核外加了层访问限制，这个访问限制就是 Netfilter数据包过滤机制（也就是linux的防火墙）。 在Linux上面我们使用内核内建了Netfilter 这个机制，Netfilter 利用一些数据包过滤的规则设置，来定义出什么数据可以接收，什么数据需要剔除，以达到保护主机的目的。 Netfilter 提供了iptables这个软件来作为防火墙数据包过滤的命令。通过ip

  • Linux内核中 Netfilter 框架的用户态工具iptables(配置防火墙规则)

    iptables是 Linux 内核中 Netfilter 框架的用户态工具，用于配置防火墙规则。：数据包从应用程序发出后，经过内核的OUTPUT链，匹配iptables规则（如过滤、NAT），然后进入链，最终发送到网络接口。iptables工具用于定义和管理规则，规则通过系统调用传递给内核。：数据包进入网络接口后，经过PREROUTING链，匹配规则后进入INPUT链（本地处理）或FORWARD链（转发）。：规则由iptables配置并传递给内核执行。负责数据包的实际处理，负责规则的配置和管理。是一条。

  • iptables配置实践

    前言在大企业中防火墙角色主要交给硬件来支持，效果自然没话说只是需要增加一点点成本，但对于大多数个人或者互联网公司来说选择系统自带的iptables或者第三方云防火墙似乎是更加合适的选择，通过一些合理的优化和灵活的配置，我们也可以很轻松实现硬件防火墙的部分功能，够用就好。建立防火墙白名单机制很重要。

  • linux基础理解和使用 iptables 防火墙

    匹配到第一条符合条件的规则后，将停止后续规则的匹配并执行该规则的动作。如果遍历整个链都没有匹配的规则，则执行该链的默认策略 (通常是 ACCEPT 或 DROP)。内核空间的包过滤框架，由一系列数据包过滤表组成，这些表包含内核用于控制数据包过滤处理的规则集。更高级的应用，例如 ipset 的使用、复杂的 NAT 配置以及与其他网络工具的集成， 建议查阅相关文档和教程。: 指定操作的表 (raw, mangle, nat, filter)，默认为 filter。两者协同工作，实现对网络数据包的灵活控制。

  • linux防火墙

    linux防火墙 此处主要介绍linux内核中带有的netfilter，仅能保护单台主机 netfilter：firewalling、NAT、packet mangling for linux 防火墙的概念 网络安全技术 IDS：入侵检测与管理系统（Intrusion Detection Systems）：特点是不阻断任何网络访问，量化、定位来自内外网络的威胁情况，主要以提供报告和事后监...

  • LINUX 下IPTABLES配置详解

    LINUX 下IPTABLES配置详解

  • iptables深度指南

    Linux iptables

  • linux下IPTABLES配置详解（防火墙）

    转自http://www.cnblogs.com/JemBai/archive/2009/03/19/1416364.html 关闭防火墙： service iptables stop chkcon...

  • iptables 的安装与配置

    iptables 的安装与配置 由于centos7默认是使用firewall作为防火墙，下面介绍如何将系统的防火墙设置为iptables。 #停止firewall systemctl stop firewall.service #禁止firewall开机启动 systemctl disable firewall.service #安装iptables yum instal...

  • Linux iptables命令详解

    iptables 是 Linux 防火墙系统的重要组成部分，iptables 的主要功能是实现对网络数据包进出设备及转发的控制。当数据包需要进入设备、从设备中流出或者由该设备转发、路由时，都可以使用 iptables 进行控制。下面良许小编就将从几个方面对于Linux iptables命令进行详述，希望对大家有所帮助。 iptables简介 iptables 是集成在 Linux 内核中的包过滤防火墙系统。使用 iptables 可以添加、删除具体的过滤规则，iptables 默认维护着 4 个表和

  • Linux防火墙机制Netfilter/iptables简介

    Netfilter是什么？ Netfilter是Linux的第三代防火墙，因其比之前的两种防火墙ipfwadm及ipchains出色而被Linux组织作为默认的防火墙。Netfilter是自由软件，但在各方面均不逊于商业版的防火墙。 Netfilter与Linux的关系 Netfilter与Linux是两个相互独立的组织，在Linux 2.4早期的版本，并没有包含Netfilter的功能，到后期的...

  • iptable

    http://qiliuping.blog.163.com/blog/static/1023829320105245337799/ netfilter/iptables全攻略 LINUX 2010-06-24 17:03:37 阅读353 评论0 字号：大中小订阅 内容简介 防火墙的概述 iptables简介 iptables基础 iptables...

  • Iptables工作原理使用详解

    Iptables防火墙简介Iptables名词和术语Iptables工作流程基本语法Filter参数说明NAT表：Icmp协议TCP FLAG 标记什么是状态检测iptables的状态检测是如何工作的iptables 自定义链实例Iptables防火墙简介Netfilter/Iptables(以下简称Iptables)是unix/linux自带的一款优秀且开放源代码的完全自由的基于包过滤的防火墙工...

  • 配置IP隧道的内核修改，添加ip, iptables命令

    NOTE: 以下内容针对BCM7405。Hi3716M的方法与之类似。Hi3716C缺省加入了ip, iptables，因此只需要在内核中添加TUN/TAP device driver的支持即可。 1、内核配置修改： 支持IP隧道需要增加内核选项。 networking:   IP: tunneling   IP: GRE tunnels over IP [*]     IP: b

  • Iptables 指南 1.1.19(中文版)(一)

    非常不错的iptables帮助指南,值得学习和收藏 转from [url]http://iptables-tutorial.frozentux.net/cn/iptables-tutorial-cn-1.1.19.html[/url] Iptables 指南 1.1.19(一) Oskar Andreasson [email]oan@f...

  • netfilter/iptables简介

    netfilter和iptables是什么关系？常说的iptables里面的表(table)、链(chain)、规则(rule)都是什么东西？本篇将带着这些疑问介绍netfilter/iptables的结构和相关概念，帮助有需要的同学更好的理解netfilter/iptables，为进一步学习使用iptables做准备。 什么是netfilter和iptables 用通俗点的话来讲: netfilter指整个项目，不然官网就不会叫www.netfilter.org了。 在这个项目里面，n

  • （图）解netfilter/iptables工作原理

    解析netfilter/iptables工作原理：在Linux中，提供了一个非常优秀的防火墙工具netfilter/iptables。netfilter/iptables是完全免费的，而且功能强大，使用灵活。netfilter/iptables可以对流入和流出的信息进行细化控制，且可以在一台低配置机器上很好地运行。本文讲述的是netfilter/iptables。 AD：2013大数据全球技

  • 【Linux安全管理】iptables配置与iptables基本用法

    iptables介绍 1、防火墙分类 2、iptables的启动 ①在开机时禁用firewalld服务： ②安装iptables-services ③将它设置为开机自启 3、iptables 四表五链详解

  • Linux下iptables防火墙配置

    1. NEW：主机连接目标主机，在目标主机上看到的第一个想要连接的包 2. ESTABLISHED：主机已与目标主机进行通信，判断标准只要目标主机回应了第一个包，就进 入该状态

Global site tag (gtag.js) - Google Analytics