最全11種方法 css隱藏頁面元素思路不一樣，不一定要隱藏

言

在CSS中很多隱藏元素的方法，但這些方法的可訪問性、布局、動畫、性能和事件處理的方式有所不同。

「動畫：」 一些CSS隱藏元素的方法一般是全有或者全無，元素要么是完全可見，要么是完全不可見，并且沒有中間狀態(tài)。其他的，比如透明度，可以是一個范圍的值，所以在這中間過程插入動畫成為可能；
「可訪問性：」 下面的每一種方法都會在視覺上隱藏一個元素，但不一樣會真正的去除DOM元素。有一些方式隱藏元素后，屏幕閱讀器仍然能讀取到元素內容；
「事件處理：」 隱藏元素之后，有些方式元素上的事件仍然能被觸發(fā)，而有些方式就會導致元素上的事件觸發(fā)無效；
「表現(xiàn)：」 瀏覽器加載并解析 HTML DOM 和 CSS 對象模型后，頁面將分三個階段呈現(xiàn)：布局（生成每個元素的幾何位置）、繪制（繪制每個元素的像素）、組合（以適當?shù)捻樞蚍胖迷貙樱H導致構圖變化的效果明顯比影響布局的效果更好。在某些情況下，瀏覽器還可以使用硬件加速。

實現(xiàn)方式

通過css實現(xiàn)隱藏元素方法有如下：

1.display: none: 渲染樹不會渲染對象

2.visibility: hidden: 元素在頁面中仍占據(jù)空間，但是不會響應綁定的監(jiān)聽事件。

3.opacity: 0: 元素在頁面中仍然占據(jù)空間，并且能夠響應元素綁定的監(jiān)聽事件。

4.position: absolute: 通過使用絕對定位將元素移除可視區(qū)域內，以此來實現(xiàn)元素的隱藏。

5.z-index: 負值:來使其他元素遮蓋住該元素，以此來實現(xiàn)隱藏。

6.clip/clip-path: 元素仍在頁面中占據(jù)位置，但是不會響應綁定的監(jiān)聽事件。

7.transform: scale(0,0): 將元素縮放為 0，元素仍在頁面中占據(jù)位置，但是不會響應綁定的監(jiān)聽事件。

8、color alpha 透明度

9、可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸

10、覆蓋另一個元素

11、transform 屬性可以用于元素的平移、縮放、旋轉或傾斜等。

1. visibility: hidden;   這個屬性只是簡單的隱藏某個元素, 但是元素占用的空間任然存在 

2. opacity: 0;   一個CSS3屬性, 設置 0 可以使一個元素完全透明, 制作出和 visibility 一樣的效果 。 與 visibility 相比, 它可以被 transition 和 animate 。

3. position: absolute;    使元素脫離文檔流, 處于普通文檔之上, 給它設置一個很大的 left 負值定位, 使元素定位在可見區(qū)域之外 。

4. display: none;  元素會變得不可見, 并且不會再占用文檔的空間 。

5. transform: scale(0);   將一個元素設置為無限小, 這個元素將不可見 。 這個元素原來所在的位置將被保留 。

6. HTML5 hidden attribute; hidden 屬性的效果和 display:none; 相同, 這個屬性用于記錄一個元素的狀態(tài) 。

7. height: 0; overflow: hidden; 將元素在垂直方向上收縮為0, 使元素消失 。 只要元素沒有可見的邊框, 該技術就可以正常工作 。

8. filter: blur(0); 將一個元素的模糊度設置為0, 從而使這個元素“消失”在頁面中 。

display:none

設置元素的display為none是最常用的隱藏元素的方法

.hide {
    display:none;
}

將元素設置為display:none后，元素在頁面上將徹底消失

元素本身占有的空間就會被其他元素占有，也就是說它會導致瀏覽器的重排和重繪

消失后，自身綁定的事件不會觸發(fā)，也不會有過渡效果

特點：元素不可見，不占據(jù)空間，無法響應點擊事件

color alpha 透明度

可以將元素的color、background-color 和 border-color 等屬性設置為rgba(0,0,0,0)，這樣就會使元素完全透明：

