So lösen Sie das Problem der Höheninkonsistenz in CSS

So lösen Sie hohe Inkonsistenzen in CSS: 1. Fügen Sie „box-sizing: border-box;“ zur Eingabe hinzu;

Die Betriebsumgebung dieses Artikels: Windows7-System, HTML5- und CSS3-Version, Dell G3-Computer.

Wie löse ich das Höheninkonsistenzproblem in CSS?

Die Gründe und Lösungen für die inkonsistenten Eingabe- und Schaltflächenhöhen in CSS

Lassen Sie uns zunächst über die Gründe für die inkonsistenten Eingabe- und Schaltflächenhöhen sprechen

Ich bin beim Lernen auf ein so kleines Problem gestoßen Ich habe mir ein React-Projekt angesehen und im Internet einige Informationen gefunden. Nachdem ich die Informationen überprüft hatte, stellte ich fest, dass die Fehlausrichtung auf die Grundlinien der Elemente in der Zeile zurückzuführen ist unterschiedlich, daher führt es zu unterschiedlichen Höhen. Die Lösung ist auch sehr einfach: Fügen Sie einfach ↓ zu jedem Element hinzu.

    vertical-align:middle;

.target {
    vertical-align:middle;
    width: 200px;
    height: 30px;
    border: 1px solid #ccc;
    box-sizing: border-box;}.red-btn {
    vertical-align:middle;
    width: 100px;
    height: 30px;
    background: lightcoral;
    color: #fff;}

      <Fragment>
        <p className="App">
          <p className="App-header">
            <img src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/article/000/000/020/cec56ed3d20bb9d7f957189764ecf811-0.png"  class="lazy"  src={logo} className="App-logo" alt="logo" />
          </p>
          <p>
          <input className=&#39;target&#39; value={this.state.inputValue} onChange={this.handleInputChange} />
          <button className=&#39;red-btn&#39; onClick={this.handleBtnClick}>add</button>
          </p>
          <ul>
            {
              this.getTodoItems()
            }          </ul>
        </p>
      </Fragment>

Dann reden wir über den Grund, warum die Eingabehöhe zwei Pixel höher ist als die des Buttons

Button verwendet zur Höhenberechnung immer den Quirks-Modus. Im Quirks-Modus wird der Rahmen innerhalb der Breite des Elements berechnet, nicht außerhalb wie im Standardmodus (die Höhe der Schaltfläche umfasst die Höhe des Rahmens, während der Text des Textfelds nicht die Rahmenhöhe enthält.)

Die Lösung ist auch Es ist ganz einfach, fügen Sie einfach ↓

    box-sizing: border-box;

zur Eingabe oder ↓ zur Schaltfläche hinzu und fertig

    box-sizing: content-box;

Ich hoffe, es kann Ihre Zweifel klären=(:з　∠)_

Empfohlenes Lernen: „ CSS-Video-Tutorial》

Das obige ist der detaillierte Inhalt vonSo lösen Sie das Problem der Höheninkonsistenz in CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!