css简易设置html<div></div>布局

html:

<div class="div1" style="vertical-align: top;">div块1</div>//style="vertical-align: top;"设置三个同行显示的div块顶部对齐
<div v-bind:class="{'div2':true,'div3':false}" style="vertical-align: top;">div块2</div>//v-bind:class="{'div2':true,'div3':false}"可实现动态切换class
<div class="div3" style="vertical-align: top;">div块3</div>
<div>//css设置li前没有标志
<ul class="ulStyle">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<div>//css画一个简易方框
 <div ><Icon class="redBox"></Icon>红色方框图标</div>
 <div ><Icon class="whiteBox"></Icon>白色方框图标</div>
</div>

div常用css设置:

.div1{
 background-color: #808080;/*设置div块的背景颜色*/
 color: aliceblue;/*设置div块内的文字颜色*/
 width: 63%;/*百分比设置div块的宽度*/
 height: 35px;/*设置div块的高度*/
 margin-left: 3px;/*设置div块距左边的宽度*/
 margin-top: 3px;/*设置div块距上边的宽度*/
 display: inline-block;/*设置三个div块同行显示*/
 align-items: center;/*设置div块内的文字居中*/
 border: #000000 solid thin;/*给div块画一条黑色细线的边界*/
 overflow-x:scroll;/*div块水平滚动条，需先设置width*/
 overflow-y: scroll;/*div块竖直滚动条，需先设置height*/
}
.div2{
 display: inline-block;/*设置三个div块同行显示*/
}
.div3{
 display: inline-block;/*设置三个div块同行显示*/
}
.ulStyle{
 list-style-type: none;/*设置li元素显示前无标志（没有默认的圆点)*/
}
.redBox{/*红色方框*/
  width: 16px;/*方框宽*/
  height: 16px;/*方框长*/
  background: #ff0000;/*方框颜色*/
}
.whiteBox{/*白色方框*/
  width: 16px;
  height: 16px;
  background: aliceblue;
}
}