CSS盒子模型
CSS3中可以通过box-sizing来指定盒模型,有2个值:即可指定为content-box、border-box 这样我们计算盒子大小的方式就发生了变化
可以分成两种情况:
-
box-sizing:content-box 盒子大小为width+padding+border (以前默认的)
-
box-sizing: border-box盒子大小为width
如果盒子模型我们改为了box-sizing: border-box, 那padding和border就不会撑大盒子(前提padding和border不会超过width宽度)
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
div {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
box-sizing: content-box;
}
p {
width: 200px;
height: 200px;
background-color: pink;
border: 20px solid red;
padding: 15px;
/* css3 盒子模型 盒子最终的大小就是 width 200 的大小 */
box-sizing: border-box;
}
</style>
</head>
<body>
<div>
小猪乔治
</div>
<p>
小猪佩奇
</p>
</body>
CSS3其他特性(了解)
filter CSS属性将模糊或颜色偏移等图形效果应用于元素
语法:
filter: 函数 例如:filter: blur(5px); blur模糊处理 数值越大越模糊
<style>
img {
/* blur是一个函数 小括号里面数值越大,图片越模糊 注意数值要加px单位 */
filter: blur(15px);
}
img:hover {
filter: blur(0);
}
</style>
</head>
<body>
<img src="images/pink.jpg" alt="">
</body>
CSS3 calc 函数:
calc()此时CSS函数让你在声明CSS属性值时执行一些计算
width: calc(100%-80px);
<style>
.father {
width: 300px;
height: 200px;
background-color: pink;
}
.son {
/* width: 150px; */
/* width: calc(150px + 30px); */
width: calc(100% - 30px);
height: 30px;
background-color: skyblue;
}
</style>
</head>
<body>
<!-- 需求我们的子盒子宽度永远比父盒子小30像素 -->
<div class="father">
<div class="son"></div>
</div>
括号里面可以使用+ - */来计算
CSS3还增加了一些动画2D3D等新特性,就业班继续学习
CSS3过渡(重点)
过渡(transition)是CSS3中具有颠覆性的特性之一,我们可以在不使用flash动画或JavaScipt的情况下,当元素从一种样式变换为另一种样式时为元素添加效果
过渡动画:是从一个状态,渐渐的过渡到另一个状态
可以让我们页面更好看,更动感十足,虽然低版本浏览器不支持(ie9以下版本)但是不会影响页面布局
我们现在经常和:hover一起搭配使用
transition: 要过渡的属性 话费时间 运动曲线 何时开始
-
属性:想要变化CSS属性,宽度高度 背景颜色 内外边距都可以,如果想要所有的属性都变化过渡 写一个all就可以
-
花费时间:单位是 秒(必须写单位)比如0.5s
-
运动曲线:默认是ease(可以省略)
-
何时开始:单位 秒(必须写单位)可以设置延迟触发时间 默认是 0s (可以省略)
记住过渡使用的口诀:谁做过渡给谁加
进度条案例
-
进度条如何布局
-
过渡的使用