CSS3盒子模型

最新推荐文章于 2023-07-11 20:20:15 发布

qq_50636169

最新推荐文章于 2023-07-11 20:20:15 发布

阅读量122

点赞数 1

本文链接：https://blog.csdn.net/qq_50636169/article/details/119616047

版权

1.CSS3盒子模型（box-sizing)
通过box-sizing来指定盒模型。
1.box-sizing：content-box 盒子大小为width+padding+border，与之前的盒子模型一致，是默认的。
2.box-sizing：border-box 盒子大小为width，即盒子大小不变。

2.CSS3图片模糊处理
CSS3滤镜filter，将模糊或颜色偏移等效果应用于元素。
语法：filter：函数（）；

3.CSS3计算盒子宽度 calc函数
语法： width：calc （100%-80px）；

<style>
        .box1 {
            width: 200px;
            height: 50px;
            background-color: deeppink;
        }
        .box2 {
            width: calc( 100% - 50px ) ;<!--注意空格-->
            height: 50px;
            background-color: deepskyblue;
        }
    </style>
</head>
<body>
    <div class="box1">
          <div class="box2"></div>
    </div>
</body>

4.CSS3的过渡特性
css3中用transition来体现元素的过渡特性，谁来变换给谁加。
transition：要过渡的属性花费时间运动曲线何时开始
运动曲线默认为ease,何时开始默认为从0时开始，花费时间一定要写单位

如果同时写多个属性，用逗号分开，transition： width .5s ，height .4s ;
如果想要多个属性都变化， transition： all .5s

qq_50636169

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3盒子模型

1.CSS3盒子模型（box-sizing)通过box-sizing来指定盒模型。1.box-sizing：content-box 盒子大小为width+padding+border，与之前的盒子模型一致，是默认的。2.box-sizing：border-box 盒子大小为width，即盒子大小不变。2.CSS3图片模糊处理CSS3滤镜filter，将模糊或颜色偏移等效果应用于元素。语法：filter：函数（）；3.CSS3计算盒子宽度 calc函数语法： width：calc
复制链接

扫一扫