Skip to content

Latest commit

 

History

History
231 lines (177 loc) · 5 KB

css.md

File metadata and controls

231 lines (177 loc) · 5 KB
title
css 相关

使页面的内容变成可编辑状态

-webkit-user-modify: read-write-plaintext-only;

响应式解决方案 需要配合rem来使用

document.getElementsByTagName('html')[0].style.fontSize = document.documentElement.clientWidth/10 + "px";
div{
  width:1rem;
  height:1rem;
}

方案2：写页面用320像素去写，然后动态的改变initial-scale, maximum-scale, minimum-scale,缺点是不能在安卓2.2及以下不能兼容

<meta name="viewport" content="width=320,initial-scale=1,minimum-scale=1,maximum=1">

前天面试的时候被问到，怎样能让一个容器以固定的宽高比例显示

<div class="wrapper">
  <div class="inner"></div>
</div>
.wrapper {
  height: 0;
  padding-bottom: 200px;
  position: relative;
  border: 1px solid #ddd;
}
.inner {
  position: absolute;
  top: 0;
  width: 50%;
  height: 50%;
  border: 1px dashed #f00;
}

css3实现平行四边形

实例

/*因为外层倾斜了之后，内层也会跟着倾斜，所以内层要往相反的方向倾斜*/
.wrapper {
  border: 1px solid #44a5fc;
  color: #333;
  transform: skew(-20deg);
}
.inner {
  transform: skew(20deg);
}

文字超出显示三个点

word-break:keep-all;

white-space:nowrap;

text-overflow:ellipsis;

两个span没有放在同一行，中间会有点间距

解决办法: 两个span的父元素上添加font-size: 0

1px像素边框

@media only screen and (-webkit-min-device-pixel-ratio:2) {
  .border1px:after {
    position: absolute;
    height: 1px;
    right: 0;
    width: 100%;
    content: ' ';
    transform: scaleY(0.5);
    -webkit-transform: scaleY(0.5);
  }
}

彩色图片变成黑白

.gray {
    -webkit-filter: grayscale(100%);
    -moz-filter: grayscale(100%);
    -ms-filter: grayscale(100%);
    -o-filter: grayscale(100%);

    filter: grayscale(100%);

    filter: gray;
}

安卓机上input获得焦点时，输入框会把整个页面往上挤

1.页面外层元素不能有固定定位，据对定位是可以的 2.input的高度不能用百分比，或者vh，用vw和px是可以的

input获得焦点时，让整个页面往上移动

<input @focus="move('-20%')">
move(val) {this.distance(val)}

icon图标在安卓和ios上显示不一样

.className{
  display: flex;
  align-items: center;
}

flex 新认识的属性 平分多余的空间

justify-content: space-evenly;

粘性底部布局: 在外层容器中添加

min-height: fill-available;

要在底部的元素

margin-top: -13.333333vw;
height: 13.333333vw;

去掉滚动条

::-webkit-scrollbar {
    width: 0px;
    height: 1px;
}
::-webkit-scrollbar-thumb {
    border-radius: 5px;
    -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    background: rgba(0, 0, 0, 0.2);
}

http-equiv属性详解(转)

[http-equiv属性详解(转)] (http://kinglyhum.iteye.com/blog/827807)

改变placeholder的默认颜色

<style>
    input::-webkit-input-placeholder{
        color:red;
    }
    input::-moz-placeholder{   /* Mozilla Firefox 19+ */
        color:red;
    }
    input:-moz-placeholder{    /* Mozilla Firefox 4 to 18 */
        color:red;
    }
    input:-ms-input-placeholder{  /* Internet Explorer 10-11 */ 
        color:red;
    }
</style>

使用css的sticky实现吸顶效果

  1. 设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
  2. 缺点：兼容性

兼容性

文字两端对齐

<div class="flex-jus">
  <!-- 中文后面要跟一个空格 后面要有一个空的span -->
  两 端 对 齐<span></span>
</div>
.flex-jus {
  text-align: justify;
  width: 300px;
  height: 100px;
  line-height: 100px;
}
.flex-jus span {
  display: inline-block;
  padding-left: 100%;
}

什么是BFC

BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域，只有Block-level box参与， 它规定了内部的Block-level Box如何布局，并且与这个区域外部毫不相干。

如何创建一个BFC（或者如何触发一个BFC）

  1. float属性不为none
  2. position为absolute或fixed
  3. display为inline-block, table-cell, table-caption, flex, inline-flex
  4. overflow不为visible