笔记整理（第一本前端书籍）
一、 html文档和标记
html是超文本标记语言，它通过为超文本添加标记的方式，来赋予超文本内容的网页语义，即给网页内容赋予某些用户代理能够理解的含义如浏览器，从而解析并显示在网页上。
属性="属性值":为浏览器提供有关标签的额外信息。比如alt（屏幕阅读设备上），src（引入源文件）等
段落和标题：h1不仅是最大最突出的标题（除非你用CSS缩小它的字号），搜索引擎也会将其视为仅次于title标签的另一个搜索关键词的来源。
复合元素：创建列表，表单和表格等用户界面组件，比如
<ul><li></li></ul>嵌套标签：要在一个标签里嵌套另一个标签（也就是前者的开标签写在后者的开标签之前），必须要先关闭后一个标签再关闭前面那个标签。HTML 文档的结构正是通过类似这样的标签嵌套，以及就此建立起来标签间的“父－子”关系形成的。
文档流： HTML 元素会按照它们各自在标记中出现的先后顺序，依次从页面上方“流向”下方。
★块级元素和行内元素：几乎所有 HTML 元素的 display 属性值要么为 block，要么为 inline。最明显的一个例外是 table 元素，它有自己特殊的 display 属性值。
行内元素盒子：盒子会尽可能地收缩内容，在水平方向上并排显示，----设置width，height无效（可以设置line-height），margin上下无效，padding上下无效，border有效。
块级元素盒子：盒子会默认拓展到和父元素同宽，每个元素占据一行，垂直方向上堆叠排列，从新行开始结束接着一个断行。
html实体：在前面的例子中，两个实体的名字分别是“left-double-quote”（左双引号）和“right-double-quote”（右双引号）
的简写即&#ldquo和&#rdquo文档结构模型：html文档结构对应文档对象模型（DOM），dom是从浏览器的视角观察页面的元素和每个元素间的相对关系，由此得到一个家族树即DOM Tree，在css中引用dom中特定的位置，就可以选中相应的html元素并且修改样式属性。
二、CSS的工作原理
css添加到页面中的三种方式：行内式，嵌入式，外部式，@import url（##）
CSS 规则分两部分，即选择符和声明。声明又由两部分组成，即属性和值。声明包含在一对花括号内选择符
css的选择符：
1.上下文选择符
1、紧邻同胞选择符 +
2、一般同胞选择符 ~
3、子选择符 >
2.id和class 选择符
可以给 id 和 class 属性设定任何值，但不能以数字或特殊符号开头。
3.属性选择符
1、属性名选择符[property]
2、属性值选择符[property="value"]
1、^= "value" 包含某个值开头的选择符
2、$="value" 某个值结尾的选择符
3、~="value" 包含某个值的选择符
4.伪类选择符
1、UI伪类选择符
链接伪类选择符 :link :visited :hover :active
focus 伪类
target 伪类
hover 伪类
2、结构伪类
:first-child :last-child :nth-child
:first-type-of...
5.伪元素选择符
::first-letter
::first-line
::before ::after
(搜索引擎不会取得伪元素的信息（因为它在标记中并不存在）。因此，不要通过伪元素添加你想让搜索引擎索引的重要内容。)
6.通用选择符 *
css的继承：
CSS 中有很多属性是可以继承的，其中相当一部分都跟文本有关，比如颜色、字体、字号。
然而，也有很多 CSS属性不能继承，因为继承这些属性没有意义。
这些不能继承的属性主要涉及元素盒子的定位和显示方式，比如边框、外边距、内边距。层叠：
就是层叠样式表中的层叠，是一种样式在文档层次中逐层叠加的过程，
目的是让浏览器面对某个标签特定属性值的多个来源，确定最终使用哪个值。浏览器层叠各个来源样式的顺序：
浏览器默认样式->用户样式表->链接（外部）样式表[按照他们链接到页面的先后顺序]->嵌入式样式->行内样式层叠规则：按照顺序和权重来进行，空格!important 分号（;）用于加重声明的权重，如 p {color:red !important;}
CSS的属性值分为三类：文本值，数字值，颜色值
三、定位元素和背景
元素盒子的属性主要有：边框属性（border） 内边距属性（padding） 外边距属性（margin）
重置样式表 reset.css。这个样式表不仅重置了外边距和内边距，还对很多元素在跨浏览器显示时的外观进行了标准化。
垂直方向上的外边距不叠加，水平方向上的外边距叠加。
box-sizing 属性，通过它可以将有宽度的盒子也设定成具有默认的auto 状态下的行为
浮动与清除：
把元素从常规的文档流中拿出来，一是可以实现传统出版物上文字围绕图片环绕的效果，二是可以让原来垂直方向排列的元素变成水平排列，即上下堆叠变成左右并排，从而实现布局中的分栏。
浮动的元素脱离了常规的文档流后，紧跟在其后的元素会在空间允许的条件下向上提升。
浮动非图片元素时，必须给它设定宽度，否则后果难以预料。图片无所谓，因为它本身有默认的宽度。
浮动元素脱离了文档流，其父元素也看不到它了，因而也不会包围它。围住浮动元素的三种方法：
* 1.为父元素添加overflow:hidden，overflow:hidden本来的作用是防止元素被超大的内容撑大，它的另一个作用是迫使父元素围住浮动的子元素。下拉菜单的顶级元素不能使用
* 2.为父元素设定浮动，迫使父元素围住浮动的子元素，但要为父元素其后的元素设置clear:both。
* 3.在父元素最后添加子元素作为清除元素，迫使父元素围住子元素。
1.添加空的div元素，并设置clear:both
2.父元素添加class="clearfix",并设置.clearfix::after {content=".";display:block;height:0;visibility:hidden;clear:both;}
没有父元素的时候如何清除浮动： 用.clearfix规则.
-
定位：css布局的核心是position，position属性有4个值：static relative absolute fixed 默认值是static
1.静态定位：按照文档流的顺序上下堆叠
2.相对定位：相对它原来在文档流的位置，可以用top、left、bottom、right，但它原来占据的空间没有改变，其他元素也没有改变。
3.绝对定位：使元素彻底脱离文档流，元素原来占据的空间被"回收了"，一般是相对顶级元素body来定位。
4.固定定位：使元素彻底脱离文档流，和绝对定位的不同之处在于定位上下文是视口（浏览器窗口或者手持设备的屏幕），它不会随滚轮的滚动而滚动
注意： 外部 div 改为相对定位之后，其后代中绝对定位的元素就会按照 top 和 left 属性的设定，相对于外部 div 定位
显示属性：display的值有：inline，block，none，通过显示属性行内元素和块级元素可以相互转化。
-
背景：css中每个盒子都由两个图层组成：元素的前景层包括内容和边框；元素的背景层应用在整个元素盒子的后面（3d）
其中，背景图片在背景颜色之前。background相关属性：
background-color background-image background-repeat background-position background-size background-attachmentbackground-repeat的值：
no-repeat,repeat-x,repeat-y,round,space(增大图片间的空白)background-position有5个关键自值：
top、left、bottom、right和center,也可以设置数字值如(30%,40%)，还能设置负值background-size的值有：
50%，cover，contain，100px 50pxbackground-attachment背景粘附属性，它的默认值是scroll，即背景图片随元素移动，如果把值设为fixed，背景图片不会随元素滚动。简写：background: #fff url(4.png) no-repeat scroll bottom left;
background-clip控制背景绘制区域的范围background-origin背景区域的原点以下 CSS3 属性必须加 VPS：
border-image translate
linear-gradient transition
radial-gradient background*
transform background-image*
transform-origin
* 针对背景图片或渐变
linear-gradient线性渐变属性 background:linear-gradient(#e86a43, #fff 25%, #64d1dd 25%, #64d1dd 75%,#fff 75%, #e86a43)
radial-gradient放射性渐变属性 如 background: radial-gradient(#e86a43, #fff,#123456)
四、字体和文本
字体的来源：
用户机器上安装的字体；保存在第三方网站上的字体；保存在web服务器上的字体（可以使用@font-face随网页一起发给浏览器）字体属性：font
font-size（笔须）font-family（必须）font-stylefont-weightfont-variant文本属性：
text-indent letter-spacing word-spacing text-decoration text-align line-height text-transform vertical-aligntext-indent具有继承性,设定块级盒子内容相对于包含元素的起点。默认情况下，这个起点就是包含元素的左上角.
注意：对段落p等块状元素有用，span设置无效，因为span没有有效的宽度，但可以为span设置margin-left一样效果。letter-spacing为正值时增大字符间距，为负值时缩小间距。word-spacing单词间距与字符间距非常相似，区别在于它只调整单词间距，而不影响字符间距。
注意： CSS 把任何两边有空白的字符和字符串都视作“单词”文本装饰属性
text-decoration值有：underline none overline line-through blink文本对齐属性
text-align值有：left right center justify
center值也可以用来在较大的元素中居中较小的固定宽度的元素或图片.行高
line-height值是任何数字值，不需要单位, 也可以添加单位，如果只设置值忘记添加单位，会成倍放大元素的高度文本转换属性
text-transform值有：uppercase lowercase none captalize垂直对齐属性
vertical-align值有：sub super top middle bottom或者任意长度值如60%
注意：vertical-align以基线为参照上下移动文本，但这个属性只影响行内元素。想在垂直方向上对齐块级元素，必须把其 display属性设定为 inline字体打包：
<link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
@font-face {
/*这就是将来在字体栈中引用的字体族的名字*/
font-family:'UbuntuTitlingBold';
src: url('UbuntuTitling-Bold-webfont.eot');
src: url('UbuntuTitling-Bold-webfont.eot?#iefix')
format('embedded-opentype'),
url('UbuntuTitling-Bold-webfont.woff')
format('woff'),
url('UbuntuTitling-Bold-webfont.ttf')
format('truetype'),
url('UbuntuTitling-Bold-webfont.
svg#UbuntuTitlingBold') format('svg');
font-weight: normal;
font-style: normal;
}
