CSS小技巧 - 技术经验

CSS小技巧

来源：cnblogs　　作者：人生之外的路途　　时间：2020/12/8 8:47:18　　对本文有异议

lex布局一边固定,一遍自适应

flex布局,一边定宽的宽度会变化的问题
解决:flex:1 这边设置width为0

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>flex超出省略问题</title>
	<style>
		.flex{
			display: flex;
		}
		.left{
			flex:1 1 auto;
			background: red;
		}
		.left p{
			width: 100%;
			text-overflow:ellipsis;
			overflow:hidden;
			white-space:nowrap;
		}
		.right{
			background:green;
			width: 200px;
		}
	</style>
</head>
	<body>
		<div class="flex">
		  	<div class="left">
				<p>我在左边，自适应布局我在左边，自适应布局我在左边，自适应布局我在左边，自适应布局</p></div>
		  	<div class="right">我在右边，定宽</div>
		</div>
		<div class="flex">
		  	<div class="left" style="width:0">
				<p>我在左边，自适应布局我在左边，自适应布局我在左边，自适应布局我在左边，自适应布局</p>
			</div>
			<div class="right">我在右边，定宽</div>
		</div>	
	</body>
</html>

左边固定，右边自适应，带响应式

.dialog-box {
  display: flex;
  flex-wrap: wrap;
  .people-info-show {
    max-width: 360px;
    margin: 0 auto 20px;
  }
  .right-timeline {
    flex: 1;
    padding-left: 40px;
  }
  @media screen and (max-width: 375px) {
    .right-timeline {
      padding-left: 0px;
    }
  }
}

边框

//虚线
border:1px dashed  #FF6366;
//实线
border:1px solid  #FF6366;

表格内容等分

<!DOCTYPE>
  <html>
  <head>
  <meta charset="utf-8" />
  <title>设置表格单元格等宽</title>
  <style type="text/css">
   /*
      使字体在所有设备上都达到最佳的显示
    */
  html { 
    -moz-osx-font-smoothing: grayscale; 
    -webkit-font-smoothing: antialiased; 
    text-rendering: optimizeLegibility; 
  } 
   /*
    表格单元格等宽
   */
    .calendar { table-layout: fixed; }
  </style>
</head>
<body>
<table width="100%" border="1" class="calendar">
    <tr>
        <td>我在测试我在测试我在测试我在测试我在测试我在测试我在测试我在测试我在测试</td>
        <td>122222222222222</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
        <td>4</td>
        <td>5</td>
    </tr>
  </table>
</body>
</html>

CSS取消浏览器默认输入框样式

input,button,select,textarea{
    outline:none
}

修改placeholder样式

&::-webkit-input-placeholder {
    color: #C2CFDD;
}

css计算

width: calc(100% - 138px);

css选择器not

:not(p){ 
    background-color: #ff0000;
}

CSS 三角形正方形（不依赖伪元素）

<!doctype html>
<html lang="en"> 
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
        content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .test {
        width: 0;
        height: 0;
        border-width: 100px;
        border-style: solid;
        border-color: #FFCCCC #0099CC #996699 #339933;
    }
</style>
<body>
    <div class="test">
    </div>·
</body>  
</html>

CSS生成加号(+)

//html
<div></div>
//css
html,
body {
    width: 100%;
    height: 100%;
    display: flex;
}
div {
    width: 200px;
    height: 200px;
    background-color: #fc3;
    box-sizing: border-box;
    margin: auto;
}
div {
    outline: 20px solid #000;
    outline-offset: 10px;
    animation: move 8s infinite linear;
}
@keyframes move {
    50% {
        outline-offset: -118px;
    }
    100% {
        outline-offset: -118px;
    }
}

特殊的样式名

:focus{
    //聚集焦点的时候
}
:blur{
    //失去焦点
}
:hover{
    //经过的时候
}

超出部分不换行,显示省略号?

overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
<div  v-if="item.is_display">
    <p class="topic-content"  v-html="item.content1"></p>
</div>
<div class="topic-container" v-else>
    <div class="topic-img" v-show="Boolean(item.image)"
         :style="{backgroundImage:'url('+item.image+')'}"
         alt=""></div>
    <p class="topic-content" :class="{'img-active':Boolean(item.image)}" v-html="item.content"></p>
</div>
.topic-container {
    .topic-img {
        display: inline-block;
        overflow: hidden;
        width: 140px;
        height: 80px;
        background-size: cover;
        background-repeat: no-repeat;
        background-position: center;
        margin-right: 20px;
    }
    .topic-content {
        display: inline-block;
        vertical-align: top;
        &.img-active {
            width: 80%;
        }
    }
}

英文数字换行

p{
    white-space: normal;
    word-wrap:break-word;
    word-break:break-all; 
}

清除浮动

使用  overflow: hidden; 清除浮动时,不能定高
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        #div1{
            width: 200px;
            /*height: 50px;*/
            overflow: hidden;
            padding: 10px 20px 20px 10px;
            background: red;
            margin: 0 auto;
        }
        #div2{
            width: 100px;
            height: 100px;
            background: green;
            float: left;
        }
    </style>
</head>
<body>
    <div id="div1" >
    <div id="div2" ></div>
    </div>
</body>
</html>

总结：当父元素的高度是靠子元素撑开的时候，子元素浮动时，
则在父元素使用overflow: hidden可以清除浮动，使得父元素的高度依旧是靠子元素撑开。
当父元素自身设置了height属性值，
则在父元素使用overflow: hidden可以使子元素超出父元素的那部分隐藏。

