css常用属性详解

最新推荐文章于 2025-04-27 12:01:57 发布

原创最新推荐文章于 2025-04-27 12:01:57 发布 · 161 阅读

0 ·

CC 4.0 BY-SA版权

css3 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了CSS中的transition属性，用于实现元素宽度变化的平滑过渡效果，以及box-sizing属性，它改变元素的盒模型，使得边框和内填充包含在设定的宽度和高度之内，简化了布局计算。这两个属性在前端开发中常用于创建交互式的动态效果和优化布局计算。

1，transition

div
{
width:10px;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari 和 Chrome */
-o-transition: width 2s; /* Opera */
}
div:hover{width:12px;}
鼠标放到div上是，宽度会从10px在2s内变成12px，适合做鼠标移入移除img、li等的动态变化效果

2，box-sizing

div
{
box-sizing:border-box;
-moz-box-sizing:border-box; /* Firefox */
-webkit-box-sizing:border-box; /* Safari */
width:50%;
float:left;
}

默认情况下，元素的宽度和高度计算如下： width + padding + border =元素的实际宽度 height + padding + border =元素的实际高度 这意味着：当您设置元素的宽度/高度时，元素通常看起来比您设置的大（因为元素的边框和填充被添加到元素的指定宽度/高度）。
box-sizing属性允许我们在元素的总宽度和高度中包含填充和边框。如果box-sizing: border-box;在元素填充上设置并且边框包含在宽度和高度中