CSS防遗忘指南

一、盒模型

1.1定位

梳理普通文档流、相对定位、绝对定位、固定定位和浮动的关系。

1.1.1普通文档流

普通文档流占据文档空间，相对定位是相对于普通文档流的位置进行定位，元素仍占据原来的空间，故相对定位属于普通文档流。

1.1.2绝对定位

绝对定位相对于距离它最近的那个已定位（非static）的祖先元素确定位置，脱离了普通文档流，不占据空间。
固定定位相对于视口（viewpoint），是绝对定位的一种。

1.1.3浮动

浮动的元素不处于原来的文档流，不占据空间。
非浮动元素中包含浮动元素，清除浮动的4种方法：

1. 在html中包含元素的结束标签前添加块级元素，clear: both；
2. 在样式中使用伪类::after添加，同1，添加的元素属性display: block；
3. 使浮动包含元素，float: left/right；
4. 包含元素添加overflow属性，overflow的副作用可以清除浮动。

1.2导航栏（水平&垂直）

1.2.1通用设置

CSS:

ul.nav {
	/*清除列表项原本样式*/
	padding: 0;
	margin: 0;
	list-style-type: none;
}
ul.nav a {
	/*对锚点设置样式，block实现按钮效果*/
	display: block;
	width: 8em;/*可设置固有尺寸，但会产生可维护性问题*/
	/*padding: 0 3em;可设置左右两边padding，由锚点文本决定宽度*/
	line-height: 2em;/*设置行高使垂直居中*/
}

html:

<ul class="nav">
    <li><a href="">1</a></li>
    <li><a href="">2</a></li>
    <li><a href="">3</a></li>
    <li><a href="">4</a></li>
    <li><a href="">5</a></li>
</ul>

1.2.2水平导航栏

浮动列表项的锚点即可，记得对ul清除浮动。

1.2.3二级导航栏

在一级li中添加二级ul，若二级要垂直的导航栏，则对二级ul float:none。

使用display: none将二级导航隐藏，这里隐藏式二级导航不占用位置，设置hover将display: block。

对整个导航栏加阴影，同时防止hover时二级导航栏拉伸阴影样式，需要将二级导航栏脱离普通文档。这里不能用float，因为一级导航栏已经清除了浮动，故这里用绝对定位脱离文档流。

可以对一级导航栏使用绝对定位，对html使用相对定位，效果不错。
主要CSS：

html {
    position: relative;
}
ul.nav {
    list-style-type: none;
    padding: 0;
    margin: 0;
    /* 清除浮动不用overflow，为了阴影效果 */
    /* overflow: hidden; */
    position: absolute;
    top: 2px;
    left: 2px;
    /* 对整个导航栏添加阴影效果 */
    box-shadow: 2px 5px 5px gray;
}
ul.secondNav {
    padding: 0;
    margin: 0;
    list-style-type: none;
    display: none;
    transition-property: display;
    transition-duration: 0.5s;
    /* 脱离文档流使得导航栏的阴影不会畸变 */
    /* 不能float，因为ul清楚的浮动，hover时二级导航会拉伸阴影 */
    position: absolute;
}

html：

<ul class="nav">
    <li><a href="">level1</a>
        <ul class="secondNav">
            <li><a href="">level1.1</a></li>
            <li><a href="">level1.2</a></li>
            <li><a href="">level1.3</a></li>
        </ul>
    </li>
</ul>

详细可看：水平垂直导航栏.

1.3布局