色婷婷狠狠18禁久久YY,CHINESE性内射高清国产,国产女人18毛片水真多1,国产AV在线观看

CSS Size尺寸

您可以使用下面描述的與大小相關(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.w3cschool.cn/style/download.png" alt="small  banana">
    <img id="second" src="http://www.www.w3cschool.cn/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.w3cschool.cn/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.w3cschool.cn/style/download.png" alt="small  banana">
    <img id="second" src="http://www.www.w3cschool.cn/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.w3cschool.cn/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