在线观看不卡亚洲电影_亚洲妓女99综合网_91青青青亚洲娱乐在线观看_日韩无码高清综合久久

鍍金池/ 問答/網(wǎng)絡(luò)安全  HTML/ ie怪異盒子模型居中問題引發(fā)的問題

ie怪異盒子模型居中問題引發(fā)的問題

這是由掘金上一個(gè)面試者一道題目的思考，要求用css實(shí)現(xiàn)，本來覺得很簡(jiǎn)單不想動(dòng)手，不過經(jīng)常覺得不動(dòng)手容易理解不好，所以試試。
要求：
A元素垂直居中
A元素距離屏幕左右各邊各10px
A元素里的文字font—size:20px,水平垂直居中
A元素的高度始終是A元素寬度的50%

－－－－
我的理解是頁(yè)面上除了A元素，大部分情況還存在其它元素，所以A元素要用一個(gè)盒子包起來以免干擾其它元素，A元素在該盒子內(nèi)滿足上述問題需求即可，

個(gè)人實(shí)現(xiàn)的完整代碼：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>盒子模型居中</title>
    <style>
        * {
            margin: 0px;
            padding: 0px;
        }
        .box {
            position: relative;
            background-color: palegoldenrod;
            width: 100%;
            box-sizing: border-box;
            padding-top: calc(25% - 5px);
            padding-bottom: calc(25% - 5px);
        }
        .Abox {
            position: absolute;
            top: 0;
            bottom: 0;
            margin: auto;
            background-color: plum;
            margin-left: 10px;
            margin-right: 10px;
            width: calc(100% - 20px);
            text-align: center;
            font-size: 20px;
        }
    </style>
</head>
<body>
    <div class="box">
        <div id="Abox" class="Abox">A元素垂直居中 A元素距離屏幕左右各邊各10px A元素里的文字font—size:20px,水平垂直居中 A元素的高度始終是A元素寬度的50% </div>
    </div>
</body>
</html>

以上實(shí)現(xiàn)可以滿足Abox在box中垂直居中，不需要提前知道box和Abox的高度。
其實(shí)覺得最不好處理是在不知道任何實(shí)際寬高的情況下，A元素的高度始終是A元素寬度的50%。

局部分析：

0.全局和背景

* {
   margin: 0px;
   padding: 0px;
}
.box {
   background-color: red;
}
.Abox {
   background-color: greenyellow;
}

1.先出來簡(jiǎn)單的垂直居中，Abox垂直居中,box用相對(duì)定位，Abox用絕對(duì)定位結(jié)合top:0;bottom:0;margin:auto即可實(shí)現(xiàn)。

.box {
     position: relative;
     width: 100%;
}

.Abox {
     position: absolute;
     top: 0;
     bottom: 0;
     margin: auto;
}

2.A元素距離屏幕左右10px,box寬度為100%,則A元素寬度要用100%減去左右兩邊共20px=>

.Abox {
     margin-left: 10px;
     margin-right: 10px;
     width: calc(100% - 20px);
}

3.box高度不知，但Abox的高度始終為Abox寬度的一半，想著利用下ie的怪異盒子模型，盒子的width=內(nèi)容的width+padding+border==>用padding去撐起盒子的width,讓內(nèi)容的width和border為0,所以題目轉(zhuǎn)換為求Abox的高，即為求一半盒子的width，1/2(100% - 20px)==>(50% - 10px)再對(duì)半即為padding-top,padding-bottom==>(25% - 5px).將Abox高套在box上撐高整個(gè)區(qū)域。

.box{
    box-sizing:border-box;
    padding-top:calc(25% - 5px);
    padding-bottom:calc(25% - 5px);
}

4.A元素里的字體font-size:20px,水平居中：

.Abox{
    font-size:20px;
    text-align:center;
}

效果圖：

圖片描述

問題來了：

Abox其實(shí)整個(gè)可視區(qū)域的高度是靠怪異盒子模型里的padding去撐起來的，也就是上面的190px實(shí)際上不是對(duì)應(yīng)css里面的height,而是padding-top和padding-bottom的疊加，內(nèi)容的height實(shí)際上為0，那么普通line-height等于height的情況就處理不了內(nèi)部文字的垂直居中了。所以這種情況應(yīng)該怎么處理呢？還是說怪異盒子模型來處理這道題的居中還是根本就不適合的？

后面完善的時(shí)候會(huì)補(bǔ)上js的做法和display:flex的做法。

回答
編輯回答
我不懂

第一次知道 padding 可以這么用，厲害厲害。

Abox 的 height 是 190px 沒錯(cuò)啊，box 的 height 才為 0。

line-height 適合處理單行文字的垂直居中，多行就不行了。

題主想用絕對(duì)定位來垂直居中，但是需要 Abox 有具體的 height 且與文本區(qū)域的 height 一樣。

然后這種情況我覺得可以給文本區(qū)域加個(gè)包含塊來解決。

利用表格樣式：

<div class="box">
  <div id="Abox" class="Abox">
    <table>
      <tbody>
        <tr>
          <td>A元素垂直居中 A元素距離屏幕左右各邊各10px A元素里的文字font—size:20px,水平垂直居中 A元素的高度始終是A元素寬度的50%</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>
table {
  height: 100%;
}

利用變換 transform：

<div class="box">
  <div id="Abox" class="Abox">
    <div class="inner">A元素垂直居中 A元素距離屏幕左右各邊各10px A元素里的文字font—size:20px,水平垂直居中 A元素的高度始終是A元素寬度的50%</div>
  </div>
</div>
.inner {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}
2017年11月30日 04:49