web前端基础-03-CSS代码汇

CSS常用代码示例

1. 让div的大小占满整个屏幕

*{
    margin: 0;
    padding: 0;
}
html,body{
    height: 100%;
    width: 100%;
}

1. bootstrap 常用的几个代码

   row 类会让元素在一行显示 一个row有12个格子 col后的数字 指的是所占格子数

   .col-xs- 超小屏幕 手机 (<768px)

   .col-sm- 小屏幕 平板 (≥768px)

   .col-md- 中等屏幕 桌面显示器 (≥992px)

   .col-lg- 大屏幕 大桌面显示器 (≥1200px)

<div class="row">
        <div class="hidden-xs col-sm-6 col-md-6 col-lg-6 ">
          <a href="">
              <img src="" />
              <span class=" "></span>
          </a>
      </div>
      <div class="col-xs-6 hidden-sm hidden-md hidden-lg ">
          <a href=" ">
              <img src="" />
              <span class=" "></span>
          </a>
      </div>
 </div>

3.交换两个div位置

.change{
    display: flex;
    flex-direction: row-reverse;
}
.div1, .div2{
    height:auto
}

<div class="row change">
    <div class="div1"> div1 </div>
    <div class="div2"> div2 </div>
</div>

1. 简单左右晃动效果

.animate_text {
    -webkit-animation: move 2s infinite;
    animation: move 2s infinite;
    position: absolute;
    left: 30%;
    bottom: -5px;
    right: auto;
 }
 @keyframes move{
     0%{margin-left:0;}
     50%{margin-left:50px;}
     100%{margin-left:0;}
 }
 @-webkit-keyframes move{
     0%{margin-left:0;}
     50%{margin-left:50px;}
     100%{margin-left:0;}
 }

5.flex布局大法（pc端表现优秀 mobile有些不兼容）

通常是父元素指定：display:flex 布局，子元素配置flex 特性来布局，个人PC端常用如下：

flex-direction属性决定主轴的方向（即盒子的排列方向）。

.box {
 flex-direction: row | row-reverse | column | column-reverse;
}
依次对应： 横向左起排列 | 横向右起排列 | 竖向上到下 | 竖向下到上

justify-content属性定义了项目在主轴上的对齐方式。

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}
依次对应： 左对齐 | 右对齐 | 居中 | 两端对齐，盒子之间的间隔都相等 | 每个盒子两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items属性定义项目在交叉轴上如何对齐。

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}
依次对应： 起点对齐 | 终点对齐 | 中点对齐 | 与交叉轴两端对齐，轴线之间的间隔平均分布。 |
每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。| 轴线占满整个交叉轴。

flex-wrap属性定义，如果一条轴线排不下，如何换行

box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}
依次对应： 默认不换行 | 换行，第一行在上方。|换行，第一行在下方。

更多可访问 菜鸟教程指引

个人博客停止维护，部分博客转载到这

• 彼特城
• 2020-08-20 11:03:23

本作品采用《CC 协议》，转载必须注明作者和本文链接