1.属性
*字体
*大小
*布局：float
2.选择器:class类选择器
3.取值与单位
* px
*color
*rpx ：自动根据屏幕大小进行适配
4.盒子模型
*margin距离外边的距离
*padding距离内部的距离
*border盒子的边框
5.弹性盒子模型
<templete>
<view>
<text class="(定义名称,例如)name">Hello Master</text>
</view>
<view>
<view class="box">
<text>deep dark fantasy</text>
</view>
<view class="box1">
<text>deep 盒子模型 </text>
</view>
<view class="box2">
<view class="sonbox1">
<text class="b1">盒子1 </text>
</view>
<view class="sonbox2"></view>
<view class="sonbox3"></view>
</view>
</view>
</templete>
<style> //可以直接使用.name调取选择器,里面可以声明颜色等属性
.name{
colour : #ff0000;
font-size : 20px;
}
.box{
float: left;//横向摆放
width : 100px;
height : 100px;
background : #ff0000;
}
.box1{
wideth : 100px;
height : 100px;
background : #007AFF;
margin-left : 10px ; //边框距离页面左边的距离px
margin-top : 10px ;
padding-left : 10px ; //内部字离边框左侧10px
padding-top : 10px
border : 5px solid #4CD964; //边框为5px，且为绿色
}
.box2{
display : flex; //使表格横过来
}
.sonbox1{
display : flex ; //使字横过来
flex : 1 ;//平分,此时宽度不生效了
width : 100px;
height : 100px;
background : #ff0000;
margin : 5px ;//上下左右5px
justify-content : centre; //字水平方向居中
align-items : centre ; //垂直方向居中
}
.b1{
}
</style>
标签：盒子,基础,100px,边框,语法,5px,10px,margin,CSS From： https://www.cnblogs.com/liujy2233/p/16913269.html