专栏首页用户7873631的专栏css内容 元素 元素空间的练习

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>

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 详解:30 text-shadow的开端

    核心知识点是:text-shadow:x y 模糊的大小 模糊的颜色,请大家记住一点:xy可以负数形式出现 嘿嘿。核心是复制哈

    用户7873631
  • 3D怎么写才能显示出效果呢。

    用户7873631
  • PHP+MYSQL分页css篇2

    body{ font-size: 12px;font-family: verdana;width: 100%; } div.page{ text-ali...

    用户7873631
  • 好玩儿的css

    css 发展到今天已经越来越强大了。其语法的日新月异,让很多以前完成不了的事情,现在可以非常轻松的做到。

    前端森林
  • JavaScript 鼠标悬停图片,显示隐藏文本

    当我们在浏览网页的时候,描述性的文本通常不会跟在图片之后,而是当我们将鼠标移至图片上时,才会将文本显示出来,这样的好处是,以突显图片为主,并节省布局空间

    Nian糕
  • JQuery生成图片列表

    彼岸舞
  • 前端基础-CSS基础(七)

    efonfighting
  • 个人信息页面网页

    王凡汎
  • 【开源游戏/跑酷】我就是我

    我就是我是一款非常有趣另类的敏捷类跑酷HTML5游戏,在游戏中吃到桃心可以加快奔跑的速度,另外掉坑里,你要快速的点击屏幕,可以飞起来,只要你够牛X,你可以永远不...

    用户5997198
  • CSS制作可爱的小猪,祝大家2019“猪”事顺心

    时间过得真快,2019年也是说来就来,时间是真的不等人啊。新的一年小伙伴们都有什么目标呢?赶紧向着目标努力吧,2020也会眨眼即到。

    Javanx

扫码关注云+社区

领取腾讯云代金券