Skip to main content

12 posts tagged with "css"

View All Tags

z-index不生效？

· 2 min read

需求场景​

考虑以下场景，A 元素包含 B，C 元素，B 元素包含 B1 元素，C 元素包含 C1 元素。为什么 C1 元素的 z-index 明明很高，却始终在 B1 元素下面？

  <div id="A" style="position: relative;">
        <div id="B">
            <div id="B1" style="position: absolute;z-index:1000;">B1</div>
        </div>
        <div id="C" style="position: relative;z-index: 0;">
            <div id="C1" style="position: absolute;z-index:9000;">C1</div>
        </div>
    </div>

然后我把代码稍作改动，为什么 C1 又在 B1 上面了呢？

   <div id="A" style="position: relative;">
        <div id="B">
            <div id="B1" style="position: absolute;z-index:1000;">B1</div>
        </div>
        <div id="C" style="position: relative;z-index:auto;">
            <div id="C1" style="position: absolute;z-index:9000;">C1</div>
        </div>
   </div>

解决方案​

z-index 的使用涉及到一个层叠上下文的概念。首先只有 position 元素的值为非 static 时，z-index 才会生效，才是有意义的。每一个值为非 static 的 position 元素都会创建一个层叠上下文环境。在我们的示例中就是 A 层叠环境里包含 B1 层叠环境和 C 层叠环境，C 层叠环境包含 C1 层叠环境。这里就可以发现 A 到 C1 有 2 层而 A 到 B1 只有 1 层，所以 C1 的 z-index 无论多大都不会盖住 B1。

那么问题来了，为什么第二种情况把 z-index=0 改成 auto 就变了呢？因为 auto 不会创建层叠上下文环境！！！是个特殊值

进阶思考​

其实能创建层叠上下文的不止 z-index，还有 transform 等

详细参考:https://zhuanlan.zhihu.com/p/340371083

清除input type="number"默认箭头

· One min read

需求场景​

在移动端，部分手机的input当type为number时会出现上下箭头。

解决方案​

input[type='number'] {
  -moz-appearance: textfield;
}
input[type='number']::-webkit-inner-spin-button,
input[type='number']::-webkit-outer-spin-button {
  -webkit-appearance: none;
}

360浏览器rem不生效

· One min read

需求场景​

最近有个需求，需要做pc端大屏页面，一般pc端都采用定宽的设计方式，这样兼容各个屏幕比较容易，直接用px即可。因为项目需要投大屏，所以采用了流式布局，考虑到需要适配各个分辨率的屏幕，故采用了rem单位。可奇怪的是，在360和qq浏览器中rem并不生效

出现原因​

因为我在定义rem的大小时，为了方便计算。将1rem=10px，而360浏览器中字体最小单位为12px，所以1rem至少等于12px才会生效。

解决方案​

定义1rem=20px

清除ios系统h5页面input,textarea disabled默认样式

· One min read

需求场景​

textarea在设置了disable之后在安卓手机上显示正常，但ios系统手机上就会显示边框，背景为半透明，字体颜色为灰色。

解决方案​

input:disabled, textarea:diabled {
    -webkit-opacity: 1;
    -webkit-text-fill-color: #333;
    color: #333;
}

movable-area遮挡住页面元素，导致无法触发点击事件

· One min read

需求场景​

最近在开发小程序时，遇到如下需求：之前固定在右侧的展开折叠按钮会挡住计数器，所以希望可以手动调整按钮的位置，使其可以上下拖动。看了下官方文档，movable-area，movable-view 是最快的解决方式。可当开发完成时，发现 movable-area 的区域实际也是覆盖在计数器上面的，导致计数器无法点击。

解决方案​

movable-area {
  pointer-events: none;
}
movable-view {
  pointer-events: auto;
}

前端基础知识—block,inline,inline-block的区别

· 2 min read

前沿​

一个html页面，是由多种html标签如div,p,a,img,input等构成。每个标签都是一个元素。除了flex和table，block,inline,inline-block是最为常用的显示方式。

block块状元素​

