一、盒模型
1.1定位
梳理普通文档流、相对定位、绝对定位、固定定位和浮动的关系。
1.1.1普通文档流
普通文档流占据文档空间,相对定位是相对于普通文档流的位置进行定位,元素仍占据原来的空间,故相对定位属于普通文档流。
1.1.2绝对定位
绝对定位相对于距离它最近的那个已定位(非static)的祖先元素确定位置,脱离了普通文档流,不占据空间。
固定定位相对于视口(viewpoint),是绝对定位的一种。
1.1.3浮动
浮动的元素不处于原来的文档流,不占据空间。
非浮动元素中包含浮动元素,清除浮动的4种方法:
- 在html中包含元素的结束标签前添加块级元素,clear: both;
- 在样式中使用伪类::after添加,同1,添加的元素属性display: block;
- 使浮动包含元素,float: left/right;
- 包含元素添加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>
详细可看:水平垂直导航栏.