CSS-小tips

此文仅用于记录理论学习时看到的小tips-Felix

---

> 只要是通栏的盒子（和浏览器一样宽），就不需指定宽度

---

>网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此在布局前，首先要清除下网页元素的内外边距

*{
    margin: 0;     /*清除内边距*/
    padding: 0;     /*清除外边距*/
}

---

>水平居中对齐

margin: auto;     /*水平居中对齐*/

---

>导航栏

<!-- 导航栏部分 nav -->
<div class="nav">
    <ul>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
        <li><a href="#">首页</a></li>
    </ul>
</div>

---

>让文字居中显示

.course h2{
    /* 垂直居中：即设置使line-height与height一样 */
    height: 48px;
    line-height: 48px;   /*垂直居中*/
    text-height: center; /*水平居中*/
}

---

>行内块元素取消缝隙

表单、单元格、图片都属于行内块元素
行内块元素中间会有默认的小缝隙
想要去掉中间的缝隙，可以让这两个行内块元素浮动

---

>内容栏实现

—>

即在a盒子中再放一个小盒子span,在span中放入>,再将span盒子设置右浮动即可

扩展：< ->小于   > ->大于

<ul>
      <li><a href="#">前端开发<span> &gt; </span></a></li>
      <li><a href="#">前端开发<span> &gt; </span></a></li>
</ul>

---

 >小竖线添加（巧妙法）

 给每个小a指定一个左边框 ->

扩展：此处各小a距离是用内边距撑开的 ->

---

 >一个盒子既有left属性，也有right属性，则默认会执行left属性

同理如果既有上属性也有下属性，则默认会执行上属性

---

>两部分若有相同的代码，可以用并集选择器合并相同代码，使代码更简洁

---

>鼠标经过显示遮罩

核心原理：原先半透明的黑色遮罩看不见，鼠标经过大盒子，就显示出来
遮罩的盒子不占有位置，就需要绝对定位和display搭配使用

/* 当我们鼠标经过了土豆这个盒子，就让里面的遮罩层显示出来 */
.tudou:hover .mask {
    /* 显示元素 */
    display: block;
}

---