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>    

posted @ 2022-11-21 21:12  平凡的柳先生  阅读(32)  评论(0)    收藏  举报