div {
 color: rgba(0,0,0,0);
  background-color: rgba(0,0,0,0);
}

這三個屬性都是支持設置動畫效果的，需要注意，透明度不能應用于帶有背景圖片的元素，除非它們是使用 linear-gradient 或類似方法生成的。

Alpha 通道可以設置為：

transparent：完全透明（中間不能插入動畫）；
rgba(r, g, b, a)：紅色、綠色、藍色和 alpha；
hsla(h, s, l, a)：色相、飽和度、亮度和 alpha；
#RRGGBBAA 或 #RGBA。

transform

transform 屬性可以用于元素的平移、縮放、旋轉或傾斜等。可以使用 scale(0) 或者 translate(-9999px, 0px) 屬性值來將元素隱藏：

div {
 transform: scale(0);
}

div {
 translate(-9999px, 0px)
}

transform 屬性提供了出色的性能和硬件加速，因為元素被有效地移動到了單獨的層中，并且可以在 2D 或 3D 中進行動畫處理。原始的布局空間會保持原樣，并不會受影響。使用這種方式隱藏的元素不會觸發(fā)任何事件。

z-index

可以通過將元素的 z-index 屬性設置為負值，以實現(xiàn)元素的隱藏。這實際上就是將元素放在了我們看不到的層。

div {
  z-index: -1;
}

position

position屬性允許使用top、bottom、left、right 從頁面中的默認位置移動元素。因此，絕對定位的元素可以通過左鍵：-9999px 等值移出屏幕：

div {
  position: absolute;
  left: -999px;
}

覆蓋另一個元素

通過在元素的上面放置與背景顏色相同的元素，可以在視覺上隱藏一個元素。下面來使用::after偽元素來實現(xiàn)：

div::after {
  position: absolute;
  content: '';
  top: 0;
  bottom: 100%;
  left: 0;
  right: 0;
  background-color: #fff;
}

雖然這從技術上講是可以實現(xiàn)的，但是這樣做需要更多的代碼。

縮小尺寸

可以通過使用width、height、padding、border-width 或 font-size 來縮小元素的尺寸以實現(xiàn)元素的隱藏。可能還需要應用 overflow: hidden; 來確保內容不會溢出。

div {
  height: 0;
  padding: 0;
  overflow: hidden;
}

使用這種形式我們可以在隱藏過程中使用動畫效果，并且他的性能會比 transform 好很多。

visibility:hidden

設置元素的visibility為hidden也是一種常用的隱藏元素的方法

從頁面上僅僅是隱藏該元素，DOM結果均會存在，只是當時在一個不可見的狀態(tài)，不會觸發(fā)重排，但是會觸發(fā)重繪

.hidden{
    visibility:hidden
}

給人的效果是隱藏了，所以他自身的事件不會觸發(fā)

特點：元素不可見，占據(jù)頁面空間，無法響應點擊事件

opacity:0

opacity屬性表示元素的透明度，將元素的透明度設置為0后，在我們用戶眼中，元素也是隱藏的

opacity: N 和 filter: opacity(N) 屬性可以傳遞一個 0 到 1 之間的數(shù)字，或者 0% 和 100% 之間的百分比，對應地表示完全透明和完全不透明。

opacity: N：該屬性用來設置元素的透明度；
filter: opacity(N) ：filter屬性用來設置元素的濾鏡，opacity是濾鏡重的透明度，用來設置元素的透明度。

不會引發(fā)重排，一般情況下也會引發(fā)重繪

如果利用 animation 動畫，對 opacity 做變化（animation會默認觸發(fā)GPU加速），則只會觸發(fā) GPU 層面的 composite，不會觸發(fā)重繪

.transparent {
    opacity:0;
}

由于其仍然是存在于頁面上的，所以他自身的的事件仍然是可以觸發(fā)的，但被他遮擋的元素是不能觸發(fā)其事件的

需要注意的是：其子元素不能設置opacity來達到顯示的效果

特點：改變元素透明度，元素不可見，占據(jù)頁面空間，可以響應點擊事件

在現(xiàn)代瀏覽器中，這兩者之間幾乎沒有實際的區(qū)別，但如果同時應用多種效果（模糊、對比度、灰度等）時，應該使用 filter 屬性。

