CSS3 完善盒模型

CSS3 改善了传统盒模型结构,增强了盒子构成要素的功能,扩展了盒模型显示的方式. 改善结构:为盒子新增轮廓区: 增强功能:内容区增强 CSS 自动添加内容功能,增强内容移除.换行处理:允许多重定义背景图,控制背景图显示方式等:增加背景图边框,多重边框,圆角边框等功能:完善 margin:auto;布局特性: 扩展显示:完善传统的块显示特性,增加弹性,伸缩盒显示功能,丰富网页布局手段. 一.定义显示方式 CSS3中可以通过box-sizing 来指定盒模型,即可指定为content-box.bo…

CSS3弹性盒模型布局模块介绍

来源:Robert’s talk原文:http://robertnyman.com/2010/12/02/css3-flexible-box-layout-module-aka-flex-box-introduction-and-demostest-cases/ Web布局一直个是难点,但貌似现在我们有更好的选择了. 背景首先,我们有表格布局.当不考虑语义并且利用一些适当的嵌套和其他技巧,我们可以用table建立具有一定功能的布局. 然后是现在大多数人都在使用的浮动布局.我们可以使用任何我们想…

CSS3.0盒模型display:box;的使用

CSS3.0盒模型display:-webkit-box;的使用 box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz).opera(-0).chrome/safari(-webkit). 一.box-flex属性 box-flex主要让子容…

CSS3弹性盒模型flexbox布局基础版

原文链接:http://caibaojian.com/using-flexbox.html 最近看了社区上的一些关于flexbox的很多文章,感觉都没有我这篇文章实在,最重要的兼容性问题好多人都没有提出解决方案.另外本人2014年5月还废寝忘食的翻译了国外的<CSS3弹性盒模型flexbox完整教程>和<CSS3弹性盒模型flexbox布局实例>,这么好的文章没有人来发现,实在是遗憾. 文章写作背景查询Can I use上的使用情况,发现最新的浏览器基本支持这个属性,IE10开始…

css3基础教程：CSS3弹性盒模型

今天给大家分享一篇关于CSS3基础教程文章,主要是讲CSS3弹性盒模型.弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力. 注意:Flexbox布局是最合适的一个应用程序的组件,以及小规模的布局,而网格布局是用于较大规模的布局. 盒模型的兼容性不佳,在使用时,需要加上浏览器的私有前缀. 父元素display:box或者display:inline-box; display: -webkit-box;display: -m…

CSS3弹性盒模型，Flex布局教程

布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实现. CSS3中引入flex的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. 尽管目前css3在PC端上的兼容性还不是那么完美,但是在移动端已基本实现兼容. 网络上有很多关于flex布局很好的教程.总结的也很完美,我就直接收藏了,以备查询详解css3弹性盒模型(Flexbox) 移动端开发小记 – Flexbox…

css3弹性盒模型flex快速入门与上手(align-content与align-items)

css和css3弹性盒模型实现元素宽度（高度）自适应

一.css实现左侧宽度固定右侧宽度自适应 1.定位 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>自适应</title> <style> *{ padding: 0; margin: 0; } .left{ background: red; width: 200px; height: 200…

CSS3使用盒模型实现三栏布局

本篇文章由:http://xinpure.com/css3-box-model-to-implement-a-three-column-layout/ 使用 Position 绝对定位也是可以实现三栏布局的,然而使用 CSS3 的盒模型却显得更简单.更灵活 CSS3盒模型 display: -webkit-box; display: -moz-box; display: box; 将父元素定义成盒模型之后,就可以通过 box-flex 属性来实现布局了. box-flex 主要让子元素针对父元素…

（转）详解css3弹性盒模型（Flexbox)

今天刚学了css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小.总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩. 创建Flex容器 flexbox布局首先需要创建一个flex容器.为此给元素设置display属性的值…

css3弹性盒模型

一.简介 css3引入了新的盒模型——弹性盒模型,该模型决定一个盒子在其他盒子中的分布方式以及如何处理可用的空间.使用该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局. 目前box属性还没有得到firefox.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(-moz-).chrome/safari(-webkit-).所以完全可以在手机端的webview页面中采取这样的布局. 二.弹性盒模型默认情况下,盒子并不具有弹性,如果box-flex…

css3：盒模型以及box-sizing属性

文档中的每个元素被描绘为矩形盒子.渲染引擎的目的就是判定大小,属性——比如它的颜色.背景.边框方面——及这些盒子的位置.在CSS中,这些矩形盒子用标准盒模型来描述.这个模型描述了一个元素所占用的空间.每一个盒子有四条边界:外边距边界margin, 边框边界border, 内边距边界padding与内容边界content. 在W3C模型中: 总宽度 = margin-left + border-left + padding-left + width + padding-right + border…

