CSS-03

最新推荐文章于 2024-09-14 17:04:32 发布

小香猪儿

最新推荐文章于 2024-09-14 17:04:32 发布

阅读量61

点赞数

分类专栏： CSS入门与进阶文章标签： css Powered by 金山文档

本文链接：https://blog.csdn.net/m0_62029916/article/details/129538363

版权

CSS入门与进阶专栏收录该内容

3 篇文章 0 订阅

订阅专栏

CSS-03

伪类元素（lvha）

link 标签直接显示的状态

visited 元素被访问后的状态

hover 鼠标悬浮在标签上的状态

active 元素在鼠标按下时的状态

    <style>
        /*鼠标悬浮在标签上的状态*/
        div:hover, a:hover {
            color: green;
        }
        /*元素在鼠标按下时的状态*/
        div:active, a:active {
            color: yellow;
        }
/*元素被访问后的状态*/
        div:active, a:visited {
            color: yellow;
        }

    </style>

伪元素（::before、::after）

::before

::after

盒子模型

由margin、boder、padding、content组成

（外边距、边框、内边距、内容）

盒子模型的可视区尺寸 = border + padding + content

边框实现三角形

    <style>
         div{
            /* 宽高0 */
            width: 0;
            height: 0;
            /* 边框10px实线 */
            border: 10px solid;
            /* 透明边框颜色 */
            border-color: transparent;
            /* 左边框颜色 */
            border-left-color: #28f65f;
         }
    </style>
</head>
<body>
    <div></div>
</body>

外边距margin

使块元素居中妙用：margin：0px auto

margin

margin-top

margin-right

margin-bottom

margin-left

    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: pink;
            
            /* 上、右、下、左 */
            margin: 10px 20px 15px 25px;
            /* 上、左右、下 */
            margin: 10px 15px 20px;
            /* 上下、左右 */
            margin: 10px 15px;
            /* 上右下左一样 */
            margin: 10px;
        }
    </style>