css中的伪元素、基线对齐、盒子模型

最新推荐文章于 2024-06-23 16:52:27 发布

yoghurt&girl

最新推荐文章于 2024-06-23 16:52:27 发布

阅读量1.8k

点赞数

分类专栏： css web前端开发文章标签： css html 前端

本文链接：https://blog.csdn.net/ywforever/article/details/125026823

版权

本文详细介绍了CSS中的伪元素，如`:before`、`:after`、`:first-line`和`:first-letter`的使用。接着讨论了基线对齐的概念，展示了如何通过`vertical-align`属性调整元素对齐。最后，深入探讨了盒子模型，包括外边距`margin`、边框`border`和内边距`padding`的设置及其对布局的影响。

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

一、伪元素

说明：伪类元素使用两个冒号（：：）而不是一个冒号，目的是为区分伪类和伪元素，大多数浏览器都支持这两种方式。

：：before——在当前元素前面插入一些元素，激活使用content：“”；

：：after——在当前元素后面插入一些元素，激活使用content：“”；

：：first-line——在元素的第一行文字使用CSS样式

：：first-letter——在元素的首字母或首文字使用CSS样式

：：section——当鼠标选择某些内容的时候出现的样式

特点是属于行内元素，需要注意的是除了section必须使用双冒号，其余都可以用单冒号。

   <style type="text/css">
        div {
            width: 300px;
            height: 300px;
            background-color: antiquewhite;
        }
        
        .one::before {
            content: "写在最前面，可以单独设置样式";
            color: pink;
            font-size: large;
        }
        
        .one::after {
            content: "必须用centent激活使用，这是在后面加";
            color: blueviolet;
        }
        /* 设置第一行，直接设置样式 */
        
        .one::first-line {
            color: blue;
        }
        /* 元素首字母或首文字使用css样式 */
        
        p::first-letter {
            font-size: 20px;
        }
        /* 鼠标选择某些内容出现的样式 */
        
        .one::selection {
            background-color: green;
            font-style: italic;
        }
    </style>
</head>

<body>
    <div>
        <p class="one">今天讲的是伪元素不是伪类哟！！！</p>
        <p>再来一段文字方便测试为首字母或首文字使用样式效果</p>
    </div>
</body>

效果图

最低0.47元/天解锁文章

yoghurt&girl

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
css中的伪元素、基线对齐、盒子模型

目录一、伪元素二、基线对齐三、盒子模型1、外边距margin2、边框（border）一、伪元素说明：伪类元素使用两个冒号（：：）而不是一个冒号，目的是为区分伪类和伪元素，大多数浏览器都支持这两种方式。：：before——在当前元素前面插入一些元素，激活使用content：“”；：：after——在当前元素后面插入一些元素，激活使用content：“”；：：first-line——在元素的第一行文字使用CSS样式：：first-letter——在元素的首.
复制链接

扫一扫