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>

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

解释一下你对盒模型的理解,以及如何在 CSS 中告诉浏览器使用不同的盒模型来渲染你的布局。

盒子模型分为两类:W3C标准盒子模型和IE盒子模型 (微软确实不喜欢服从他家的标准) 这两者的关键差别就在于: W3C盒子模型——属性高(height)和属性宽(width)这两个值不包含 填充(...
  • xujie_0311
  • xujie_0311
  • 2015年01月03日 22:22
  • 4553

CSS盒子模型理解

盒子模型刚开始接触html的时候对于盒模型的理解还不够清晰,弄清楚后其实发现特别的简单,其实就是想象一个房间,里面放一张床,这个床的位置,通过magin和padding来自己定位。 margin也就...
  • sinat_27790827
  • sinat_27790827
  • 2016年04月01日 13:14
  • 607

CSS中的盒模型分类

CSS中Box model是分为两种:: W3C标准 和 IE标准盒子模型。 大多数浏览器采用W3C标准模型,而IE中则采用Microsoft自己的标准。 怪异模式是“部分浏览器在支持W3...
  • jingtian678
  • jingtian678
  • 2017年07月19日 22:32
  • 147

CSS属性之弹性盒模型(新)

弹性盒布局模型是 CSS3 规范中提出的一种新的布局方式。该布局模型的目的是提供一种 更加高效的方式来对容器中的 条目 进行 布局、对齐和分配空间。这种布局方式在条目尺寸未知或动态时也能工作。这种布局...
  • h15882065951
  • h15882065951
  • 2017年02月21日 21:47
  • 349

CSS-标准盒模型 & 怪异盒模型

CSS-标准盒模型 & 怪异盒模型
  • Dong_PT
  • Dong_PT
  • 2016年04月29日 14:01
  • 16192

CSS中盒子模型的总结

盒子模型就是把HTML页面中的元素看作是一个矩形的盒子,也就是一个装内容的容器。每个矩形都由元素的内容、内边距(padding)、边框(border)和外边距(margin)组成。...
  • u014745194
  • u014745194
  • 2017年06月03日 18:08
  • 416

CSS中盒子模型详解

CSS中块状结构类似于盒子模型,如下图: 从左至又分别是外边距,边框,内边距,内容,下面我们来分别测试这几个属性。 我先做一个没有任何修饰的盒子模型: 代码如下: .t...
  • hxy19971101
  • hxy19971101
  • 2016年07月08日 09:44
  • 1061

什么是CSS的盒子模型

如果CSS对HTML文档元素生成了一个描述该元素在HTML文档布局中所占空间的矩形元素框(element box),那么我们可以形象地将其看作是一个盒子。CSS围绕这些盒子产生了一种“盒子模型”概念,...
  • happinessmoon
  • happinessmoon
  • 2012年06月13日 16:44
  • 2662

前端面试题之CSS盒模型

前端面试对于CSS这块不可或缺的一个考察点就是盒模型(BOX),通过对BOX的提问就可以了解你在CSS知识方面的掌握程度。本文主要介绍CSS中的盒模型在面试中可能会问到的相关问题和知识点,不足指出请指...
  • m0_37585915
  • m0_37585915
  • 2017年11月10日 17:17
  • 282

CSS--两种盒子模型以及border属性

盒模型(box model) 概述: margin(-TopRightBottomLeft), padding(-TRBL),border(TRBL+style|color|width), box...
  • cat_foursi
  • cat_foursi
  • 2017年05月04日 22:05
  • 1927
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:css 行高以及盒模型
举报原因:
原因补充:

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