实用的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,不能固定高度才能在父容器中被拉伸

实用的css3属性_第1张图片
实用的css3属性_第2张图片

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 '>
    }

实用的css3属性_第3张图片

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,Flex,css3,应用)