初学CSS的第一天-语法-选择器-盒子模型

一、css基本语法

1. css的基本语法

• css的定义：
  选择器{属性:值; 属性:值}
  例如：

  div{
  	width:100px;
  	height:100px;
  	color:red;
  }
  

• css 的引入方法：

  1. 外联式：通过link标签，链接到外部样式表到页面中

  <link rel="stylesheet" type="text/css" href="css/main.css">
  

  2. 嵌入式：通过style标签，在网页创建爱你上嵌入的样式表

  <style type="text/css">
  	div{
  		width:100px;
  		height:100px;
  		color:red;
  	}
  </style>
  

  3. 内联式：通过标签的style属性，在标签上直接写样式

  <div style="width:100px; height:100px; color:red"> </div> 
  

2.css文本设置

常用的应用文本的css样式:

• color: 设置文字颜色，如：color:red；
• font-size:设置文字的大小，如：font-size:12px;
• font-family:设置文字的字体如：font-family:“微软雅黑” ；或 font-family:“Microsoft Yahei”
• font-style:设置字体是否倾斜，如：font-style:“normal”;–>设置不倾斜； font-style:“italic”;—>设置倾斜
• font-weight:设置文字是否加粗，如：font-weight:bold；–>设置加粗; font-weight:normal; -->设置不加粗
• line-height:设置文字的行高，设置行高相当于给每行文字的上下同时加间距，如：line-height:10px;
• font:同时设置文字的几个属性,写的顺序有兼容问题，**建议按照以下顺序写：**font:是否加粗 字号/行高 字体； 如：font: normal 14px/28px “Microsoft Yahei”
• text-decoration:设置文字的下划线，如：text-decoration:none;将文字下划线去掉。
• text-indent:设置文字的首行缩进，如：text-indent:24px;设置文字首航缩进24px；
• text-align:设置文字水平对齐方式，如：text-align:center 设置文字水平居中

二、css选择器

1.标签选择器

1. 使用方法：

   *{
   	<!-- 所有的都设置 -->
   	margin:0;
   	padding:0;
   }
   div{
   	color:red;
   }
   
   
   <div>...</div>  <!-- 对应以上两条样式 -- >
   <div class="box">...</div>  <!-- 对应上两条样式 -- >
   

2.id选择器

1. 通过id名来选择元素，元素的id不能重复，所以一个样式设置项只能对应于页面上一个元素，不能重复，id名一般是程序用的，所以一般不推荐使用

2. 使用方法：

   #box{
   	color:red;
   }
   <div id="box">...</div>  <!-- 对应上一套样式，其他元素不允许应用次样式  -->
   

3. 类选择器

1. 通过类名来选择元素，一般一个类应用于多个元素，一个元素上也可以使用多个类，应用了灵活可以复用 ------ 用的最多

2. 使用方法：

   .red{color:red}
   .big{dont-size:20px}
   <div class="red">... </div>
   <p class="red big"> ... </div>
   

4.层级选择器

