css样式实战总结

最新推荐文章于 2023-02-23 14:12:23 发布

原创最新推荐文章于 2023-02-23 14:12:23 发布 · 226 阅读

CC 4.0 BY-SA版权

Z-index: 用于将一个元素放另一个元素之后，但是用于postion之上才行。

position 规定元素的定位类型：

值	含义
absolute	绝对对位，相对于他的父元素位置。（可通过top等定位）
fixed	绝对定位，相对于浏览器窗口进行定位，不是对于他的父元素。（可通过top等定位）
relative	相对定位，相对于其正常位置定位
static	默认值，无定位（忽略top等定位）
inherit	从父元素继承position属性值

top定位例如：

.class{
	position: absolute;
	top: 5%;
}

display:none: 表示不显示，但是可以调用，我们可以利用调取Id方法来实现此功能

比如我们用获取本地图片：但是我们不能让他人看到，我们直接用此属性在HTML代码中国：

 <!-- 获取本地图片 -->
  <input style="margin-top: 15%; display:none;"  #file type="file" id="file" ng2FileSelect  (change)="selectedFileOnChanged(file)">


然后我们在ts方法中获取到此id，然后执行click事件代替点击按钮。
 const mybutton = document.getElementById('file');
          mybutton.click();

样式穿透

前缀添加： /deep/ 此可以穿透掉ionic封装的代码
前缀添加：>>> 此是替代的/deep/
某样式后面添加：！important 强制使用此样式

/deep/ .tankuang{
  // .alert-message {
  //   max-width: 15%;
  //   max-height: 15%;
  // }
  /deep/ .alert-button-group{
    justify-content: center;
  }
  /deep/ .alert-button-inner{
    font-size: 20px !important;
  }
  
}