CSS學習、踩坑

• 背景圖片需要固定（fixed）：

iOS不支持background-attachment屬性

需要用以下hack方式，代碼：

body: before {
    content: '';
    width: 100%;
    height: 100%;
    position: fixed;
    z-index: -1;
    top: 0;
    left: 0;
    background: url("XXX.png") repeat;
    background-size: 75%
}

 

超出寬度的文本自動省略：

效果圖

代碼：

{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

需要同時加上“overflow: hidden;”和“white-space: nowrap;”

“text-overflow: ellipsis;”纔會起作用。

 

span標籤設置line-height高度錯位：

span標籤加上“display: inline-block;”屬性後，高度位置會錯位。

代碼：

 

需要在span標籤加上“overflow: hidden;”纔會起作用。

 

其他注意的細節：

1、body的height爲100%時，其scrollTop始終爲0；

2、overflow-x在部分iOS設備上會失效；

3、微信端的flex屬性，可能在span、a等內聯元素上失效，加上“display: block;”可以解決。

 

flex主要屬性

.Flex {
  flex-direction : row | row-reverse | column | column-reverse;
  flex-wrap : nowrap | wrap | wrap-reverse;
  flex-flow : <flex-direction> <flex-wrap>;
  justify-content : flex-start | flex-end | center | space-between | space-around;
  align-items : flex-start | flex-end | center | baseline | stretch;
  align-content : flex-start | flex-end | center | space-between | space-around | stretch;
}