閱讀(11.4k) 書簽贊(5) 我要糾錯(cuò)

CSS Size尺寸

2018-10-29 17:28 更新

您可以使用下面描述的與大小相關(guān)的屬性來(lái)控制元素大小。

width
height
設(shè)置元素的寬度和高度。
Value: auto or length or %
min-width
min-height
設(shè)置元素的最小可接受寬度或高度。
Value: auto or length or %
max-width
max-height
設(shè)置元素的最大可接受寬度或高度。
Value: auto length %
box-sizing
設(shè)置元素框的哪個(gè)部分用于大小調(diào)整。
Value: content-box or padding-box or border-box or margin-box

所有這些屬性的默認(rèn)值是auto，瀏覽器會(huì)找出元素的寬度和高度。

您可以使用長(zhǎng)度或百分比顯式指定大小。即使處理高度，百分比值也從包含塊的寬度計(jì)算。

例子

以下代碼顯示如何設(shè)置元素的大小。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {
  width: 75%;
  height: 100px;
  border: thin solid black;
}

img {
  background: lightgray;
  border: 4px solid black;
  margin: 2px;
  height: 50%;
}

#first {
  box-sizing: border-box;
  width: 50%;
}

#second {
  box-sizing: content-box;
}
</style>
</head>
<body>
  <div>
    <img id="first" src="http://www.www.o2fo.com/style/download.png" alt="small  banana">
    <img id="second" src="http://www.www.o2fo.com/style/download.png" alt="small  banana">
  </div>
</body>
</html>

在body中有三個(gè)元素。div元素包含兩個(gè) img 元素。 div 元素的寬度設(shè)置為75％，是 body 元素的子元素。

div元素將具有包含塊的寬度的75％，這是主體內(nèi)容框。

如果調(diào)整瀏覽器窗口大小，則將調(diào)整body元素的大小，并調(diào)整div元素的大小以保留75％的關(guān)系。

div元素的高度為100像素。它是一個(gè)絕對(duì)值，并且不會(huì)隨著包含塊的大小調(diào)整而改變。

img元素的寬度是包含塊的50％。

例2

以下代碼顯示如何將寬度和高度設(shè)置為自動(dòng)。

<html>
<head>
<style type="text/css">
p {
  padding: 10px;
  margin: 10px;
  border: thin solid black;
  width: auto;
  min-width: 200px;
}
img#x-aspect-1 {
    border: 1px solid black;
    margin: 5px;
    
    width: 200px;
    height: auto;
}


</style>
</head>
<body>
  <p>This is a test. This is a test.</p>
  <img src="http://www.www.o2fo.com/style/download.png" id="x-aspect-1" />
</body>
</html>

box-sizing

box-sizing屬性更改大小屬性適用的元素框。

默認(rèn)情況下，計(jì)算并應(yīng)用元素的內(nèi)容框的高度和寬度。或者例如，如果元素的height屬性設(shè)置為100px，則屏幕上的實(shí)際高度將為100像素，加上頂部和底部填充，邊框和邊距值。

其值可以是以下之一：

content-box
padding-box
border-box
margin-box

以下代碼顯示如何設(shè)置元素的大小。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
div {
  width: 75%;
  height: 100px;
  border: thin solid black;
}

img {
  background: lightgray;
  border: 4px solid black;
  margin: 2px;
  height: 50%;
}

#first {
  box-sizing: border-box;
  width: 50%;
}

#second {
  box-sizing: content-box;
}
</style>
</head>
<body>
  <div>
    <img id="first" src="http://www.www.o2fo.com/style/download.png" alt="small  banana">
    <img id="second" src="http://www.www.o2fo.com/style/download.png" alt="small  banana">
  </div>
</body>
</html>

最小和最大尺寸

您可以使用min-和max-屬性來(lái)設(shè)置元素大小的限制。

以下代碼設(shè)置Size的最小和最大范圍。

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
img {
  background: lightgray;
  border: 4px solid black;
  margin: 2px;
  box-sizing: border-box;
  min-width: 100px;
  width: 50%;
  max-width: 200px;
}
</style>
</head>
<body>
  <img src="http://www.www.o2fo.com/style/download.png" alt="small  banana">

</body>
</html>

屬性	描述	CSS
height	設(shè)置元素的高度	1
max-height	設(shè)置最大高度	2
max-width	設(shè)置最大寬度	2
min-height	設(shè)置最小高度	2
min-width	設(shè)置最小寬度	2
width	設(shè)置元素的寬度	1

CSS Size尺寸

您可以使用下面描述的與大小相關(guān)的屬性來(lái)控制元素大小。

例子

例2

box-sizing

最小和最大尺寸

相關(guān)屬性

推薦文章

推薦教程

推薦課程

您可以使用下面描述的與大小相關(guān)的屬性來(lái)控制元素大小。