几种常见的css问题

一、水平垂直居中；

      1）水平居中：

1. 行内元素的父元素设置text-align:center;
2. 块级元素，只有显示地设置宽度，就可以给本元素设置margin：0 auto；
3. 绝对定位加位移或者外边距
4. flex布局

5. .box{
       width: 400px;
       height: 200px;
       border: 5px solid #ddd;
       margin: 50px auto;
       position: relative;
   }
   .innerbox{
       position: absolute;
       left: 0;
       top: 0;
       right: 0;
       bottom: 0;
       width: 300px;
       height: 100px;
       margin: auto;
       border: 5px solid #f00;
   }

    

      说明： position: absolute; left: 0; right: 0; top: 0; bottom: 0;这是自动填充父元素的可用空间。然而给子元素设定了宽高，那么多余的空间，会被margin：auto平均分配。

     2）垂直居中

1. table-cell:  父元素设置{display：table-cell； vertical-align：middle}  缺点：容器的margin失效（margin不适用于表格布局），所以margin：0 auto失效，解决办法是外层多套一层div是指margin：0 auto；另一缺点是设置宽高是100%时失效，解决办法是宽度设置成很大的值。
2. 通过after占位

    .box7{
     text-align:center;
     font-size:0;
   }
   .box7 span{
     vertical-align:middle;
     display:inline-block;
     font-size:16px;
   }
   .box7:after{
     content:'';
     width:0;
     height:100%;
     display:inline-block;
     vertical-align:middle;
   } 

3. flex加margin

.box8{
    display: flex;
    text-align: center;
}
.box8 span{margin: auto;}

     此外还有几种常见的如绝对定位加位移，flex加居中等，其中使用flex布局时justify-content：center表示水平，align-item:center表示垂直方向。flex不支持ie（包括IE11）

3）以上都是复合元素的垂直居中，下面分析单纯的行内元素的垂直居中

     如以下

        <p class="center">
          <img src="@/assets/runfast.gif" />
          <a>奔跑</a>
        </p>

如果不做任何处理，那么默认的垂直居中是以baseline为基准，为了能够垂直居中，需设置img的vertical-align:middle；为了让中间的内容能够在center容器中上下居中，可以设置文字的line-height等于center的高度，这样就上下居中了，这也就给了一个启示，如果需要垂直居中一个div里比div高度小的照片，可以添加一个元素（可以是味蕾元素），让它的line-height等于div的高度

二、布局：

      1.table布局时css流行之前使用的，有很多缺点：当table加载完之前，整个table都是空的，table将数据和排版掺和在一起，使页面混乱，并且table布局修改排版十分麻烦和困难

三、浮动；

:浮动的块虽然脱离的正常的文档流，但是还会占有正常文档流的文本空间，可以看到上面第二种图，p的区域其实是顶到了img的底下的，因为float让img脱离文档流，但是p上的文字却没有顶过去，也就是说p上的一部分文字空间仍然被img占据着，所以从这里也可以看出float的脱离文档流不是完全脱离。

float和absolute都能引起父元素的高度塌陷，同样地，由于absolute是完全脱离文档流，所以这种情况的高度塌陷是没办法清除的；float引起的高度塌陷则是可清除的，我们常说的清除浮动就是指清除float带来的高度塌陷问题

四、BFC（块级格式化上下文）

       W3C对BFC的定义如下：

       “浮动元素和绝对定位元素，非块级盒子的块级容器（例如 inline-blocks, table-cells, 和 table-captions），以为overflow值不为visible的块级盒子，都会为他们的内容创建新的BFC（块级格式化上下文）”

      即如果有一股饿 HTML元素要创建BFC，则只要满足下列的任意一个或者多个条件即可：

1. float值不为none；
2. position值不是static或者relative
3. 当行内元素的display是inline-block、table-cell、flex、table-caption或者inline-flex
4. 块级元素overflow的值不是visible

     BFC几个注意点：

 常规流布局中，盒子都是垂直排列，两者之间的间距由各自的外边距所决定，但不是二者外边距之和。在css中，相邻的两个盒子（可能是兄弟关系也可能是祖先关系）的外边距可以结合成一个单独的外边距，这种合并外边距的方式被称为折叠，并且因而所结合而成的外边距称为折叠外边距。折叠的结果按以下规则计算：

