tft每日頭條

 > 科技

 > css中各種單位的使用場景

css中各種單位的使用場景

科技 更新时间:2024-10-04 02:17:54

  CSS 設置高度和寬度 height 和 width 屬性用于設置元素的高度和寬度。

  height 和 width 屬性不包括内邊距、邊框或外邊距。它設置的是元素内邊距、邊框以及外邊距内的區域的高度或寬度。

  CSS 高度和寬度值 height 和 width 屬性可設置如下值:

  auto - 默認。浏覽器計算高度和寬度。css中各種單位的使用場景(10.入門編程)(1)

  實例 設置 元素的高度和寬度:

  div {

  height: 200px;

  width: 50%;

  background-color: powderblue;

  }

  css中各種單位的使用場景(10.入門編程)(2)

  實例 設置另一個 元素的高度和寬度:

  div {

  height: 100px;

  width: 500px;

  background-color: powderblue;

  }

  注意:請記住,heightwidth 屬性不包括内邊距、邊框或外邊距!它們設置的是元素的内邊距、邊框和外邊距内的區域的高度/寬度!

  設置 max-width max-width 屬性用于設置元素的最大寬度。

  可以用長度值(例如 px、cm 等)或包含塊的百分比(%)來指定 max-width(最大寬度),也可以将其設置為 none(默認值。意味着沒有最大寬度)。

  當浏覽器窗口小于元素的寬度(500px)時,會發生之前那個 的問題。然後,浏覽器會将水平滾動條添加到頁面。

  在這種情況下,使用 max-width 能夠改善浏覽器對小窗口的處理。

  提示:将浏覽器窗口拖動到小于500px的寬度,以查看兩個 div 之間的區别!

  css中各種單位的使用場景(10.入門編程)(3)

  此元素的高度為 100 像素,最大寬度為 500 像素。

  注釋:max-width 屬性的值将覆蓋 width(寬度)。

  實例 這個 元素的高度為 100 像素,最大寬度為 500 像素:

  div {

  max-width: 500px;

  height: 100px;

  background-color: powderblue;

  }

  設置 CSS 尺寸屬性 css中各種單位的使用場景(10.入門編程)(4)

  ,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关科技资讯推荐

热门科技资讯推荐

网友关注

Copyright 2023-2024 - www.tftnews.com All Rights Reserved