微信小程序 css使用技巧总结

微信小程序 css使用技巧

1:用纯CSS创建一个三角形的原理把上、左、右三条边隐藏掉（颜色设为 transparent）

1 2 3 4 5 6 7 8 9 10 11 12 13

.demo {    width :  0 ;    height :  0 ;    border-width :  20px ;    border-style :  solid ;    border-color :  transparent  transparent  red  transparent ;    }

2:设置最高高度..超过后可以滑动

1 2 3

max-height :  550 rpx;    overflow-y:  scroll ;

3: text-overflow 当属性规定当文本溢出包含元素时发生的事情

1 2 3 4

clip : 修剪文本 ellipsis : 用省略号来代表被修剪的文字 string: 使用给定的字符串来代表被修剪的文字 重点是三个同时使用：text- overflow :ellipsis;  white-space : nowrap ;  overflow : hidden ;

4:overflow: hidden当强制不换行的时候,使用overflow:hidden隐藏超过界面的部分

5: margin-bottom失效

1 2	margin- bottom 是下方的外边距，并不能让元素向下方移动，margin- top 作为上边距，把元素“推”了下去。 希望图标距离下方 30px ，那么可以在ul上设置  position : absolute ,  bottom : 30px  ，(这一句我没有加同样实现了效果)另外父元素 position : relative

6:强制不换行

1	white-space : nowrap ;

自动换行

1 2 3 4 5 6 7

p{    word-wrap: break-word;    word-break:  normal ;    }

强制英文单词断行

1 2 3 4 5

p{    word-break:break- all ;    }

感谢阅读