王老师html零基础学习笔记第3课——样式+div盒子模型

css（Cascading Style Sheets）:层叠样式表

	样式定义如何显示 HTML 元素css语法
	
	CSS 规则由两个主要的部分构成：选择器，以及一条或多条声明。	

	
	内部样式:


	行内样式: style=”width:300px;background:red;”

	
	外部样式:盒子模型

	CSS 框模型 (Box Model) 规定了元素框处理元素内容、内边距、边框和外边距的方式	盒子模型的概念
	1) 元素框的最内部分是实际的内容，直接包围内容的是内边距。
	2) 内边距呈现了元素的背景。
	3) 内边距的边缘是边框。
	4) 边框以外是外边距，外边距默认是透明的，因此不会遮挡其后任何元素。

	ps:背景应用于由内容和内边距、边框组成的区域。
	在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，
	但是会增加元素框的总尺寸。	盒子模型内边距
	1、padding-top 	  上面(顶部)内边距 ：padding-top:20px;       或  padding-top:0%;

	2、padding-right	  右边内边距 ：padding-right:20px;	  或  padding-right:10%;
	
	3、padding-bottom   下面(底部)内边距 ：padding-bottom:20px;  或  padding-bottom:10%;

	4、padding-left	  左边内边距 ：padding-left:20px;           或  padding-top:10%; ps:padding不允许使用负值	padding	作用是在一个声明中设置元素的内边距属性
	1、paddding 四个值   padding:上  右  下  左;        	padding:3px 6px 10px 20px;

	2、padding 三个值    padding:上  左右    下;		 padding:3px 10px 5px;

	3、padding  两个值   padding:上下      左右;		 padding:3px 10px;

	4、padding  一个值   padding:上下左右;		         padding:3px;	盒子模型边框线
	1.边框线三要素 
	2.边框样式值
	none       无边框   
	solid       实线
	dashed      虚线
	dotted      点状 
	double      双线
	groove      3D凹槽边框
	ridge       3D垄状边框
	inset       3Dinset 边框
	outset      3Doutset 边框 

	3、边框线颜色
	1、十六进制颜色值 	          #CC00FF
	2、英文单词中的颜色	red blue 

	4、单独定义某个边框线样式
	border-top	   顶部(上)边框线           border-top:1px solid #CC00FF;
	border-right  	   右边框线样式		  border-right:5px solid red;
	border-bottom	   底边框线样式		  border-bottom:10px dotted  #660033;
	border-left	   左边框线样式             border-left:15px double blue;盒子模型外边距
	1、margin-top 	  上面(顶部)外边距   margin-top:20px;     或  padding-top:10%;
	2、margin-right	  右边外边距   margin-right:20px;        或  padding-right:10%;
	3、margin-bottom  下面(底部)外边距  margin-bottom:20px;   或  padding-bottom:10%;
	4、margin-left	  左边外边距   margin-left:20px;         或  padding-top:10%;margin	作用是在一个声明中设置元素的所内边距属性
	1、margin 四个值    margin:上  右  下  左;       	margin:3px 6px 10px 20px;
	2、margin 三个值    margin:上  左右   下;	        margin:3px 10px 5px;
	3、margin 两个值    margin:上下  左右;	        margin:3px 10px;
	4、margin 一个值    margin:上下左右;		margin:3px;