块状元素最明显的特征就是会换行。多个块状元素会多行显示。块状元素可以设置宽高
(如div,header,article,section,footer,p）

inline内联元素​

和块状元素相对应不会换行。多个内联元素会显示在同一行。内联元素不能设置宽高
(如a,span,i,b,strong,em)

inline-block内联块元素​

是block和inline的折衷方案。其本质是inline，具有inline的不换行特点，但又具有block的可以设置宽高的特点。
(如img,input,textarea)

float和absolute,fixed​

除了display属性会更改元素的显示方式，float和position也会更改元素的显示方式，而且优先级更高。float和absolute，fixed都会导致元素脱离文档流，不占有具体空间，元素都会变成类似inline-block的展现形式。

前端css布局详解

· 4 min read

前言​

css布局实际上是前端的入门教程，所谓的前端切图仔主要工作也就是在写 html，css布局。虽然css布局是前端的入门教程，可实际工作中可以发现，并没有几个人掌握了css布局的基本技巧，往往都是margin，padding一把梭搞定，写得慢不说还给之后维护的人看的懵逼。

主旨​

本文旨在帮助前端基础不好的同学或一些需要写界面的后台朋友熟悉常规的css布局，能够又快又好的完成前端切图工作。另一方面，本文也可以作为css布局的速查笔记。

常规布局方式​

实际上常用的css布局总结来说可以分为3类。两端对齐，等分，居中。基本上一个页面都可以拆分成这3种布局的组合方式。

两端对齐​

  • 方式一：float（兼容性最好）
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.fl{
float:left;
}
.fr{
float:right;
}
 <div class="clearfix">
        <div class="fl"></div>
        <div class="fr"></div>
 </div>
  • 方式二：flex（最简单）
.flex-justify {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
 <div class="flex-justify">
        <div class="l"></div>
        <div class="r"></div>
 </div>

等分布局(兼容最好，可以多行)​

  • 方式一：float
.clearfix:before,
.clearfix:after {
  display: table;
  content: '';
}
.clearfix:after {
  clear: both;
}
.list-wrapper {
  margin-left: -20px;(负的间距值)
}
.list-box{
  float: left;
  box-sizing:border-box;
  width: 33.3333%; (100% / 等分个数)
  margin-bottom: 20px;
  padding-left: 20px;(间距值)
}
  <div class="list-wrapper clearfix">
        <div class="list-box">
            <div class="list"></div>
        </div>
        <div class="list-box">
            <div class="list"></div>
        </div>
        <div class="list-box">
            <div class="list"></div>
        </div>
  </div>
  • 方式二：flex（最简单，仅单行）
.flex-justify {
  display: flex;
  align-items: center;
}
.list{
  width:33.3333%;(间距可以通过宽度控制)
}
<div class="flex-justify">
        <div class="list"></div>
        <div class="list"></div>
        <div class="list"></div>
</div>

居中布局（涉及块状元素，内联元素，固定宽高，不定宽高）​

  • 水平居中

text-align(内联元素)

 .text-center{
        text-align: center;
 }
 .item{
        display: inline-block;
 }
  <div class="text-center">
        <div class="item"></div>
  </div>

margin(块状元素)

.item{
  width:200px;
  margin:0 auto;
}
<div class="item"></div>

position

.parent{
        position: relative;
}
.child{
        position: absolute;
        left: 50%;
        width: 200px; 
        margin-left: -100px; //(负宽度的一半)
}
 <div class="parent">
        <div class="child"></div>
 </div>

flex

.flex-h-center {
  display: flex;
  justify-content: center;
}
 <div class="flex-h-center">
        <div class="child"></div>
 </div>
  • 垂直居中
    1.vertical-align
 .parent{
      height:200px;
    background-color: green;
  }
 .parent:after{
      display:inline-block;
      width:0;
      height:100%;
      vertical-align:middle;
      content:'';
  }
  .parent .child{
      display:inline-block;
      width: 200px;
      vertical-align:middle;
    }
 <div class="parent">
        <div class="child"></div>
 </div>

2.transform

.parent{
   position: relative;
   height: 200px;
}
        
.parent .child {
   position: absolute;
   left: 50%;
   transform: translate(-50%, 0);
}
 <div class="parent">
        <div class="child"></div>
 </div>

3.position

.parent{
        position: relative;
}
.child{
        position: absolute;
        top: 50%;
        height: 200px;
        margin-top: -100px;
}
<div class="parent">
        <div class="child"></div>
</div>

4.flex

.flex-v-center {
  display: flex;
  align-items: center;
}
 <div class="flex-v-center">
        <div class="child"></div>
 </div>
  • 水平垂直居中
    1.position(固定宽高)
.parent{
  position:relative;
}
.child{
  position:absolute;
  left:50%;
  top:50%;
  width:200px;
  height:200px;
  margin-left:-100px;
  margin-top:-100px;
}
 <div class="parent">
        <div class="child"></div>
 </div>

2.flex(不定宽高)

.flex-center{
  display: flex;
  align-items: center;
}
<div class="flex-center">
        <div class="child"></div>
</div>

3.transform(不定宽高)

.parent{
   position:relative;
} 
.child{
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}