CSS 基本知识
HTML
HTML示例：
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"/> <tile>A HTML TEMPLATE </title> </head> <body> <!--这里是网页内容--> </body> </html>
块级元素：（display:block）
每个块级元素占一行，多个块级元素上下堆叠显示，它的宽度默认为父元素的宽度,高度由它的内容高度决定（内容撑开）
块级元素有：
<h1>--<h6> 6级标签
<p>:段落
<ol>：有序列表
<li>：列表项
<div>等等
行内元素：(display:inline)
多个行内元素在一行内显示，当同一行宽度不够时，才到下一行显示，它的宽度一般为内容宽度，高度为内容的高度。
行内元素有：
<a> 链接，
<img> ：图片
<em>:斜体
<string>
<span>等等
HTML 中多个连续空格，浏览器会解析成为一个空格，即多余的不显示。
CSS
1.css引用方式：
页面引用CSS的方式：
1.行内样式
<p style="color:red">hello my friends!</p>
2.嵌入样式
<html>
<head>
<style type="text/css">
p{
color:red;
}
</style>
</head>
</html>
3.链接样式
<html>
<head>
<link rel="stylesheet" type="text/css" href="css/default.css"/>
</head>
</html>
css优先级：行内样式>嵌入样式>链接样式
2.css 写法
选择器1[,选择器2][,选择器3][.....] {css属性名:属性值;[css属性名:属性值;[css属性名:属性值;][...........]}
[]表示可选项
选择器：用某种规则来选择想要应用css的dom元素。 （找到元素）
{....}花括号：对dom元素（找到的）应用于何种CSS样式来改变其显示外观，因此花括号里是css声明。
{}花括号内是用分号分隔的多个css属性声明(由属性名：属性值组成)
举例：
p { color:red;} /*一个元素应用css样式*/
p ,h1 ,h3 { color : red; font-size : 12px} /*一组（多个）元素应用CSS样式。
3.选择器分类
基本选择器：
- 元素选择器：直接用元素名表示
格式：元素名
如 p { background-color:red} p元素的背景为红名
- 类选择器（.className）：
格式: .类名 由点+类名表示,需要在dom元素的 class属性中引用才生效
.red-bg { background-color:red } 。
<p class="red-bg">hello my friends!</p>
可以在N个dom元素中引用。
- ID选择器(#ID名)
#descId { background-color:red} ,由井号+id名称表示，需要在dom元素的 ID属性中引用才生效。
<p id="descId">hello my friends!</p>
只能在一个dom元素中引用。
- 属性选择器
格式：元素名[属性名 [关系符 属性值]][属性名 [关系符 属性值]] ...
关系符可以是：
=等于属性值，
~= 属性有多个值，其中一个值等于属性值
^= 以属性值开头
$=以属性值结尾
*= 包含属性值
- 伪类选择器：
格式：元素名：伪类名
示例：a:link a:visited a:hover a:active,input:focus,e:first-child,e:last-child,e:nth-child(n|odd|even) 等
- 伪元素选择器：
格式：元素名：：伪元素名
示例：e::first-letter,e::first-line,e::before,e::after,
复合选择器：
设第一个基本选择器选择的DOM元素为 E,第二个基本选择器选择的DOM元素为 F,
- 后代选择器：格式：第一个基本选择器 空格 第二个基本选择器 ， F为E的后代（含子，孙子...）则F为需要应用CSS的元素。
- 子选择器：格式：第一个基本选择器 > 第二个基本选择器 ，F为E的儿子，则F为需要应用CSS的元素。
- 兄弟选择器：格式：第一个基本选择器 + 第二个基本选择器，F与E同层级且紧邻E之后，则F为需要应用CSS的元素。
- 同胞选择器：格式：第一个基本选择器 ~ 第二个基本选择器，F与E同层级且在E之后，则F为需要应用CSS的元素。
- 相交选择器：格式：第一个基本选择器第二个基本选择器（写法：两个选择器挨着，中间无其它字符。 ），E和F的交集dom元素，为需要应用CSS的元素。
css属性继承：
可继承的CSS属性有：跟文本相关的CSS等，这些CSS属性值可由父元素或祖先元素继承而来。
CSS 层叠规则：
当一个元素的一个CSS属性，有多个CSS定义，且定义值都不相同时，哪个CSS定义生效呢？
1.属性声明中有 ！important 时，该属性声明有效。
如 p {color:red !important}
2.其它情况，需根据I-C-E 规则判断
I:指ID选择器，有一个ID选择器，则在I上加1
C:指类选择器，有一个类选择器，则在C上加1
E:指元素选择器，有一个E选择器，则在E上加1.
最终生成类似 0-1-3 之类的两个数值串，相互比校：I值大的生效，相同则对C值，C值相同则对比E值。
如果两个数值串完全相同，则后声明生效。
简单说：选择器最明确的那个生效。
css盒模型：
左右相邻元素，相邻的外边距距离：第一个元素的右外边距+第二个元素的左外边距
上下相邻元素，相邻的外边距距离：上面元素的下外边距 和 下面元素的上外边距，哪个最大取哪个
未指定宽度情况下：总宽度不变==父元素的宽度，增加margin、border、padding宽度时，内容宽度会缩小。
指定宽度的情况下：width == 内容宽度，增加margin、border、padding宽度时，总宽度会增加。
通过 box-size
CSS浮动：
浮动的框可以向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
格式： float:left|right
浮动框旁边是文本或之后是P元素，则形成环绕效果。
当浮动框的不在文档的普通流中，也就撑不开父元素。 解决办法是为父元素添加clear属性的css:
.clearfix:after { <----在类名为“clearfix”的元素内最后面加入内容；
content: "."; <----内容为“.”就是一个英文的句号而已。也可以不写。
display: block; <----加入的这个元素转换为块级元素。
clear: both; <----清除左右两边浮动。
visibility: hidden; <----可见度设为隐藏。注意它和display:none;是有区别的。visibility:hidden;仍然占据空间，只是看不到而已；
line-height: 0; <----行高为0；
height: 0; <----高度为0；
font-size:0; <----字体大小为0；
}
clear 属性的值可以是 left、right、both 或 none，它表示框的哪些边不应该挨着浮动框即下一行显示。
上面的CSS表示内容为.的块元素，不紧挨着浮动框，即在浮动框下方，由于该块元素是正常文档流的一部分，被包含在父元素中，所以它之上的浮动框自然也显示在父元素中。
CSS定位：
position 有4个值：static(静态定位),relative(相对定位),absolute（绝对定位）,Fixed(固定定位)
static(静态定位)：页面默认的定位形式，块级元素从上到下排列，每个块级元素占用一行，宽度为父元素宽度。
relative(相对定位)：块元素会发生位置偏移，偏移是相对于原来位置，偏移多少由 top left right bottom 决定，元素原位置保留，即其它元素不可占用该位置。
absolute（绝对定位）：块元素会发生位置偏移，偏移是相对postion为（relative,absolute,fixed）的最近的祖先元素（如果没有，则相对于body），偏移多少由 top left right bottom 决定，元素原位置删除，其它块元素会占用该位置。
Fixed(固定定位)： 类似于将 position 设置为 absolute，但偏移是相对于视窗本身。它不会随页面滚动而移动。
相关推荐
background-color: blue;background-color: yellow;<input type="button" value="变蓝" @click="changeColorT