CSS3新特性——盒子模型、模糊、函数和过渡

2023-6-16

盒子模型

说起盒子模型，就想到：盒子实际大小=width+padding+border。

在CSS3盒子模型中，除了这种计算方式外，还有另外一种。一种不会被padding撑大的盒子模型计算公式。

语法

box-sizing:content-box | border-box;

content-box：盒子模型的宽高=width/height +padding+border。

代码练习

<div class="box1">原来学习的盒子模型大小：width+padding+border</div>

* {
  margin: 0;
  padding: 0;
}
.box1 {
  width: 200px;
  height: 200px;
  padding: 5px;
  border: 5px solid black;
  margin-bottom: 5px;
  box-sizing: content-box;   /* width+padding+border */
}

content-box

content-box：盒子模型的实际宽高=200+5*2+5*2

border-box：盒子模型的宽高=width/height。

<div class="box2">CSS3的盒子模型：width</div>

.box2 {
  width: 200px;
  height: 200px;
  padding: 5px;
  border: 5px solid black;
  box-sizing: border-box;
}

border-box

border-box:盒子模型的实际宽高=width=200

图片模糊

当鼠标悬停在图片时，给图片添加模糊效果。

语法

filter: blur(px);

像素值越大，图片越模糊。

代码练习

<img src="../images/dis1.png" alt="">
<img class="blur" src="../images/dis1.png" alt="">

.blur {
  /* 像素值越大，图片越模糊。 */
  filter: blur(5px);
}

左侧为图片正常显示状态，右侧为添加模糊样式后的状态

函数公式

计算公式，如宽高的加减乘除。

语法

width | height：calc(num1 - num2);

代码练习

<div class="boxF">
  <div class="boxS"></div>
</div>

.boxF {
  width: 200px;
  height: 200px;
  background-color: bisque;
}
.boxS {
/* 不论父级元素的width值是多少，子元素的width永远比父级元素少30px。 */
  width: calc(100% - 30px);  
  height: 30px;
  background-color: aqua;
}

过渡

使用CSS代码，当元素从一种样式转换成另一种样式时添加样式效果。

语法

transition:变化的属性 花费时间 运动曲线 何时开始;

代码练习

统一HTML代码结构

<div class="box">默认盒子</div>
<div class="box1">盒子的宽度变宽过渡</div>
<div class="box2">盒子的宽和高一起过渡</div>
<div class="box3">盒子的所有属性一起过渡</div>

div {
  width: 200px;
  height: 100px;
  background-color: bisque;
  margin-bottom: 10px;
}

没有添加过渡效果。

/*  1.修改一种样式的过渡效果  */
.box1 {
  /* 
  transition:变化的属性 花费时间 运动曲线 何时开始;
  其中运动曲线默认ease，开始时间默认0s，可不用设置。
  */
  /* transition: width .5s ease 0s; */
  transition: width .5s;
}
.box1:hover {
  width: 400px;
}

/* 2. 修改两种或多种样式的过渡效果  */
.box2 {
  /* 两种样式之间使用逗号隔开  */
  transition: width .5s,height .5s;
}
.box2:hover {
  width: 400px;
  height: 200px;
}

/* 3. 修改全部样式的过渡效果 使用all  */
.box3 {
  transition: all .5s;
}
.box3:hover {
  width: 400px;
  height: 200px;
  background-color: aqua;
}

顺道再添加一个进度条的小案例

<div class="demo">
  <div class="demoBox"></div>
</div>

.demo {
  width: 150px;
  height: 15px;
  border: 1px solid red;
  padding: 1px;
  border-radius: 7px;
}
.demoBox {
  width: 50%;
  height: 100%;
  background-color: red;
  border-radius: 7px;
  transition: width .5s;
}
.demoBox:hover {
  width: 100%;
}

THE END