CSS基础语法

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>