博客

• 当图片的某元素是一张图片，可不设置宽高，将样式设置为如下，这样图片就会撑起来页面，避免一些宽高在不同机型不协调的问题。

display: block;
width: 100%;

• 需要条件判断显示不同的图片时，可以给标签的src绑定一个方法，该方法根据条件return它的URL

• 使用v-if 来决定dom元素是否渲染

• 多使用伪元素来减少div标签，常用的有before，和after

• 常用的设置有水平垂直居中，外边距，内边距，圆角，宽高，字体，字高，对齐方式，是否加粗

//字体
font-size:
line-height:
font-weight:
text-align:
//外边距，内边距
padding:/-top/-bottom/-right/-left
margin:/-top/-bottom/-right/-left
//圆角
border-radius：
//垂直水平居中
margin:0 auto;
top:50%
left:50%
transform:translate(-50%,-50%)

…

• 图片作为背景的样式设置，有时候图片的标签优先级很高，可以用div标签替代

	//图片样式
width: 3.65rem;
height: 2.29rem;
display: block;
background-size: 100% auto;
background-position: center center;
background-repeat: no-repeat;
margin: 0 auto;
position: relative;

• 列表是需要用v-for循环来写样式，渲染就需要后端传来的数据
  
  注意循环渲染的li排列，若一块内容很多，可以在外面先用一个box封装起来，display:block
  
  再对里面的元素进行排列。

//文字居中，溢出以…呈现

//文字样式
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;

• 分割线常用样式，这是伪元素写法,width 和left改变它的位置

::before{ content: "";
    display: block;
    position: absolute;
    top: 0;
    left: 10%;
    width: 160%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    border-bottom: 1px solid #e1e1e1;
    -webkit-transform-origin: left top;
    transform-origin: left top;
    -webkit-transform: scale(0.5);
    transform: scale(0.5);
    }

• 在web上设置字体垂直居中，在手机端看到的样式不同，这是因为手机端字体行高偏小，不同的手机会有自己的行高，可以在开发的时候增加line-height 来实现手机端的垂直居中。