css实际问题

前言:

最近在写小程序,很多样式都是一个个百度下来的,总结一下
遇到的样式问题

1.line-height 属性

使用百分比设置行高:

image.png

基于当前字体尺寸的百分比行间距。

image.png

image.png

1.颜色进行渐变显示

background:linear-gradient(to right,#070E26,#390067)

2.div高度固定 文字可以滑动加载

overFlow-y: scroll

3.有3个div 希望

A B

C

这样展示

父组件

flex-wrap: wrap

wrap 规定灵活的项目在必要的时候拆行或拆列。
nowrap 默认值。规定灵活的项目不拆行或不拆列

子组件

.textCon > view {
  width: 50%;
  flex: 0 0 50%;
  text-align: left;
  padding: 8rpx 8rpx;
}

flex: 0 0 50%;
flex是flex-grow,flex-shrink,flex-basis3个属性结合在一起的缩写形式,后两个属性可选写
flex-grow
表示当子元素的空间小于父元素的空间时,如何处理剩余空间,
默认值为0表示不占有剩余空间;
当子元素都设置为1时表示平均分配剩余空间;
当一个子元素为2其余子元素为1时为2的子元素占据的剩余空间比其他子元素多一倍;
当一个子元素为1其余子元素为0,为1的子元素占据全局剩余空间
felx-shrink
表示当子元素的空间大于父元素的空间时,如何缩小子元素,默认值为1当所有子元素都设置为1时所有子元素都会等比例缩小,当一个子元素为0其余子元素为1是表示为0的子元素不缩小,其余元素缩小
flex-basis
用于设置项目占据的主轴空间,设置为auto表示项目占据的主轴大小等于项目的实际内容大小,设置为固定值表示项目占据的主轴大小等于固定值

ps实验证明 不加flex也是可以的

结尾

后面还会继续补充的~~