前端入门基础知识大全（一）-CSS基础（1）

个人学习笔记，仅供想入前端大门小伙伴学习

一、什么是CSS

	Cascading Style Sheets : 样式表
	CSS用于HTML元素的样式的定义
	能够实现内容(HTML页面元素) 与 表现(CSS展示效果)相分离
	能够提升代码的可重用性 和 可维护性

二、CSS 与 HTML 之间的关系

	HTML 负责搭建网页结构
	CSS 负责页面的样式的设置
	HTML元素属性 与 CSS样式 冲突时 使用原则 :
	尽量使用 CSS 样式 来取代 HTML 属性

三、使用CSS样式表的三种方式

1、内联方式

	又称为 行内样式 或 行内方式

2、内部样式表

	将样式内容定义在网页的  中

3、外部样式表

	将样式内容定义在外部的 CSS 文件中(***.css)
	在HTML页面中引入 ***.css 去使用样式内容

四、CSS样式表特征

1、继承性

	大部分的样式属性是可以被继承的
	即在父元素中定义好的样式 可以直接被子元素使用

2、层叠性

	允许为一个元素定义多个样式规则，如果样式规则中的样式属性不冲突的时候，他们则都可以被应用到元素上

3、优先级

	在层叠性基础上，如果样式属性声明冲突时，会按照不同使用方式的优先级来应用样式
	低 ：浏览器默认设置
	中 ：内部样式表 和 外部样式表
		 就近原则 - 后定义者优先
	高 ：内联样式
	最高：!important
		显示调整 样式的优先级
		属性名称:值 !important;

五、CSS基础选择器

1、选择器的作用

	规范了页面中哪些元素能够使用声明好的样式
	选择器是为了匹配页面上的元素的

2、选择器详解

1、通用选择器

作用：为了匹配页面中所有的元素
语法：* { … }

ex:想设置页面中所有的文字的大小为12px

方案1：

			*{
				font-size:12px;
			}

方案2：

			body{
				font-size:12px;
			}	

在网页中，推荐使用方案2的继承性来取代 通用选择器

2、元素选择器

作用：使用元素名称来充当选择器，目的是为了匹配页面中指定元素名称的所有标记
语法：元素名称 { … }

div{ ... }
p{ ... }
ul{ ... }

3、类选择器(重点)

作用：定义好之后，允许被任意元素的 class 属性进行引用的选择器

1、基本类选择器

语法：.类名{ … }
引用类选择器：

类名规范：
1、字母，数字，_,-组成
2、不能以数字开头

	引用了 important 的元素

2、多类选择器的引用方式：

允许让一个元素同时引用多个类选择器
多个类选择器之间，使用 空格 隔开即可

3、分类选择器的定义方式：

分类选择器，允许将类选择器和元素选择器结合起来使用，从而实现对某种元素中不同样式的细分控制

元素选择器.类选择器{ ... }
div.important{ color:green; }
以上选择器匹配的是页面中 class属性值为 important 的 div 元素

4、ID选择器

作用：为了匹配页面中指定ID值的元素
语法：#IDValue{ … }

5、群组选择器

作用：选择器的声明，是一个以 , 隔开的选择器列表，为了定义多个选择器中的公共样式
语法：
选择器1,选择器2,选择器3{
… …
}
*

#main,div.redColor,.important,.red{
 	color:red;
 }

等同于

 #main{color:red;}
 div.redColor{color:red;}
 .important{color:red;}
 .red{color:red;}

6、后代选择器

后代：只要具备层级关系的元素，被嵌套的都可以被称之为 后代
语法：选择器1 选择器2{ … }

1、div span{ }
	匹配 所有div 中的 span 元素
2、#main span{ ... }
	匹配 id为main的元素中的 所有 span元素
3、#main div.left-side{ ... }
	匹配 id为mian 的元素中 class为left-side 的div元素
	

		

	

7、子代选择器

