CSS基本知识点

最近在系统的学习前端的基础知识，其中就涉及到css的基本使用，这里写这篇博客主要是记录自己在进行网页设计的时候，遇到的基础知识的笔记：
1、rem的基本使用，以及在开发中与px之间的切换。参考的网页：
http://www.cnblogs.com/yezi-dream/p/6810449.html
2、margin 与 padding之间的关系：
padding 与 margin 的区别：这是一个盒模型，padding 表示盒子内部的距离，margin 表示盒子与盒子之间的距离，关键是盒子里面的内容：content.

3、line-height用来设置行高之间属性：
http://www.w3school.com.cn/cssref/pr_dim_line-height.asp
4、 overflow属性规定当内容溢出元素框时发生的事情：主要有visiable（溢出部分显示）、scroll（用滚动条的方式显示溢出文字）、 hidden(溢出部分不显示)
5、position：主要有top、bottom、left、right、z-index属性的设置。其中position属性中主要涉及：static、absolute、relative、fixed,

• 所有元素默认属性值是static的
• relative相对属性，我们知道每个元素在文档流中会“占用”一个位置。这个位置可以设定为默认定位，而相对定位就是将元素便宜元素的默认位置，但文档流中依然保留默认位置，只是视觉上发生了偏移。
• absolute:绝对定位，绝对定位是相对而言的，应用了position:absolute的元素是相对于最近的非static定位的祖先元素的偏移，来确定元素位置，如果其祖先元素都没有设置过非statci属性，那么该元素将以html元素进行位置偏移。特点：默认宽度为内容宽度，脱离文档流，参照物为第一个定位祖先或者根元素(HTML元素)
• fixed常创建在滚动屏幕时任固定在相同位置的元素，参照物固定位浏览器窗口。特点：默认宽度为内容宽度、脱离文档流、参照物为视窗http://www.w3school.com.cn/cssref/pr_class_position.asp

6、text-decoration设置文本属性：
http://www.w3school.com.cn/cssref/pr_text_text-decoration.asp
7、from标签：用于为用户输入创建 HTML 表单。
http://www.w3school.com.cn/tags/tag_form.asp
8、b标签：本身就是指一个粗体的标签。
http://www.w3school.com.cn/tags/tag_b.asp
9、box-shadow属性：向框添加一个或多个阴影。
http://www.w3school.com.cn/cssref/pr_box-shadow.asp
10、list-style属性：list-style 简写属性在一个声明中设置所有的列表属性。
http://www.w3school.com.cn/cssref/pr_list-style.asp
11、active选择器：选择活动链接，并设置其样式。
http://www.w3school.com.cn/cssref/selector_active.asp
12、box-sizing:属性允许你以某种方式定义某些元素，以适应指定区域。
https://www.sogou.com/link?url=DSOYnZeCC_psXFayQllNlhuNJ3dtTbW2ogQTBoValS_MYn2UI8-lvt1dK6F-101A0ztd7q5nl6o.
13、letter-spacing :属性增加或减少字符间的空白（字符间距）。
该属性定义了在文本字符框之间插入多少空间。由于字符字形通常比其字符框要窄，指定长度值时，会调整字母之间通常的间隔。因此，normal 就相当于值为 0。
注释：允许使用负值，这会让字母之间挤得更紧。

14、 box-sizing 属性：指定两个boxes接壤 http://www.runoob.com/try/try.php?filename=trycss3_box-sizing
margin 和 padding 分别适合什么场景使用

margin 是用来隔开元素与元素的间距； padding 是用来隔开元素与内容的间隔。
margin 用于布局分开元素使元素与元素互不相干；
padding 用于元素与内容之间的间隔， 让内容（ 文字） 与（ 包裹） 元素之间有一段

请解释一下为什么需要清除浮动？ 清除浮动的方式

清除浮动是为了清除使用浮动元素产生的影响。 浮动的元素， 高度会塌陷，而高度的塌陷使我们页面后面的布局不能正常显示

1、 父级 div 定义 height；
2、 父级 div 也一起浮动；
3、 常规的使用一个 class；

.clearfix:after {
    content: " ";
    display: table;
} 
.clearfix:after {
    clear: both;
}
.clearfix {
    *zoom: 1;
}

浏览器默认的 margin 和 padding 不同。 解决方案是加一个全局的{margin:0;padding:0;}来统一。*
position 的值 relative 和 absolute 定位原点是

absolute
生成绝对定位的元素， 相对于值不为 static 的第一个父元素进行定位。
fixed （ 老 IE 不支持）
生成绝对定位的元素， 相对于浏览器窗口进行定位。
relative
生成相对定位的元素， 相对于其正常位置进行定位。
static
默认值。 没有定位， 元素出现在正常的流中（ 忽略 top, bottom, left, right z-index 声明） 。
inherit  规定从父元素继承 position 属性的值。