CSS3弹性盒模型flexbox完整版教程

http://caibaojian.com/flexbox-guide.html 来自CSS Tricks上的一个教程,原文为:A Complete Guide to Flexbox.文中详细的介绍了新版的弹性盒子的相关属性,并且给出了几个使用例子.是新手入门flexbox的一个优秀教程.当然里面的内容也大部分是根据w3c的文章来写的.里面的每个属性都给出了一张示例图,非常容易理解.本人根据其思路,结合中文翻译,写出了一篇flexbox的完整教程,希望对大家有用. 弹性布局(flexible b…

CSS3弹性盒模型之box-orient & box-direction

Css3引入了新的盒模型——弹性盒模型,其实上一篇文章已经讲到了一个box-flex,今天来讲讲另外的两个弹性盒模型属性box-orient 和 box-direction. 1.box-origent: 水平或垂直分布. box-origent有两个值:horizional(水平)和vertical(垂直),意思就是元素的排列方式! css代码如下: body {display: -webkit-box; -webkit-box-orient: horizional; } 水平排列方式如下:…

CSS3弹性盒模型之Flexbox是布局模块box-sizing & box-orient & box-direction & box-ordinal-group

css3 box-sizing属性 box-sizing属性可以为三个值之一:content-box(default),border-box,padding-box. content-box,border和padding不计算入width之内 padding-box,border-box,border和padding计算入width之内 ie8+浏览器支持content-box和border-box: ff则支持全部三个值. 使用时: -webkit-box-sizing: 100px; //…

css3弹性盒模型（Flexbox）

Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元素超出可用空间时将自动缩小.总之,Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩. 创建Flex容器 flexbox布局首先需要创建一个flex容器.为此给元素设置display属性的值为flex.对于IE10来说,我们需要在开头的地方添加-ms-flexbox. .cont…

详解css3弹性盒模型（Flexbox）

目前没有浏览器支持 box-flex 属性. Firefox 支持替代的 -moz-box-flex 属性. Safari.Opera 以及 Chrome 支持替代的 -webkit-box-flex 属性. css3的弹性盒模型,这是一个可以让你告别浮动.完美实现垂直水平居中的新特性. Flexbox是布局模块,而不是一个简单的属性,它包含父元素和子元素的属性. Flexbox布局的主体思想是似的元素可以改变大小以适应可用空间,当可用空间变大,Flex元素将伸展大小以填充可用空间,当Flex元…

CSS3之盒模型

1. 什么是盒模型? css中的每个元素都是一个盒模型, 包括html body元素, 浏览器解析css的时候也会把每个元素看成一个盒子来解析. 盒模型具备的属性(存在的特点)有: content (用户设置的width和height).padding(内边距,用户设置的padding值) .margin(外边距,用户设置的margin值).border(边框用户设置的border值) .background(背景)等. 2.盒模型的分类? (1)IE6混杂盒模型:IE6混杂盒模型是由IE…

CSS3弹性盒模型flexbox布局

属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 定义一个flex容器,内联或者根据指定的值,来作用于下面的子类容器.· box:将对象作为弹性伸缩盒显示.(伸缩盒最老版本)(css3) inline-box:将对象作为内联块级弹性伸缩盒显示.(伸缩盒最老版本)(CSS3) flexbox:将对象作为弹性伸缩盒显示.(伸缩盒过渡版本)(CSS3) inline-flexbox:将对象作为内联块级弹性伸缩盒显示.(伸缩盒过渡版本)(CSS3) flex:…

CSS3.0盒模型display:-webkit-box;的使用

box-flex是css3新添加的盒子模型属性,它的出现可以解决我们通过N多结构.css实现的布局方式.经典的一个布局应用就是布局的垂直等高.水平均分.按比例划分. 目前box-flex属性还没有得到firefox.Opera.chrome浏览器的完全支持,但可以使用它们的私有属性定义firefox(- moz).opera(-0).chrome/safari(-webkit). 一.box-flex属性 box-flex主要让子容器针对父容器的宽度按一定规则进行划分 HTML代码…

【CSS3】---盒模型margin、padding及border

盒模型--边框盒子模型的边框就是围绕着内容及补白的线,这条线你可以设置它的粗细.样式和颜色(边框三个属性). 如下面代码为 div 来设置边框粗细为 2px.样式为实心的.颜色为红色的边框: div{ border:2px solid red; } 上面是 border 代码的缩写形式,可以分开写: div{ border-width:2px; border-style:solid; border-color:red; } 注意: 1.border-style(边框样式)常见样式有: dash…

