Day 2 前端基础

主流浏览器及其内核

	浏览器分为shell 和 内核
	主流浏览器及其内核
	IE 				trident
	Firefox			Gecko
	Google Chrome 	webkit/blink
	Safari			webkit
	Opera			presto

1.行级元素：inline

  	内容决定元素所占位置
  	不可以通过css改变宽高
  	span  strong em a del

2.块级元素：block

独占一行
可以通过css改变宽高
div p ul li ol form address

3.行级块元素：inline-block

内容决定大小
可以通过css改变宽高
img

  	可以改变display:的内容来改变元素的类型

1.3.都带有inline 所以都带有文字特性
所以图片并排时会被分割出一个缝隙，把图片之间的空格回车直接去掉即可

<strong>加粗</strong>
	<em>斜体</em>
	<p>单独成段</p>
	<h1>六级标题</h1>
	<h6>独成一段，更改字体大小，加粗字体</h6>
	<del>中横线</del>
	<address>成段且斜体</address>
	&lt;小于符
	&gt;大于符
	&nbsp;空格
	<br>换行
	<hr>水平线
	<ol type=“排序方式” reversed="reversed" 逆序排列  start="2" 从2开始排列，只填数字>
		1/a/A/i/I
		<li>有序列表</li>
		<li></li>
		<li></li>
		<li></li>
	</ol>


	<ul type="none"<!-- 默认值 square 方块  circle 消除 none -->>
		
		<li>无序列表</li>
		<li></li>
		<li></li>
	</ul>

	<img src="图片地址" alt="图片信息" title="图片提示符"> 图片设置大小一般只设置一个，另一个元素会自动等比例缩放
	图片设置宽度高度的时候只用一个属性会同比例缩放，搜索引擎的优化用alt中的内容
	<a href="网址" target="_blank" ></a><!-- 表示在一个新的页面打开该链接 默认的是_self-->
	<a href="tel:17370958134">打电话</a>

	<!-- 2.a标签还可作为锚点定位使用
	3.可以打电话使用
	4.协议限定符
 	-->

 	<table>
 		<tr>
 			<td></td>
 			<td></td>
 		</tr>

 	</table>
	table是表格
	tr是表示行
	td是指一行有几格
	属性：border是边框厚度，cellpadding是内边距厚度，cellspacing是外边距厚度
	一般第一行用th不用td，会加粗居中显示
	rowspan表示合并行
	colspan表示合并列

	表示该元素鼠标悬浮时显示小手
	cursor: pointer;

	background-image: url(../images/01.png);背景图片
    background-repeat: no-repeat;图片是否会重复
    background-position: center;图片位置
    background-size: cover;优先铺满屏幕，图片可能显示不全
    background-attachment: fixed;背景不会随着其他元素的滚动而滚动，一定要写在引入背景图片的代码的下面，否则没效果

选择器

 	1. id选择器 <div id="名称"></div> 在css中写#名称{ 代码 }
 	2.class选择器（可多选）
 	<div class="名称"></div>   css中写.+名称{代码}
 		多个div可共同应用一个css中的名称
 		一个div可应用多个css中名称的效果
 	3.标签选择器 主要用于初始化标签的效果
 	直接在css中写标签名称+{代码}即可
 	4.通配符选择器
	css中加一个*{代码}  在所有标签都应用


	5.属性选择器   在css中加标签+[id] 应用到所有有id属性的div等，其他以此类推 
	或[id="精确"]

	父子选择器：（不一定用标签写，标签里面的条件也行）css中可写 div span{ 代码}选择div中的span
	直接子元素选择器：css中写div > span就只选中div下的span，而不选中strong中的span，

	并列选择器：用多个限制条件选中一个元素，如：div.id{代码}（id为id或class所代表的值）

	分组选择器：不同的类别之间用,分隔 把很多不同类型的选择器组合到一起


	兄弟选择器，A~B，从A开始找弟弟，不找哥哥，往下找不往上找

	伪元素选择器：
		/* 为某个元素的第一行文字使用样式。 */
		:first-line
		/* 为某个元素中的文字的首字母或第一个字使用样式。 */
		:first-letter
		/* 在某个元素之前插入一些内容。 */
		:before
		/* 在某个元素之后插入一些内容。 */
		:after
		内容在选择器中用context:
	
	
	伪类选择器
		加上空格找孩子，不加空格找所有叫自己本身名字的
		:first-child
		:last-child
		:nth-child(序号)
		:link            未访问

		:visited   　　　　已访问

		:hover                   鼠标悬停

		:active                  鼠标按下
		
	
	多重选择器时权重相加来计算优先级


	
	!important>行间样式>id>class=属性选择器>标签选择器>通配符选择器

	css权重

	!important        Infinity
	行间样式     		1000
	id 					 100
	class|属性|伪类 		 10
	标签|伪元素			  1
	通配符 				  0
	1000    256进制

