前端基础知识学习记录(一)

前端基础知识学习记录(一)

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{}
伪元素:用于向某些选择器设置特殊效果。

相关推荐