子代：在层级元素中，只具备一层层级关系，被嵌套的元素称之为 子代元素
语法：选择器1>选择器2{}

p 是div的 子代元素
span 是p的 子代元素
span 是div的 后代元素

	div中的span
	

		div 中的 p 中的 span
	

8、伪类选择器

作用：为了匹配页面元素不同的"状态"
语法：
:伪类{ … }
选择器:伪类{}

伪类选择器的分类：

			1、链接伪类
				1、:link , 匹配未被访问的超链接的状态
				2、:visited,匹配访问过的超链接的状态
			2、动态伪类
				1、:hover,匹配鼠标悬停在元素上的状态
				2、:active,匹配元素被激活时的状态
				3、:focus,匹配元素获取焦点时的状态
			3、目标伪类
			4、结构伪类
			5、否定伪类

六、尺寸 与 边框

1、CSS单位

1.1、尺寸单位

1、px (pixel)
2、% ：相对单位
3、pt ：磅(point)
	多数用于描述 文字大小 1pt = 1/72 in
4、in ：英寸(inch)
	1in=2.54cm
5、cm ：厘米
6、mm ：毫米
7、em ：字体大小，使用父元素字体大小的倍数
	#main{  font-size:2em; }
8、rem ：字体大小,使用html根元素字体大小的倍数
	#main{ font-size:2rem; }

1.2、颜色单位

1、rgb(r,g,b)
	r:red (0~255)
	g:green (0~255)
	b:blue (0~255)

	ex:
		color:rgb(112,76,98);
2、rgb(r%,g%,b%)
3、rgba(r,g,b,alpha);
	alpha:透明度 0~1 之间的数字
		0 : 完全透明
		1 : 完全不透明
4、#rrggbb
	由6位十六进制的数字来组成的颜色
		十六进制：0~9 A~F 组成
	#123456;
	#654321;
	#aabbcc;
	#e4393c;
5、#rgb
	#rgb 是 #rrggbb的缩写
	#rrggbb每两位数字都相同的情况下，可以使用#rgb的方式取代
	#112233 -> #123;
	#ff0000 -> #f00
6、表示颜色的英文单词
	red,green,blue,yellow,pink,purple,

2、尺寸属性

2.1、页面元素的默认尺寸

		块级：
			宽度：占父元素宽度的 100%
			高度：以内容为准
		行内：
			宽度：以内容为准
			高度：以内容为准

2.2、尺寸属性

		1、宽度
			width
			min-width
			max-width
		2、高度
			height
			min-height
			max-height

2.3、在HTML中，允许设置尺寸属性的元素

		1、所有的块级元素 全部都可以设置
		2、行内块中的大部分元素可以设置
			除 radio 和 checkbox 以外的行内块元素
		3、HTML元素本身就具备 width 和 height属性的可以设置尺寸，其余则不可以
			 可以设置尺寸
			 可以设置尺寸
		特殊：除以外的其它行内元素时不允许设置尺寸的
2.4、溢出
2.4.1、什么是溢出
使用尺寸属性设置元素大小时，如果内容所需要的空间大于元素空间大小时，则会产生溢出的效果
2.4.2、溢出处理属性
属性：
	overflow
	overflow-x
	overflow-y
取值：
	1、visible
		默认值，溢出可见
	2、hidden
		隐藏
	3、scroll
		显示滚动条，但是溢出时可用
	4、auto
3、边框属性
3.1、简写方式属性
通过一个属性 将元素的四个方向的边框的所有的操作一起设置
 语法：
border:width style color;
	width:边框宽度，以px为单位
	style:边框样式
		solid:实线
		dotted:虚线(.......)
		dashed:虚线(-------)
	color:边框颜色
		可以取值为 transparent(透明)
	border 可以
	取值为 none 或 0;
3.2、单边定义
只单独设置某一条边的宽度，样式，颜色
属性：border-方向:width style color;
	方向：top / right / bottom / left
	ex:
		1、border-left:2px dotted red;
		2、border-bottom:1px dashed blue;