CSS3弹性盒模型新版和老版写法差异

1.在使用弹性盒模型的时候父元素必须要加display:box 或 display:inline-box: 新版弹性盒模型:flex:display : flex 老版弹性盒模型:box : display : -webkit-box 2.box-orient 定义盒模型的主轴方向新版:flex:flex-direction: row / column 老版:box : -webkit-box-orient: horizontal 水平显示 vertical 垂直方向 3.box-dire…

CSS3标准盒模型还是IE怪异模型box-sizing属性的应用设置

在一个文档中,每个元素都被表示为一个矩形的盒子.盒子模型具有4个属性['外边距(margin)','边框(border)','内边距(padding)','内容(content)']. 我们要设置某个元素的大小定位,肯定会和这四个元素打交道.只是元素的宽高计算有些默认值. box-sizing属性用于更改用于计算元素宽度和高度的默认的 CSS 盒子模型.可以使用此属性来模拟不正确支持CSS盒子模型规范的浏览器的行为. 目前支持box-sizing的浏览器: 就目前来看,大部分人是建议在初始化样式…

CSS3 弹性盒模型 box-flex

说明:本文档兼容性测试基础环境为:windows系统:IE6-IE10, Firefox6.0, Chrome13.0, Safari5.1, Opera11.51 语法: box-flex:<number> 默认值:0 取值: <number>: 使用浮点数指定对象所分配其父元素剩余空间的比例. 说明: 设置或检索弹性盒模型对象的子元素如何分配其剩余空间. 示例:将一个容器分成6份,子对象a分1份,b分2份,c分3份 HTML Code: <ul id="box&…

CSS3特性盒模型动画

转发自0101后花园 CSS3中的动画功能分为Transitions和Animations功能,这两种功能都可以通过改变CSS中的属性值来产生动画效果. 一.Transitions 语法:transitions: property duration timing-function property: 表示对哪个属性进行平滑过渡(可设置为all,则所有属性值变化时均产生动画效果) duration: 表示在多长时间内完成属性值的平滑过渡 timing-function: 表示通过什么方法来进行平滑…

CSS3弹性盒模型之box-flex

对于之前讲过的box-sizing属性,对于页面布局很有用,但是突然发现它依然存在一些问题,前面例子中不会存在问题,不代表它没有问题.如果元素的个数整除100%的时候呢,比较3个元素,那么第一个盒子的宽度就会是33.3333333%,很显然,无论如何都是除不尽的,也就是说不可能平均分配.这显然是不完美的!是否有更完美的解决方案呢,答案是——有,它就是 box-flex. box-flex是css3新添加的盒子模型属性,它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分.它使…

CSS3弹性盒模型flex box快速入门 2016.03.16

@import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); @import url(http://i.cnblogs.com/Load.ashx?type=style&file=SyntaxHighlighter.css);@import url(/css/cuteeditor.css); @import url(htt…

CSS3弹性盒模型 display:box

刚开始做网页时就有一个困惑,为什么display:block只能垂直排列,如果要水平排列就要使用float:left等方式.这种方法最难受的当然是当子元素的数量改变时,需要去修改子元素的宽度使重新适应.bootstrap为了兼容性在实现栅格布局时,就不得不生成大量如下代码: .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .…

css3弹性盒模型flex快速入门与上手1

一.什么是flex? flex是css3中引入的一种布局方式,可以非常灵活高效控制元素的排列与对齐方式,大多人称之为弹性布局. 二.怎么使用flex? 任何一个容器都可以指定为flex布局 #box { display:flex; } 三.flex的基本术语采用flex布局的元素被称为flex容器 (flex container), 它的子元素即为flex元素 (flex item). flex容器中包含两个相互垂直的轴, 即主轴 (main axis)和副轴 (cross axis). fl…

css3 弹性盒模型变化

如果你使用google搜索Flexbox,你会发现很多过时的信息.这里将告诉你如何迅速的辨别你需要的信息. 如果你正在查找有关于Flexbox的博客资料,你看到了“display:box;”或者“box-{*}”属性,那么你看的正是2009年版本的Flexbox. 如果你正在查找有关于Flexbox的博客资料,你看到了“display:flexbox;”或者“flex()”函数,那么你看的正是2011年版本的Flexbox. 如果你正在查找有关于Flexbox的博客资料,你看到了“display…

【CSS3 完善盒模型】的更多相关文章