css内容 元素 元素空间的练习
<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
.box1
{
width: 50px;
height: 50px;
padding: 25px;
background-color: red;
}
/*这个为元素的宽高都为150px。内容的宽高为100px*/
.box2
{
width: 96px;
height: 96px;
border: 2px solid red;
}
/*这个是元素的宽高为196px。内容的宽高为192px。*/
.box3
{
width: 100px;
height: 100px;
background-color: yellow;
/*这个是内容的宽高为200px*/
}
.box4
{
width: 100px;
height: 100px;
margin: 50px;
background-color: red;
/*这个是元素的宽高为300px,内容的宽高为200px*/
}
.box5
{
width: 150px;
height: 150px;
border: 25px solid red;
/*这个元素的宽高为350px,内容的宽高为300px。*/
}
.box6
{
width: 150px;
height: 150px;
padding: 20px;
border: 20px solid blue;
background: red;
/*这个为内容的宽高为300px,元素的宽高为380px.*/
}
.box7
{
width: 300px;
height: 300px;
background-color: purple;
}
.box8
{
width: 100px;
height: 100px;
padding: 25px;
border: 25px solid #000;
margin: 50px;
/*内容的宽高为200px,元素的宽高为300px,元素空间的宽高为400px。*/
}
.box9
{
width: 150px;
height: 150px;
padding: 25px;
background-color: red;
/*内容的宽高为300px
元素的宽高为350px。*/
}
.box10{
width: 160px;
height: 160px;
border: 20px solid #000;
background-color: deepskyblue;
/*内容的宽高为320px
元素的宽高为360px*/
}
/*问题
要求增加padding属性为25之后仍然保持元素宽高为200?
/*现有如下盒子模型, 要求增加border属性为20之后仍然保持元素宽高为200?
怎么做?
第一个:width和height都减去50px就行了。
第二个:width和height都减去40就行了;
*/
</style>
</head>
<body>
<div class="box1">box1</div><br>
<div class="box2">box2</div><br>
<div class="box3">box3</div><br>
<div class="box4">box4</div><br>
<div class="box5">box5</div><br>
<div class="box6">box6</div><br>
<div class="box7">box7</div><br>
<div class="box8">box8</div><br>
<div class="box9">box9</div><br>
<div class="box10">box10</div>
</body>
</html>本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2020/09/02 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
