第一阶段：CSS初步探讨

最新推荐文章于 2024-06-08 09:53:18 发布

weixin_44501440

最新推荐文章于 2024-06-08 09:53:18 发布

阅读量98

点赞数

分类专栏：学习

本文链接：https://blog.csdn.net/weixin_44501440/article/details/98098847

版权

学习专栏收录该内容

18 篇文章 0 订阅

订阅专栏

传统盒子和怪异盒子的初接触

作为一个小白，第一次碰到这种盒子，总算能对盒子变形有一点粗浅认识了，不多说，直接上代码观察

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>css练习</title>
	<link rel="stylesheet" href="http://at.alicdn.com/t/font_1329349_q07nbsg8m7c.css">

	<style>
		*{
			margin: 0;
			padding: 0;
		}
		.one{
			font: normal  normal 14px\1.5em "宋体";
			margin: 0 auto;
			width: 70%;
			background-color: pink;
		}
		.one>p{
			text-indent: 2em;
			text-shadow: 2px 2px 3px lightblue;
			font-size: 20px;
		}
		.one>p:hover{
			text-shadow: 3px 3px 12px #fff;
		}
		.two{
			background-color: lightblue;
			width: 300px;
			height: 100px;
			margin: 0 auto;
		}
		.two span{
			display: inline-block;
			width: 70px;
		}
		.three{
			height: 600px;
			width: 600px;
			border: 1px solid #000;
			margin: 0 auto;
		}
		.box1{
			float: left;
			box-sizing: content-box;
			width: 100px;
			height: 100px;
			background-color: pink;
			border: 20px dotted gray;
			padding: 10px;
			margin-right: 10px;
		}
		.box1-1{
			float: left;
			box-sizing: content-box;
			width: 100px;
			height: 100px;
			/* background-color: pink; */
			background-image: url('./下载.jfif');
			border: 20px dotted gray;
			padding: 10px;
			background-repeat: no-repeat;
			background-origin: padding-box;
			background-clip: content-box;  /*在内容区域截图*/
			margin-left: 10px;
			padding: 30px;
		}
		.box2{
			
			clear: both;
			width: 100px;
			height: 100px;
			padding: 10px;
			background-color: gray;

		}
		.note{
			margin-top: 50px;
			border: 1px solid red;
		}
	</style>
</head>
<body>

	<p>字体样式练习：</p>
	<div class="one">
		<p>瞎想：</p>其实人生，就是一场路过：路过这个世界，走过这个岁月，生命的尽头，你还是一无所有。一切想开了，就不必困惑;一切看淡了，就不受折磨;一切参透了，就不会执着。
	</div>
	<p>引用网络字体、在线使用阿里图片使用</p>
	<div class="two">
		<span class="iconfont icon-yaoxiang">急救箱</span>
		<span class="iconfont icon-xingji">星级</span>
		<span class="iconfont icon-kefu">客服</span>
	</div>
	<p>盒子样式</p>
	<div class="three">
		<div class="box1">传统盒子1、width: 100px;
			height: 100px;padding: 10px;</div>
		<div class="box1-1">传统盒子2、width: 100px;
			height: 100px;padding: 30px;</div>
		<div class="box2">怪异盒子、width: 100px;
			height: 100px;
			padding: 10px;</div>
			<div class="note">传统盒子的宽高等于内容区域的宽高，如果padding改变则会导致整个盒子变形，撑开来，如box1和box1-1所示
			<br/>怪异盒子的宽高=内容的宽高+padding*2+border*2,所以改变padding时不会改变整个盒子的大小，不会变形
			</div>
	</div>

	
</body>
</html>

在这里插入图片描述
传统盒子的宽高等于内容区域的宽高，如果padding改变则会导致整个盒子变形，撑开来，如box1和box1-1所示
怪异盒子的宽高=内容的宽高+padding2+border2,所以改变padding时不会改变整个盒子的大小，不会变形

weixin_44501440

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第一阶段：CSS初步探讨

传统盒子和怪异盒子的初接触作为一个小白，第一次碰到这种盒子，总算能对盒子变形有一点粗浅认识了，不多说，直接上代码观察<!DOCTYPE html><html><head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> ...
复制链接

扫一扫

专栏目录