注意：opacity 可以設置動畫并提供出色的性能，但頁面上保留完全透明的元素可能會觸發(fā)事件。

設置height、width屬性為0

將元素的margin，border，padding，height和width等影響元素盒模型的屬性設置成0，如果元素內有子元素或內容，還應該設置其overflow:hidden來隱藏其子元素

.hiddenBox {
    margin:0;     
    border:0;
    padding:0;
    height:0;
    width:0;
    overflow:hidden;
}

特點：元素不可見，不占據(jù)頁面空間，無法響應點擊事件

position:absolute

將元素移出可視區(qū)域

.hide {
   position: absolute;
   top: -9999px;
   left: -9999px;
}

特點：元素不可見，不影響頁面布局

clip-path

通過裁剪的形式

.hide {
  clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);
}

特點：元素不可見，占據(jù)頁面空間，無法響應點擊事件

小結

最常用的還是display:none和visibility:hidden，其他的方式只能認為是奇招，它們的真正用途并不是用于隱藏元素，所以并不推薦使用它們

區(qū)別

關于display: none、visibility: hidden、opacity: 0的區(qū)別，如下表所示：

	display: none	visibility: hidden	opacity: 0
頁面中	不存在	存在	存在
重排	會	不會	不會
重繪	會	會	不一定
自身綁定事件	不觸發(fā)	不觸發(fā)	可觸發(fā)
transition	不支持	支持	支持
子元素可復原	不能	能	不能
被遮擋的元素可觸發(fā)事件	能	能	不能

代碼實現(xiàn)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title> CSS 幾種隱藏元素的方法(瑣碎知識點整理) </title>
</head>

<style>
.w_vis-hid-outer {
  background-color: steelblue;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 42px;
}
.w_vis-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-con {
  background-color: tomato;
}
.w_r-con {
  background-color: yellowgreen;
}
/* visibility: hidden 設置隱藏 */
.w_now-vis {
  background-color: brown;
  margin: 0 12px;
  /* visibility: hidden; */
}