特殊：border-方向:none / 0;
3.3、单属性设置
设置四个方向边框的某一具体属性值
属性：border-属性:值;
属性：width / style / color
3.4、单边单属性设置
设置某个方向的边框的某一具体属性
属性：border-方向-属性:值;
ex:
1、border-top-color:blue;
2、border-left-style:dotted;
4、边框倒角属性
属性：
	border-radius
取值：
	以px为单位的数值 或 %
单角属性：
	border-top-left-radius:
	border-top-right-radius:
	border-bottom-left-radius:
	border-bottom-right-radius:
ex:
	1、border-radius:5px;
	2、border-radius:50%;
		将矩形元素变为圆形(正圆，椭圆)
	3、border-radius:5px 10px 15px 20px;
		左上角倒角半径：5px
		右上角倒角半径：10px
		右下角倒角半径：15px
		左下角倒角半径：20px
5、边框阴影属性
属性：box-shadow
取值：
h-shadow v-shadow blur spread color inset

h-shadow:阴影的水平偏移距离，取值为正，阴影向右偏移，取值为负，阴影向左偏移
v-shadow:阴影的垂直偏移距离，取值为正，阴影向下偏移，取值为负，阴影向上偏移
blur:可选，阴影的模糊大小
spread:可选，阴影的大小
color:可选，颜色
inset:可选，将默认的外阴影改为内阴影
6、轮廓属性
轮廓：绘制与元素边框外围的一条线
属性：outline
取值：width style color;

outline-widht:
outline-style:
outline-color:

轮廓的常用方式：
	outline:none / 0;
七、框模型
1、什么是框模型
	框：页面元素皆为框
	框模型：Box Model 定义了元素处理(计算)尺寸，边框，内边距 和 外边距的 一种方式
	有框模型的属性介入到元素中的时候，元素实际占地面积就会发生改变
	元素实际占地宽度=左右外边距+左右边框+左右内边距 + width;
	元素实际占地高度=上下外边距+上下边框+上下内边距 + height;
2、外边距
2.1、什么是外边距
		围绕在元素边框周围的空白区域就是外边距
		外边距也是体现两个元素之间距离的一种表现方式
2.2、语法
2.2.1、属性
	margin:设置四个方向的外边距值;
	margin-top/right/bottom/left:设置单一方向外边距值;
2.2.2、取值
    1 、取值为 px 的具体值
    2、%
    3、auto
    自动，自动计算左右外边距的值，前提要求元素必须有宽度
    4、负数
    目的是为了移动元素
    margin-top 设置数据为正数时，元素向下移动
    margin-left 设置数据为正数时，元素向右移动
    margin-top 设置数据为负数时，元素向上移动
    margin-left 设置数据为负数时，元素向左移动
    5、margin 的简写方式
    1、margin:value;
    	四个方向外边距是相同的
    2、margin:v1 v2;
    	v1:上下外边距
    	v2:左右外边距
    	ex:
    		margin:0 auto;
    3、margin:v1 v2 v3;
    	v1:上外边距
    	v2:左右外边距
    	v3:下外边距
    4、margin:v1 v2 v3 v4;
    	上 右 下 左
2.2.3、页面中具备默认外边距的元素
在页面中 
	body,p,h1,h2,h3,h4,h5,h6,ol,ul,dl,dd,pre
以上元素会具备默认的外边距
在网页开发中，通常会通过 CSS Reset(重写)的方式，将默认的外边距全部都设置为0
2.2.4、外边距的特殊效果
	1、外边距的合并
		当两个垂直外边距相遇时，他们将合并成一个，取两者间较大的值，作为他们的外边距
	2、外边距的溢出
		在某些特殊的条件下，为子元素设置外边距时，会作用到父元素上
		特殊条件：
			1、父元素不能有上边框
			2、为第一个子元素设置上外边距时
		解决方案：
			1、为父元素增加上边框即可
				弊端：父元素的高度会发生改变
			2、为父元素设置上内边距来取代子元素的上外边距
				弊端：父元素的高度会发生改变
			3、在子元素之上再增加一个空

				弊端：在页面上会多一个空子元素
			4、... ...
	3、为行内元素 和 行内块元素设置垂直外边距时
		1、行内元素
			对垂直外边距，无效，img 除外
		2、行内块元素
			整行元素都跟着发生改变

