CSS常用属性记录

宝宝笑笑
130 阅读4分钟

将子元素放到父元素的内部

html代码

<div class="parent">
	<div class="son"></div>
</div>

css代码

.parent{
  position: relative;
  background-color: green;
  width: 200px;
  height: 200px;
  box-shadow:0px 0px 10px 4px blue;
  border-radius: 2px;
}
.son{
  position: absolute;
  bottom: 0px;
  right:0px;
  background-color: red;
  width: 100px;
  height: 100px;
}

边框发光效果

/* x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: 60px -16px teal;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影颜色 */
box-shadow: 10px 5px 5px black;

/* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* 插页(阴影向内) | x偏移量 | y偏移量 | 阴影颜色 */
box-shadow: inset 5em 1em gold;

/* 任意数量的阴影，以逗号分隔 */
box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* 全局关键字 */
box-shadow: inherit;
box-shadow: initial;
box-shadow: unset;

当x,y偏移都为0时，效果为四周阴影 box-shadow:0px 0px 10px 4px blue;

参考：https://developer.mozilla.org/zh-CN/docs/Web/CSS/box-shadow

圆角边框

border-radius: 2px;

用图片代替图标

html代码 <div class="iconfont"> </div>

css代码

.iconfont{
	background-image: url("图片路径，可以用~@/代替src根目录（一般webpack会自动配置~和@的别名）");
	background-position: center;//保证图标显示在中间
}

使本元素下的所有子元素居中对齐，

display: flex;
align-items: center;

开启BFC

子元素设置float后，父元素需设置overflow: hidden撑开父元素

overflow: hidden

伸缩按钮

在需要伸缩的dom容器上添加

:class="{'indicators-hide': shrink}

在伸缩按钮上添加

@click="shrink = !shrink"
:title="shrink ? '展开' : '收缩'"

.indicators-hide{
    transform: translateY(100%);
    transition: all 0.5s;
}

内容居中

text-align:center
vertical-align:middle

css-文字和图片在容器内垂直居中的简单方法

  1. 使用line-heigh使多行文字居中或图片居中

把文字包裹在一个inline-block元素（行内块元素）中vertical-align middle，外部元素line-heigh等于高度

<div class="box1">
   <span>多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中测试多行居中</span>
</div>

.box1{
    background-color: #ccc;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    line-height: 300px;
}
.box1 span{
    display: inline-block;
    line-height: 20px;
    vertical-align: middle;
}

图片居中：

<div class="box1">
  <img src="common-header-logo.png">
</div>

.box1{
    background-color: #ccc;
    width: 300px;
    height: 300px;
    margin: 100px auto;
    line-height: 300px;
    text-align: center;       font-size: 0;
}
.box1 img{
    vertical-align: middle;
}
  1. 使用flex布局实现居中（更简单，不支持IE9）
<div class="box">
　　<span>span多行居中测试<br>span多行居中测试<br>span多行居中测试</span>
　　<p>p另一个段落元素</p>
</div>

.box{
    display: flex;
    width: 500px;
    height: 300px;
    margin: 50px auto;
    border: 2px solid #000;
    align-items: center;/*副轴居中*/
}
.box span{/*span是另一个flex布局容器，它本身将自适应填满除p元素外的宽度*/
    flex: 1;
    display: flex;
    justify-content: center;/*主轴居中*/
}
  1. 使用绝对定位使图片居中
参考https://www.cnblogs.com/zczhangcui/p/6274660.html

参考：www.cnblogs.com/zczhangcui/…

CSS调试技巧

设置background:red，可清晰看出当前容器的范围

去除Cesium图标

.cesium-widget-credits {
  display: none !important;
  visibility: hide !important;
}

注意如果以上代码不生效，可能是Cesium的全局样式覆盖scoped的局部样式；解决方法是，要不然去掉scoped限制，要不然在css代码前增加/deep/,如下：

/deep/ .cesium-widget-credits {
  display: none !important;
  visibility: hide !important;
}

1、常见行内元素和块级元素

1）、行内元素

、、 、、、、、、、、、、

2）、块级元素

、、

~

、

、

、

、
avatar
文章
阅读
粉丝