html布局中邊框的問題解決

寫響應式布局時，發(fā)現(xiàn)border所占據(jù)空間的問題讓人很頭疼。下面舉例說說遇到的問題和解決方法！

上例中的盒子box1和box2，因為寬度和剛好等于父元素盒子寬度，可以完美的排在同一行。

但我們給box2加一個邊框，就會發(fā)現(xiàn)，box2的寬度增加了，box3被擠到了下面一行去。雖然我們只是添加了1px的邊框，但它對布局的影響確實很大。在我們需要使用偽類顯示邊框時，突然出現(xiàn)的邊框常常會對我們的布局造成影響，嚴重拉低體驗。我嘗試了兩個方法消除邊框影響。一是outline代替border來展示邊框

以上的代碼，box2四周也會出現(xiàn)邊框，并且不會布局。但也會看到，box2部分邊的邊框線會被遮住而看不到，所以這種方法有局限性，不是很推薦，用在四周沒有緊貼的其他元素的情況下比較好。第二種方法是給box2設(shè)置屬性box-sizing：border-box;

可以看到，這次既顯示了邊框線，有沒有影響我們的布局，除了降低了內(nèi)容區(qū)大小，這個方法接近完美。box-sizing是css3的屬性，它有三個值，content-box，border-box，inherit。content-box，寬度和高度分別應用到元素的內(nèi)容框，在寬度和高度之外繪制元素的內(nèi)邊距和邊框。這也是box-sizing的默認值。border-box，為元素設(shè)定的寬度和高度決定了元素的邊框盒，就是說，為元素指定的任何內(nèi)邊距和邊框都將在已設(shè)定的寬度和高度內(nèi)進行繪制，通過從已設(shè)定的寬度和高度分別減去邊框和內(nèi)邊距才能得到內(nèi)容的寬度和高度。inherit，規(guī)定應從父元素繼承 box-sizing 屬性的值。

模型是CSS布局的基礎(chǔ)，理解它的每個組成部分對于創(chuàng)建整潔、響應式的網(wǎng)頁至關(guān)重要。本文將深入探討盒模型的四個主要組成部分：邊距（Margin）、邊框（Border）、填充（Padding）和內(nèi)容（Content），并解釋它們?nèi)绾喂餐ぷ鱽韯?chuàng)建網(wǎng)頁布局。

盒模型概述

在CSS中，盒模型是一種用于設(shè)計和布局的概念模型，它將HTML元素視為一個盒子。這個盒子包括了元素的內(nèi)容、內(nèi)邊距、邊框和外邊距。理解盒模型對于控制元素的大小和在頁面上的位置至關(guān)重要。

盒模型的結(jié)構(gòu)

+-------------------------------+
|           Margin              |
|  +-------------------------+  |
|  |        Border           |  |
|  |  +-------------------+  |  |
|  |  |     Padding       |  |  |
|  |  |  +-------------+  |  |  |
|  |  |  |   Content   |  |  |  |
|  |  |  +-------------+  |  |  |
|  |  +-------------------+  |  |
|  +-------------------------+  |
+-------------------------------+

每個盒子從里到外包括：

內(nèi)容（Content）：這是盒子中的實際內(nèi)容，包括文本、圖片或其他媒體。
內(nèi)邊距（Padding）：內(nèi)容區(qū)域周圍的空間，內(nèi)邊距是透明的。
邊框（Border）：圍繞內(nèi)邊距和內(nèi)容的線框，可以設(shè)置大小、樣式和顏色。
外邊距（Margin）：盒子外圍的空間，用來隔開相鄰的盒子。

邊距（Margin）

邊距是盒子外部的空間，它決定了元素之間的間隔。邊距是透明的，不可見，不會被背景顏色或背景圖片覆蓋。

/* 單邊邊距設(shè)置 */
.element {
  margin-top: 10px;    /* 上邊距 */
  margin-right: 15px;  /* 右邊距 */
  margin-bottom: 10px; /* 下邊距 */
  margin-left: 15px;   /* 左邊距 */
}

/* 簡寫形式 */
.element {
  margin: 10px 15px;   /* 上下邊距 | 左右邊距 */
}

邊距可以用來創(chuàng)建元素之間的空間，或者將元素與頁面邊緣分開。當兩個元素的垂直邊距相遇時，它們會合并成一個邊距，這個現(xiàn)象稱為邊距折疊。

邊框（Border）

邊框是盒子的一個可視化組件，圍繞著內(nèi)邊距和內(nèi)容。邊框的樣式、寬度和顏色都可以自定義。

.element {
  border-style: solid; /* 邊框樣式 */
  border-width: 2px;  /* 邊框?qū)挾?*/
  border-color: black; /* 邊框顏色 */
}

/* 簡寫形式 */
.element {
  border: 2px solid black;
}

邊框?qū)τ谕怀鲲@示元素或分隔內(nèi)容非常有用。你還可以只為邊框的一邊或幾邊設(shè)置樣式。

填充（Padding）

填充是圍繞內(nèi)容內(nèi)部的空間，它可以增加內(nèi)容和邊框之間的距離。與邊距不同，填充區(qū)域會被背景顏色或背景圖片覆蓋。

.element {
  padding-top: 5px;    /* 上填充 */
  padding-right: 10px;  /* 右填充 */
  padding-bottom: 5px; /* 下填充 */
  padding-left: 10px;   /* 左填充 */
}

/* 簡寫形式 */
.element {
  padding: 5px 10px;   /* 上下填充 | 左右填充 */
}

填充對于控制元素內(nèi)部的空白區(qū)域非常有用，它可以幫助改善內(nèi)容的可讀性。

內(nèi)容（Content）

