前端-常用样式设计（自用）

网页常遇布局样式问题解决

两个div并列同一行

需求：两个div块级元素在同一行水平显示

说明：两种方法来实现

          1、两个div全部设置成display:inline-block;

          2、前一个div设置成为：float:left   后一个div设置为float：right

<div>
    <div class="header">
      <div class="left">hello</div>
      <div class="right">
        <img class="img" mode="aspectFit" src="/static/icon/me.png">
      </div>
    </div>
 
.header{
  width:100%;
  line-height: 20px;
  .left{
    display: inline-block;
    font-size: 16px;
  }
  .right{
    float:right;
    right:20px;
    width: 20px;
    height:20px;
    .img{
      width:100%;
      height:100%;
    }
  }
}

label 文字右对齐，input左对齐

 让label成为行内块元素，给其宽度，然后让文字居右即可

.block{
        width: 400px;
        display: block;
        margin:5px 0;
    }
.center{
        text-align: center;
}
label {
        display: inline-block;
        width: 100px;
        text-align: right;
}
input,textarea{
        vertical-align: top;
}

最大宽度设置

style="width: 100%;"

 常用转义字符例如&的含义

&amp中的amp就是英文ampersand的缩写,该词的意思是&这个符号
& 是 HTML 中 & 的表示方法.即在html中用&表示&符号

 CSS常用样式网站

Bootstrap v3 中文文档 · Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。 | Bootstrap 中文网Bootstrap 是最受欢迎的 HTML、CSS 和 JavaScript 框架，用于开发响应式布局、移动设备优先的 WEB 项目。https://v3.bootcss.com/

网页设计常用组件库网站 

Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN