css 积累

各种理解

vh & vw

100vh = window.innerHeight
//即浏览器内容窗口的高度，不包括地址导航书签栏等
// (包括横向滚动条)
100vw = window.innerWidth
//即浏览器内容窗口的宽度
// (包括纵向向滚动条)

input 标签 type= button 时移动端点击出现光标

原因：input 有一个私有属性 user-modify：read-write-plaintext-only
解决：

input[type="button"] {
  -webkit-user-modify: read-plaintext-only;
  -moz-user-modify: read-plaintext-only;
  -ms-user-modify: read-plaintext-only;
  -ms-user-modify: read-plaintext-only;
  user-modify: read-plaintext-only;
}

BFC(Block Formatting Context)块级格式化上下文:

想做一个三栏布局的 demo，用到了清除浮动，发现不知为什么伪类的方法不行了，于是发现了这个东西。

产生：

元素 display 属性 table-cell, flex, flow-root 等等;

元素 position 属性不为 static 或 relative;

元素 floate 属性不为 none;

元素 overflow 属性不为 visible
作用：

清除内部元素的浮动，即自身宽高将包括内部的浮动元素，自己在文档中独立成一部分；

清除 margin 重叠，当父元素和子元素同时设置了外边距且父元素没有设置 border 和 padding 时，父子元素外边距会发生重叠，BFC 会清除父子元素外边距的重叠效果。

图片文字一行展示垂直居中(此方法有时会偏差几像素，原因暂不知道，可用flex布局解决)

默认文字和图片的对其方式是图片和此行的基线对齐，即 vertical-align: base-line;，该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。 此时纵使你设置了文字的行高等于父元素的高度，文字也不会居中，因此应该设置图片的 css：vertical-align: middle;。即图片中线和父元素中线对齐。
点此查看更多 vertical-align 属性。

input 修改placeholder样式

::-webkit-input-placeholder {}  /* webkit 内核浏览器 */
:-moz-placeholder {}  /* ff4-18浏览器 */
::-moz-placeholder {}  /* ff19+浏览器 */
:-ms-input-placeholder {}  /* IE内核浏览器 */

input 修改光标颜色

-webkit-caret-color: #ccc;
caret-color: #ccc;

文本换行

<style>
    .s{
        width: 180px;
        padding: 10px;
        background-color: #46A0F0;
    }
</style>
<div>
    <div class="s">聪明聪明聪明聪明聪明聪明聪明聪明聪明聪明聪明聪明聪明聪明聪明</div>
    <div class="s">ffffffffffffffffffffffffffffffffffffffffffffffffff</div>
    <div class="s">asdf asdf asdf asdf asdf asdf fffffffffffffffffffffffff</div>
</div>

两种方法：

word-wrap: normal | break-word

word-wrap: normal

word-wrap: break-word
word-break: normal | break-all

word-break: normal

word-break: break-all

方法对比(竖排相对于横排)

	word-wrap: normal	word-wrap: break-word	word-break: normal	word-break: break-all
word-wrap: break-word	1.中文同 2.英文一个单词:不会独占一行，会换行 3.英文多个单词:一行中最后一个单词不会被截断，会换行			英文多个单词:一行中最后一个单词不会被截断
word-break: break-all		英文多个单词:一行中最后一个单词会被截断	1.中文同 2.英文一个单词:不会独占一行，会换行 3.英文多个单词:一行中最后一个单词会被截断，会换行

文字 n 行打点（不兼容ff）

// 超出部分隐藏
overflow: hidden;
// 设置为 -webkit-box
display: -webkit-box;
// 设置垂直排列方式
-webkit-box-orient: vertical;
// 行数
-webkit-line-clamp: n;

文字单行打点

<style>
    .nobr{
        display: block;
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
<nobr class="nobr">一段很长的文字一段很长的文字一段很长的文字一段很长的文字</nobr>

兼容性问题

border-radius:

只设置 input 左上左下 2px，右上右下不设置，浏览器中没问题、mx6手机浏览器没问题。iPhone5手机右上右下也会出现 2px 的圆角：解决右上右下要设置radius 为0；
calc()， translate() 方法要考虑兼容性：加上前缀：-webkit- ;(对应的前缀还有：-moz- -ms- -0-);

input[type="button"]

当设置 disabled 属性为真时，ios会默认在样式上加一属性：opacity:0.4; 这会导致 android 和 ios 两端不一致。
解决: input:disabled{opacity:1}

flex布局

ios8不支持 flex ，要加上兼容性前缀：-webkit-flex
且用各种属性的时候也要在属性前添加，例如：

-webkit-justify-content: space-between;
-webkit-flex:1;

input 内部光标高度兼容Safari浏览器

input 光标高度：
IE&Chrome&Firefox：不管该行有没有文字，光标高度与font-size大小一致。
Safari：没有设置行高时，获取到焦点后，光标光标高度和font-size大小一致
设置了行高时，获取到焦点后，光标和行高一致，输入内容后，光标高度为从行高顶部到文字底部
所以不应该在input中设置行高

IE 设置元素 z-index 但是元素仍会被底部文字或图片遮挡导致无法点击

偶遇一神奇 bug：absolute 定位的元素 A 设置 z-index: 10; 并添加一点击事件，在chrome浏览器中无问题，在ie(版本已到ie10)中，点击 A 下面的文字和图片无反应，即A的z-index并没有将其下面的元素覆盖掉，但是设置 A 背景色后，A 却会遮挡住其下面的元素，因此想到设置 A 的 css: background-color: rgba(0,0,0,0)，但是仍没有反应，因为浏览器会将这一颜色转换为 background-color: transparent; 这时我们将其改为background-color: rgba(255, 255, 255, 0); 这时 A 便将下面的元素完全覆盖，点击 A 的任意位置都能触发 A 的点击事件

ios input框光标变粗

ios 兼容性 bug，先上 bug 图片：

image.png

经查，发现复现该 bug 的条件为：

input 父元素设置定位且left或right设置百分比；
input 框自身设置 padding-left 或者 padding-right (可以设置为0)。
此时光标会变粗。图片代码如下：
html:

<div class="f">
    <input type="text" class="s">
</div>

css:

.f{
     width: 80%;
     height: 164px;
     position: fixed;
     right: 10%;
     top: 10%;
 }

.s {
    width: 100%;
    height: 35px;
    background-color: #F8F8F8;
    border: 1px solid #CCCCCC;
    border-radius: 6px;
    font-size: 17px;
    padding-left: 10px;
    box-sizing: border-box;
}

当然，知道了复现条件，修改此bug也就简单了，只要刚刚上面所提任一条件缺失，则光标恢复正常，如下图：

image.png