1. 1. 两个相邻的外边距都是正数时，折叠结果是它们两者之间较大的值；
   2. 两个相邻的外边距都是负数时，折叠结果是两者绝对值的较大值；
   3. 两个外边距一负一正时，折叠结果是两者相加的和。

产生折叠的必备条件：margin必须是邻接的

避免外边距折叠

BFC可能造成外边距折叠，也可以利用这一点来避免这种情况。BFC产生外边距折叠要满足一个条件：两个相邻匀速要处于同一个BFC中。所以，若两个相邻元素在不同的BFC中，就能避免外边距折叠。

包含浮动时清除浮动

浮动元素是会脱离文档流的(绝对定位元素会脱离文档流)。如果一个没有高度或者height是auto的容器的子元素是浮动元素，则该容器的高度是不会被撑开的。我们通常会利用伪元素(:after或者:before)来解决这个问题。BFC能包含浮动，也能解决容器高度不会被撑开的问题。

为解决这个问题，我们还可以在容器中创建一个BFC，将这个新的BFC中的浮动元素回归到页面的常规流之中。

使用BFC避免文字环绕

浮动元素，可能会造成文字环绕的情况(Figure1)，但这并不是我们想要的布局(Figure2才是想要的)。要解决这个问题，我们可以用外边距，但也可以用BFC。

在多列布局中使用BFC

如果我们创建一个占满整个容器宽度的多列布局，在某些浏览器中最后一列有时候会掉到下一行。这可能是因为浏览器四舍五入了列宽从而所有列的总宽度会超出容器。但如果我们在多列布局中的最后一列里创建一个新的BFC，它将总是占据其他列先占位完毕后剩下的空间。

五、position；

默认值static，不会脱离文档流；

absolute : 　将对象从文档流中拖出，使用left，right，top，bottom等属性进行绝对定位。而其层叠通过css z-index属性定义。此时对象不具有边距，但仍有补白和边框
relative : 　对象不可层叠，但将依据left，right，top，bottom等属性在正常文档流中偏移位置

六、css动画

       这里主要说一下css3中的transition和animation

       1）transition（过渡）

transition: property duration timing-function delay;

        transition需要触发过渡，单纯的代码不会触发任何过渡操作，需要通过用户的行为（如点击，悬浮等）触发，可触发的方式有：:hoever :focus :checked 、  媒体查询触发、  JavaScript触发；

        不是所有的属性都能过渡，只有属性具有一个中间点值才具备过渡效果，当property的值的个数多于其它属性值（其它属性值的个数大于1）时，按照顺序取值。

常见有过渡效果的css属性有：
颜色：color background-color border-color outline-color
位置：background-position top right bottom left
长度：max-height max-width height width min-height min-width border-width margin padding outline-width font-size line-height text-indent vertical-align letter-spacing word-spacing
数值：opacity font-weight z-index
组合：transform text-shadow box-shadow clip

        transition的优点在于简单易用，但是它有几个很大的局限性：

1. transition需要事件触发，所以没法再网页加载的时候自动发生；
2. transition只能定义开始状态和结束状态，不能定义中间状态 ，即不能定义中间帧，也就是只有两个状态

       css animation就是为了解决这些问题而提出的。

七、作为DOM元素，伪元素都是在容器内进行渲染的。input无法容纳其他元素，因此它不支持伪元素。按钮也是在其他元素的支持下才由浏览器呈现出来的

八、iphoneX的底部适配

     

在项目中因为底部tab栏在iphonex的显示问题

1. 方法一

@media only screen and (width: 375px) and (min-height: 690px){
  #app {
     padding-bottom: 0.34rem;
   }
 }

2. 方法二

第一步：新增 viweport-fit 属性，使得页面内容完全覆盖整个窗口：

<meta name="viewport" content="width=device-width, viewport-fit=cover">

第二步：页面主体内容限定在安全区域内

body {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

第三步：fixed 元素的适配

• 类型一：fixed 完全吸底元素（bottom = 0）

{
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

• 类型二：fixed 非完全吸底元素（bottom ≠ 0），比如 “返回顶部”、“侧边广告” 等

{
  margin-bottom: constant(safe-area-inset-bottom);
  margin-bottom: env(safe-area-inset-bottom);