Day20（html+css）

之和_

已于 2022-03-23 11:34:52 修改

阅读量302

点赞数

分类专栏：前端文章标签： css html

于 2022-02-15 15:03:59 首次发布

本文链接：https://blog.csdn.net/weixin_43645809/article/details/122944949

版权

前端专栏收录该内容

5 篇文章 0 订阅

订阅专栏

盒子模型(部分)

边框和外边距

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				background-color: #5F9EA0;
				/* 在没讲盒模型时，设置标签的大小为200*200 
					讲盒模型之后，内容区的大小为200*200*/
				width: 176px;
				height: 176px;
				/* padding-top:10px;
				padding-left: 10px;
				padding-bottom: 10px;
				padding-right: 10px; */
				/* padding: 5px 10px 15px 20px;
				上 右 下左  */
				/* padding: 10px 5px;
				      上下  左右  */
				padding: 10px;
				/* 边框 要设置三个属性*/
				/* border-top-color: #8B0000;
				border-top-width: 2px;
				border-top-style: solid;
				 实心线 */
				 border: #8B0000 2px solid;
				 /* 边框弧度  数值越大越圆 100就是圆*/
				 border-radius: 5px;
				/* border-top-left-radius:10px;
				 border-top-right-radius: 10px; */
			}
			.search{
				width:600px;
				height:30px ;
				border: 2px  darkgrey solid;
				border-radius: 5px;
				outline: none;
				font-size: 20px;
			}
			.search:hover{
				border: dimgrey 2px solid ;
			}
			.search:focus{
				border: #8B008B 2px solid ;
			}
		</style>
	</head>
	<body>
		<!-- 
		 认为每一个标签都向一个盒子
		 每一个标签有四个区域构成，分别叫
		 内容区:
			标签中的内容都是放在内容区的
			如果一个标签没有设置内边距和边框，那么内容区的大小就是标签的大小
			标签大小是由3部分构成的
			标签的大小 = 内容区+内边距+边框
			
		 内边距：
			内容区与边框之间的距离，它不能放标签
			内边距会影响标签的大小
		 边框:
			也就是标签的最外层 会影响标签的大小
		 外边距：不影响标签大小
				会影响标签的位置
			
		 -->
		 <div class="box1" >
			 <span>box</span>
		 </div>
		 <br/>
		 <input type="text" class="search" />
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
		/* 把一些默认的样式去掉 */
		 *{
			margin: 0px;
			padding: 0px;
			outline: none;
		} 
			.box1{
				background-color: #8FBC8F;
				width: 200px;
				height: 200px;
				/* 外边距
				margin-top: 100px;
				margin-left: 100px;		 */	
				/* 值如果是auto那么外边距的值为最大化*/
				/* margin-left: auto;
				margin-right: auto; */
				/* 左右一起就居中 但是上下不行 
				上下的外边距为auto时值为0 需要设置具体的值
				 margin-top: auto;
				 margin-bottom: auto;*/
				 /*  上下设置 左右自动 */
				margin: 50px auto;
		</style>
	</head>
	<body>
		<!-- 
		 认为每一个标签都向一个盒子
		 每一个标签有四个区域构成，分别叫
		 内容区:
			标签中的内容都是放在内容区的
			如果一个标签没有设置内边距和边框，那么内容区的大小就是标签的大小
			标签大小是由3部分构成的
			标签的大小 = 内容区+内边距+边框
			
		 内边距：
			内容区与边框之间的距离，它不能放标签
		 边框:
			也就是标签的最外层 会影响标签的大小
		 外边距：不影响标签大小
				会影响标签的位置
			
		 -->
		 <div class="box1" >
			 <span>box</span>
		 </div>
		 <p>
		 三生三世
		 </p>
	</body>
</html>

浮动

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<style type="text/css">
	.box1{
		background-color: #5F9EA0;
		float: left; 
		/* 
		 标签浮动后,宽度是内容的大小,只需设置宽高
		 标签浮动后,上升了一层,是立体的,不会占用原来一楼的空间
		 */
	}
	.box2{
		background-color: #8B008B;
	}
	</style>
	<body>
		<!-- 
			文档流:
				指的是标签在网页中的排放顺序
				标签默认是从左至右,一个接一个排放
				浮动(重点) float
				定位(局部使用)
		 -->
		 <div class="box1">box1</div>
		  <div class="box2">box2</div>
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.menu{
				background-color: #6495ED;
				float: left;
				padding: 10px 30px;
				color: floralwhite;
			}
			.menu_box{
				width: 744px;
				margin:auto;
			}
			.main_box{
				width: 744px;
				background-color: #DB7093;
			    margin: 10px auto; 
			}
			.main_box_left,.main_box_center,.main_box_right{
				float: left;
				height: 200px;
			}
			.main_box_left{
				width: 248px;
				background-color: lightsalmon;
			}
			.main_box_center{
				width: 248px;
				background-color: cornflowerblue;
			}
			.main_box_right{
				width: 248px;
				background-color: lightsalmon;
			}
			.main_box_bottom{
				background-color: plum;
				height: 100px;
			}
		</style>
	</head>
	<body>
		<!--
			网页内容，长什么样子，交给css实现
			menu_box没有浮动，还是在原来的文档流中
			浮动后的标签是不占用原始文档流空间的，
			这个现象成为高度塌陷
			它会影响到其他后面标签的布局
			解决：清除浮动影响,会把父标签自动撑开，撑为与浮动标签高度相同
		 -->
		<div class="menu_box">
		<div class="menu"> 首页首页</div>
		<div class="menu"> 国际新闻</div>
		<div class="menu"> 娱乐快报</div>
		<div class="menu"> 体育事件</div>
		<div class="menu"> 游戏游戏</div>
		<div class="menu"> 科技科技</div>
		<div style="clear: left;"></div>
		</div>
		<div class="main_box">
			<div class="main_box_left">左</div>
			<div class="main_box_center">中</div>
			<div class="main_box_right">右</div>
			<div style="clear: left;"></div>
			<div class="main_box_bottom">底</div>
		</div>
	</body>
</html>

相对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				background-color: #483D8B;
				/* 相对定位
					相对定位的参照物是他自己本身
					移动后原来的空间还是被占用，不用脱离文档流
				*/
			   /* 开启相对定位 */
			   position: relative;
			   left: 100px;
			   top: 100px;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: #DB7093;
			}
		</style>
	</head>
	<body>
		<!-- 大范围浮动 小范围浮动 -->
		<div class="box1">box1</div>
		<div class="box2">box2</div>
	</body>
