421day(css3盒子模型，小米实例)

CSS3盒子模型解析

最新推荐文章于 2021-12-19 23:42:09 发布

原创最新推荐文章于 2021-12-19 23:42:09 发布 · 301 阅读

0 ·

CC 4.0 BY-SA版权

本文深入探讨CSS3盒子模型的应用，通过小米实例展示box-sizing属性如何控制元素的大小计算方式，避免padding和border撑开盒子，同时介绍:hover伪类与after伪元素结合使用实现动态边框效果。

《2018年11月29日》【连续421天】

标题：css3盒子模型，小米实例；

内容：

css3盒子模型；

div {
			width: 300px;
			height: 300px;
			padding: 30px;
			border-right: 20px solid red;
			background-color: blue;
			box-sizing: border-box; /*加入后，盒子不会被border和padding撑开*/
			/*box-sizing: content-box;*/ /*默认，会被padding和border撑开*/
		}

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
		div {
			width: 632px;
			height: 340px;
			position: relative;
			border-radius: 10px;
			overflow: hidden;
		}
		div:hover::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			border: 10px solid rgba(255,255,255,.5);
			box-sizing: border-box;
		}
		
	</style>
</head>
<body>
	<div>
		<img src="mi.jpg" alt="">
	</div>
</body>
</html>