CSS常用属性记录

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

html代码

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

css代码

.parent{
  position: relative;
  background-color: green;
   200px;
  height: 200px;
  box-shadow:0px 0px 10px 4px blue;
  border-radius: 2px;
}
.son{
  position: absolute;
  bottom: 0px;
  right:0px;
  background-color: red;
   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;
     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;
     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;
     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）、块级元素

[ 、、

~]Link 1

、 、 、 、 、 、 [ 、、 、 2、display的block、inline和inline-block的区别 1）、block 会独占一行，多个元素会另起一行，可以width、height、margin和padding属性 2）、inline 元素不会独占一行，设置width、height属性无效。但可以设置水平方向的margin和padding属性，不可以设置垂直方向的padding和margin 3）、inline-block 将对象设置为inline对象，但对象的内容作为block对象呈现，之后的内联对象会被排列在同一行内 3、行内元素和块级元素的区别 1）、行内元素 ①：设置宽高无效 ②：对margin设置左右方向有效，而上下无效，padding设置都无效 ③：不会自动换行 2）、块级元素 ①：可以设置宽高 ②：设置margin和padding都有效 ③：可以自动换行 ④：多个块状，默认排列从上到下 作者：Fairy安北 链接：www.jianshu.com/p/efa063e15… css基线与行高 从上到下分别是：顶线、中线、基线、底线（对应vertical-align属性中的top、middle、baseline、bottom） 行高、行距与半行距 行高、行距与半行距： www.jianshu.com/p/59f31a170…]Link 1