CSS3可伸缩框属性,可用于等分显示子元素或按比例显示子元素的大小

用法跟Android的android:layout_weight属性类似,可类比Android中的用法,这样比较好记,由于目前所有浏览器都不支持大部分的属性,所以所有的属性都需要加上Firefox、Safari、Opera
以及 Chrome支持替代的-moz-和-webkit-前缀,现在基本上所有的CSS3属性都应该这样做,即每个属性都需要至少设置三个,参考下面的例子。

父容器属性:

display:box;当定义了这个属性时,子元素想居中显示时margin:0px auto是无效的,需使用text-align:center (在Android中布局方式为LinearLayout子控件的layout_weight才能生效,css3中display类似的设为box)

box-orient : horizontal(水平) | vertical(垂直) | inline-axis(水平) | block-axis(垂直) | inherit; (Android中的android:orientation属性)

box-direction : normal(默认) | reverse(反转) | inherit;

box-align(父容器里面子容器的垂直对齐方式) : start(居顶) | end(居底) | center(居中) | baseline | stretch(拉伸); (Android中的android:gravity属性)

box-pack(父容器里面子容器的水平对齐方式) : start(居左) | end(居右) | center(居中) | justify(水平等分父容器宽度); (Android中的android:gravity属性)

box-lines(规定如果列超出了父框中的空间,是否要换行显示。目前没有浏览器支持 box-lines 属性。) : single|multiple;

例:

display:box;

display:-moz-box;

display:-webkit-box;

box-orient:horizontal;

-moz-box-orient:horizontal;

-webkit-box-orient:horizontal;

子容器属性:

box-flex(规定框的子元素是否可伸缩其尺寸。) : value(元素的可伸缩行。柔性是相对的,例如 box-flex 为 2 的子元素两倍于 box-flex 为 1 的子元素。),当其中的元素设置了具体的width或height和margin时,其他元素按照父容器的大小减去这些具体的值后再按比例分配。

如父容器设置了宽度为1200px,box-orient定义成水平划分,即horizontal或inline-axis,子元素定义了box-flex分别为1,2,3,那么第一个子元素的宽度将为200px,第二个为400px,第三个为600px。如果第二个子元素定义了宽度为300px,第一个和第三个的box-flex定义分别为1和2,则第一个宽度将为(1200 - 300)  * 1 / (1+2) = 300px,第三个为600px,第二个为300px。设了margin的话也要一样减去后再划分。

(Android中的android:layout_weight属性)

例:

box-flex:3;

-moz-box-flex:3;

-webkit-box-flex:3;

CSS3可伸缩框属性,可用于等分显示子元素或按比例显示子元素的大小

时间: 2024-08-06 06:31:23

CSS3可伸缩框属性,可用于等分显示子元素或按比例显示子元素的大小的相关文章

CSS盒子模型之CSS3可伸缩框属性(Flexible Box)

