您的位置：首页 > Web前端 > CSS

实用的css3属性

2016-02-28 16:33 330 查看

实用的css3属性

1、display:flex||inline-flex

displayflexinline-flex
解释将对象作为弹性伸缩盒显示将对象作为内联块级弹性伸缩盒显示

项目中的应用

我当时写过一个因为子元素浮动让div自适应高度的解决办法，使用的是css方法解决的。div高度自适应

下面就是换用display:flex解决

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.main{
width:200px;
background-color: red;
display: flex;/*父div设置该属性*/
}
.main>div{
width: 50px;
height: 50px;
border: 1px solid blue;
box-sizing: border-box;/*这是css3属性，如果不懂，请继续往下阅读*/
/*float:left;这个属性就不需要了，会自动浮动*/
}
</style>
</head>
<body>
<div class="main">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
</div>
</body>
</html>


display:inline-flex,如果想看到效果，将上面的display:flex,换成display:inline-flex,并且将width:200px删除。在没有测试之前，有的人可能会认为.main会占据整个一行，但是，测试结果是，它会根据子元素所有的div大小自适应宽度和高度

2、属性align-items

项目中的应用

属性值解释
flex-start弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴起始边界
flex-end弹性盒子元素的侧轴（纵轴）起始位置的边界紧靠住该行的侧轴结束边界
center弹性盒子元素在该行的侧轴（纵轴）上居中放置。（如果该行的尺寸小于弹性盒子元素的尺寸，则会向两个方向溢出相同的长度
baseline如弹性盒子元素的行内轴与侧轴为同一条，则该值与’flex-start’等效。其它情况下，该值将参与基线对齐
stretch如果指定侧轴大小的属性值为’auto’，则其值会使项目的边距盒的尺寸尽可能接近所在行的尺寸，但同时会遵照’min/max-width/height’属性的限制
再次注意:

stretch，子元素设置高度为auto,不能固定高度才能在父容器中被拉伸





3、属性flex-flow

注意:当父容器设置了display:flex||inline-flex,这个属性才起作用。

解释:设置弹性元素的排列和是否换行

flex-flow：<’ flex-direction ‘> || <’ flex-wrap ‘>

<’ flex-direction ‘>：定义弹性盒子元素的排列方向。

<’ flex-wrap ‘>：控制flex容器是单行或者多行。

属性值
flex-directionrow(默认),row-reverse,column,column-reverse,initial,inherit
flex-wrapnowrap(默认),wrap,wrap-reverse,initial,inherit
* initial,原本元素的默认值，也就是不使用该css3属性的值

* 注意：Internet Explorer 或 Opera 15 及其之前的版本不支持 initial 关键字作为一个属性值。

.main{
background-color: red;
width: 50px;
display: flex;/*这个是前提*/
flex-flow：<' flex-direction '> || <' flex-wrap '>
}




4、属性box-sizing

值解释
content-box(默认)设置的border和padding值，向宽度和高度外增加
border-box设置的border和padding值，向宽度和高度内增加
box-zizing: border-box,不会影响原元素的高度与宽度

*box-sizing：border-box,如果想在一个div中放多个图片并且平均分配宽度，如果不设置这个属性图片就会全部充满这个行，现在就可以使用这个属性很好的解决

5、transition

通过css3定义简单的缓慢动画效果,下面是transition的四个复合属性

*transition-property 规定设置过渡效果的 CSS 属性的名称。

*transition-duration 规定完成过渡效果需要多少秒或毫秒。

*transition-timing-function 规定速度效果的速度曲线

*transition-delay 定义过渡效果何时开始。

这里我不做太多详细的解释，只对实战中的应用进行演示详情

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Test</title>
<style type="text/css">
.block{
width: 80px;/*初始宽度*/
height: 80px;
background-color: blue;
opacity: 1;/*初始透明度*/
}
.block:hover{
transition: all 1s;/*单个属性transition: opacity 1s,如果是多个的话就是all*/
opacity: 0;/*移上去时候的透明度*/
width: 150px;/*移上去时候的宽度*/
}
</style>
</head>
<body>
<div class="block"></div>
</body>
</html>


让一个80*80px的方块，在1s内宽度由80px到150px,并且透明度由1变成0

如果还想添加别的属性，只需在.block中设置初始的属性，在.block:hover中设置要达到的最终值

6、总结

css3有很多属性都特别好用，这是我知道的几个实用属性，后期发现好的也会增加进来。希望大家有建议提出来!
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  css css3 flex 应用
相关文章推荐
新的分享
章节导航