css知识点

1. CSS与html结合方式

	1. 内联样式
		 * 在标签内使用style属性指定css代码
		 * 如：<div style="color:red;">hello css</div>
	2. 内部样式
		* 在head标签内，定义style标签，style标签的标签体内容就是css代码
		* 如：
			<style>
		        div{
		            color:blue;
		        }
		
		    </style>
			<div>hello css</div>
	3. 外部样式
		1. 定义css资源文件。
		2. 在head标签内，定义link标签，引入外部的资源文件
			<link rel="stylesheet" href="css/a.css">

		* 注意：
			* 1,2,3种方式 css作用范围越来越大
			* 采用就近原则
			* 1方式不常用，后期常用2,3
			* 3种格式可以写为：
				<style>
			        @import "css/a.css";
			    </style>

2. 选择器

2. 选择器：筛选具有相似特征的元素		https://www.cnblogs.com/AIonTheRoad/p/11283100.html
	优先级：!important > 内联样式 > id选择器 > 类、伪类、属性选择器 > 标签、伪元素选择器
		权   重：   !important：10000
		　　　　　内联： 1000
		　　　　　id选择器：100
		　　　　　类、伪类、属性选择器：10
		　　　　　标签、伪元素选择器：1
		　　　　　通用选择器（*）、子选择器（>）、相邻兄弟选择器（+）、通用兄弟选择器（~）权重值为0 

	1. 基础选择器
		1. id选择器：选择具体的id属性值的元素.建议在一个html页面中id值唯一,不能以数字开头
	        * 语法：#id属性值{}
	    2. 元素选择器：选择具有相同标签名称的元素
	        * 语法： 标签名称{}
	        * 注意：id选择器优先级高于元素选择器
	    3. 类选择器：选择具有相同的class属性值的元素。
	        * 语法：.class属性值{}
	        * 注意：类选择器选择器优先级高于元素选择器
	2. 扩展选择器：
		1. 选择所有元素：
			* 语法： *{}
		2. 并集选择器：
			* 选择器1,选择器2{}
			p, span, .blue,#box	选择所有的p元素、span元素、class为"blue"的元素以及id为"box"的元素
		2. 交集选择器:
			* 选择器1选择器2		同时满足选择器1和选择器2
			* .div.box

		3. 子选择器：筛选选择器1元素下的选择器2元素
			* 语法：  选择器1 选择器2{}
				div p	选择div元素内部的所有p元素
		4. 父选择器：筛选选择器2的父元素选择器1
			* 语法：  选择器1 > 选择器2{}
				div>p				选择div元素的第一子代的所有p元素
				div>p:first-child	选择div元素的第一子代的第一个p元素

		5. 属性选择器：选择元素名称，属性名=属性值的元素
			* 语法：  元素名称[属性名="属性值"]{}
				input[type='text']{}

		6. 伪类选择器：选择一些元素具有的状态
			* 语法： 元素:状态{}
			* 如： <a>
				* 状态：
					* link：初始化的状态
					* visited：被访问过的状态
					* active：正在访问状态
					* hover：鼠标悬浮状态
					* focus

					* before
						p:before	在每个p元素内容之前插入内容
					* after

3. 属性

	1. 字体、文本
		* font-size：字体大小
		* color：文本颜色
		* text-align：对其方式
		* line-height：行高 
	2. 背景
		* background：
	3. 边框
		* border：设置边框，符合属性
			* border-top-style
			* border-right-style
			* border-bottom-style
			* border-left-style

			* 还可以将每一个边的边框样式细化（厚度  风格  颜色）eg：以右边框设置为例
				Border-right-width:10px
				Border-right-style:solid
				Border-right-color:black
	4. 尺寸
		* width：宽度
		* height：高度

4. 盒子模型：控制布局

	* margin：外边距	有背景颜色（透明的transparent）
		* margin-left
		* margin-top
		* margin-right
		* margin-bottom
	* padding：内边距  默认:上右下左
		背景与元素背景一致,可以分别设置元素的各个边的内边距 
			* padding-left
			* padding-top
			* padding-right
			* padding-bottom
	注意:
		* 默认情况下内边距会影响整个盒子的大小
		* box-sizing: border-box;  设置盒子的属性，让width和height就是最终盒子的大小

5. float：浮动

	Float: left/right/none------------------脱离了文档流
		* left: 元素左浮动
		* right: 元素右浮动
		* none: 默认值,不浮动

	注意:
		如果不加clear属性,下面的div样式会失效
			eg: <div style="clear:left;"></div>

		取消浮动带来的影响：
			1、给父级元素设置 overflow:hidden
			2、给父级元素加一个高度
			3、给父级元素的末尾添加一个没有浮动的元素，用来撑开背景 clear:both

6. display: 转换

	在实际开发中,如果希望行内元素有块级元素,需要有display 转换
		选择器: {display: 属性值}
			inline: 此元素将显示为行内元素(行内元素的默认值)
			block : 此元素指定为块级标签(块元素display 的默认值)
			inline-block: 将对象呈递为内联元素,对象内的元素块级展示,行内块级标签
			none  : 隐藏元素

7. 相对定位、绝地定位、固定定位

	* position:relative  相对定位
		参照物：自身原来的位置
		有没有脱离文档流：没有脱离
		特点：
			* 定位元素可以使用 top/left/right/bottom来设置元素的位置，
			* 当上下都设置时，听上面的；当左右都设置时，听左边表的。
			* top/left/right/bottom每一个属性的正方向都为中心方向，反之为负方向。
			* 定位的元素会出现分层现象，可以使用z-index属性设置层级。值越大层级越高，默认值为0

	* position:absolute 绝对定位
		参照物：祖先元素中，最近的定位元素为参照物，若没有满足条件的祖先，以body为参照物。
				开发时手动设置参照物设置position:relative
		有没有脱离文档流：脱离了
		特点：与相对定位一致

	* position:fixed 固定定位
		参照物：可视窗口
		有没有脱离文档流：脱离了
		特点：与相对定位一致

	总结：脱离了文档流的设置position:absolute/fixed  float:left/right