实战后总结1(关于css+html5)

*一. 居中

文字居中和方块居中:
display: flex;(弹性盒子) justify-content: center;(水平居中上下!!!!!) align-items: center;(垂直方向(纵轴)居中)
也可以让div居中, 知一返三
和top: 50%; left: 50%; transform: translate(-50%,-50%);一样的用法(暂时发现是这样的)
(还有一个align-content,来个字面翻译,内容居中,就会挤在一起,记住用上面的就OK)

**注意: 一定要在其父元素上进行设置,水平居中加上垂直居中,而且先是弹性盒子,如果发现没有达到效果, 那就再套上一个父元素, 只有并列的两个,再在他的父元素上加上居中样式才会居中, **

二. 自动效果

这个是很好的效果!!!
box-sizing: border-box;
(1)今天师父生动形象地在纸上用笔画出, 这次是小程序上的view,貌似有这个,它旁边就会有内边距和外边距.好像盒子div也是会有的, 加上这个的作用就是把内边距padding给消掉,
标准: (box-sizing属性用于更改用于计算元素的宽度和高度默认的CSS盒子模型，可以使用此属性来模拟不正确支持CSS盒子模型规范的游览器行为。)

三. 换行技巧,替代float

换行,替代float属性,float属性会出现好多问题,而这个就非常棒,让想让它换行的时候换行, 比如今天的四个都一列, 就先设置宽度为50%,然后再用上这个,就会变两行

display:flex;
flex-wrap: wrap;

四. 公共样式和自个样式

class="nameInfo item"

就像这样, 和在一起

啊啊啊啊啊啊, 学啊,玩有个度, 时间不就有了么

五.图片立体感

(1)盒子立体感:

 box-shadow: 10rpx 10rpx 10rpx 10rpx black;

水平, 垂直, 模糊距离, 阴影的尺寸,颜色,还有个insert貌似不经常用到, 因为哪有在里面设置阴影的

六. >的作用

div > span 只对子元素起作用对子孙元素不起作用

七. overflow:hidden

溢出隐藏, 清除浮动,解决外边距塌陷

八.min-height

min-height 属性设置元素的最小高度。
该属性值会对元素的高度设置一个最低限制。因此，元素可以比指定值高，但不能比其矮。不允许指定负值。
啥子?

九

left: 100%;
left: 200%;

十, font-family

设置字体

十一. css selector

轮番图

十二. text-align文本居中

十三. transform:translate(0px,0px),

即延X轴和延Y轴均移动0像素

十四. transition: .5s transform ease-in;

ease-in-out:css3动画执行的快慢，这里是慢进快出，表示动画执行先慢后快(啥子?)

十五. display: block;

如果不是“块”block，那么只要点到文字上时才会触发，点到 按钮

但是没点到字是不行的，但是用了 block 后，整个按钮都可以承载 a 的link操作了
十六. text-shadow
text-shadow: 5px 5px 5px #FF0000;
text-shadow: h-shadow v-shadow blur color;
必需。水平阴影的位置。允许负值。
必需。垂直阴影的位置。允许负值。
可选。模糊的距离。
可选。阴影的颜色。

<!--pages/chudan/chudan.wxml-->


<view class="content">
  <view class="nameInfo item">
    <image src="/images/touxiang.png"></image>
    <view class="name">
      <ul>
      <li>网点名称:诺亿科技</li>
      <li>网点负责人: 朱总</li>
      <li>联系号码: 12345667</li>
      <li>网点地址:null</li>
    </ul>
    </view>
  </view>
  <view class="p30">
    <view class="btnbox item">
    <view class="box " >
      <image src="/images/saoma.png"></image>
      <view>
      <view class="n1">扫码入库</view>
      <view class="n2">手机扫码入库</view></view>
    </view>
    <view class="box item">
      <image src="/images/riku.png"></image>
      <view>
      <view class="n1">入库清单</view>
      <view class="n2">已到货订单</view></view>
    </view>
    <view class="box item">
      <image src="/images/chudan.png"></image>
      <view>
      <view class="n1">扫码出库</view>
      <view class="n2">手机扫码出库</view></view>
    </view>
    <view class="box item">
      <image src="/images/lis.png"></image>
      <view>
      <view class="n1">历史记录</view>
      <view class="n2">进出库记录</view></view>
    </view>
  </view>
  </view>
  
  <view class="logout"><view class="tail">退出登录  </view></view>
</view>

.content{
  padding: 30rpx;
}
.item{
  display: flex;
  align-items: center;
  
}
.btnbox{
  flex-wrap: wrap;
  background-color: #FFFFFF;
  border-top: 1px solid #000000;
  border-left:1px solid #000000;
}
.nameInfo{
  background-color: #2997EE;
  width: 100%;
  box-sizing: border-box;
  /* height: 100rpx; */
}
.nameInfo image{
  width: 150rpx;
  height: 150rpx;

}
.name{
  border-left: 30rpx;
  color: #FFFFFF;
  height: 200rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}
.box image{
  width: 60rpx;
  height: 60rpx;
  padding-right: 20rpx;
}
.box{
  width: 50%;
  height: 200rpx;
  border-bottom: 1px solid #E7E7E7;
  border-right: 1px solid #E7E7E7;
  display: flex;
  justify-content: center;
  align-items: center;
}
.logout{
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
}
.tail{
  background-color: #339EF7;
  height: 80rpx;
  width: 80%;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5%;
  color: #ffffff ;
}
.n2{
  color:#999999 ;
}