calc（）使用记录、css换行、常用的几个特殊属性

i_am_a_div_日积月累_

已于 2023-10-16 17:57:01 修改

阅读量486

点赞数

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

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

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

版权

css 专栏收录该内容

19 篇文章 1 订阅

订阅专栏

一、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 属性为它的默认值

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

property: initial;

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

继承父级的样式

color: inherit ;

四、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>