CSS 实用技巧

1. transform 失效

transform 对行内元素无效,需设置 display 为 inline-block、block。

2. background-size 简写

background 中简写background-size属性时,需注意,background-size 属性前面需使用/分隔,position值在前,size值在后。
且,简写size时,前面需加上position属性值,不能省略。
  `background: url("image.png") 0 0/100% no-repeat;`

3. 子元素撑开父元素

块级元素默认占满行,宽度为父元素100%,若需要让一个容器的宽度由其内部元素撑开,可在该容器上增加 `display:inline-block`
例如,在一个 固定宽度的div 里显示一个长 list,可以这样

<style>
.view{ width: 400px;height:120px;background: rgb(54, 124, 54);}
.list{ display: inline-block; white-space: nowrap;background: silver;}
.item{
  width: 100px;
  height: 100px;
  background: #f3a256;
  border: 1px solid #a265f2;
  box-sizing: border-box;
  display: inline-block;
}
</style>
<div class="view">

  <!-- 以下是横向列表 -->
  <div class="list">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
  </div>

</div>


去掉 容器上的 inline-block,会变成这样:

4. 文字两端对齐

.justify {
  text-align: justify;
  text-align-last: justify;
}

5. flex 结合 overflow

flex 最大的优势在于其弹性伸缩,尤其在处理一些不定宽度的时候

  • 宽度100%的容器中,左侧固定宽度图片
  • 右侧不定宽度 按钮组
  • 中间剩余空间 显示文字,超出显示省略号
    这里,用flex就很容易办到

<style>
.block{ width: 500px; border:1px solid #e9cf5c;display: flex;justify-content: space-between;align-items: center;}
.pic{width: 80px;height: 80px;border-radius: 50%;}
.text{flex: 1;text-overflow: ellipsis;white-space: nowrap;overflow: hidden; }
.group{}
</style>

<div class="block">
  <img class="pic" src="https://img2020.cnblogs.com/blog/1367213/202008/1367213-20200804185255221-803958268.png">
  <div class="text">Flex 布局,可以简便、完整、响应式地实现各种页面布局。目前,它已经得到了所有浏览器的支持</div>
  <div class="group">
    <button>confirm</button>
    <button>cancel</button>
  </div>
</div>

用flex布局也能很容易做到占满剩余高度的需求


.parent{ display: flex; flex-direction: column; }
.pic{ height:100px }
.other-full{ flex:1; overflow: hidden; /* 此处 overflow 不可少,否则该标签会被其子元素撑开 */ }
posted @ 2020-07-28 14:59  晨の风  阅读(84)  评论(0编辑  收藏  举报