浮动 float
浮动后 元素改为块盒
float : left 向上向左、right 向上向右
宽度为auto : 自适应,没必要填满
高度为auto : 与常规流一致,适应内容高度
margin auto : 默认为0
边框、内边距、百分比设置与常规流一致
浮动盒子会避开常规流块盒
常规流块盒会无视浮动盒
行盒在排列时会避开浮动盒
高度坍塌
常规流盒子的自动高度在计算时不会考虑浮动盒
解决:清除浮动
clear : none(默认)、left(清除左浮动)、right(清除右浮动)、both(清除浮动)
text - align:center 文字居中
line - height:60px ;height:60px 文字垂直居中
爱恨法则
- link 正常样式
- visited 已访问样式
- hover 鼠标悬浮时样式
- active 鼠标点击时样式
写法
.main .nav a:hover{
color:#fff;
}
常规流居中【margin:0,auto】
生成多列表超链接【ul>li*n>a】
浮动→高度坍塌→父元素加上选择器 class:clearfix
css
clearfix:after{
content:"";
display:block;
clear:both;
}
伪类选择器nth-child
例
.main .container .movies .movie-item:nth-child(6n){}
…省略号三件套
a{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}