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的表现也是一致的,让元素纵列

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

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

normal|reverse|inherit

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

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

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

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

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

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;

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

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

start|end|center|justify

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

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

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

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

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

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

single|multiple

single是默认值,表示不换行

multiple允许多行显示

子元素的属性

box-flex:值为n

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

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

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

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

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

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

其它:

resize*缩放

both|horizontal|vertial

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

horizontal只有水平方向可以缩放

vertical只有垂直方向可以缩放

需要配合overflow一起使用

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

类似于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,从左上角到右下角。第二个参数表示起点颜色和终点颜色

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

上一篇:原创 :nfs软件服务利用ansible实现一键化部署


下一篇:Django的日志操作,记录一下自己的使用