快捷方式：

伪类选择器加>单指一级下面的孩子
布局尽量让父级来做
如果加浮动要在父级加overflow：hidden，让高度自适应
父级尽量不要给高度，让子级自己撑起来

div加通长背景，ul限制宽度，li自己调整占ul百分之多少
莫名出现空白可以在父级设置字体大小为0，然后子级再去覆盖字体

display 属性设置是否及如何显示元素。
		display 显示状态
		display:none 隐藏
		display:block 块显示
		display:inline 内嵌
		display:table 表格显示
		display:list-item 项目列表
		这个属性用于定义建立布局时元素生成的显示框类型。
		对于 HTML 等文档类型，如果使用 display 不谨慎会很危险，
		因为可能违反 HTML 中已经定义的显示层次结构。
		对于 XML，由于 XML 没有内置的这种层次结构，所有 display 是绝对必要的。

div中属性
		font-size:字体大小
		font-weight:bold;加粗
		font-style:italic;斜体
		font-family:arial;常用字体
		boder:大小 实虚体 颜色;（可用boder画三角形）！！！
		boder-width,
		boder-style:solid(实体)，dotted(点状虚线),dashed(条状虚线);
		boder-方向：为某一方向的边框	 
		

		text-align:文字对齐方式 left center right;  垂直方向文本居中：让单行文本所占的高度等于容器高度
		line-height:单行文本所占的高度
		text-indent:首行缩进 2em;
		em：1em=1*font-size;

		text-decoration:  line-through(中横线) none(无横线) underline(下划线)

		cursor:(当鼠标移动到该区域会发生什么变化)  pointer(网页链接效果，小手) help(问号)

		伪类选择器：(给选择器选中的元素增加鼠标移上去的动态效果)，在选择器后加:hover{代码}



		color:字体颜色;
		1.单词(透明色：transparent)
		2.颜色代码
		3.颜色函数

		2.颜色代码：#xxxxxx
		前两位：00-ff 红色的饱和程度
		中间两位00-ff 绿色的饱和程度
		后面两位：00-ff 蓝色的饱和程度
		当三个都两两相同的时候可以简化为一个
		如ff4400可写为f40

		3.颜色函数rgb(0-255,0-255,0-255);

		定位 position

		z-index:表示定位在第几层，数越大，离屏幕越远
		

		1.绝对定位absolute
		脱离原来位置进行定位
		相对于最近的有定位的父级进行定位，如果父级都没有，则相对于文档进行定位
		left:
		top:
		2.相对定位relative
		相对于原来的位置进行定位
		保留原来位置进行定位
		3.固定定位fixed
		不随页面滚动而移动


		原则
		用relative作为参照物
		用absolute进行定位

		全屏居中：
		div{
			position:absolute;
			left:50%;
			top:50%;
			margin-left:-0.5个身位
			margin-top:-0.5个身位
		}


		盒子模型

	外边距 margin默认值为8px
	边框 border
	内边距padding
	内容(高度height*宽度width)

	四个值的顺序就是上右下左
	若是三个值的话，对称位相等(左右）