CSS盒子模型(下) 一.CSS3可伸缩框(Flexible Box) 可伸缩框属性(Flexible Box)是css3新添加的盒子模型属性,有人称之为弹性盒模型,它的出现打破了我们经常使用的浮动布局,实现垂直等高.水平均分.按比例划分等分布方式以及如何处理可用的空间.使该模型,可以很轻松的创建自适应浏览器窗口的流动布局或自适应字体大小的弹性布局.但是它有一定的局限性,在firefox.chrome这浏览器下需要使用它们的私有属性来定义:firefox(-moz).chrome(-webkit

北京知道创宇 前端笔试(一) Flexible Box(可伸缩框属性)

可伸缩框属性 box 自诩大白一只,昨天笔试了创宇的前端,天一直下着雨,赶到的时候,整个人都不好了,成都七月的天气哇...... 废话不多说,大致说一下 这道题 ,考察的是CSS3.0中的 box-flex属性,自适应性,由于之前只是简单的看了CSS3.0 所以当时,还是用CSS2.0做的...... 回来之后 感觉应该和小伙伴们共勉一下,顺便补全下知识. 题目要求如下图所示:(ps:自己用附件中的picture画,勉强可以看吧 \(^o^)/~) 要求:实现下面的HTML与CSS 用FLexb

css3的一些属性

以前还没有注意过css的一些属性,近期发现有一些样式很好用,现在整理一遍. CSS3 动画属性 @keyframes : 规定动画 可以通过keyframes 改变一个块的样式当然这是要配合animation属性来结合的 @keyframes mymove(mymove必须定义动画的名称在) { 0% {top:0px; background:red; width:100px;} 100% {top:200px; background:yellow; width:300px;} } @-moz-

css3的部分属性

1.阴影box-shadow:x轴偏移量 y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式] 注意:inset(内阴影) 可以写在参数的第一个或最后一个,其它位置是无效的实例 正值表示在对象的底部,负值表示在对象的顶部. .boxshadow-outset{ width:100px; height:100px; box-shadow:4px 4px 6px blue,4px 4px 6px red inset; } .boxshadow-inset{ width:100p

CSS3 鲜为人知的属性-webkit-tap-highlight-color的理解

(一)-webkit-tap-highlight-color 这个属性只用于iOS (iPhone和iPad).当你点击一个链接或者通过Javascript定义的可点击元素的时候,它就会出现一个半透明的灰色背景.要重设这个表现,你可以设置-webkit-tap-highlight-color为任何颜色. 想要禁用这个高亮,设置颜色的alpha值为0即可. 示例:设置高亮色为50%透明的红色: -webkit-tap-highlight-color: rgba(255,0,0,0.5); 浏览器支

【转】如何建立一个样式新颖的CSS3搜索框

在线演示 搜索框大概是web开发中最常用的UI元素之一,我想基本没有必要去介绍如何使用它.无论是网站还是web应用,都会为了增强用户体验而添加它,那么你是不是也想过设计一个别致的搜索框? 在今天的文章中,大家将会学到如何使用伪元素来创建一个超酷的CSS3搜索框.当然在开始介绍前你也可以下载源代码或者查看在线演示. HTML举例: 正如接下来你所看到的,标记很少,并且很容易理解: <form class=“cf form-wrapper”> <input type=“text” place

CSS3中动画属性transform、transition和animation

Transform:变形 在网页设计中,CSS被习惯性的理解为擅长表现静态样式,动态的元素必须借助于javascript才可以实现,而CSS3的出现改变了这一思维方式.CSS3除了增加革命性的创新功能外,还提供了对动画的支持,可以用来实现旋转.缩放.平移.扭曲和过渡效果等等,这些功能再一次证明了CSS3功能的强大和无限潜能. CSS3实现元素变形的基础来源于新增的transform属性,该属性可用于实现元素的旋转.缩放.平移.扭曲等效果.目前webkit内核支持-webkit-transform

CSS3单选框动画特效实现步骤详解

在前端开发中,我们常常使用CSS3技术来实现单选框的动画特效,对于前端菜鸟而言,可能对这部分内容还不是很熟悉,今天就和大家分享一个这方面的案例,希望对大家学习CSS3技术有所帮助,一起来看看吧. 首先,来看一下我们的第一个特效 注意,这个地方的黄点不是我们特效的一部分,这个黄点之所以存在是我使用的屏幕录制软件自带的.可以很清楚的看到这个特效就是当我们点击的时候,黑点会以一种缩放的动画显示出来,下面来看看具体如何实现. <divclass="radio-1"> <inp

CSS3的新增属性及其用法

CSS3的新增属性及其用法 现如今,随着 Web2.0 技术的流行,之前的 CSS2 标准和相关技术似乎已经满足不了日益增长的开发需求:人们需要实现更加美观.用户体验更好的界面.CSS3,这个新一代的标准应运而生.为了满足现有的对于 Web UI 的开发需求,它提供了一系列强大的功能,如许多新的 CSS 属性(文字,布局,颜色等等),各种 CSS 特效,甚至还支持 CSS 动画.元素的变换.这些 CSS 新特性在现阶段可以说都是非常强大和完善的,您只需要加入几行简单的 CSS 代码便可以实现出一