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

7顶
1踩

Web前端

原创新闻 CSS 3 灵活的 Box Model

2009-08-27 14:31 by 副主编 zly06 评论(3) 有5640人浏览
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防火墙

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

  • 使用 netfilter/iptables 为 Linux（内核 2.4.x ）配置防火墙

    netfilter/iptables 是与最新的 2.4.x 版本 Linux 内核集成的 IP 信息包过滤系统。如果 Linux 系统连接到因特网或 LAN、服务器或连接 LAN 和因特网的代理服务器，则该系统有利于在 Linux 系统上更好地控制 IP 信息包过滤和防火墙配置。Mugdha Vairagade 将介绍 netfilter/iptables 系统、它是如何工作的、它的优点、安装和配置以及如何使用它来配置 Linux 系统上的防火墙以过滤 IP 信息包。 注：至少具备 Linux OS 的中

  • 用IPTables实现字符串模式匹配

    用IPTables实现字符串模式匹配用IPTables实现字符串模式匹配 用iptables -m string 过滤字符串的安全策略应用作者：流云出处：LinuxAid论坛日期：2002-03-18自1995年ipfwadm开始进入1.2.1的核心，Linux的防火墙实现有很长的时间了。Ipfwadm实现了标准的tcp/ip包过滤功能，比如过滤源地址与目的地址以及端口过滤。早在1

  • iptables 的安装与配置

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

  • linux iptables 内核,Linux Iptables 内核2.6.18添加time模块

    系统:CentOS 5.1 内核:2.6.18-53.1.19.el5本文引用地址：http://www.eepw.com.cn/article/201809/388532.htmiptables 版本 1.3.5(系统自带的)下载一个内核：linux-2.6.18 解压到/usr/src/linux#cd linux#make mrproper#make menuconfig什么也不做，退出.v...

  • 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...

  • IPTABLES防火墙安装与配置

    NETFILTER/ IPTABLES IP数据包过滤系统IPTABLES简介iptables构建iptablesiptables中的五张表软件的安装常见参数说明iptables的常用规则实际生产中，iptables常用的命令配置重启服务网络地址转换 IPTABLES简介 IPTABLES是与Linux内核集成的IP信息包过滤系统。 IPTABLES系统有利于在Linux系统上更好的控制IP信息包过滤和防火墙配置。 防火墙在做数据包过滤决定时，有一套遵循和组成的规则，这些规则储存在专用的数据包过滤表中，而

  • linux配置———iptables命令

    yiqian iptables 是Linux 内核集成的 IP 信息包过滤系统。如果 Linux 系统连接到因特网或 LAN、服务器或连接 LAN 和因特网的代理服务器， 则该系统有利于在 Linux 系统上更好地控制 IP 信息包过滤和防火墙配置。

  • 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 设置

    编辑 /etc/sysconfig/iptables然后运行 /sbin/service iptables restart 防火墙规则只有在 iptables 服务运行的时候才能被激活。要手工启动服务，使用以下命令： /sbin/service iptables restart

  • 折腾nftables的那点事儿 （一）

    　　最近因为一个项目，要折腾一下linux下的iptables。好久没有用这个东西了，感觉也不会有啥问题，所以连想都没想就开始弄。开启内核选项，交叉编译iptables，移植运行后才发现。我靠～不支持了，需要用新的nftables。奶奶的，我老了，被时代所淘汰了。nfatbles是个啥，就是取代iptables的。好吧，那就弄吧，弄起来才知道，麻烦啊，尤其是移植到arm板子上。 主要涉及到以下几...

  • iptables深度指南

    Linux iptables

  • Linux下iptables防火墙配置

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

Global site tag (gtag.js) - Google Analytics