css套路学习（一）

css3信息获取方法

1. 文档搜索:Google css spec;
2. Google: 关键词 MDN;
3. css tricks成熟css代码块sinppets;
4. Google: center css tricks
5. Google：阮一峰 css
6. codrops炫酷css效果

引入css的方式

    <link rel="stylesheet" href="./css/style.css">
复制代码

清除浮动

<ul style="list-style:none; margin:0; padding:0" class="clearfix">

.clearfix::after{
    content: "";
    display: block;
    clear:both;
}
复制代码

1. 所有的子元素浮动
2. 父类添加class="clearfix"
3. 背下这三行代码

清除抖动and下部hover出下划线

当鼠标hover时会有抖动，因为多加了边框

解决方法：

提前设置一个边框但是为透明的

.topNavBar>nav>ul>li>a{
    font-size: 12px;
    color:rgb(204,206,209);
    text-decoration: none;
    font-weight: bold;
    border-bottom: 1px solid transparent;

}
.topNavBar>nav>ul>li>a:hover{
    border-bottom: 1px solid red;
}
复制代码

最终效果

开发者工具强制触发hover状态

触发之后左侧会出现小黄点

li没有包裹a

在a的css中使用display:block;

怎样让左右两部分对齐

先让两部分行高相同，然后让其中线对齐。

转载于:https://juejin.im/post/5c85f30751882557a57e3821