常用的css代码

来源：互联网发布：大数据股票软件编辑：程序博客网时间：2024/05/17 08:22

清除浮动

单位元素清除浮动

    .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;        }

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

<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;  }}

vh和vw和vm

vh 可视窗口的高度 100vh
vw 可视窗口的宽度 100vw
vm 可视窗口的宽或者高(谁小就是谁) 100vm

阅读全文

0 0