第一阶段：CSS初步探讨
程序员文章站
2024-03-21 23:02:10
...
传统盒子和怪异盒子的初接触
作为一个小白，第一次碰到这种盒子，总算能对盒子变形有一点粗浅认识了，不多说，直接上代码观察
<!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时不会改变整个盒子的大小，不会变形
上一篇： springboot总结
下一篇： 软件测试 | 知识理论大纲