常用的css代码

最新推荐文章于 2024-09-09 11:03:57 发布

kingov

最新推荐文章于 2024-09-09 11:03:57 发布

阅读量377

点赞数

分类专栏： 1.4 css 文章标签： css

本文链接：https://blog.csdn.net/kingov/article/details/78385096

版权

1.4 css 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

清除浮动

单位元素清除浮动

    .clearfix:after{
　　　　　　content:"";//设置内容为空
　　　　　　height:0;//高度为0
　　　　　　line-height:0;//行高为0
　　　　　　display:block;//将文本转为块级元素
　　　　　　visibility:hidden;//将元素隐藏
　　　　　　clear:both//清除浮动
　　　}

　　　.clearfix{
　　　　　　zoom:1;为了兼容IE
　　　}

双伪元素清除浮动

　　　　.clearfix:before,.clearfix:after {
              content: "";
              display: block;
              clear: both;
        }
        .clearfix {
              zoom: 1;
        }

文字两端对齐

text-align:justify;

设定文字在某行末尾以省略号代替超出文字

<div class="box">
  文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述文字描述
</div>

<style>
/* 目前没有浏览器支持 box-orient 属性。
    Firefox 支持替代的 -moz-box-orient 属性。
    Safari、Opera 以及 Chrome 支持替代的 -webkit-box-orient 属性。 */
    .box {
      width: 200px;
      height: 80px;
      border: 1px solid blue;
      overflow: hidden;
      display: -webkit-box;
      -webkit-line-clamp: 2;  /*限制在一个块元素显示的文本的行数*/
      -webkit-box-orient: vertical;  /*规定框的子元素应该被水平或垂直排列*/
      white-space: normal;   /*超出文字会自动换行, 不能是no-warp*/
      word-wrap:break-word;  /*强制换行, 因为如果全是字母或数组会认为是一个单词而不换行*/
    }
</style>

文字超出以省略号代替

自适应多列

<div class="box">
  <div class="one"></div>
  <div class="two">
    <div class="two1"></div>
    <div class="two1"></div>
    <div class="two1"></div>
    <div class="two1"></div>
    <div class="two1"></div>
    <div class="two1"></div>
  </div>
</div>

<style>
  .box {
    height: 200px;
    border:1px solid blue;
    display: flex;
  }
  .box .one {
    width: 100px;
    height: 100%;
    background-color: red;
  }
  .box .two {
    height: 100%;
    flex: 1;
    background-color: rgb(228, 148, 148);
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    align-content: space-around;
  }
  .two1 {
    width: 60px;
    height: 60px;
    flex: 0 0 26%;
    background-color: gray;
  }

</style>

这里写图片描述

横向滑动

<view class="swip">
  <view class="sp"></view>
  <view class="sp"></view>
  <view class="sp"></view>
  <view class="sp"></view>
  <view class="sp"></view>
  <view class="sp"></view>
  <view class="sp"></view>
  <view class="sp"></view>
  <view class="sp"></view>
  <view class="sp"></view>
  <view class="sp"></view>
  <view class="sp"></view>
</view>

.swip {
  width: 750rpx;
  height: 110rpx;
  border:1px solid gray;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  .sp {
    width: 200rpx;
    height: 100rpx;
    background-color: red;
    margin-right:20rpx;
    display: inline-block;

  }
}

这里写图片描述

动画

.carAnimate {
  animation: carSize 0.3s 1;
}
@keyframes carSize {
  0% {
    transform: scale(1);
    font-size: 26rpx;
  }
  40% {
    transform: scale(1.2);
  }
  60% {
    transform: scale(1.2);
  }
  100% {
    transform: scale(1);
    font-size: 26rpx;
  }
}