那些经常使用的 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有很多属性都特别好用,这是我知道的几个实用属性,后期发现好的也会增加进来。希望大家有建议提出来!

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏coding for love

CSS常用布局实现01-水平居中

居中是我们平常遇到的很常见的一种布局方式,主要分为水平居中,垂直居中,水平垂直居中。每种情况又分为,已知宽度,不知宽度,对块级元素居中,对行内替换元素水平居中,...

1081
来自专栏三十课

【基础】这15种CSS居中的方式,你都用过哪几种?

CSS居中是前端工程师经常要面对的问题,也是基本技能之一。今天有时间把CSS居中的方案汇编整理了一下,目前包括水平居中,垂直居中及水平垂直居中方案共15种。如有...

4017
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS(四)CSS初始化、定位、overflow、标签规范

CSS初始化是指重设浏览器的样式。不同的浏览器默认的样式可能不尽相同,所以开发时的第一件事可能就是如何把它们统一。如果没对CSS初始化往往会出现浏览器之间的页面...

1043
来自专栏从零开始学 Web 前端

从零开始学 Web 之 CSS3(四)边框图片,过渡

并且,添加边框图片是以背景的方式添加的,所以会有可能文字覆盖在边框的情况,后面也会介绍处理方法。

591
来自专栏用户2442861的专栏

关于Div的宽度与高度的100%设定

正像你所知道的那样,设置DIV大小的有两个属性width和height,以前在学习DIV每次给DIV设置100%宽度或高度时都很迷惑,不明确这个100%的宽度...

792
来自专栏互联网杂技

box布局

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style>...

2707
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(五)-- 单行居中,两行居左,超过两行省略

985
来自专栏菜鸟前端工程师

JavaScript学习笔记024-默认行为0滚轮事件

1072
来自专栏Coco的专栏

谈谈一些有趣的CSS题目(十四)-- 纯 CSS 方式实现 CSS 动画的暂停与播放!

1703
来自专栏HTML5学堂

轮播图效果,不再局限于JS制作!

HTML5学堂(码匠):网页的轮播图一直都是个比较精美的制作,同时也是用户体验较佳的效果。在开发工程师进行制作的时候往往会选择使用JS来书写,由此不禁会问,难道...

6466

扫码关注云+社区

领取腾讯云代金券