CSS--盒子模型

盒子模型01

如果把所有的标签都想象成盒子,那么我们对网页的布局就相 当于是摆放盒子。
我们只需要将相应的盒子摆放到网页中相应的 位置即可完成网页的布局。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			*{
			/*
			清除网页默认属性
			*/
				margin: 0px;
				padding: 0px;
			}
			#box{
                /*
                width和height 只设置内容区大小,不是设置标签整体的大小
                如果没有为标签设置内边距和边框,那么就是标签的大小
                标签大小=内容区+内边距+边框
                */
				width: 1409px;
				height: 1406px;
				background-color: aqua;
				/*
				内边距:就是内容区到边框之间的距离,会影响标签的大小
				padding-top,left,right,bottom;
				周围边距都相同padding:number px;
				padding:上 右 下 左;
				*/
				padding: 50px;
				margin: 0px auto;
			}
			img{
			/*<img/>是行级标签,有间距
			所以通过display转化为块级标签
			*/
			display:block;
			}
			input{
				/*
				边框:标签的最外层
				border-top:2px red solid;(宽度、颜色、样式三样缺一不可)
				border-radius:20px;设置圆角边框
				*/
				border:5px red solid ;
				border-radius: 20px;
				
				/*
				外边距:margin
				外边框不会影响大小,但会影响盒子位置
				margin:0px auto;上下 左右居中
				*/
				margin: 0px auto;
			}
		</style>
	</head>
	<body>
		<img src="图片路径"/>
		<div id="box">
			<input type="text" />
		</div>
		<hr />
		<input type="text" />
	</body>
</html>

总结

标签大小=内容区+内边距+边框
内容区:width height
内边距:padding-top,left,right,bottom;
边框:border-top:2px red solid;(宽度、颜色、样式三样缺一不可)
圆角边框:border-radius:20px;
外边距:margin(不影响标签大小)

CSS--盒子模型

上一篇:HttpServletResponce类


下一篇:js 正则表达式