3、内边距

3.1、什么是内边距

		内容区域 与 边框(边缘)之间的空间
		注意：内边距会扩大元素边框的占用区域

3.2、语法

		1、属性
			padding:值;
			padding-top/right/bottom/left:值;
		2、取值
			1、为 px 具体值
			2、为 % 的相对数据

		3、简便写法
			1、padding:value;
				四个方向外边距相同
			2、padding:v1 v2
				上下  左右
			3、padding:v1 v2 v3;
				上  左右  下
			4、padding:v1 v2 v3 v4;
				上 右 下 左

3.3、特殊效果

	1、为行内元素 和 行内块 元素设置垂直内边距时
	只会影响自己，并不会影响其它元素

3.4、box-sizing

页面中 元素边框内 的尺寸计算方式
元素边框内宽度=左右边框+左右内边距+width

div{
	width:400px;
	border:2px solid red;
	border-left-widt:17px;
	padding-left:32px;
	padding-right:16px;
}

属性：box-sizing
作用：重新指定元素框模型的计算模式
取值：
	1、content-box
		默认值，采用默认的计算模式
		元素边框内宽度=左右边框+左右内边距+width
		元素边框内高度=上下边框+上下内边距+height
	2、border-box
		新计算模式，会将元素的border以及padding算在 width 和 height 之中

4、背景属性

4.1、背景颜色

	属性：background-color
	取值：
		合法颜色值 或 transparent
	注意：
		1、背景色会填充到元素的内容，内边距，以及边框上的
		2、如果边框为透明色，则边框位置处显示的颜色与背景色一致

4.2、背景图像

	属性：background-image
	取值：url(图像URL)
	注意：
		1、背景图是从元素的左上方出现的
		2、如果背景的尺寸大于元素的尺寸的话，那么落在元素内的图片是可见的，元素外的图是不可见的
		3、如果元素的尺寸大于背景图的尺寸，默认是以平铺(重复)的方式出现的

4.3、背景图像重复

	属性：background-repeat
	取值：
		1、repeat
			在垂直和水平方向都平铺,默认值
		2、repeat-x
			仅在水平方向平铺
		3、repeat-y
			仅在垂直方向平铺
		4、no-repeat
			不平铺

4.4、背景图片尺寸

	属性：background-size
	取值：
		1、width height
		2、width% height%
		3、cover
			覆盖，将背景图等比放大，直到背景图能覆盖到当前元素的所有区域为止
		4、contain
			包含，将背景图等比放大，直到背景图的右边或下边碰到元素边缘为止

4.5、背景图片固定

	属性： background-attachment
	取值：
		1、scroll
			默认值，背景图会随着滚动条而滚动
		2、fixed
			固定,背景图不会随着滚动条的滚动而改变位置

4.6、背景图片定位/位置

	作用：改变背景图像在元素中的默认位置
	属性：background-position
	取值：
		1、x y
			x ：背景图像水平偏移距离，取值为正，背景图向右偏移，取值为负，背景图向左偏移
			y ：背景图像垂直偏移距离，取值为正，背景图向下偏移，取值为负，背景图向上偏移 
		2、x% y%
			背景图在元素的大体的哪个位置处
		3、关键字
			x : left / center / right
			y : top / center / bottom
	
	CSS Sprites
		雪碧图，精灵图
		将若干幅小图片拼合一幅大图片中的实现方式

4.7、背景属性

	属性：background
	取值：color url() repeat attachment position

	ex:
		1、background:red;
		2、background:url(a.jpg) -10px 125px;