css 行高以及盒模型

原创 2016年08月28日 23:34:40
<!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>

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

【CSS3】-伸缩布局盒模型实现 3列等高布局

CSS3引入了Flexbox盒模型

CSS盒模型PPT

  • 2014年05月23日 15:14
  • 543KB
  • 下载

CSS盒模型详细解析

  • 2011年01月25日 14:37
  • 2.02MB
  • 下载

详解CSS3弹性盒模型---Flexbox

详解CSS3弹性盒模型---Flexbox

CSS_盒模型

  • 2017年01月28日 13:41
  • 904B
  • 下载

CSS学习-盒模型的概念

  • 2008年11月03日 23:02
  • 847KB
  • 下载

CSS 盒模型 基本术语解释

specified value:  即作者为具体的属性所设定的值。 computed value: 当为属性设定值时,该值可能是绝对的(它们不是相对其他值而言的,例如”red”,”2px”),也...

[模仿]CssDesk CSS沙盒模型制作工具

  • 2014年06月25日 22:14
  • 344KB
  • 下载

css3-盒模型实例.html

  • 2016年08月27日 19:12
  • 2KB
  • 下载

从零开始学_JavaScript_系列(16)——CSS<3>(文本、对齐、圆角、盒模型、背景)

注意,有些CSS属性对于低版本浏览器(典型的就是IE),可能不支持,所以在面向低版本浏览器的时候需要注意的说。 关于CSS属性的兼容性检测的网站:http://caniuse.com/ (34...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 行高以及盒模型
举报原因:
原因补充:

(最多只允许输入30个字)