使用伪类插入li里面的横线

//给父元素相对定位
li:after{
      content: '';                 /*CSS伪类用法*/
      position: absolute;         /*定位背景横线的位置*/
      top: 97%;
	  left: 20%;
      background: #fff;       /*宽和高做出来的背景横线*/
      width: 60%;
      height: .1rem;
}

让图片填满整个盒子

background-size: 100% 100%;

不使用Flex两端分散对齐

 text-align:justify;
 text-align-last:justify;

select框内容左右对齐

text-align:left;
text-align-last:left;

顶部固定,超出部分不换行,显示横向

.firstCate{
      width: 100%;
      white-space: nowrap;
      overflow-x: scroll;
      overflow-y:hidden;
      position: fixed;
      top: 0;
      left: 0;
      li{
        display: inline-block;
		//这里不能加浮动
      }
  }

经典两列布局

<div class="all-product">
    <ul>
        <li v-for="(item, key) in goodsList" :key="key" @click.native="goinfo(item.id)">
        <div class="img">
             <img slot="img" :src="item.goodsimage">
         </div>
         <p slot="title">{{item.goods_title}}</p>
         <p slot="title">产品编号 : {{item.serial}}</p>
        </li>
      </ul>
 </div>
.all-product {
  ul {
    padding: 0.2rem;
    li {
      height: 2.7rem;
      width: 49%;
      float: left;
      margin-bottom: 0.2rem;
      .img {
        height: 2rem;
        width: 100%;
        overflow: hidden;
        display: flex;
        align-items: center;
        img {
          width: 100%;
        }
      }
    }
    li:nth-child(2n + 1) {
      margin-right: 2%;
    }
  }
}

Position:fixed 固定定位

//水平和垂直方向都居中   //定位的时候用
transform: translate(-50%,-50%)

横向滚动

<div class="pic">
        <ul id="category-head">
          <li><img src="../../assets/partBuild1.png" /></li>
          <li><img src="../../assets/partBuild2.png" /></li>
          <li><img src="../../assets/partBuild3.png"/></li>
          <li><img src="../../assets/partBuild1.png"/></li>
          <li><img src="../../assets/partBuild2.png"/></li>
        </ul>
      </div>
     #category-head {
        width: 100%;
        display: inline;
        white-space: nowrap; /*规定段落中的文本不进行换行*/
        overflow-x: scroll; /*水平方向，超出部分添加滚动机制*/
        float: left; /*一定要设置左侧浮动*/
        overflow-y: hidden; /*竖直方向，超出部分隐藏*/
      }
      #category-head li {
        margin-top: 10px;
        display: inline-block; /*既可以水平排列，又可以设置宽高和边距*/
      }

如果不想出现滚动条,外面可以再套一层,,设置高度,然后overflow:hidden

超出两行就显示省略号

 overflow: hidden;
 text-overflow: ellipsis;
 display: -webkit-box;
 -webkit-box-orient: vertical;
 -webkit-line-clamp: 2;

打包-webkit-box-orient: vertical;丢失问题

/*! autoprefixer: off */
 -webkit-box-orient: vertical;
 /* autoprefixer: on */

参考地址

高度和宽度相等(flex布局对其有影响)

width:100%
height:0  
padding-top:100% / padding-bottom:100%  
//实例:
.image-header {
        position: relative;
        width: 100%;
        height: 0;
        padding-top: 100%;
        img {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
}

不使用flex布局的两端对齐

//html
<div class="box"> 
  <span>1</span> 
  <span>2</span> 
  <span>3</span> 
  <span>4</span> 
  <span>5</span> 
</div> 
//css
* { 
  margin: 0; 
  padding: 0; 
} 
html,body { 
  width: 100%; 
  height: 100%; 
} 
.box { 
  width: 100%; 
  height: 100%; 
  /* 设置元素两端对齐 */ 
  text-align: justify; 
} 
/* 这里的伪元素一定要加上，不然span元素不能两端对齐 */ 
.box:after { 
  content: ""; 
  display: inline-block; 
  overflow: hidden; 
  width: 100%; 
} 
.box span { 
  width: 50px; 
  height: 50px; 
  /* 设置盒子为行内块 */ 
  display: inline-block; 
  background-color: skyblue; 
  /* 设置盒子内元素水平居中 */ 
  text-align: center; 
  /* 设置盒子内容垂直居中 */ 
  line-height: 50px; 
}

去除滚动条

//谷歌适用
::-webkit-scrollbar{
    display:none;
}
//添加属性
/*隐藏滚动条，当IE下溢出，仍然可以滚动*/
-ms-overflow-style:none;
/*火狐下隐藏滚动条*/
overflow:-moz-scrollbars-none;

1px border线

border-bottom-1px($color) 
    position: relative
    &::after
        display: block
        position: absolute
        left: 0
        bottom: 0
        width: 100%
        border-top: 1px solid $color    
        content: ' '
border-top-1px($color)
    position: relative
    &::before
        display: block
        position: absolute
        left: 0
        top: 0
        width: 100%
        border-top: 1px solid $color    
        content: ' '
bg-image($url)
    background-image: url($url + "@2x.png")
    @media ( -webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3)
        background-image: url($url + "@3x.png")
border-none()
    &:after
        display: none