CSS小技巧

時間 2020-11-30

標籤 css html web 瀏覽器佈局 post 測試字體 flex 欄目 CSS 简体版

原文原文鏈接

lex佈局一邊固定,一遍自適應

flex佈局,一邊定寬的寬度會變化的問題
解決:flex:1 這邊設置width爲0css

<!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能夠使子元素超出父元素的那部分隱藏。html

使用僞類插入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:hiddenweb

超出兩行就顯示省略號

 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