CSS教程,小白编程-小程序开发教程,APP开发教程,网站开发教程,H5开发教程,3天快速开发

CSS教程

本文主要学习 flex 弹性布局，以便后面制作APP、小程序，作者给出的都是最实用常用的css标签，不论是在css还是js，写完都是用小写分号 ; 隔开，一定要注意

若对CSS、Flex弹性布局完全不熟悉的请先在网上找教程了解一下，菜鸟教程CSS篇，菜鸟教程Flex篇

常用css认识:

width-----表示宽度，值为数字+单位或百分比，写法固定如 width:100px、width:60%、width:auto(自适应宽度)、max-width(限制最大宽度)

height-----表示高度，值为数字+单位或百分比，写法固定如 height:100px、height:60%、height:auto(自适应高度)、max-height(限制最大高度)

padding(内边距),margin(外边距)-----同上下左右的距离，两者写法相同如 padding:10px 15px 10px 15px \ padding:10px 15px

font-size、font-weight、color-----字体大小、粗细、颜色，写法固定如 font-size:12px、font-weight:700、color:#ff0033

border---边框，border-radius ---圆角，background---背景颜色，写法固定如 border:1px solid #000、border-top(bottom\left\right):1px solid #000、border-radius:5px\10%、background:#ff0033

以上这些常用css单位均为 px\rem\rpx(rpx为APP或小程序单位)等，百分比值不带单位

flex 弹性布局主要用到以下几个:

1.justify-content:flex-start | flex-end | center | space-between | space-around-----横向上的位置

2.align-items:flex-start | flex-end | center | baseline | stretch-----纵向上的位置

3.flex-wrap:wrap | nowrap-----是否允许换行

4.flex-direction:row | column;-----内容横向/纵向排列

5.flex:1;-----自动占满剩余宽度或高度，如两个标签放在同一排，一个使用固定宽度width，一个使用flex:1;将自占满剩余宽度

*某些时候width和padding或margin同时使用时，可能会造成宽度溢出加上：box-sizing: border-box 可解决

一般情况下css与html标签(div/p/span/ul等)分开写方便管理，也可以直接在标签上写css样式如:< div style="font-size:16px;">我是呀 < /div>，下面为分开写法css需单独放在style标签里，css命名不要重复，格式为点+名称，引用的时候 class="名称"

<div class="b11">
     
    <img src="/yansi/wap/static/imgs/yf_02.jpg"style="width:100%;max-height:200px;">
    <div class="b13">超值连衣裙出裙出售</div>
    <div class="b14">
        <span style="font-size:15px;color:#ff0033;">￥280元</span><span style="color:#999;">已售 20件</span>
    </div>
  </div>
<div class="b11">
     
    <img src="/yansi/wap/static/imgs/yf_01.png"style="width:100%;max-height:200px;">
    <div class="b13">超值连衣裙出售超值超超值连衣裙出售值连衣裙出售超值连衣裙出售连衣超值连衣裙出售裙出售</div>
    <div class="b14">
        <span style="font-size:15px;color:#ff0033;">￥28元</span><span style="color:#999;">已售 200件</span>
    </div>
  </div>

</div>
</div>

CSS标签很多，需多练多学