calc（）使用记录、css换行、vertical-align: middle；基线对齐常用的几个特殊属性

i_am_a_div_日积月累_

已于 2025-07-22 17:06:16 修改

阅读量631

点赞数

CC 4.0 BY-SA版权

分类专栏： css 文章标签： css calc initial

于 2020-08-04 15:57:52 首次发布

本文链接：https://blog.csdn.net/i_am_a_div/article/details/107712576

css 专栏收录该内容

28 篇文章

订阅专栏

本文深入讲解CSS中的calc()函数用于动态计算长度值，initial关键字用于重置样式至默认，inherit关键字实现样式继承，pointer-events属性控制鼠标事件响应，以及多种居中布局技巧，包括vertical-align属性解决行内块元素对齐问题。

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

文章目录

一、calc() 函数用于动态计算长度值

calc() 函数用于动态计算长度值

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
	<head>
		<meta charset="utf-8" />
		
		<style>
			.test {
			    width: -webkit-calc(~"100vw - 50px");
  				width: -moz-calc(~"100vw - 50px");
				width: calc(~"100vw - 50px");
			    background: #eee;
			}
		</style>
	</head>
	<body>
		<div class="test">我的宽度为100% - 50px</div>
	</body>
</html>

vw代表浏览器试图窗口的观点度1% 100vw就是窗口宽度

如果不生效，原因是calc 的 - +左右需要留一个空格；在不生效，就写成
width: calc(~“100vw - 223px”);

二、initial 关键字用于设置 CSS 属性为它的默认值

initial 关键字用于设置 CSS 属性为它的默认值

用法：某些css属性样式继承了父级样式，或者是UI组件库的设置样式，需要去除。那么就可以使用initial 设置为默认样式。

property: initial;

三、inherit 关键字指定一个属性应从父元素继承它的值

inherit 关键字指定一个属性应从父元素继承它的值
继承父级的样式

color: inherit ;

四、pointer-events 属性

pointer-events 属性用于设置元素是否对鼠标事件做出反应
一般用来关闭div等元素的click、hover等事件效果

五、居中

多个子div在父中垂直居中给父元素加
结构如下:需要包裹一层div

                <div class="align_items">
                  <div>
                    <div>1</div>
                    <div>2</div>
                  </div>
                </div>

// 垂直居中
.align_items{
  display: flex;
  align-items: center;
}

// 垂直水平居中
.center{
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

// 自适应宽度 垂直水平居中
                  <div style="width:100%;height:50%;  display: flex; justify-content: center; align-items: center;">
                    <div>
                      <div style="width:fit-content;border-bottom:5px solid #007D6B;font-size: 26px;font-weight: 700;margin: auto;">
                        {{ item.value }}
                      </div>
                      <div>
                        问题策略数量
                      </div>
                    </div>
                  </div>

六、vertical-align

元素垂直对齐方式，解决两个行内块不对齐问题

vertical-align:top; // 	把元素的顶端与行中最高元素的顶端对齐

原理说明
vertical-align: middle 会让元素的中线与父元素的基线（baseline）对齐

适用于图标和文字同为 inline 或 inline-block 的场景

七、css选择器

:not使用明细

排除类名

<div class="div1">1</div>
<div class="div1 div2">2</div>
<div class="div1">3</div>

// 不包含使用使用CSS的:not()伪类选择器
.div1:not(.div2) {
    /* 这里添加你需要的样式 */
    background-color: yellow;
}


// 为每个并非 <p> 元素的元素设置颜色：
:not(p) {
    color: #ff0000;
}

    <div class="div1">1</div>
    <div class="div1 div2">2</div>
    <div class="div1 div3">3</div>
    <div class="div1">4</div>

// .div1的里面 排除掉.div2和.div3
.div1:not(.div2,.div3){
  color: red;
}

// .div1的里面 排除掉.div2且.div3
.div1:not(.div2.div3){
  color: red;
}

同时具有多类名

<div class="div1">1</div>
<div class="div1 div2">2</div>
<div class="div1">3</div>

// 找到同时拥有多个class元素.div1.div2
div.div1.div2 {
    /* 这里添加你需要的样式 */
    background-color: yellow;
}
// 或者
.div1.div2 {
    /* 这里添加你需要的样式 */
    background-color: yellow;
}