</html>

绝对定位

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			.box1{
				width: 100px;
				height: 100px;
				background-color: #483D8B;
				/* 
				 开启绝对定位的标签，会脱离文档流
					绝对定位的参照物会变：
						是以离他最近的 开启了定位的祖先标签进行定位
						（一般情况下，开启子标签的绝对定位就会开启父标签的相对定位）
						如果祖先标签没有开启定位，那么就以浏览器边框为参照物
				*/
			   /* 开启绝对定位 */
			   position: absolute ;
			   left: 100px;
			   top: 100px;
			}
			.box2{
				width: 100px;
				height: 100px;
				background-color: #DB7093;
			}
			.box3{
				width: 200px;
				height: 200px;
				background-color: #8FBC8F;
				position: relative;
				/* 开启绝对定位box2会移到上面的 */
			}
		</style>
	</head>
	<body>
		<!-- 大范围浮动 小范围浮动 -->
		<div class="box3">
			box3
			<div class="box1">box1</div>
		</div>
		<div class="box2">box2</div>
	</body>
</html>

之和_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Day20（html+css）

盒子模型(部分)边框和外边距<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> .box1{ background-color: #5F9EA0; /* 在没讲盒模型时，设置标签的大小为200*200 讲盒模型之后，内容区的大小为200
复制链接

扫一扫