css 行高以及盒模型

最新推荐文章于 2024-04-05 03:19:00 发布
心郎
最新推荐文章于 2024-04-05 03:19:00 发布
阅读量652
点赞数
分类专栏：前段_css
本文链接：https://blog.csdn.net/u011301203/article/details/52349003
版权
前段_css 专栏收录该内容
13 篇文章 0 订阅
订阅专栏
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style >
			#a1{
				width: 1000px;
				height: 300px;
				background-color: pink;
				font-size: 30px;
				line-height: 300px;/* 行高*/
				text-align: center; /*内容水平居中*/
			}
			#a2{
				font-size: 50px;
				line-height: 40px;
				background-color: red;  /*行高=设置的行高值*/
			}
			#a3{
				font-size: 20px;
				line-height: 2em;
				background-color: red;  /*行高=行高值*文字大小*/
			}
			#a4{
				font-size: 20px;
				line-height: 200%;
				background-color: red;  /*行高=行高值*文字大小*/
			}
			#a5{
				font-size: 20px;
				line-height: 2;
				background-color: red;  ?/*行高=行高值*文字大小*/
			}
			
			/*
			 * 盒子模型（box）: 盒子模型是网页布局的基础
			 * 组成：
			 * 	1 : border  边框
			 * 		1) border-width:  设置边框宽度
			 * 		2) border-color:   设置边框颜色
			 * 		3) border-style： 设置边框样式
			 * 			a) solid :  实线
			 * 			b) dotted:  点线
			 * 			c) dashed:  虚线
			 * 		特点： 
			 * 			border:1px solid  red;  属性联写 顺序可以调换，不固定
			 * 
			 * 			border-top-color:green;
			 * 			border-top-width:2px;
			 * 			border-top-style:dotted;
			 * 
			 * 			border-top:1px solid green; 单独设置样式属性联写 值的顺序可以调换，不固定
			 * 			
			 * 			border:0 none; 去掉边框
			 * 
			 * 	2 : padding 内边距（内容与边框之间的距离 ）
			 * 		使用：
			 * 			padding-left:10px;
			 * 			padding-top:10px;
			 * 			padding-right:10px;
			 * 			padding-bottom:10px;
			 * 
			 * 			padding: 10px;  	表示 上 右 下 左  都是10px  （顺时针方向）
			 * 			padding：10px 20px; 	    表示 上下10px  左右 20px;
			 * 			padding: 10px 20px 30px; 	表示 上10px 左右 20px 下30px
			 * 			padding：10px 20px 30px 40px;	    表示 上10px 右20px 下30px 左40px
			 * 		注意： 内边距与border都会影响盒子的宽度
			 * 			继承的盒子（子盒子如果不设置宽度）在父元素宽度范围内，设置子盒子padding值不会影响子盒子的宽度大小
			 * 		
			 * 			
			 * 
			 * 	3 : margin  外边距（盒子与盒子之间的距离）
			 * 			外边距不会影响盒子大小
			 * 		使用：与padding一样
			 * 		特点：
			 * 			1 当两个盒子垂直显示的时候，设置的外边距会以最大值为准（外边距合并）
			 * 			2 外边距塌陷问题
			 * 				给父盒子添加边框
			 * 				给父盒子设置  overflow: hidden;  触发元素的bfc(格式化上下文)
			 *  4：注意
			 * 		1 行内元素不要给上下margin 和 padding 会被忽略 左右生效
			 * */
			.username{
				outline-style: none; /* 去掉输入框的轮廓线*/
				border-color: red;
				background-color: green;
			}
			.username1{
				outline-style: double; /* 输入框的样式*/
			}
			.username2{
				outline-style: double; /* 输入框的样式*/
				background-color:pink;
			}
			.username:focus{
				background-color:pink; /* 设置获取光标的样式 点击后的样式*/
			}
			
			.boder1{
				width: 200px;
				height: 200px;
				border:1px solid  green;
			}
			.boder1{
				border-top: 1px red solid;
				border-bottom: 5px royalblue dotted;
			}
			
			.username3{
				border:1px dotted red;
				outline-style: none; /* 去掉输入框的默认轮库线*/ 
				background-color:pink;
			}
			.username3:focus{
				background-color:blue; /* 伪类类似 a标签  设置获取光标的样式*/
			}
			
			.username4{
				border: 0 none; /* 去掉边框*/ 
				outline-style: none; /* 去掉输入框的默认轮库线*/ 
				border-bottom: 1px red solid ;  /* 设置表框底线*/ 
			}
			.username5{
				border: 3px green solid; /* 设置表框颜色*/
				background: url(../html/logo.png) no-repeat right;
				background-size: 25px;
				outline-style: none;
			}
			table {
				width: 500px;
				height: 500px;
			}
			table,td{
				border: 1px  solid red;
				border-collapse: collapse; /* 合并边框  与 表格属性中的 cellspacing="0" 一样*/
			}
			
			/*盒子边距计算*/
			.div1{
				padding-left: 20px;
				padding-top: 20px;
				width: 600px;
				height: 800px;
				background-color: pink;
				border-left: 1px green solid;
				
			}
			.div2{
				width: 400px;
				height: 400px;
				padding-left: 20px;
				padding-top: 20px;
				background-color: green;
				padding-top: 30px;
				padding-left: 30px;
				margin-bottom: 20px;
				
			}
			.div3{
				width: 300px;
				height: 300px;
				background-color: aquamarine;
				padding-top: 30px;
			}
			.div4{
				width: 200px;
				height: 200px;
				color: red;
				background-color: black;
				padding-top: 30px;
			}
			
			/*盒子边距计算*/
			.div5{
				width: 200px;
				height: 200px;
				border: 3px red solid;
				padding-left: 40px;
				background-color: green;
			}
			
			/*盒子边距计算*/
			.div6{
				width: 300px;
				height: 150px;
				background-color: pink;
				padding: 100px 75px;
			}
			.div7{
				width: 300px;
				height: 150px;
				background-color: red;
			}
			
			/*盒子继承 问题*/
			.div8{
				width: 300px;
				height: 100px;
				background-color: green;
			}
			.div9{
				height: 50px;
				background-color: red;
				/*padding-left: 20px;*/
				padding-left: 310px;
			}
			
			/* 盒子外边距问题  外边距合并*/
			.div10{
				width: 300px;
				height: 300px;
				background-color: green;
				margin-left: 20px ;
				margin-bottom: 50px;
			}
			.div11{
				width: 300px;
				height: 300px;
				background-color: pink;
				margin-top: 30px;
			}
			
			/*外边距塌陷   现象：给子盒子添加margin-top: 30px; 结果；父盒子也一起向下移动了*/
			.div12{
				width: 500px;
				height: 500px;
				background-color: green;
				/*border:1px red solid;*/  /*解决办法 给父盒子添加边框*/
				overflow: hidden; /*触发元素的bfc(格式化上下文)*/
			}
			.div13{
				width: 200px;
				height: 200px;
				background-color: pink;
				margin-top: 30px;
				margin-left: 30px;
			}
			
			
		</style>
	</head>
	<body >
		<p id="a1">1 啊实打实大师大师大师</p>
		<p id="a2">2 啊实打实大师大师大师</p>
		<p id="a3">3 啊实打实大师大师大师</p>
		<p id="a4">4 啊实打实大师大师大师</p>
		<p id="a5">5 啊实打实大师大师大师</p>
		
		<label for="nm" >用户名1：</label> <!--鼠标点击文字 也有效果-->
		<input type="text" class="username" id="nm" />
		
		用户名2：<input type="text" class="username1" id="nm" />
		用户名3：<input type="text" class="username2" id="nm" /><br /><br />
		
		<label for="nm1" >
			用户名4：<input type="text" class="username3" id="nm1" />
		</label>
		
		<label for="nm2" >
			用户名5：<input type="text" class="username4" id="nm2"/>
		</label>
		
		用户名6：<input type="text" class="username5" />
		用户名7：<input type="text" class="username6" /><br /><br />
		<div class="boder1"></div>
		
		<table>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
			<tr>
				<td></td>
				<td></td>
				<td></td>
			</tr>
		</table> <br /><br />
		
		<div class="div1">
			盒子1
			<div class="div2">
				盒子2
				<div class="div4">
					盒子4
				</div>
			</div>
			<div class="div3">
				盒子3
			</div>
		</div>
		
		<div class="div5">
			如何将盒子设置为200px？？
		</div> <br /><br />
		
		<div class="div6">
			<div class="div7"></div>
		</div><br /><br />
		
		<div class="div8">
			<div class="div9">啦啦</div>
		</div><br /><br />
		
		<div class="div10">div10</div>
		<div class="div11">div11</div>
		
		<div class="div12">
			<div class="div13">
				
			</div>
		</div>
	</body>
</html>
心郎
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css 行高以及盒模型

#a1{ width: 1000px; height: 300px; background-color: pink; font-size: 30px; line-height: 300px;/* 行高*/ text-align: center; /*内容水平居中*/ } #a2{ font-size: 50px; line
复制链接

扫一扫
专栏目录