.w_opac-hid-outer {
  background-color: slategray;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_opac-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-opa-con {
  background-color: snow;
}
.w_r-opa-con {
  background-color: tan;
}
/* opacity: 0  設置隱藏 */
.w_now-opac {
  background-color: skyblue;
  margin: 0 12px;
  /* opacity: 0; */
}



.w_posi-hid-outer {
  background-color: slategray;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_posi-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-pos-con {
  background-color: snow;
  margin-right: 12px;
}
.w_r-pos-con {
  background-color: tan;
  margin-left: 12px;
}
/* opacity: 0  設置隱藏 */
.w_now-posi {
  background-color: skyblue;
  /* position: absolute; */
  /* left: -6666px; */
}



.w_disp-hid-outer {
  background-color: red;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_disp-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-dis-con {
  background-color: #ccc;
  margin-right: 12px;
}
.w_r-dis-con {
  background-color: #212121;
  margin-left: 12px;
  color: #FFF;
}
/* display: none  設置隱藏 */
.w_now-disp {
  background-color: blueviolet;
  /* display: none; */
}


.w_trans-hid-outer {
  background-color: darkorange;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_trans-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-tran-con {
  background-color: #ccc;
  margin-right: 12px;
}
.w_r-tran-con {
  background-color: #212121;
  margin-left: 12px;
  color: #FFF;
}
/* transform: scale(0)  設置隱藏 */
.w_now-trans {
  background-color: blueviolet;
  /* transform: scale(0); */
}


.w_hidd-hid-outer {
  background-color: darksalmon;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  padding: 0 12px;
  margin-bottom: 42px;
}
.w_hidd-hid-outer p {
  line-height: 62px;
  padding: 0 24px;
}
.w_l-hid-con {
  background-color: steelblue;
  margin-right: 12px;
}
.w_r-hid-con {
  background-color: #212121;
  margin-left: 12px;
  color: #FFF;
}
/* hidden attribute  設置隱藏 (在 html 元素標簽上設置) */
.w_now-hidd {
  background-color: red;
}

</style>
<body>
  <div class="w_hide-shel">
    <!-- visibility: hidden  方法 -->
    <div class="w_vis-hid-outer">
      <p class="w_l-con">左側元素 -- 方法 1: visibility: hidden</p>
      <p class="w_now-vis">中間  隱藏  元素</p>
      <p class="w_r-con">右側元素  -- 方法 1: visibility: hidden</p>
    </div>

    <!-- opacity: 0  方法-->
    <div class="w_opac-hid-outer">
      <p class="w_l-opa-con">左側元素 -- 方法 2: opacity: 0</p>
      <p class="w_now-opac">中間  隱藏  元素</p>
      <p class="w_r-opa-con">右側元素  -- 方法 2: opacity: 0</p>
    </div>

    <!-- position: absolute 方法 -->
    <div class="w_posi-hid-outer">
      <p class="w_l-pos-con">左側元素 -- 方法 3: position: absolute</p>
      <p class="w_now-posi">中間  隱藏  元素</p>
      <p class="w_r-pos-con">右側元素  -- 方法 3: position: absolute</p>
    </div>

    <!-- display: none -->
    <div class="w_disp-hid-outer">
      <p class="w_l-dis-con">左側元素 -- 方法 4: display: none</p>
      <p class="w_now-disp">中間  隱藏  元素</p>
      <p class="w_r-dis-con">右側元素  -- 方法 4: display: none</p>
    </div>

    <!-- transform: scale(0) -->
    <div class="w_trans-hid-outer">
      <p class="w_l-tran-con">左側元素 -- 方法 5: display: none</p>
      <p class="w_now-trans">中間  隱藏  元素</p>
      <p class="w_r-tran-con">右側元素  -- 方法 5: display: none</p>
    </div>

    <!-- hidden attribute -->
    <div class="w_hidd-hid-outer">
      <p class="w_l-hid-con">左側元素 -- 方法 6: hidden attribute</p>
      <p class="w_now-hidd">中間  隱藏  元素</p>
      <!-- <p class="w_now-hidd" hidden="true">中間  隱藏  元素</p> -->
      <p class="w_r-hid-con">右側元素  -- 方法 6: hidden attribute</p>
    </div>
  </div>
</body>
</html>

給大家分享我收集整理的各種學習資料，前端小白交學習流程，入門教程等回答-下面是學習資料參考。

前端學習交流、自學、學習資料等推薦 - 知乎

CSS 隱藏頁面元素有許多種方法。你可以將 opacity 設為 0、將 visibility 設為 hidden、將 display 設為 none 或者將 position 設為 absolute 然后將位置設到不可見區(qū)域。

你有沒有想過，為什么我們要有這么多技術來隱藏元素，而它們看起來都實現(xiàn)的是同樣的效果？每一種方法實際上與其他方法之間都有一些細微的不同，這些不同決定了在一個特定的場合下使用哪一個方法。這篇教程將覆蓋到那些你需要記住的細小不同點，讓你根據(jù)不同情況選擇上面這些方法中適合的方法來隱藏元素。

opacity

opacity 屬性的意思是設置一個元素的透明度。它不是為改變元素的邊界框（bounding box）而設計的。這意味著將 opacity 設為 0 只能從視覺上隱藏元素。而元素本身依然占據(jù)它自己的位置并對網(wǎng)頁的布局起作用。它也將響應用戶交互。

.hide {
 opacity: 0;}

如果你打算使用 opacity 屬性在讀屏軟件中隱藏元素，很不幸，你并不能如愿。元素和它所有的內容會被讀屏軟件閱讀，就像網(wǎng)頁上的其他元素那樣。換句話說，元素的行為就和它們不透明時一致。

我還要提醒一句，opacity 屬性可以用來實現(xiàn)一些效果很棒的動畫。任何 opacity 屬性值小于 1 的元素也會創(chuàng)建一個新的堆疊上下文（stacking context）。

看下面的例子：

看 @SitePoint 提供的例子“用 opacity 隱藏元素”

當你的鼠標移到被隱藏的第 2 個的區(qū)塊上，元素狀態(tài)平滑地從完全透明過渡到完全不透明。區(qū)塊也將 cursor 屬性設置為了 pointer，這說明了用戶可以與它交互。

我自己是一名從事了多年開發(fā)的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年年初我花了一個月整理了一份最適合2019年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

visibility

第二個要說的屬性是 visibility。將它的值設為 hidden 將隱藏我們的元素。如同 opacity 屬性，被隱藏的元素依然會對我們的網(wǎng)頁布局起作用。與 opacity 唯一不同的是它不會響應任何用戶交互。此外，元素在讀屏軟件中也會被隱藏。

這個屬性也能夠實現(xiàn)動畫效果，只要它的初始和結束狀態(tài)不一樣。這確保了 visibility 狀態(tài)切換之間的過渡動畫可以是時間平滑的（事實上可以用這一點來用 hidden 實現(xiàn)元素的延遲顯示和隱藏——譯者注）。

.hide {
 visibility: hidden;}

下面的例子演示了 visibility 與 opacity 有怎樣的不同：

看 @SitePoint 提供的例子“用 visibility 隱藏元素”

注意，如果一個元素的 visibility 被設置為 hidden，同時想要顯示它的某個子孫元素，只要將那個元素的 visibility 顯式設置為 visible 即可（就如例子里面的 .o-hide p——譯者注）。嘗試只 hover 在隱藏元素上，不要 hover 在 p 標簽里的數(shù)字上，你會發(fā)現(xiàn)你的鼠標光標沒有變成手指頭的樣子。此時，你點擊鼠標，你的 click 事件也不會被觸發(fā)。

而在 <div> 標簽里面的 <p> 標簽則依然可以捕獲所有的鼠標事件。一旦你的鼠標移動到文字上，<div> 本身變得可見并且事件注冊也隨之生效。

display

display 屬性依照詞義真正隱藏元素。將 display 屬性設為 none 確保元素不可見并且連盒模型也不生成。使用這個屬性，被隱藏的元素不占據(jù)任何空間。不僅如此，一旦 display 設為 none 任何對該元素直接打用戶交互操作都不可能生效。此外，讀屏軟件也不會讀到元素的內容。這種方式產(chǎn)生的效果就像元素完全不存在。

任何這個元素的子孫元素也會被同時隱藏。為這個屬性添加過渡動畫是無效的，它的任何不同狀態(tài)值之間的切換總是會立即生效。

不過請注意，通過 DOM 依然可以訪問到這個元素。因此你可以通過 DOM 來操作它，就像操作其他的元素。

.hide {
 display: none;}

看下面的例子：

@SitePoint 提供的例子“用 display 隱藏元素”

你將看到第二個塊元素內有一個 <p> 元素，它自己的 display 屬性被設置成 block，但是它依然不可見。這是 visibility:hidden 和 display:none 的另一個不同之處。在前一個例子里，將任何子孫元素 visibility 顯式設置成 visible 可以讓它變得可見，但是 display 不吃這一套，不管自身的 display值是什么，只要祖先元素的 display 是 none，它們就都不可見。

現(xiàn)在，將鼠標移到第一個塊元素上面幾次，然后點擊它。這個操作將讓第二個塊元素顯現(xiàn)出來，它其中的數(shù)字將是一個大于 0 的數(shù)。這是因為，元素即使被這樣設置成對用戶隱藏，還是可以通過 JavaScript 來進行操作。

position

假設有一個元素你想要與它交互，但是你又不想讓它影響你的網(wǎng)頁布局，沒有合適的屬性可以處理這種情況（opacity 和 visibility 影響布局， display 不影響布局但又無法直接交互——譯者注）。在這種情況下，你只能考慮將元素移出可視區(qū)域。這個辦法既不會影響布局，有能讓元素保持可以操作。下面是采用這種辦法的 CSS：

.hide {
 position: absolute;
 top: -9999px;
 left: -9999px;}

下面的例子闡明了怎樣通過絕對定位的方式隱藏元素，并讓它和前面的那個例子效果一樣：

看 @SitePoint 提供的例子“用 position 屬性隱藏元素”

這種方法的主要原理是通過將元素的 top 和 left 設置成足夠大的負數(shù)，使它在屏幕上不可見。采用這個技術的一個好處（或者潛在的缺點）是用它隱藏的元素的內容可以被讀屏軟件讀取。這完全可以理解，是因為你只是將元素移到可視區(qū)域外面讓用戶無法看到它。

你得避免使用這個方法去隱藏任何可以獲得焦點的元素，因為如果那么做，當用戶讓那個元素獲得焦點時，會導致一個不可預料的焦點切換。這個方法在創(chuàng)建自定義復選框和單選按鈕時經(jīng)常被使用。（用 DOM 模擬復選框和單選按鈕，但用這個方法隱藏真正的 checkbox 和 radio 元素來“接收”焦點切換——譯者注）

clip-path

隱藏元素的另一種方法是通過剪裁它們來實現(xiàn)。在以前，這可以通過 clip 屬性來實現(xiàn)，但是這個屬性被廢棄了，換成一個更好的屬性叫做 clip-path。Nitish Kumar 最近在 SitePoint 發(fā)表了“介紹 clicp-path 屬性”這篇文章，通過閱讀它可以了解這個屬性的更多高級用法。

記住，clip-path 屬性還沒有在 IE 或者 Edge 下被完全支持。如果要在你的 clip-path 中使用外部的 SVG 文件，瀏覽器支持度還要更低。使用 clip-path 屬性來隱藏元素的代碼看起來如下：

.hide {
 clip-path: polygon(0px 0px,0px 0px,0px 0px,0px 0px);}

下面是一個實際使用它的例子：

看 @SitePoint 提供的例子“用 clip-path 屬性隱藏元素”

如果你把鼠標懸停在第一個元素上，它依然可以影響第二個元素，盡管第二個元素已經(jīng)通過 clip-path 隱藏了。如果你點擊它，它會移除用來隱藏的 class，讓我們的元素從那個位置顯現(xiàn)出來。被隱藏元素中的文字仍然能夠通過讀屏軟件讀取，許多 WordPress 站點使用 clip-path 或者之前的 clip來實現(xiàn)專門為讀屏軟件提供的文字。

雖然我們的元素自身不再顯示，它也依然占據(jù)本該占據(jù)的矩形大小，它周圍的元素的行為就如同它可見時一樣。記住用戶交互例如鼠標懸停或者點擊在剪裁區(qū) 域之外也不可能生效。在我們的例子里，剪裁區(qū)大小為零，這意味著用戶將不能與隱藏的元素直接交互。此外，這個屬性能夠使用各種過渡動畫來實現(xiàn)不同的效果。

結論

在這篇教程里，我們看了 5 種不同的通過 CSS 隱藏元素的方法。每一種方法都與其他幾種有一點區(qū)別。知道你想要實現(xiàn)什么有助于你決定采用哪一個屬性，隨著時間推移，你就能根據(jù)實際需求本能地選擇最佳方式了。

lt;hr>水平線

<hr size="9" /> 水平線(設定大小,單位:像素)

<hr width="80%" /> 水平線(設定寬度,單位:像素或百分比)

<hr color="#ff0000" /> 水平線對齊方式

<hr align="left" /> 水平線水平位置

<hr noshade /> 去掉水平線的陰影

align屬性值:center(默認值) left right

<center></center>水平居中.

<br/> 換行

<p></p> 標簽定義段落

<p align=""></p>將段落按左、中、右對齊;

align屬性值:left(默認值) right center justify

注意：

<h1>...<h6>標題標記與<p>段落標記都只有一個屬性align

<pre></pre> 定義預格式化的文本

<blockquote></blockquote> 設置段落縮進(可以縮進5個字符)

手冊上沒有的標記

<xmp></xmp> 忽略HTML標記

<nobr>…</nobr> 禁止換行

<wbr> 指定軟換行（或單詞換行），用在nobr標記中，即使用 <nobr> 禁止了換行，使用 <wbr> 仍然可以換行

<nobr>中華人民共和國上海市<wbr>黃浦區(qū)</wbr></nobr>

在線咨詢

上一篇：程序員浪漫起來沒文科生什么事：HTML制作表白愛心-無需編程基礎
下一篇：HTML培訓：如何在HTML中更改文本大小

您的項目需求

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

整合營銷服務商

最全11種方法 css隱藏頁面元素 思路不一樣，不一定要隱藏

言