那些经常使用的 CSS3属性
那些经常使用的 CSS3属性
实用的css3属性
1、display:flex||inline-flex
display | flex | inline-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-direction | row(默认),row-reverse,column,column-reverse,initial,inherit |
flex-wrap | nowrap(默认),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有很多属性都特别好用，这是我知道的几个实用属性，后期发现好的也会增加进来。希望大家有建议提出来!