1. 主要应用在父元素下的子元素，或者子元素下面的子元素，可以与标签元素结合使用，减小命名，同时可以使用层级，防止命名冲突
2. 使用方法

	.box{color:red}
	.box .red{color:pink}
	.red{color:red}
	.box span{color:#666}
	<div class="box">
		<span>....</span>
		<a herf="#" class="red">.....</a>
	</div>
	<h3 class="red">...</h3>

5.组选择器

1. 多个选择器中如果有相同的样式可以使用组选择器将相同的分离出来
2. 使用

.box1, .box2, .box3{
	width:20px;
	height:20px;
}
.box1{background:red;}
.box2{background:pink;}
.box3{background:gold;}

<div class="box1">...</div>
<div class="box2">...</div>
<div class="box3">...</div>

6.伪类选择器及伪元素选择器

1. 连接响应的时候使用
   1.1 伪类选择器:hover, 表示鼠标悬浮在元素上时的状态，
   1.2 伪元素选择器有before和affter他们可以通过样式在元素中插入内容

	/* 用于取出margin-top塌陷和清除浮动 */
	.clearfix:before, .clearfix:after{
	content: "";
	display: table;
	}
.clearfix:after{
	clear:both;
	}
	.box1:hover{color:red}
	<div class="clearfix"></div>
	<div class="box"></div>

三、盒子模型

1.盒子模型解释

1. margin 、border、padding都有 top、left、right、bottom四个属性
   下图则是margin、border、padding都为0
   

2. 把元素叫做盒子，对用的样式有：盒子的宽度(width)、盒子的高度(height)、盒子的边框(border)、盒子内的内容和边框之间的间距(padding)、盒子和盒子之间的间距(margin)

3. 使用

   
   宽度：width:20px;
   高度:height:200px;
   盒子的边框:border
   盒子顶部的
   颜色 #000:就相当于#000000;
   				宽度:;
   				边框线线: 实线:solid 虚线:dashed  点线: dotted
   				/* 
   				border-top-color: #000;
   				border-top-width: 10px;
   				border-top-style: solid;*/ 
   				可以合成一句: border-top:10px solid #000;
   				/*
   				border-top:10px solid #000;
   				border-left: 10px dashed #000;
   				border-right: 10px dotted #000;
   				border-bottom: 10px solid #000;*/
   				/* 些简单写将上面四句合成一句*/
   				border:10px solid #000;
   		
   内容到盒子的距离 padding
   padding设置 ：顺时针方向设置
   设置盒子四周的的样式  -- 会使外部盒子有变化
   			 	顶部的间距   padding-top: 20px;
   			 	左边的间距   padding-left: 40px;
   			 	右边的边距   padding-right: 80px;
   			 	底部的边距   padding-bottom: 100px;
   四个值的如下:
   			 	先写顶部-右边-底部-左边
   			 	padding:20px 80px 100px 40px;
   			 	三个值的如下: 
   			 	上面 - 左右 - 下面
   			 	padding: 20px 80px 100px;
   			 	两个值:
   			 	上下 - 左右
   			 	padding:20px 80px;
   			 	一个值：
   			 	同时设置四个边的 上下左右
   			 	padding:20px;
   盒子到外边的距离 margin  --- 和 padding 的设置相同
   				margin-top: 100px;
   				margin-left:100px;
   

2. margin技巧&bug

1. 技巧

1. margin使用：

   margin 
   			上 - 右 - 下 - 左 
   			上 - 左右 - 下
   			上下 - 左右
   

2. 技巧一
   让盒子容器在某一个容器中居中可以用：margin:0px auto;

解释：

左右设置为auto
margin 有一个 属性为：auto 自动计算
只能设置水平方向的

3. 技巧二
   margin可以设置负值：用于板框之间的合并

2.bug

1.垂直外边距合并

1. 当一个盒子的margin-top和margin-bottiom遇上时：那个的间距大则会以那个间距显示，两个回合并在一起

2. 举例：下面两个盒子之间值也会有30px – 只显示最大的那个

   .box01{
   			margin-bottom:30px;
   		}
   		.box02{
   			margin-top:20px;
   		}
   		<div class="box01">1</div>
   		<div class="box02">2</div>
   

2.margin-top塌陷

1. margin-top塌陷的原因: 两个盒子嵌套的时候，内部的盒子设置了margin-top就会加到外边的盒子上，导致而盒子margin-top设置失败

2. 解决方法：

   1. 给外边的盒子加边框
   2. 将外盒子的溢出取消掉：overflow: hidden;
   3. 使用伪元素类

3. 举例以及解决方法：

   <!DOCTYPE html>
   <html lang="en">
   <head>
   	<meta charset="UTF-8">
   	<title>margin-top塌陷</title>
   	<style type="text/css">
   		/* 
   			margin-top塌陷的原因: 两个盒子嵌套的时候，内部的盒子设置了margin-top就会加到外边的盒子上，导致而合资margin-top设置失败
   		*/
   		.con, .con01, .con02{
   			width:300px;
   			height:300px;
   			background-color: gold; 
   		}
   		.box{
   			width:200px;
   			height: 100px;
   			background-color: green;
   			 /*直接使用margin-top:产生塌陷效果; */
   			margin-top: 100px; 
   		}
   
   		.con01{
   			/*解决方法一:给外边的盒子加边框;*/
   			border:1px solid #000;
   
   		}
   		.con02{
   			/*解决方法二：将外面盒子的溢出取消掉*/
   			overflow: hidden;
   		}
   		.clearfix:before{
   			/* 
   				解决方法三:使用伪元素类-->这个方法和第一个差不多，使用的最多;
   			*/
   			content:"";
   			display: table;
   		}
   
   
   
   	</style>
   </head>
   <body>
   	<h3>塌陷效果</h3>
   	<div>要求:将第二个绿色的div垂直居中：</div>
   	<div class="con">
   		<div class="box"></div>
   	</div>
   	<br />
   	<h3>解决方法:</h3>
   	<div>
   		1.给外边的盒子加边框
   	</div>
   	<div class="con01">
   		<div class="box"></div>
   	</div>
   	<br />
   	<div>
   		2.将外盒子的溢出取消掉：overflow: hidden;
   	</div>
   	<div class="con02">
   		<div class="box"></div>
   	</div>
   	<br />
   	<div>
   		3.使用伪元素类
   	</div>
   	<div class="con clearfix">
   		<div class="box"></div>
   	</div>
   	<br />
   </body>
   </html>
   

四、元素溢出

1. 当子元素的尺寸超过父元素的尺寸时,需要设置父元素显示溢出的子元素的方式,设置的方法是通过overflow属性来设置。

2. overflow的参数：

   1. visible:默认，内容不会被修剪，呈现在元素框外;
   2. hidden: 将多出来的内容裁掉，并切内容不可见，还可以用来清除浮动、清除margin-top塌陷;
   3. scroll:内容会被修剪， 但浏览器会显示滚动条，不管有没有溢出都会显示滚动条;
   4. auto:如果溢出则修剪并且显示滚动条，如果没有则不显示滚动条;
   5. inherit:继承父元素的overflow属性值–一般不用;