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

今天给大家分享一篇关于CSS3基础教程 文章,主要是讲CSS3弹性盒模型。弹性布局的主要思想是让容器有能力来改变项目的宽度和高度,以填满可用空间(主要是为了容纳所有类型的显示设备和屏幕尺寸)的能力。

注意:Flexbox布局是最合适的一个应用程序的组件,以及小规模的布局,而网格布局是用于较大规模的布局。

盒模型的兼容性不佳,在使用时,需要加上浏览器的私有前缀。

父元素display:box或者display:inline-box;

display: -webkit-box;display: -moz-box;display:box;

父元素的属性:

box-orient确定子元素的方向,是水平排列还是竖直排列。

horizontal|vertical|inline-axis|block-axis|inherit

inline-axis是默认值。

且horizontal与inline-axis的表现似乎一致的,让子元素横排;

而vertical与block-axis的表现也是一致的,让元素纵列

box-direction确定子元素的排列顺序。

normal|reverse|inherit

normal是默认值,表示正常顺序,即从左往右,自上而下。

reverse表示反转,即与正常顺序相反。

上面代码,在父元素中加上如下代码,使其逆序

-moz-box-direction: reverse;-webkit-box-direction: reverse;box-direction:reverse;

box-align:决定了垂直方向上的空间利用.

start|end|center|baseline|stretch

stretch是默认值,拉伸,父标签的元素多高,其子元素的高度也为多高。

start表示顶边对齐

end表示底部对齐

center表示居中对齐

baseline表示基线对齐

垂直方向上:

-moz-box-orient:inline-axis;-webkit-box-orient:inline-axis;box-orient:inline-axis;

水平方向:

-moz-box-pack: justify;-webkit-box-pack: justify; box-pack:justify;

box-pack:决定了水平方向上的空间利用。

start|end|center|justify

start是默认值,表示和父元素的起始位置一致。

start所有子元素在盒子起始位置显示,富裕空间另一侧

end  所有子元素在盒子终止位置显示,富裕空间起始位置

center 所有子元素居中,富裕空间在两侧

justify 富余空间在子元素之间平均分布

box-line:决定子元素是否可以换行显示。(不支持)

single|multiple

single是默认值,表示不换行

multiple允许多行显示

子元素的属性

box-flex:值为n

子元素的尺寸=盒子的尺寸*子元素的box-flex的属性值/所有子元素box-flex属性值之和

box-flex-group:值为n.目前没有浏览器支持

box-ordinal-group:值为n.规范框中子元素的显示次序。

默认值是1.值越小的元素会在值更高的元素前面显示。

其它:

resize自由缩放

both|horizontal|vertial

both水平垂直方向都可以缩放

horizontal只有水平方向可以缩放

vertical只有垂直方向可以缩放

需要配合overflow一起使用

类似于textarea多行文本框,拉动右下角,可以自由缩放div的大小。

盒模型阴影:

box-shadow:inset x y blur spread color

inset:投影方式

inset内投影

outset外投影,默认是外投影

x阴影水平方向偏移量,其值可以是正负值。如果值为正值,则阴影在对象的右边,其值为负值时,阴影在对象的左边;

y阴影竖直方向偏移量,其值也可以是正负值。如果为正值,阴影在对象的底部,其值为负值时,阴影在对象的顶部;

blur:模糊半径,此参数可选,但其值只能是为正值,如果其值为0时,表示阴影不具有模糊效果,其值越大阴影的边缘就越模糊;

spread:扩展阴影半径,此参数可选,其值可以是正负值,如果值为正,则整个阴影都延展扩大,反之值为负值时,则缩小;

color:阴影颜色,此参数可选,默认为黑色

IE8下的box-shadow效果(IE9开始支持box-shadow)

基本语法:filter:progid:DXImageTransform.Microsoft.Shadow(color=’颜色值’, Direction=阴影角度(数值),Strength=阴影半径(数值));

注意:该滤镜必须配合background属性一起使用,否则该滤镜失效。

盒模型倒影

box-reflect:none |<direction> <offset> ?<mask-box-image>

direction:above | below | left | right

倒影在对象的上方、下方、左边、右边

offset:length|percentage

图片与倒影之间的间隔,可以为负值

mask-
box-image(可选):none | url | linear-gradient | radial-gradient        |
repeating-linear-gradient | repeating-radial-gradient

url图像遮罩

linear-gradient使用线性渐变创建遮罩图像

radial-gradient使用径向(放射性)渐变创建遮罩图像

repeating-linear-gradient使用重复的线性渐变创建遮罩图像

repeating-radial-gradient使用重复的径向渐变创建遮罩图像

liner-gradient([ || ,]? ,  [, ]*)

第一个参数表示线性渐变的方向,top表示从上到下,left从左到右,如果写left top,从左上角到右下角。第二个参数表示起点颜色和终点颜色

推荐阅读:高级工程师手把手带你做企业门户前端

时间: 2024-10-22 12:57:53

css3基础教程:CSS3弹性盒模型的相关文章

《CSS3实战》笔记--弹性盒模型(三)

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011.5 box-pack和box-align属性 ??当弹性元素和非弹性元素混合排版时,有可能会出现所有子元素的尺寸大小或小于盒子的尺寸,从而出现盒子空间不足或者富余的情况,这时就需要一种方法来管理盒子的空间.如果子元素的总尺寸小于盒子的尺寸,则可以使用box-align和box-pack属性进行管理. ??box-pack属性可以在水平方向上对盒子的富余空间进行管理,该属性的基本语法如下:

《CSS3实战》笔记--弹性盒模型(二)

通过阅读和学习书籍<CSS3实战>总结 <CSS3实战>/成林著.-北京机械工业出版社2011.5 box-flex属性 box-flex属性能够灵活地控制子元素在盒子中的显示空间.注意,显示空间包括子元素的宽度和高度,而不只是子元素所在栏目的宽度,也可以说是子元素在盒子中所占的面积.该属性在弹性布局中非常重要,它解决了传统设计中习惯使用百分比定义弹性布局的弊端.box-flex属性的基本语法: box-flex:<number> 取值说明: <number>

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

文章目录 基础知识 属性介绍 display: flex | inline-flex; (适用于父类容器元素上) 请注意: flex-direction (适用于父类容器的元素上) flex-wrap (适用于父类容器上) flex-flow (适用于父类容器上) justify-content (适用于父类容器上) align-items (适用于父类容器上) align-content (适用于父类容器上) order (适用于弹性盒模型容器子元素) flex-grow (适用于弹性盒模型容

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

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

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

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

CSS3实战开发: 弹性盒模型之响应式WEB界面设计

各位网友大家好,如果你已经阅读过我先前写的关于CSS3弹性盒模型的实例演示,相信你对CSS3弹性盒模型属性知识点应该已经有了一个非常深刻的映像. 从本篇文章开始,我将带领大家,手把手地教大家如何来开发一个适合移动端浏览器的弹性盒模型的响应式页面.同时实战开发中的案例代码可以作为你项目中的精简框架了. 当你学习完成<CSS3实战开发: 弹性盒模型之响应式WEB界面设计>这个系列教程之后,相信你对目前比较流行的前端轻量级框架 Bootstrap等会有一个深刻的认识. Bootstrap(弹性流体布

CSS3弹性盒模型之box-orient &amp; 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)(转)

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

css3弹性盒模型(Flexbox)

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