超链接样式、盒子模型、定位

Zerbrochen

已于 2022-03-17 22:42:22 修改

阅读量1.3k

点赞数 4

文章标签： css3 css html

于 2022-03-15 21:16:00 首次发布

本文链接：https://blog.csdn.net/weixin_46229315/article/details/123502754

版权

本文详细介绍了CSS3中的超链接伪类，包括link、visited、hover和active，强调了它们的正确顺序设置。接着讲解了hover伪类的广泛应用和与transition属性结合的动画效果。此外，还深入探讨了盒子模型，包括标准盒模型和IE盒模型，以及宽高、边框、内边距和外边距的设置。最后，文章阐述了定位布局，如relative、absolute、fixed和static定位，以及如何通过position属性和top、right、bottom、left来控制元素位置。

摘要由CSDN通过智能技术生成

超链接样式

超链接伪类简介

超链接共有伪类，分别是：

link：未访问的超链接（没被点击过。

visited：已被访问过的超链接（被点过。

hover：鼠标悬停。

active：选定的链接，被点住，松开后就不适用该样式。

深入了解超链接伪类

注意：这四个伪类必须按照一定的顺序设置，不然会意外，因为link和active是常态样式，而hover和active是瞬时属性。

顺序：link–visited–hover-active

当一个超链接处于未激活的状态下，它是适用于link伪类的，若此时将鼠标悬停（hover）于它或按下不松开（active），会同时触发link与hover（active）标签。

这时候，如果你的link标签在hover标签之后，那么位置靠后的link伪类的样式会覆盖在前面的hover共有属性，如以下错误示范。

<style>
    a:hover {
    
        color: #167;
        font-size: 26px;
    }
    a:link {
    
        font-size: 10px;
    }
</style>
<body>
    <a href="">aaaaa</a>
</body>

当鼠标悬停时，link和hover同时被激活，link会覆盖hover，但是只覆盖交集。所以结果是：

<style>
    a {
    
        color: #167;/*hover伪类特有的，不会被删掉*/
        font-size: 10px; /*被link伪类的元素覆盖了*/
    }
</style>
<body>
    <a href="">aaaaa</a>
</body>

深入了解hover

hover，是鼠标悬停在某个HTML元素上的时候，该元素的样式，是一个伪类。它不仅仅适用于超链接标签。

何为伪类？

伪类是选择器的一种，它用于选择处于特定状态的元素。————MDN

伪类常用冒号链接，如div:hover

何为伪元素？

伪元素以类似方式表现，不过表现得是像你往标记文本中加入全新的HTML元素一样。

Hover伪类与transition属性结合实用，可以实现漂亮的效果

如下代码就可以实现一个200x200紫色的div盒子被鼠标悬浮时，会以ease-in的动画曲线，经过0.5s渐变成300x300的黑色div盒子

<style>
    .box:hover {
    
        width: 300px;
        height: 300px;
        background: #000;
        transition: ease-in 0.5s;
    }
    
    .box {
    
        transition: ease-in 0.5s;
        width