zoukankan      html  css  js  c++  java
  • css笔记

    /*css基础*/
    HBuilder快捷键,
    	li*3 按tab快速生成
    	div>ul>li*5 按tab快速生成
    	div+div 按tab生成连个div
    	
    	ul>li{我要自卸王$}*5  按tap键
    #ee  颜色
    重要:重置html默认样式很重要,有些好的reset.css,直接引入即可
    css中以-moz,-ms,-webkit,-o开头的样式的含义
    -moz代表baifirefox浏览器私有属性;
    -ms代表IE浏览器私有属性;
    -webkit代表chrome、safari私有属性;
    -o代表Opera私有属性。
    		html标签是可以继承css属性的
    1.选择器(选择符)  别的选择器都可以用基本选择器组合成
    	1.元素(基本)选择器:标签选择器,通用选择器 ,类选择器,id选择器,  优先级:id选择器>类选择器>标签选择器
    		标签选择器
    			 标签名{}
    		id选择器
    			 #id名{}
    		类选择器
    		 	.类名{}
    		通配符选择器
    			*{}   /*选择所有元素 一般用来清除内外边距,便于统一管理和设置*/	
    			eg:
    			*{
    				margin: 0px;
    				padding: 0px;
    			}
    	2.关系选择器:包含选择器(E F),子选择器(E>F),相邻选择器(E+F),兄弟选择器(E~F)
    		包含(后代选择器,嵌套选择器)选择器(E F):选择所有被E元素包含的F元素(就是选择E里面的所有F元素)
    			eg:ul li{background-color: red;}  
    		子选择器(E>F):选择元素E下的子元素F  只能选择子元素,不能选择到孙子元素
    			eg:ul > li{background-color: red;}
    		相邻选择器(E+F):选择紧贴在E元素之后F元素,元素E与F必须同属一个父级。
    			相邻选择器和兄弟选择器的区别:相邻选择器只能选择一个紧紧相邻的同级别的元素,而兄弟选择器可以选择多个同级别的选择器
    			eg:li+li{background-color: red;}
    		兄弟选择器(E~F):选择E元素后面的所有兄弟元素F,元素E与F必须同属一个父级。
    			eg:li~li{background-color: red;}
    	3.属性选择器:
    		规定:att是css的属性,val是属性值
    		种类:
    		E[att]:选择具有att属性的E元素。
    		E[att='val']:选择具有att属性且属性值只等于val的E元素,注意这样的不能选中 class="a b",这能选中class="a"这样的
    		E[att~='val']:选择具有att属性且属性值为一用空格分隔的字词列表 eg:能选中这样的class="a b"
    		E[att^='val']:选择具有att属性且属性值为以val开头的字符串的E元素。
    			eg:<div class='abc'>abc</div>
    			   <div class='ac'>ac</div>
    			div[class^='a']{background-color: red;}选中字符串a开头的div
    		E[att$='val']:选择具有att属性且属性值为以val结尾的字符串的E元素
    			eg:<style>
    				div[class$="c"] { /*选择以c结尾的div标签*/
    					border: 2px solid #000;
    				}
    				</style>
    				<div class="abc">1</div>
    				<div class="acb">2</div>
    				<div class="bac">3</div>
    		E[att*='val']:选择具有att属性且属性值为包含val的字符串的E元素。
    			eg:<style>
    			div[class*="b"] {/*选择class属性值里面包含b字符的div标签*/
    				border: 2px solid #000;
    			}
    			</style>
    			<div class="abc">1</div>
    			<div class="acb">2</div>
    			<div class="bac">3</div>
    		E[att|='val']:如果元素E拥有att属性,并且值为val,或者值是以val-开头的,那么E将会被选择。
    			eg:<style>
    			div[class|="a"] {
    				border: 2px solid #000;
    			}
    			</style>
    			<div class="a">0</div>
    			<div class="a-test">1</div>
    			<div class="b-test">2</div>
    			<div class="c-test">3</div>
    	4.常用选择器:并集(分组选择器)选择器,交集选择器
    		并集选择器:E,F{} 同时选择E和F元素 E和F可以是基本选择器,用','隔开,除了通配符选择器
    			eg:ul,p{background-color: red;}
    		交集选择器:EF{} 选择满足E和F条件的元素 E,F不可以用id选择器  E和F之间没有任何符号和空格
    			eg:.txt.ext{color: red;} /*选择class="txt ext"的标签*/
    	5.伪类选择器:CSS伪类是用来添加一些选择器的特殊效果。
    	  伪类:元素不同状态表现不同样式  选择器使用":"  如:链接元素访问前和访问后是不同的样式
    	  伪对象(伪元素):文档结构中没有的元素  选择器使用"::"
    		1.用于超链接的四个伪类选择器: E一般是a标签  E:link,E:visited,E:hover,E:active
    			超链接状态顺序 必须按顺序写:a:link {} a:visited {} a:hover {} a:active {}
    			注意:link和visited只能用于a标签
    			E:link:设置超链接a在未被访问前的样式    初始状态
    			E:visited:设置超链接a在其链接地址已被访问过时的样式   访问完了的状态
    			E:hover:设置元素在其鼠标悬停时的样式			鼠标悬停状态   应用很广
    			E:active:设置元素在被用户激活(在鼠标点击与释放之间发生的事件)时的样式   点击状态
    			eg:
    			a:link{color: yellow;}   /*初始文字颜色*/
    			a:visited{color: red;}	 /*访问完了的文字颜色*/
    			a:hover{color:black;}    /*鼠标悬停链接上文字的颜色*/
    			a:active{color: blue;}   /*点击和释放之间文字的颜色*/
    			一般link和visited设置相同样式,hover和acitve设置一样的样式
    		2.焦点伪类选择器 E:focus:设置对象在成为输入焦点时的样式。前提是E必须能获得焦点
    			eg:input:focus{color: red;}
    		3.否定伪类选择器 E:not(s):匹配不含有s选择符的元素E。
    			eg: 给该列表中除最后一项外的所有列表项加一条底边线
    			  li:not(:last-child) { border-bottom: 1px solid #ddd; }
    		4.根选择器 E:root 匹配E元素在文档的根元素。在HTML中,根元素永远是HTML
    			eg:html:root{color: red;}  /*给html设置默认颜色red*/
    		5.孩子选择器 
    		E:first-child,E:last-child,E:only-child,E:nth-child(n),E:nth-last-child(n)
    		E:first-of-type,E:last-of-type,E:only-of-type,E:nth-of-type(n),E:nth-last-of-type(n)
    			E:first-child:匹配E的父元素的第一个子元素E。注意E必须是E的父元素的所有子元素中的第一个孩子,要想使用这个选择器
    			E:last-child:匹配E的父元素的最后一个子元素E。注意E必须是E的父元素的所有子元素中的最后一个孩子,要想使用这个选择器
    			应用:1.一般用于修改列表的第一个或者最后一个列表项的样式 2.有多个重复的相同的标签时,设置首位不同样式时使用
    			注意:E:first-child选择符,E必须是它的兄弟元素中的第一个元素,换言之,E必须是父元素的第一个子元素。与之类似的伪类还有E:last-child,只不过情况正好相反,需要它是最后一个子元素
    				eg: p:first-child{color:#f00;} <div> <p>我是一个p</p> </div> /*p标签内的文字变红了*/
    				eg: p:first-child{color:#f00;} <div> <h2>我是一个标题</h2> <p>我是一个p</p> </div> /*选择器失效了,因为p不是div的第一个孩子*/
    			注意(*-of-type都通用):要使下面这几个属性生效,E元素必须是某个元素的子元素,E的父元素最高是html,即E可以是html的子元素,也就是说E可以是body
    			E:first-of-type:该选择符总是能命中父元素的第1个为E的子元素,不论父元素的第1个子元素是否为E
    				1.注意和E:first-child的区别
    				eg:<style>
    					p:first-of-type { /*匹配div下的第一个p标签*/
    						color: #f00;
    					}
    					</style>
    					<div class="test">
    						<div>我是一个div元素</div>
    						<p>我是一个p元素</p>
    						<p>我是一个p元素</p>
    					</div>
    			E:last-of-type:该选择符总是能命中父元素的倒数第1个为E的子元素,不论倒数第1个子元素是否为E
    				eg:<style>
    					p:last-of-type {/*匹配最后一个div的最后一个p元素*/
    						color: #f00;
    					}
    					</style>
    					<div class="test">
    						<div>我是一个div元素</div>
    						<p>我是一个p元素</p>
    						<p>我是一个p元素</p>
    			E:nth-of-type(n):该选择符总是能命中父元素的第n个为E的子元素,不论第n个子元素是否为E
    			E:nth-last-of-type(n):该选择符总是能命中父元素的倒数第n个为E的子元素,不论倒数第n个子元素是否为E	
    		6.其他一些重要的选择器
    			1.E:checked:匹配用户界面上处于选中状态的元素E。(用于input type为radio与checkbox时)
    				eg:
    				<style>
    				input:checked + span {
    					background: #f00;
    				}
    				input:checked + span:after {
    					content: " 我被选中了";
    				}
    				</style>
    				<form method="post" action="#">
    				<fieldset>
    					<legend>选中下面的项试试</legend>
    					<ul>
    						<li><label><input type="radio" name="colour-group" value="0" /><span>蓝色</span></label></li>
    						<li><label><input type="radio" name="colour-group" value="1" /><span>红色</span></label></li>
    						<li><label><input type="radio" name="colour-group" value="2" /><span>黑色</span></label></li>
    					</ul>
    				</fieldset>
    				<fieldset>
    					<legend>选中下面的项试试</legend>
    					<ul>
    						<li><label><input type="checkbox" name="colour-group2" value="0" /><span>蓝色</span></label></li>
    						<li><label><input type="checkbox" name="colour-group2" value="1" /><span>红色</span></label></li>
    						<li><label><input type="checkbox" name="colour-group2" value="2" /><span>黑色</span></label></li>
    					</ul>
    				</fieldset>
    				</form>
    
    			2.E:enabled:匹配用户界面上处于可用状态的元素E   匹配enabled的输入框
    			  E:disabled:匹配用户界面上处于禁用状态的元素E  匹配disabled的输入框
    			  	应用:针对表单的输入框之类的,因为输入框具有disabled属性和enabled属性
    			3.E:target,@page:firsr,@page:left,@page:right 略
    	6.伪对象选择器 很重要常用  伪元素不会改变网页结构,因为伪元素不构成网页结构
    		1.E:first-letter/E::first-letter:选择每个E元素的第一个字母或文字   经常用于杂志第一个字下沉
    			注意:大括号和E:first-letter之间有空格 p:first-letter {}
    			应用:此伪对象常用于块级元素(行级元素要转成块级元素才能使用),经常用来配合font-size和float属性制作首字下沉效果
    			eg:<style>
    				h1{font-size:16px;}
    				p{200px;padding:5px 10px;border:1px solid #ddd;font:14px/1.5 simsun,serif,sans-serif;}
    				p:first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
    				p::first-letter {float:left;font-size:40px;font-weight:bold;line-height:1;}
    				</style>
    				<h1>杂志常用的首字下沉效果</h1>
    				<p>今天,阳光明媚,晴空万里,非常适合户外活动,如踏青、远足之类的。长期坐在办公室的同学们要多注意运动。</p>
    		2.E:first-line/E::first-line:选择每个E元素的第一行
    			注意:1.此对象用于块级元素,行级元素必须使用display:block后才能使用该伪对象
    				 2.大括号和E:first-letter之间有空格 E:first-line {}
    		3.E:before/E::before:在每个E元素内容之前插入内容  不影响网页结构
    		4.E:after/E::after:在每个E元素内容之后插入内容  after必须和content属性一起使用    重点
    			注意:before和after必须和content属性一起使用,content属性里面写要添加的内容 可以为伪元素设置css样式
    			      before和after使用content添加地内容是行级元素
    			eg:<!DOCTYPE html>
    				<html>
    				<head>
    				<meta charset="utf-8">
    				<style type="text/css">
    					ul{
    						 200px;
    						margin: 0 auto;
    					}
    					ul li{
    						 200px;
    						height: 50px;
    						line-height: 50px;
    						text-align: center;
    					}
    					ul li::after{
    						content: "";
    						display: block;
    						border-bottom: 1px solid red;
    					}
    				</style>
    				</head>
    				<body>
    					<ul>
    						<li>我要自学网1</li>
    						<li>我要自学网2</li>
    						<li>我要自学网3</li>
    						<li>我要自学网4</li>
    						<li>我要自学网5</li>
    					</ul>
    					
    				</body>
    				</html>
    			eg:<!DOCTYPE html>
    				<html>
    				<head>
    				<meta charset="utf-8"> 
    				<title>php中文网(php.cn)</title> 
    				<style>
    				h1:after {content:url(http://img.php.cn/upload/article/000/000/015/5c6a721a166be932.gif);}
    				</style>
    				</head>
    
    				<body>
    				<h1>This is a heading</h1>
    				<p>The :after pseudo-element inserts content after an element.</p>
    				<h1>This is a heading</h1>
    				<p><b>注意:</b>仅当!DOCTYPE 已经声明 IE8支持这个内容属性.</p>
    				</body>
    				</html>
    		5.E::placeholder:设置对象文字占位符的样式
    			eg:input::placeholder{color:green;}
    			   <input type="text">
    		6.E::selection:设置对象被选择时的样式(文字被选择就是右键鼠标移动)
    			注意:::selection只能定义被选择时的background-color,color及text-shadow(IE11尚不支持定义该属性)
    			eg:p::selection{color:red;}
    				<p>dsfaadf</p>
    2.三种使用方式  文件引入 ,head头处引入,行内引入
      <link rel="stylesheet" type="text/css" href="css文件路径">
      <style>
      </style>
      
      <a style=""></a>
    3.文本样式 文本不等同于文字,还包括行级元素和行内块级元素 ,字体样式,行样式   text font line  (关键字)     
    颜色: color:颜色值;
    文本居中,左对齐,右对齐 text-align:center left,right;
    垂直居中:line-heigh:与文本元素高度值一致;
    文本属性(text-)和字体属性(font-)
    	1.文本对齐:  text-align vertical-align
    		text-align属性规定元素中的文本的水平对齐方式
    		属性值:none,center,left,right,justify(两端对齐,文字会出现在两端)
    		vertical-align属性规定元素中的文本垂直对齐方式 对行内元素,行内块级元素,表格元素有效(常用)
    		属性值:baseline 默认值对齐父元素的基线 sub对齐下标
    			   super:对齐上标 top:文本和文字顶部对齐 bottom:底部对齐 middle:居中对齐
    	2.文本颜色:  color(设置文本颜色) 
    		合法颜色值:颜色名 16进制颜色值 RGB颜色值 RGBA颜色值, opacity(设置颜色的不透明度 0是完全透明 1是不透明  取值范围0.0-1.0之间)
    	3.文本修饰: text-decoration === text-decoration-line, text-decoration-color(指定文本装饰的颜色), text-decoration-style(指定文本装饰的样式),
    		text-decoration(是老版本的文本修饰,text-decoration-line是新版本的):主要用来删除链接的下划线    等价于 text-decoration-line    指定文本装饰的种类
    		text-decoration:none   删除链接的下划线
    		属性值:none(默认),underline(下划线),line-through(横穿文字的线),inherit(继承父元素的text-decoration属性的值)
    		或者直接写 text-decoration:#f00 solid underline;    用这个建议,因为简单
    		text-decoration-color:定义文本修饰线的颜色
    		text-decoration-style:定义文本修饰线的样式
    		属性:solid:实线
    			double:双线
    			dotted:点状线条
    			dashed:虚线
    			wavy:波浪线
    	3.文本阴影text-shadow:设置元素中文字的阴影效果
    					可以设定多组效果,每组参数值以逗号分隔。多组阴影特殊效果 Demo: 火焰文字 霓虹文字
    		属性:none:无阴影
    			text-shadow:值1 值2 值3 值4;
    				值1:水平阴影位置 必须写的属性值 正值时,阴影在右,负值时,阴影在左
    				值2:垂直阴影位置 必须写的属性值  正值时,阴影在下,负值时,阴影在上
    				值3:阴影模糊距离 可选参数
    				值4:阴影颜色 可选 默认和文字颜色一样
    			eg:给文字添加模糊效果
    			p{
    				text-shadow: 0px 0px 2px red;
    			}
    		eg: text-shadow:1px 1px 0.1px red;
    	4.行高:如果行高的高度等于盒子的高度,可以使本行文本垂直居中,仅适用单行文本
    		应用:使行级元素垂直居中
    		line-height:就是行高的意思,指的是一行的高度 默认是normal
    		line-height:100px  一般把heigth和line-heigth设置成一样,表示垂直居中
    		取值:normal,尺寸单位,数字(按照font-size的倍数设置行高),百分比(按照当前字体尺寸的百分比设置行高)
    		行高 line-height:用于设置文本垂直居中
         1.针对单行文本垂直居中
        		针对单行文本垂直居中公式:行高的高度等于盒子content区域的高度(即height),可以使当行文本垂直居中,
    			line-height = height
    			注意只适用单行文本。
         2.针对多行文本垂直居中
                   行高的高度不能小于字体的大小,不然上下字之间会紧挨一起。
      			第一步,一个宽度300*300的盒子,看盒子中一共显示了几行文字,
    			假如是5行,再看一下行高,如果行高是line-      
    			height:30px; 那么就知道行高*5=150px
      			第二步,让(盒子的高度-150px)/2=75;
    			那么设置盒子的padding-top:75px;
    			同时保证盒子的高度为300px,那么高度改为225px;
    	5.文本转换: text-transform 
    	文本转换属性是用来指定在一个文本中的大写和小写字母。
    	可用于所有字句变成大写或小写字母,或每个单词的首字母大写。
    		属性值:
    		uppercase(将每个单词转换成大写),lowercase(将每个单词转换成小写),capitalize(将每个单词的第一个字母转换成大写)
    		none:无转换,
    	6.字间距: letter-spacing    了解即可  直到letter是字的意思即可
    		可以设置负值,%,px,em
    		属性值:normal
    	7.首行缩进: text-indent属性规定文本首行缩进的距离, 单位使用em(当前文字的尺寸)
    		text-indent:只能用于文本首行缩进距离,默认值是0  
    		eg:p{
    			text-indent: 2em;//首行缩进两个汉字尺寸
    			text-indent: 1em;//首行缩进一个汉字尺寸
    		}
    字体属性:  
    	1.字体大小(字号):  font-size   单位可以用:px,em,rem,%
    		font-size表示设置字体的大小,如果设置成inherit表示继承父元素的字体大小值
    		属性值是字体大小
    		eg: font-size:100px
    	2.字体粗细:  font-weight
    		font-weight表示设置字体的粗细
    		属性值:none(默认值,标准粗细)|bold(粗体)|border(更粗)|lighter(更细)|100-900(设置具体粗细,400等同于normal,700等同于bold)|inherit(继承父元素的字体粗细值)
    		eg:font-weight:100; 注意没有单位
    	3.字体系列:   font-family   计算机的 C://windows/Fonts 里面右本计算机的所有下载的字体
    		font-family:"Microsoft Yahei","微软雅黑","Arial",sans-serif,"宋体"
    		如果浏览器不支持第一个字体会尝试下一个字体,直到找到能支持的字体为止
    	4.字体样式(风格):   font-style
    		font-style: 字体;
    		属性值:
    			italic:斜体
    			oblique:表示中间状态的倾斜  没有italic倾斜
    			normal:正常字体样式 经常用来重置字体
    	重置字体样式:
    		1.给i标签和b标签,清除字体样式 这样多了两个无样式标签
    			i,b{font-weight: normal;font-style: normal;}
    	5.书写模式: 
    	dirction: 检索或设置文本流的方向
    	属性值:
    		ltr(left to rigth):文本流从左到右。
    		rtl(right to left):文本流从右到左。
    	eg: dirction:rtl;unicode-bidi:bidi-override;   注意从右到左必须加 unicode-bidi:bidi-override;否则默认无效
    	unicode-bidi:用于同一个页面里存在从不同方向读进的文本显示。与 <' direction '> 属性一起使用
    	属性值:默认值是 normal
    		normal:对象不打开附加的嵌入层,对于内联元素,隐式重排序跨对象边界进行工作。
    		embed:对象打开附加的嵌入层,<' direction '> 属性的值指定嵌入层,在对象内部进行隐式重排序。
    		bidi-override:严格按照 <' direction '> 属性的值重排序。忽略隐式双向运算规则
    	writing-mode:设置或检索对象的内容块固有的书写方向
    	适用于:除 <' display '> 属性定义为table-row-group | table-column-group | table-row | table-column之外的所有元素
    	属性值:  注意:此属性效果不能被累加使用。例如,父对象的此属性值设为 tb-rl ,子对象再设置该属性将不起作用,仍应用父对象的设置。
    		horizontal-tb:水平方向自上而下的书写方式。即 left-right-top-bottom(类似IE私有值lr-tb)
    		vertical-rl:垂直方向自右而左的书写方式。即 top-bottom-right-left(类似IE私有值tb-rl)
    		vertical-lr:垂直方向自左而右的书写方式。即 top-bottom-left-right
    		lr-tb:左-右,上-下。对象中的内容在水平方向上从左向右流入,后一行在前一行的下面。 所有的字形都是竖直向上的。这种布局是罗马语系使用的(IE)
    		tb-rl:上-下,右-左。对象中的内容在垂直方向上从上向下流入,自右向左。后一竖行在前一竖行的左面。全角字符是竖直向上的,半角字符如拉丁字母或片假名顺时针旋转90度。这种布局是东亚语系通常使用的(IE)
    eg:导航栏实例  float表示浮动
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <style>
            *{
                padding:0;
                margin:0;
            }
            ul{
                list-style: none;
            }
            .nav{
                 960px;
                overflow: hidden;
                margin: 0 auto;
                background-color: purple;
                border-radius: 5px;
            }
            .nav ul li{
                float:left;
                 160px;
                height: 40px;
                line-height: 40px;
                text-align: center;
            }
            .nav ul li a{
                display: block;
                text-decoration: none;
                 160px;
                height: 40px;
                color: white;
                font-size: 20px;
                font-family: "Hanzipen SC";
            }
            .nav ul li a:hover{
                background: red;
                font-size: 22px;
                text-decoration: underline;
            }
    
        </style>
    </head>
    <body>
        <div class="nav">
            <ul>
                <li><a href="">导航</a></li>
                <li><a href="">导航</a></li>
                <li><a href="">导航</a></li>
                <li><a href="">导航</a></li>
                <li><a href="">导航</a></li>
                <li><a href="">导航</a></li>
            </ul>
        </div>
    </body>
    </html>
    
    4.背景样式     背景图片的添加一般在body标签上面添加
    背景颜色:background-color:颜色值;
    背景图片:background-image:url("路径");
    背景图片平铺效果 x轴,y轴,不平铺,默认值是在x,y方向上都平铺(repeat):平铺 <==> 重复出现
    	background-repeat: repeat-x;  /*x方向上平铺 	y方向上平铺 	不平铺	x,y方向上都平铺  从父级元素继承*/
    	background-repeat: repeat-y;
    	background-repeat: no-repeat;
    	background-repeat: repeat;
    	inherit:规定应该从父元素继承background-repeat属性的设置。
    	background-repeat: inherit;
    背景图片定位:background-position:x轴,y轴;
    	background-position:属性设置背景图像的起始位置,这个属性设置背景原图像的位置。
    	属性值:
    		<percentage>:用百分比指定背景图像填充的位置。可以为负值。其参考的尺寸为容器大小减去背景图片大小
    		<length>:用长度值指定背景图像填充的位置。可以为负值。
    		center:背景图像横向和纵向居中。
    		left:背景图像在横向上填充从左边开始。
    		right:背景图像在横向上填充从右边开始。
    		top:背景图像在纵向上填充从顶部开始。
    		bottom:背景图像在纵向上填充从底部开始。
    	eg:特殊用法 background-position:left 100px top 10px;  图片距离左边界100px,距离上边界10px
    
    背景图片不随窗口滚动而改变: background-attachment:fixed
    	background-attachment:设置或检索背景图像是随对象内容滚动还是固定的
    	属性值:
    		fixed:背景图像相对于窗体固定。
    		scroll:背景图像相对于元素固定,也就是说当元素内容滚动时背景图像不会跟着滚动,因为背景图像总是要跟着元素本身。但会随元素的祖先元素或窗体一起滚动。
    		local:背景图像相对于元素内容固定,也就是说当元素随元素滚动时背景图像也会跟着滚动,因为背景图像总是要跟着内容。(CSS3)
    	注意: background-origin和background-clip之间的区别
    	background-origin:设置背景图片从哪个位置开始绘制,但最终是否显示由background-clip决定
    	属性值:默认值 padding-box
    		padding-box: 从padding区域(含padding)开始显示背景图像。
    		border-box: 从border区域(含border)开始显示背景图像。
    		content-box: 从content区域开始显示背景图像。
    		eg:
    		background-origin:border-box;
    		background-origin:padding-box;
    		background-origin:content-box;
    	background-clip:设置背景图片的哪个部分可以显示,默认是 border-box
    	属性值:注意,剪裁仅限于本盒子
    		padding-box: 只示padding(包括padding)里面的背景  别的地方的背景剪掉
    		border-box: 只显示border(包括border)里面的背景	别的地方的背景剪掉
    		content-box: 只显示content(包括content)里面的背景	别的地方的背景剪掉
    		text:从前景内容的形状(比如文字)作为裁剪区域向外裁剪,如此即可实现使用背景作为填充色之类的遮罩效果。遮罩效果 See with Webkit
    	background-size:设置背景图片的尺寸大小
    	属性值: 默认值auto
    		<length>:用长度值指定背景图像大小。不允许负值。
    		<percentage>:用百分比指定背景图像大小。不允许负值。
    		auto:背景图像的真实大小。
    		cover:将背景图像等比缩放到完全覆盖容器,背景图像有可能超出容器。
    		contain:将背景图像等比缩放到宽度或高度与容器的宽度或高度相等,背景图像始终被包含在容器内。
    	注意:
    		该属性提供2个参数值(特性值cover和contain除外)。
    		如果提供两个,第一个用于定义背景图像的宽度,第二个用于定义背景图像的高度。
    		如果只提供一个,该值将用于定义背景图像的宽度,第2个值默认为auto,即高度为auto,此时背景图以提供的宽度作为参照来进行等比缩放。
    一种简化用法: 属性值顺序随机,想怎末设置就怎末设置
    background:red,url(../img/68AFE76E2C1BE146D0B0E10C3F52E81B.jpg),no-repeat,fixed,
    5.行内元素和块级元素转换   块级元素和行内元素 区分;   
    重点 标签分两种等级:行内元素和块级元素
    行内元素:(特点) dispaly:inline;
    	1.与其他元素并排,可以和其他元素呆在一行 
    	2.不能设置宽高 行级元素的宽高由元素内容的宽高决定
    块级元素:(特点) display:block;
    	1.能独占一行
    	2.能设置宽高,如果不设置,默认宽度和父级元素宽度一样 高度由元素内容的高度决定
    行内块级元素:(特点) display:inline-block;
    	1.可以和其他元素呆在一行
    	2.可以设置宽高 当没有设置宽高时,宽高由元素内容决定 eg:img
    块级元素和行内元素的分类:
      在HTML的角度来讲,标签分为:
        1.文本级标签:p , span , a , b , i , u , em
        2.容器级标签:div , h系列 , li , dt ,dd
        p:里面只能放文字和图片和表单元素,p里面不能放h和ul,也不能放p。
    
      从CSS的角度讲,CSS的分类和上面的很像,就p不一样:
        1.行内元素:除了p之外,所有的文本级标签,都是行内元素。p是个文本级标签,但是是个块级元素。
        2.块级元素:所有的容器级标签,都是块级元素,以及p标签。
    	块级元素可以嵌套块级元素和行内元素,行内块级元素
    	行级元素只能嵌套行级元素和行内块级元素
    	p,h标签是特例是块级元素,但是不能嵌套块级元素
    行内元素和块级元素的转换:
    	将行内元素转化为块级元素:display:block;
    	将块级元素转换为行内元素:dispaly:inline;
    6.盒子模型 所有HTML元素可以看作盒子,在CSS中,"box model"这一术语是用来设计和布局时使用。 
    您指定一个CSS元素的宽度width和高度height属性时,你只是设置内容区域的宽度和高度。要知道,完全大小的元素,你还必须添加填充,边框和边距
    盒子模型  margin(外边距)  outline(轮廓,这个可以设置,位于border的外面为了标识) border(边框) padding(内边距)  content(内容)里面用来放文本,图像,视频等内容  ---------  重点
    盒模型属性:  盒子模型图片见 img/盒子模型图片.png
    	1.内容的宽度
    	2.height:内容的高度
    	3.padding:内边距,边框到内容的距离
    	4.border:边框,指的是盒子的宽度(盒子形状的线)
    	5.margin:外边距,盒子边框到附近最近盒子的距离
    盒子模型的计算:
      1.盒子的真实宽度=width+2*padding+2*border*2
      2.盒子的真实高度=height+2*padding+2*border*2
      3.所以,标准盒模型,width不等于盒子真实宽度,
    	如果要保持盒子的真是宽度,那么加padding就一定要减width,减padding就一定要加width。
    	真实的高度同样这样设置。
    padding(内边距或填充):
    	属性:
    		padding:在一个声明中设置四个方向的所有填充属性
    		padding-bottom:设置元素的底部填充
    		padding-left:设置元素的左部填充
    		padding-right:设置元素的右部填充
    		padding-top:设置元素的上部填充
    	属性值:
    		length	定义一个固定的填充(像素, pt, em,等)
    		%	使用百分比值定义一个填充
      1.padding:就是内边距的意思,是边框到内容之间的距离。
      2.padding的区域是有背景颜色的,并且背景颜色和内容的颜色一样,
    	 也就是说background-color这个属性将填充border以内的所有区域。
    	4.一些标签默认有padding:
    	比如ul标签,有默认的padding-left值。
    	那么我们一般在做站的时候,是要清除页面标签中默认的padding和margin。
    	以便于我们更好的去调整元素的位置。
    	我们现在初学可以使用通配符选择器
    	*{
      		padding:0;
      		margin:0;    
    	}
    	But,这种方法效率不高。
    	所以我们要使用并集选择器来选中页面中应有的标签
    	(不同背,因为有人已经给咱们写好了这些清除默认的样式表,reset.css)
    	https://meyerweb.com/eric/tools/css/reset/
    
    border:边框,就是盒子的边框
    	1.边框border有3个要素:线宽(border-width),线型样式(border-style),颜色(border-color)
    		border:代表四个方向的边框 border-top border-right border-bottom border-left
    		border-style:设置边框样式
    		属性值:
    			none: 默认无边框
    			dotted: dotted:定义一个点线框
    			dashed: 定义一个虚线框
    			solid: 定义实线边界
    			double: 定义两个边界。 两个边界的宽度和border-width的值相同
    			groove: 定义3D沟槽边界。效果取决于边界的颜色值
    			ridge: 定义3D脊边界。效果取决于边界的颜色值
    			inset:定义一个3D的嵌入边框。效果取决于边界的颜色值
    			outset: 定义一个3D突出边框。 效果取决于边界的颜色值
    		border-设置边框宽度
    		border-color:设置边框颜色  必须和border-style一起使用才有意义
    		border可以设置上右下左的样式 border-top,border-right,border-bottom,border-left 他们四个都有边框的三个属性 eg: border-top-color
    	2.如果颜色不写,边框默认是黑色。如果粗细不写,不显示边框。
    		如果只写线性样式,默认的有上下左右 3px的宽度,实体样式,并且黑色的边框。		
    	3.设置圆角边框 border-radius   重点
    		border-radius
    		border-上下-左右-radius
    		圆角边框属性:
    			1.圆角方向:通过垂直和水平方向可以表示一个角
    				方向1:表示上下 只能是上下
    				方向2:表示左右 只能是左右
    				eg:border-top-left-radius:;  设置右上角为圆角边框
    			2.圆角半径:写一个半径表示的是园 另一个半径2和1默认相同
    				半径1:水平半径 
    				半径2:垂直半径
    				eg:border-bottom-left-radius:10px;  设置右下角为圆角边
    			3.当使用百分比设置半径1和半径2   可以设置各种形状   实际情况:园,椭圆都是这样设置的
    				百分比用的是盒子水平/垂直长度的百分比
    				eg:border-radius:50% 50%; 如果盒子宽高一样,那麽这是一个圆
    				eg:border-radius:50%;  园
    				同理可以设置椭圆
    				eg:<!DOCTYPE html>
    					<html>
    					<head>
    					<meta charset="utf-8">
    					<style type="text/css">
    						div{
    							 200px;
    							height: 100px;
    							line-height: 100px;
    							text-align: center;
    							background-color: #00ffff;
    							border-radius: 50% 50%;
    						}
    					</style>
    					</head>
    					<body>
    						<div>djsfaj</div>
    						
    					</body>
    					</html>
    			4.border-radius 同时设置四个园角的边框半径
    				形式1:border-radius:左上半径 右上半径 右下半径 左下半径  (符合上右下左)
    				形式2:border-radius:半径    设置四个圆角半径一样
    		border-radius: 10px;   /*设置边框的四个边角  圆的半径*/
    	4.边框阴影:可以是图片或者背景更有立体感  box-shadow  文本阴影:text-shadow
    		box-shadow:值1 值2 值3 值4 值5;
    		值1:水平阴影位置,必须有的参数 正值时,阴影在右边,负值时,阴影在左边
    		值2:垂直阴影位置,必须有的参数 正值时,阴影在下边,负值时,阴影在上边
    		值3:阴影模糊距离 可选值
    		值4:阴影尺寸, 可选值
    		值5:阴影颜色,合法颜色值,可选  默认黑色
    		eg:<!DOCTYPE html>
    			<html>
    			<head>
    			<meta charset="utf-8">
    			<style type="text/css">
    				img{
    					 200px;
    					height: 200px;
    					border-radius: 4px;  //设置圆角边框
    					box-shadow: 1px 1px 1px 1px #ccc;  //设置边框阴影
    				} 
    			</style>
    			</head>
    			<body>
    				<img src="img/b.gif"/>
    				
    			</body>
    			</html>
    outline:轮廓属性(也叫外边框),是绘制于元素周围的一条线,位于边框(border)边缘的外围,可起到突出元素的作用
    	应用:可以用来取消input和textarea等输入框的outline样式,因为太丑了  原来点击input边框外面会变黑
    	outline:在一个声明中设置所有的外边框属性
    		outline:none; 取消outline样式
    			eg:input{outline: none;}
    		注意:属性和border用法一样,但是不同的是outline没有outline-left这类单独表示方向的属性
    	outline-color
    	outline-style
    	outline-width
    margin:外边距(表示本边框到其他盒子的最近距离),5个属性
    	属性:
    		margin:在一个声明中设置所有外边距属性
    		margin-bottom:设置元素的下外边距
    		margin-left:设置元素的左外边距
    		margin-right:设置元素的右外边距
    		margin-top:设置元素的上外边距
    	属性值:margin可以使用负值,重叠的内容。
    		auto	设置浏览器边距。这样做的结果会依赖于浏览器
    		length	定义一个固定的margin(使用像素,pt,em等)
    		%	定义一个使用百分比的边距
    	margin: 20px auto;   使盒子居中,并且和上右下左的边界距离为20px
    	注意:前面写几个值,表达的含义不一样,https://www.php.cn/manual/view/33005.html
    	margin:像素值 auto; 像素值是距离上下左右边界的  设置元素居中对齐
    	条件:此元素必须为块级元素,而且必须有宽高;
    	margin:20px,auto;  和上边界距离为20px,元素居中对齐 
    6_1.css的尺寸
    	属性:
    		height:设置元素的宽度
    		line-height:设置行高
    		max-height:设置元素的最大高度
    		max-设置元素的最大宽度
    		min-height:设置元素的最小高度
    		min-设置元素的最小宽度
    		设置元素的宽度
    6.元素定位: 详见博客 position:指定元素的定位类型  使用left,rigth,top,bottom确定位置 eg:元素距离左边距离left
    如果display设置为none,那末float及position属性定义将不生效;
    position的属性值:
    	1.静态定位(static):所有元素的默认定位方式 元素不可以改变位置 要想元素可以改变位置定位不许设置成absolute,relative,fixed
    		注意:1.HTML元素的默认值,即没有定位,元素出现在正常的文档流中。
    			 2.静态定位的元素不会受到top, bottom, left, right影响 其他定位都收他们四个属性影响
    	2.绝对定位(absolute):可重叠,通过z-index控制, position: absolute;
    		注意:
    			1.绝对定位的元素的位置相对于最近的已定位父元素,如果元素没有已定位的父元素,那么它的位置相对于<html>定位		
    			2.absolute定位使元素的位置与文档流无关,因此不占据空间。
    			3.absolute定位的元素和其他元素重叠。
    eg:绝对定位可以设置重叠的样式
    	<head>
    	<style type="text/css">
    		.box {
    			background: red;
    			 100px;
    			height: 100px;
    			float: left;
    			margin: 5px;
    		}
    		.two {
    			position: absolute;
    			top: 50px;
    			left: 50px;
    		}
    	</style>
    		</head>
    		<body>
    			<div class="box" >One</div>
    			<div class="box  two" >Two</div>
    			<div class="box" >Three</div>
    			<div class="box">Four</div>
    		</body>
    	3.相对定位(relative):相对定位元素不可层叠。依据left、right、top、bottom等属性在正常文档流中偏移自身位置。同样可以用z-index分层设计。
    		相对定位元素经常被用来作为绝对定位元素的容器块。
    		注意:绝对定位和相对定位的区别,绝对定位是相对于父亲或者祖先的,而相对定位是相对于原本自身应该在在的位置的定位
    		eg:
    		<head>
    			<style type="text/css">
    				.box {
    					background: red;
    					 100px;
    					height: 100px;
    					float: left;
    					margin: 5px;
    				}
    				.two {
    					position: relative;
    					top: 50px;
    					left: 50px;
    				}
    			</style>
    		</head>
    		<body>
    			<div class="box" >One</div>
    			<div class="box  two" >Two</div>
    			<div class="box" >Three</div>
    			<div class="box">Four</div>
    		</body>
    	4.固定定位(fixed):固定定位与绝对定位类似,但它是相对于浏览器窗口定位,并且不会随着滚动条进行滚动。
    	固定定位的最常见的一种用途是在页面中创建一个固定头部、固定脚部或者固定侧边栏,不需使用margin、border、padding。
    	5.粘性定位(sticky):很有用 position:sticky;基于用户的滚动位置来定位
    		粘性定位的元素是依赖于用户的滚动,在postion:relative和position:fixed定位之间切换
    		eg:<!DOCTYPE html>
    			<html>
    			<head>
    			<meta charset="utf-8"> 
    			<title>php中文网(php.cn)</title> 
    			<style>
    			div.sticky {
    			  position: -webkit-sticky;
    			  position: sticky;
    			  top: 0;
    			  padding: 5px;
    			  background-color: #cae8ca;
    			  border: 2px solid #4CAF50;
    			}
    			</style>
    			</head>
    			<body>
    
    			<p>尝试滚动页面。</p>
    			<p>注意: IE/Edge 15 及更早 IE 版本不支持 sticky 属性。</p>
    
    			<div class="sticky">我是粘性定位!</div>
    
    			<div style="padding-bottom:2000px">
    			  <p>滚动我</p>
    			  <p>来回滚动我</p>
    			  <p>滚动我</p>
    			  <p>来回滚动我</p>
    			  <p>滚动我</p>
    			  <p>来回滚动我</p>
    			</div>
    
    			</body>
    			</html>
    	6.重叠的元素 z-index搭配 position:absolute;一起使用,因为只有绝对定位支持元素重叠
    		z-index属性指定了一个元素的堆叠顺序(哪个元素放在前面,哪个元素放在后面)
    		属性值:number(可正可负),auto,inherit
    			元素的定位与文档流无关,所以它们可以覆盖页面上的其它元素
    			具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
    			注意: 如果两个定位元素重叠,没有指定 z-index,最后定位在HTML代码中的元素将被显示在最前面。
    			eg:<!DOCTYPE html>
    				<html>
    				<head>
    				<meta charset="utf-8"> 
    				<title>php中文网(php.cn)</title> 
    				<style>
    				img
    				{
    					position:absolute;
    					left:0px;
    					top:0px;
    					z-index:-1;
    				}
    				</style>
    				</head>
    
    				<body>
    				<h1>This is a heading</h1>
    				<img src="w3css.gif" width="100" height="140" />
    				<p>因为图像元素设置了 z-index 属性值为 -1, 所以它会显示在文字之后。</p>
    				</body>
    				</html>
    			eg:<!DOCTYPE html>
    				<html lang="zh-cmn-Hans">
    				<head>
    				<meta charset="utf-8" />
    				<title>z-index_CSS参考手册_web前端开发参考手册系列</title>
    				<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
    				<style>
    				.z1,
    				.z2,
    				.z3 {
    					position: absolute;
    					 200px;
    					height: 100px;
    					padding: 5px 10px;
    					color: #fff;
    					text-align: right;
    				}
    				.z1 {
    					z-index: 1;
    					background: #000;
    				}
    				.z2 {
    					z-index: 2;
    					top: 30px;
    					left: 30px;
    					background: #C00;
    				}
    				.z3 {
    					z-index: 3;
    					top: 60px;
    					left: 60px;
    					background: #999;
    				}
    				</style>
    				</head>
    				<body>
    				<div class="z1">z-index:1</div>
    				<div class="z2">z-index:2</div>
    				<div class="z3">z-index:3</div>
    				</body>
    				</html>
    
    7.界面布局
    dispaly: 太强大了  
    	作用:1.块级元素和行级元素转换 
    			块级变行级:display:inline;
    			行级变块级:display:block 
    		 2.隐藏对象但是不占据物理空间 display:none;
    		 3.设置元素变成表格之类的
    		p{display: inline;} 
    		span{display: block;}
    
    css中所有的浮动属性
    	float:设置浮动,clear:清除浮动
    		元素的水平方向浮,意味着元素只能左右移动而不能上下移动。
    		一个浮动元素会尽量向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止。
    		浮动元素之后的元素将围绕它。
    		浮动元素之前的元素将不会受到影响。
    		几种重要应用:
    		1.如果图像是右浮动,下面的文本流将环绕在它左边
    			eg:<!DOCTYPE html>
    			<html>
    			<head>
    			<meta charset="utf-8"> 
    			<title>php中文网(php.cn)</title>
    			<style>
    			img 
    			{
    				float:right;
    			}
    			</style>
    			</head>
    			<body>
    			<p>在下面的段落中,我们添加了一个 <b>float:right</b> 的图片。导致图片将会浮动在段落的右边。</p>
    			<p>
    			<img src="http://img.php.cn/upload/article/000/000/015/5c67de683f83a569.gif" width="95" height="84" />
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			这是一些文本。这是一些文本。这是一些文本。
    			</p>
    			</body>
    			</html>
    		2.彼此相邻的浮动元素 如果你把几个浮动的元素放到一起,如果有空间的话,它们将彼此相邻。
    			eg:<!DOCTYPE html>
    				<html>
    				<head>
    				<meta charset="utf-8"> 
    				<title>php中文网(php.cn)</title> 
    				<style>
    				.thumbnail 
    				{
    					float:left;
    					110px;
    					height:90px;
    					margin:5px;
    				}
    				</style>
    				</head>
    
    				<body>
    				<h3>图片库</h3>
    				<p>试着调整窗口,看看当图片没有足够的空间会发生什么。</p>
    				<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
    				<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
    				<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
    				<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
    				<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
    				<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
    				<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
    				<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
    				</body>
    				</html>
    		3.创建一个没有表格的网页,使用float创建一个网页页眉、页脚、左边的内容和主要内容。
    			eg:<!DOCTYPE html>
    				<html>
    				<head>
    				<meta charset="utf-8"> 
    				<title>php中文网(php.cn)</title>
    				<style>
    				* {
    				    box-sizing: border-box;
    				}
    				body {
    				    margin: 0;
    				}
    				.header {
    				    background-color: #2196F3;
    				    color: white;
    				    text-align: center;
    				    padding: 15px;
    				}
    				.footer {
    				    background-color: #444;
    				    color: white;
    				    padding: 15px;
    				}
    				.topmenu {
    				    list-style-type: none;
    				    margin: 0;
    				    padding: 0;
    				    overflow: hidden;
    				    background-color: #777;
    				}
    				.topmenu li {
    				    float: left;
    				}
    				.topmenu li a {
    				    display: inline-block;
    				    color: white;
    				    text-align: center;
    				    padding: 16px;
    				    text-decoration: none;
    				}
    				.topmenu li a:hover {
    				    background-color: #222;
    				}
    				.topmenu li a.active {
    				    color: white;
    				    background-color: #4CAF50;
    				}
    				.column {
    				    float: left;
    				    padding: 15px;
    				}
    				.clearfix::after {
    				    content: "";
    				    clear: both;
    				    display: table;
    				}
    				.sidemenu {
    				     25%;
    				}
    				.content {
    				     75%;
    				}
    				.sidemenu ul {
    				    list-style-type: none;
    				    margin: 0;
    				    padding: 0;
    				}
    				.sidemenu li a {
    				    margin-bottom: 4px;
    				    display: block;
    				    padding: 8px;
    				    background-color: #eee;
    				    text-decoration: none;
    				    color: #666;
    				}
    				.sidemenu li a:hover {
    				    background-color: #555;
    				    color: white;
    				}
    				.sidemenu li a.active {
    				    background-color: #008CBA;
    				    color: white;
    				}
    				</style>
    				</head>
    				<body>
    
    				<ul class="topmenu">
    				  <li><a href="#home" class="active">主页</a></li>
    				  <li><a href="#news">新闻</a></li>
    				  <li><a href="#contact">联系我们</a></li>
    				  <li><a href="#about">关于我们</a></li>
    				</ul>
    
    				<div class="clearfix">
    				  <div class="column sidemenu">
    				    <ul>
    				      <li><a href="#flight">The Flight</a></li>
    				      <li><a href="#city" class="active">The City</a></li>
    				      <li><a href="#island">The Island</a></li>
    				      <li><a href="#food">The Food</a></li>
    				      <li><a href="#people">The People</a></li>
    				      <li><a href="#history">The History</a></li>
    				      <li><a href="#oceans">The Oceans</a></li>
    				    </ul>
    				  </div>
    
    				  <div class="column content">
    				    <div class="header">
    				      <h1>The City</h1>
    				    </div>
    				    <h1>Chania</h1>
    				    <p>Chania is the capital of the Chania region on the island of Crete. The city can be divided in two parts, the old town and the modern city.</p>
    				    <p>You will learn more about responsive web pages in a later chapter.</p>
    				  </div>
    				</div>
    
    				<div class="footer">
    				  <p>底部文本</p>
    				</div>
    
    				</body>
    				</html>
    	float: 用于浮动布局(元素挨着),指定一个盒子(元素)是否可以浮动
    		注意:
    			1.css的float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列。
    			float(浮动),往往是用于图像,但它在布局时一样非常有用
    		属性值:
    			left:设置元素水平从左向右浮动
    			right:设置元素水平从右向左浮动
    			inherit
    			none
    	clear:指定不允许元素周围有浮动元素  元素浮动之后,周围的元素会重新排列,为了避免这种情况,使用 clear 属性。
    		属性值:
    			left:左边不许有浮动
    			right:右边不许有浮动
    			both:两边不许有浮动
    			none:无
    			inherit
    		eg:clear属性指定元素两侧不能出现浮动元素,使用clear属性往文本中添加图片廊
    			clear:both;设置两边没有浮动
    		eg:<!DOCTYPE html>
    			<html>
    			<head>
    			<meta charset="utf-8"> 
    			<title>php中文网(php.cn)</title> 
    			<style>
    			.thumbnail 
    			{
    				float:left;
    				110px;
    				height:90px;
    				margin:5px;
    			}
    			.text_line
    			{
    				clear:both;
    				margin-bottom:2px;
    			}
    			</style>
    			</head>
    
    			<body>
    			<h3>图片库</h3>
    			<p>试着调整窗口,看看当图片没有足够的空间会发生什么。.</p>
    			<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
    
    			<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
    
    			<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
    
    			<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
    			<h3 class="text_line">第二行</h3>
    			<img class="thumbnail" src="http://img.php.cn/upload/image/763/334/787/1550110943501028.jpg" width="107" height="90">
    			<img class="thumbnail" src="http://img.php.cn/upload/image/489/548/993/1550111001184350.jpg" width="107" height="80">
    			<img class="thumbnail" src="http://img.php.cn/upload/image/147/145/761/1550111019321651.jpg" width="116" height="90">
    			<img class="thumbnail" src="http://img.php.cn/upload/image/769/142/904/1550111039657921.jpg" width="120" height="90">
    			</body>
    			</html>
    visibility:设置或检索是否显示对象。与display属性不同,此属性为隐藏的对象保留其占据的物理空间
    	属性值:
    		visible:设置对象可见  默认值
    		hidden:设置对象隐藏  占用空间
    		collapse:主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。对于表格外的其他对象,其作用等同于hidden。
    overflow:检索或设置对象处理溢出内容的方式
    	属性值:
    		visible:对溢出内容不做处理,内容可能会超出容器。
    		hidden:隐藏溢出容器的内容且不出现滚动条。
    		scroll:隐藏溢出容器的内容,溢出的内容将以卷动滚动条的方式呈现。
    		auto:当内容没有溢出容器时不出现滚动条,当内容溢出容器时出现滚动条,按需出现滚动条。此为body对象和textarea的默认值。	
    overflow === overflow-x + overflow-y
    	eg:<!DOCTYPE html>
    		<html>
    		<head>
    		<meta charset="utf-8"> 
    		<title>php中文网(php.cn)</title> 
    		<style>
    		div.scroll
    		{
    			background-color:#00FFFF;
    			100px;
    			height:100px;
    			overflow:scroll;
    		}
    
    		div.hidden 
    		{
    			background-color:#00FF00;
    			100px;
    			height:100px;
    			overflow:hidden;
    		}
    		</style>
    		</head>
    
    		<body>
    		<p>overflow 属性规定当内容溢出元素框时发生的事情。.</p>
    
    		<p>overflow:scroll</p>
    		<div class="scroll">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
    
    		<p>overflow:hidden</p>
    		<div class="hidden">You can use the overflow property when you want to have better control of the layout. The default value is visible.</div>
    		</body>
    		</html>
    cursor:显示光标移动到指定的类型
    	属性值:
    		url
    		auto
    		crosshair
    		default
    		pointer
    		move
    		e-resize
    		ne-resize
    		nw-resize
    		n-resize
    		se-resize
    		sw-resize
    		s-resize
    		w-resize
    		text
    		wait
    		help
    	eg:<!DOCTYPE html>
    		<html>
    		<head>
    		<meta charset="utf-8"> 
    		<title>php中文网(php.cn)</title> 
    		</head>
    		<body>
    		<p>将鼠标移动到这些字上改变鼠标样式cursor.</p>
    		<span style="cursor:auto">auto</span><br>
    		<span style="cursor:crosshair">crosshair</span><br>
    		<span style="cursor:default">default</span><br>
    		<span style="cursor:e-resize">e-resize</span><br>
    		<span style="cursor:help">help</span><br>
    		<span style="cursor:move">move</span><br>
    		<span style="cursor:n-resize">n-resize</span><br>
    		<span style="cursor:ne-resize">ne-resize</span><br>
    		<span style="cursor:nw-resize">nw-resize</span><br>
    		<span style="cursor:pointer">pointer</span><br>
    		<span style="cursor:progress">progress</span><br>
    		<span style="cursor:s-resize">s-resize</span><br>
    		<span style="cursor:se-resize">se-resize</span><br>
    		<span style="cursor:sw-resize">sw-resize</span><br>
    		<span style="cursor:text">text</span><br>
    		<span style="cursor:w-resize">w-resize</span><br>
    		<span style="cursor:wait">wait</span><br>
    		</body>
    		</html>
    8.列表 列表项标志就是列表项li前面的样式
    	list-style:下面三个样式的综合,使用时 list-style-image的属性值必须放在最后
    		eg:list-style:none;清楚列表样式
    	list-style-image:用图像做列表项标志。就是让每个li前面多了一个图像
    	属性值:
    		none:不指定图像,默认内容标记将被 <' list-style-type '> 代替。
    		<url>:使用绝对或相对地址指定列表项标记图像。如果图像地址无效,默认内容标记将被 <' list-style-type '> 代替
    	list-style-position:设置列表中列表项标志的位置
    	属性值:
    		outside:列表项目标记放置在文本以外,且环绕文本不根据标记对齐
    		inside:列表项目标记放置在文本以内,且环绕文本根据标记对齐
    	list-style-type:设置列表项标志的类型
    	属性值:  可以设置选项 A B C D
    		disc:实心圆(CSS1)
    		circle:空心圆(CSS1)
    		square:实心方块(CSS1)
    		decimal:阿拉伯数字(CSS1)
    		lower-roman:小写罗马数字(CSS1)
    		upper-roman:大写罗马数字(CSS1)
    		lower-alpha:小写英文字母(CSS1)
    		upper-alpha:大写英文字母(CSS1)
    		none:不使用项目符号(CSS1)
    		armenian:传统的亚美尼亚数字(CSS2)
    		cjk-ideographic:浅白的表意数字(CSS2)
    		georgian:传统的乔治数字(CSS2)
    		lower-greek:基本的希腊小写字母(CSS2)
    		hebrew:传统的希伯莱数字(CSS2)
    		hiragana:日文平假名字符(CSS2)
    		hiragana-iroha:日文平假名序号(CSS2)
    		katakana:日文片假名字符(CSS2)
    		katakana-iroha:日文片假名序号(CSS2)
    		lower-latin:小写拉丁字母(CSS2)
    		upper-latin:大写拉丁字母(CSS2)
    9.css媒体类型:@media 媒体类型
    	属性:@media规则允许在相同样式表为不同媒体设置不同的样式。
    	属性值:
    		all:用于所有媒体设备
    		aural:用于语音和视频合成器
    		braille:用于盲人用点字法触觉回馈设备
    		embossed:用于分页的盲人用点字法打印机
    		handheld:用于小的手持的设备
    		print:用于打印机
    		projection:用于方案显示,例如打印机
    		screen:用于电脑显示屏
    		tty:用于固定密度字母栅格的媒体,比如终端
    		tv:用于电视机类型的设备
    		eg:<html>
    			<head>
    			<style>
    			@media screen
    			{
    				p.test {font-family:verdana,sans-serif;font-size:14px;}
    			}
    			@media print
    			{
    				p.test {font-family:times,serif;font-size:10px;}
    			}
    			@media screen,print
    			{
    				p.test {font-weight:bold;}
    			}
    			</style>
    			</head>
    
    			<body>
    			....
    			</body>
    			</html>;
    10.css响应式设计  重点
    	1.viewport:是用户网页的可视区域,中文叫视区
    		application-->手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中
    		设置viewport,一个常用的针对移动网页优化过的viewport meta标签如下:
    			eg:<meta name="viewport" content="width=device-width,initial-scale=1.0" />
    			控制viewport的大小,可以指定一个值,如果600,或者特殊的值devic-width设备宽度
    			height:控制viewport的高度
    			initial-scale:初始化比例,也即是页面第一次load的时候缩放比例
    			maximum-scale:允许用户缩放到的最大比例
    			minimum-scale:允许用户缩放到的最小比例
    			user-scalable:用户是否可以手动缩放
    	2.网格视图:很多网页都是基于网格设计的,说明网页是按照列来布局的
    			响应式网格视图通常是 12 列,宽度为100%,在浏览器窗口大小调整时会自动伸缩。
    
    11.css框架 bootstrap,layui,vue
    
    12.css基础知识
    	1.常用尺寸单位
    		像素:px  屏幕上的一个点做单位(计算机图形学讲过)
    		em:用元素本身的字体的font-size属性值做参考 是font-size倍数的关系
    			1em = font-size *1 px
    			eg:p{20em;}  那么width=20*p的font-size px
    				<p>dafsa</p>
    		rem:依据html元素的font-size做参考   用法:可以通过修改html的font-size大小影响所有rem单位的元素大小 用于响应式开发
    			1rem = html的font-size*1 px
    	2.颜色表示和16进制颜色值
    	html和css规范中定义了147中可用的颜色值
    		1.rgb(红,绿,蓝) r:0-255 g:0-255 b:0-255
    		2.rgba(红,绿,蓝,透明度(0.0-1.0))
    		3.16进制表示颜色方式 #rrggbb  r:红色(00-ff 十六进制表示) g:绿色(00-ff) b:蓝色(00-ff)
    			eg:红色 #ff0000 绿色 #00ff00 蓝色 #0000ff
    

      

  • 相关阅读:
    async await promise 执行时序
    理解prototype
    X-Requested-With
    event事件传播规则
    【小文】Flask web Hello程序!
    【小文】php-gtk: Hello!
    【小文】HTTP 状态码
    【小文】Python环境安装配置
    C语言:趣味小问题 鸡兔同笼
    C语言:趣味小问题 百钱买百鸡
  • 原文地址:https://www.cnblogs.com/nanfengnan/p/14408742.html
Copyright © 2011-2022 走看看