css知识小汇（3）——盒子模型

最新推荐文章于 2023-06-21 06:45:00 发布

木鱼非鸟

最新推荐文章于 2023-06-21 06:45:00 发布

阅读量77

点赞数

分类专栏： html、css、js

本文链接：https://blog.csdn.net/weixin_45734378/article/details/113537870

版权

html、css、js 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

文章目录

- 盒子模型

盒子模型

在这里插入图片描述

margin：外边距

border：边框

padding：内边距

边框

边框粗细

边框颜色

边框样式

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			#app{
				border: 1px  solid black ;
			}
			h4{
				background: bisque;
				text-align: center;
			}
			#n1:nth-of-type(1) input{
                /*背景颜色*/
				background: lavender;
                /*设置边框*/
				border: 2px solid rosybrown;
			}
			#n2:nth-of-type(2){
				background: lavender;
			}
			#n3:nth-of-type(3) input{
				background: lavender ;
				border: 3px dashed lawngreen;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h4>会员登录</h4>
			<form>
				<div id="n1">
					<span>用户名</span>
					<input type="text" name="un" id="un"  />
				</div>
				<div id="n2">
					<span>密码</span>
					<input type="text" name="un" id="un"  />
				</div>
				<div id="n3">
					<span>邮箱</span>
					<input type="text" name="un" id="un"  />
				</div>
			</form>	
		</div>
	</body>

内外边距

#app{
    border: 1px  solid black ;
    		/*上  右  下  左*/
    margin: 1px 2px 3px 4px;
    		/*上下  左右*/
    padding: 5px 10px;
}

在这里插入图片描述

圆角

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#app{
				width: 100px;
				height: 50px;
				background-color: rosybrown;
                			/*左上  右上  右下  左下*/
				border-radius: 50px 50px 0 0;
			}
		</style>
	</head>
	<body>
		<div id="app"></div>
	</body>

盒子阴影

		/*水平方向 垂直方向 阴影距离 颜色*/
box-shadow: 10px 10px 100px red;

如有不对的地方欢迎指出，大家共同进步！

木鱼非鸟

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css知识小汇（3）——盒子模型

文章目录盒子模型边框内外边距圆角盒子模型margin：外边距border：边框padding：内边距边框边框粗细边框颜色边框样式 <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{ margin: 0; padding: 0; } #app{ border: 1px s
复制链接

扫一扫