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

1. CSS小技巧
2. CSS 小技巧
3. css 小技巧
4. css小技巧
5. Css 小技巧
6. HTML + CSS 小技巧
7. CSS样式小技巧
8. css 使用小技巧
9. css小技巧积累
10. css的几个小技巧
更多相关文章...
• Markdown 高级技巧 - Markdown 教程
• jQuery Mobile CSS 类 - jQuery Mobile 教程
• Docker容器实战(一) - 封神Server端技术
• 三篇文章了解 TiDB 技术内幕——说存储

CSS小技巧

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

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

边框

表格内容等分

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

修改placeholder样式

css计算

css选择器not

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

CSS生成加号(+)

特殊的样式名

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

英文数字换行

清除浮动

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

让图片填满整个盒子

不使用Flex两端分散对齐

select框内容左右对齐

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

经典两列布局

Position:fixed 固定定位

横向滚动

超出两行就显示省略号

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

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

不使用flex布局的两端对齐

去除滚动条

1px border线

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