css基础知识

css基础知识
Meet相识_bfa5

2018.02.25 阅读 313 评论 0 喜欢 0

  • 盒子模型

<!--使用弹性模型-->
display: flex;
<!--
    排列方向:
      column 垂直方向
      row 水平方向
-->
flex-direction: column;
  • 各种居中


<!--在容器内垂直居中,需作用在容器里的元素样式上-->
vertical-align: middle;
<!--使容器内的元素水平居中,需作用在容器样式上 -->
align-items: center;
<!--文字水平居中-->
text-align: center;
<!--将其设置为与容器相同高度达到垂直居中-->
line-height: 80rpx;
  • 各种距离

<!--宽高 不要用px物理像素,会在不同分辨率的机器上产生不同的效果-->
width:200rpx;
height:200rpx;
<!--距离顶部的高度 margin 顺序 上 右 下 左 (顺时针)-->
margin-top: 160rpx;
<!--内边距-->
padding-top: 10rpx; 
<!--边界 (宽度 线体 颜色)-->
border: 1px solid #405f80;
  • 文字

<!--文字大小-->
font-size: 32rpx;
<!--bold加粗-->
font-weight: bold;
<!--字体-->
font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
<!--设置圆角-->
border-radius: 5px;
<!--字体样色-->
color: #333
CSS 转载请联系作者,并注明出处。

如果觉得我的文章对您有用,请随意赞赏。您的支持将鼓励我继续创作!

春光支付宝

支付宝

春光微信

微信


喜欢  |  0

0条评论