CSS学习总结

最新推荐文章于 2024-04-13 18:25:23 发布

置顶永不消失的彩虹

最新推荐文章于 2024-04-13 18:25:23 发布

阅读量162

点赞数

分类专栏： CSS 文章标签： CSS

本文链接：https://blog.csdn.net/xlszzck/article/details/86002293

版权

CSS 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

背景图片需要固定（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;
}