20190715——前端大集合

element的el-row与el-col

<el-row>
  <el-col :span="24"><div class="grid-content bg-purple-dark"></div></el-col>
</el-row>
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
</el-row>
<el-row>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="6"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>
<el-row>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple"></div></el-col>
  <el-col :span="4"><div class="grid-content bg-purple-light"></div></el-col>
</el-row>

<style>
  .el-row {
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .bg-purple-dark {
    background: #99a9bf;
  }
  .bg-purple {
    background: #d3dce6;
  }
  .bg-purple-light {
    background: #e5e9f2;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
    background-color: #f9fafc;
  }
</style>

其中

 border-radius: 4px; 
 向 div 元素添加圆角边框

max-height 这个属性会阻止 height 属性的设置值变得比 max-height 更大。
max-height 属性用来设置给定元素的最大高度. 如果height 属性设置的高度比该属性设置的高度还大,则height 属性会失效.

p
  {
  height:100px;
  width:100px;
  }

npm i element-ui -S
import ElementUI from 'element-ui'
Vue.use(ElementUI);

css框模型
css框模型（Box Model）规定了元素框处理元素内容，内边距，外边距，边框和外边距的方式。

padding 内边距 属性的值接受长度值或者百分比，但不允许使用负值

h1 {padding: 10px;}

也可以按照上，右，下，左的顺序分别设置各边的内边距，各边均可以使用不同的单位或百分比的值。

h1 {padding: 10px 0.25em 2ex 20%;}

css中的边框
元素的边框（border）是围绕元素内容和内边距的一条或者多条线
css border 属性允许你规定元素边框的样式、宽度 或者颜色

css边框，我们可以创建效果出色的边框，并且可以应用于任何元素。
每个边框都有三个方面:宽度、样式、以及颜色

css的外边距
margin与内边距一样

text-align
属性规定元素中的文本的水平对齐方式。

line-height

color色彩与icon图标和Button按钮

可以自己进行选取

可以通过 prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标，也可以通过 slot 来放置图标。