CSS笔记

CSS Display - Block and Inline Elements

A block element is an element that takes up the full width available, and has a line break before and after it.

Examples of block elements:

• <h1>
• <p>
• <li>
• <div>

An inline element only takes up as much width as necessary, and does not force line breaks.

Examples of inline elements:

• <span>
• <a>

Note: Setting the display property of an element only changes how the element is displayed, NOT what kind of element it is. So, an inline element with display:block is not allowed to have other block elements inside of it

---

CSS Positioning

　　该属性可以设置元素的位置。position属性有四种：

static

　　HTML元素默认就使用static定位的。它根据页面流来定位。static属性，不支持top、bottom、left和right属性的设置。

fixed

　　固定定位——相对浏览器窗口定位。IE7和IE8需要描述 !DOCTYPE才支持。可以通过top/bottom/left和right属性来微调。

relative

　　相对定位——相对于static布局的位置。可以通过top、bottom、left和right属性来微调。

absolute

　　绝对定位——相对直接父元素布局。没有父元素就相对html布局。支持位置属性设置进行微调。

重叠元素（Overlapping Elements）

　　元素支持z-index来设置显示顺序。没有设置z-index的重叠元素，最后渲染的将显示在上面。

CSS Combinators

　　CSS配合选择器

　　四种：子元素选择器、亲子选择器、下一个兄弟选择器、后兄弟选择器

#Descendant Selector
div p {
    background-color: yellow;
}

#Child Selector
div > p {
    background-color: yellow;
}

#Adjacent Sibling Selector
div + p {
    background-color: yellow;
}

#General Sibling Selector
div ~ p {
    background-color: yellow;
}