內(nèi)容是盒子中的文字、圖片或其他媒體。內(nèi)容的大小可以通過設(shè)置width和height屬性來控制，但實際可見區(qū)域的大小還會受到內(nèi)邊距和邊框的影響。

.element {
  width: 200px;
  height: 150px;
}

內(nèi)容區(qū)域是設(shè)計和布局的核心，所有的文本和媒體都在這里顯示。

示例

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Margin, Border, Padding Example</title>
<style>
  body {
    font-family: 'Arial', sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 20px;
  }

  .container {
    max-width: 800px;
    margin: auto;
    background-color: white;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .header {
    background-color: #007bff;
    color: white;
    padding: 20px;
    text-align: center;
  }

  .content {
    padding: 20px;
    border: 1px solid #ddd;
    margin: 20px;
  }

  .box {
    background-color: #007bff;
    color: white;
    padding: 10px;
    margin: 10px;
    border: 3px solid #0056b3;
    text-align: center;
  }

  .footer {
    background-color: #333;
    color: white;
    padding: 10px;
    text-align: center;
  }
</style>
</head>
<body>

<div class="container">
  <div class="header">
    <h1>Welcome to My Page</h1>
  </div>

  <div class="content">
    <h2>Understanding CSS Box Model</h2>
    <p>The CSS box model is essentially a box that wraps around every HTML element. It consists of margins, borders, padding, and the actual content. This model allows us to create space between elements and style them effectively.</p>
    
    <div class="box">Content Box</div>
  </div>

  <div class="footer">
    Footer Content
  </div>
</div>

</body>
</html>

總結(jié)

理解盒模型是前端開發(fā)的基礎(chǔ)，它允許我們精確控制元素的布局和間距。通過恰當?shù)厥褂眠吘唷⑦吙颉⑻畛浜蛢?nèi)容，我們可以創(chuàng)建出既美觀又功能強大的網(wǎng)頁設(shè)計。隨著響應式設(shè)計的興起，現(xiàn)代CSS框架已經(jīng)將盒模型的概念整合進其核心，使得跨設(shè)備布局變得更加一致和簡單。

在日常開發(fā)中，經(jīng)常使用開發(fā)者工具來檢查和調(diào)試盒模型的各個部分，確保我們的樣式表現(xiàn)按照預期工作。掌握盒模型，你將能夠更加自信地處理網(wǎng)頁布局的挑戰(zhàn)。

置邊框最常使用border，比如這樣：

border: 1px dashed #333;

這是最常規(guī)的方法了，今天再來說說其他兩種方法，

outline方式
background方式

outline方法

這也算是一種比較常規(guī)的方法了，

outline: 1px solid;

但需要注意的是，outline是在容器的最外部，與border的渲染還是有點區(qū)別的，同時對比下：

border: 1px dashed #333;
outline: 1px solid;

外部實線是outline，內(nèi)部虛線是border，為了一致，可以設(shè)置outline-offset往內(nèi)縮一點：

outline-offset: -1px;

background方法

這是本文的重點，我也是剛get到此項技能，之前一直不知道background居然如此強大，直接上代碼：

background: linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px, #ffffff;

這里我們只設(shè)置了上面看，而且還是虛線的，做一說明這種方式的強大，再把其他邊框補上去：

background: 
		linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 0px/9px 1px,
    linear-gradient(90deg, #333 50%, transparent 0) repeat-x 0 100%/9px 1px,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 0 0/1px 9px,
    linear-gradient(0deg, #333 50%, transparent 0) repeat-y 100% 0px/1px 9px,
    #ffffff;

可見，使用background非常的靈活，邊框的位置可以任意調(diào)整。

現(xiàn)在我們已經(jīng)掌握這幾方式，但本文的重點是上面這種，我們現(xiàn)在來動手操練下：

漸變邊框

background: linear-gradient(90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 0/100% 5px
    ,
    linear-gradient(-90deg, #29bdd9 0%, #276ace 100%) repeat-x 0 100%/100% 4px,
    linear-gradient(180deg, #29bdd9 0%, #276ace 100%) repeat-y 0 0/4px 100%,
    linear-gradient(0deg, #29bdd9 0%, #276ace 100%) repeat-y 100% 0/4px 100%,
    #eee;

滾動虛線邊框

.box {
  background:
     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
     linear-gradient(90deg, #333 50%, transparent 0) repeat-x,
     linear-gradient(0deg, #333 50%, transparent 0) repeat-y,
     linear-gradient(0deg, #333 50%, transparent 0) repeat-y;
     background-size: 4px 1px, 4px 1px, 1px 4px, 1px 4px;
     background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.box:hover {
  animation: linearGradientMove .3s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 4px 0, -4px 100%, 0 -4px, 100% 4px;
    }
}

滾動漸變

.box {
  background:
     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
     linear-gradient(90deg, #FF8235,#30E8BF, #FF8235) repeat-x,
     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y,
     linear-gradient(0deg, #FF8235,#30E8BF, #FF8235)  repeat-y;
     background-size: 100% 8px, 100% 8px, 8px 100%, 8px 100%;
     background-position: 0 0, 0 100%, 0 0, 100% 0;
}

.box:hover {
  animation: linearGradientMove 1s infinite linear;
}

@keyframes linearGradientMove {
    100% {
        background-position: 200px 0, -200px 100%, 0 -200px, 100% 100px;
    }
}

以上就是設(shè)置邊框的幾個小技巧。

參考：
https://www.cnblogs.com/coco1s/p/14291567.html

在線咨詢

上一篇：搭建apache服務(wù)器，默認網(wǎng)站瀏覽，默認頁頁面文件修改
下一篇：HTML5技術(shù)不知從何學起，那這12個網(wǎng)站你值得擁有

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商