前端基础知识学习记录（一）

前端基础知识学习记录（一）

1、CSS position 属性

通过使用 position 属性，可以选择四种不同类型的定位，会影响元素框生成的方式。
position 属性值的含义：

static：元素框正常生成。块级元素生成一个矩形框，作为文档流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。
relative：相对定位。相对于元素的原始位置进行定位。元素框偏移某个距离，它原本所占的空间仍保留。
absolute：绝对定位。相对于其包含块定位，包含块可能是文档中的另一个元素或者是初始包含块；也可说相对于除static定位以外的第一个父元素进行定位。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。
fixed：相对于浏览器窗口进行定位。

2、CSS display 属性
block、inline、inlinke-block

display:block;
block元素会独占一行，多个block元素会各自新起一行。默认情况下，block元素宽度自动填满其父元素宽度，可以自行设置宽高以及margin、padding属性。
display:inline;
inline元素不会独占一行，多个相邻的行内元素会排列在同一行里，直到一行排列不下，才会新换一行，其宽度随元素的内容而变化，不可以自行设置宽高，可以设置水平方向的margin和padding属性，但不可以设置竖直方向的margin与padding属性。
display:inline-block;
将对象呈现为inline对象，但对象的内容作为block对象呈现。即之后的对象会被排列在同一行内，亦可自行设置宽高以及margin、padding属性。

3、CSS 选择器

CSS元素选择器：又称类型选择器，它匹配文档树中该元素类型的每一个实例。
举例：<style type="text/css">p{}</style><p></p>
类选择器：类选择器允许以一种独立于文档元素的方式来指定样式，该选择器可以单独使用，也可以与其他元素结合使用。
举例：<style type="text/css">p.box{}</style><p class="box"></p>
ID选择器：ID 选择器允许以一种独立于文档元素的方式来指定样式。只能在文档中使用一次；且ID 选择器不能结合使用（ID 属性不允许有以空格分隔的词列表）。
举例：<style type="text/css">#box{}</style><div id="box"></div>
属性选择器：属性选择器可以根据元素的属性及属性值来选择元素。
举例：<style type="text/css">a[href] {}</style><a href=""></a>
后代选择器：又称包含选择器,可以选择作为某元素后代的元素。
举例：<style type="text/css">h1 em{}</style><h1><em></em></h1>
子元素选择器：选择作为某元素子元素的元素。
举例：<style type="text/css">h1>strong{}</style><h1><strong></strong><strong></strong></h1>
相邻兄弟选择器：可选择紧接在另一元素后的元素，且二者有相同父元素。
举例：<style type="text/css">h1+p{}</style><h1></h1><p></p><p></p>
伪类：用于向某些选择器添加特殊的效果。
举例：a:hover{}
伪元素：用于向某些选择器设置特殊效果。