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

最新推荐文章于 2025-04-26 15:39:36 发布

yoghurt&girl

最新推荐文章于 2025-04-26 15:39:36 发布

阅读量2k

点赞数

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

本文链接：https://blog.youkuaiyun.com/ywforever/article/details/125026823

版权

web前端开发同时被 2 个专栏收录

25 篇文章

订阅专栏

css

9 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、伪元素

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

：：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>

效果图：

二、基线对齐

语法：vertical-align:属性值

常用属性值：top、text-top、middle、baseline（默认）、text-bottom、bottom

默认情况下图片顶对齐而文字底对齐，通过设置css属性可以使得图片与文字对齐。

举例说明：

效果图:若为middle，则文本会往下移

三、盒子模型

简述：页面布局要学习三大核心，盒子模型、浮动和定位，盒子模型可以很好的帮助我们布局页面。盒子模型的组成：

所谓盒子模型：就是把HTML页面中的布局元素看做是一个矩形的盒子，也就是一个盛装内容的容器。CSS盒子模型本质上是一个盒子，封装周围的HTML元素，包括边框、外边距、内边距和实际内容【border边框、content内容、padding内边距、外边距margin】

1、外边距margin

语法：margin：length |auto 设置盒子与盒子之间的距离、间隙

length	由浮点数字和单位标识符组成的长度值\|百分数（基于父元素的高度）
auto	取计算机值（用于居中）

注意：计算机默认的外边距为8px

margin：20px	属性值只有一个，表示上下左右均是这个数值
margin：20px 10px	值为两个时，上下为第一个值，左右第二个值
margin：10px 20px 10px	表示上、左右、下
margin：10px 20px 30px 10px	表示上、右、下、左

也可以单独设置边距：

margin-top：单独设置上外边距；

margin-bottom：单独设置下外边距；

margin-left：单独设置左外边距；

margin-right：单独设置右外边距；

auto属性值我们一般用来给我们的盒子横向居中，这是由于我们的显示屏都不一样，所以我们很难的给具体值使其居中，所以可以利用auto使其居中，需要注意的是，auto作用于块级元素上，对于行内元素和行内块元素都无法实现。

margin：0 auto //是哪块元素居中与页面

  .one {
            background-color: aqua;
            width: 300px;
            height: 300px;
            margin: 0 auto;
        }
        
        .two {
            width: 100px;
            height: 100px;
            background-color: blueviolet;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div class="one">
        <div class="two">2</div>
    </div>
</body>

效果展示：

在这我们会发现一个问题，我设置的明明是第二个盒子距离第一个盒子上下左右为20像素，但是我的父元素盒子和我一起下来了，这就是典型的外边距重合，那我们应该如何解决外边距重合呢？

2、边框（border）

border用于设置元素的边框，它不仅仅只限于在表格中使用，使用边框前我们来了解下边框的组成部分：边框宽度（粗细）、边框样式、边框颜色

语法格式：border：border-width border-style border-color

border属性说明
border-width	定义边框粗细，单位PX（四个边也是和margin一样）
border-style	边框的样式（可按照上右下左的顺序进行设置）
border-color	边框颜色（同理）

对于border-style有以下几种样式;