css问题

1、居中

场景：元素居中，margin-top：20px；

一般的做法：margin：0 auto; margin-top:20px;

更好的做法：margin：20px auto 0；

 

2、页面缩小时，border会变化

添加：box-sizing:border-box;

 

3、css transition

问题场景：发现a:hover时，颜色是渐变的，一直不明白为什么会这样，后来才看到添加了transition属性

 

4、设置背景的透明度

filter:alpha(opacity=95); /* IE */
-moz-opacity:0.95; /* Moz + FF */
opacity: 0.95; /* 支持CSS3的浏览器（FF 1.5也支持）*/

 

5、div中的英文没有自动换行：https://segmentfault.com/q/1010000005656186?_ea=849502

word-break:break-all;  会截断英文单词

word-wrap:break-word;  不会截断英文单词

 

6、word-spacing是单词之间间距的，white-space是字符是否换行显示的。不常用到，怕搞混了。

 

7、content:定义元素之前或之后放置的生成内容

这个属性挺不错的。

 

8、移动端 汉字之间需要空格，加 会有问题，使用css：letter-spacing: 10px; 会比较好些。

 

9、nth-child 与 nth-of-type 的区别

<div class='test'> 
  <ul class="demo"> 
  <p>zero</p> 
  <li>one</li> 
  <li>two</li> 
  </ul> 
</div>

$('.demo li:nth-child(2)')  // 父元素下第n个元素且这个元素为ele，若不是，则选择失败
[<li>​one​</li>​]
$('.demo li:nth-of-type(2)') // 父元素下第n个ele元素
[<li>​two​</li>​]

 

10、zoom:1

IE下清除浮动

 

11、字间距

中文：letter-spacing

英文：单词间距 word-spacing; 字母间距 letter-spacing;

 

12、

伪元素::after作用：插入内容->修饰样式

 

13、IE7下hack

css 中以 星号* 开头，表示这个css只会被IE7识别

 

14、

方法一：weui采用的方法

.test{
    border-top: 1px solid #E5E5E5;
    width: 1000px;
    margin: 21px auto;
    line-height: 23px;
    font-size: 14px;
    text-align: center;
    span{
      vertical-align: middle;
      position: relative;
      top: -12px;
      padding: 0 .55em;
      background-color: #FFFFFF;
      color: #999999;
    }
  }

方法二

.test{
    border-top: 1px solid #E5E5E5;
    width: 1000px;
    margin: 21px auto;
    line-height: 23px;
    font-size: 14px;
    text-align: center;
    span{
      vertical-align: middle;
      // position: relative;
      // top: -12px;
      padding: 0 .55em;
      background-color: #FFFFFF;
      color: #999999;
      margin-top: -25px;
      display: inline-block;
    }
  }

 

15、vertical-align:middle 无效

解决办法

display: table-cell;
vertical-align: middle;

 

16、边距折叠

应用场景：

1、子元素的margin会超出父元素

2、两个同级p标签外边距重叠

解决办法：

在父元素中添加overflow:hidden, 或者把相关元素改为display:inline-block;  

原理：

块状元素的边距会重叠，非块状的不会。

 

17、

color:red;//一般浏览器识别，字体颜色为红
color:blue \9;//ie

\0 ie8
*color:orange;//IE7识别，字体颜色为橘色
_color:black;//IE6识别，颜色为黑

 

18、input中placeholder字体的大小

input: -webkit-input-placeholder{ font-size: 20px;}　

 

19、chrome下计算后的font-size错误

解决办法

body, body *{

　　max-height: 1000000px;

}　

20、文本溢出

单行

.ellipsis(@w:auto) {
    width: @w;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
}

多行

.ellipsisLn(@line) {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: @line;
}

 

21、换行

截断文字

.text_wrap{
    word-wrap:break-word;
    word-break:break-all;
}

截断英文之后，添加-

.hyphens{
    word-wrap:break-word;
    -webkit-hyphens:auto;
    -ms-hyphens:auto;
        hyphens:auto;
}