คุณสมบัติ CSS height และ width ถูกนำมาใช้ในการตั้งค่า ความสูงและความกว้างขององค์ประกอบ
คุณสมบัติ CSS max-width ใช้เพื่อกำหนดความกว้างสูงสุดขององค์ประกอบ
ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px;
width: 100%;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>CSS height and width properties</h2>
<div>This div element has a height of 50 pixels and a width of 100%.</div>
</body>
</html>
คุณสมบัติ height และ width ถูกนำมาใช้ในการตั้งค่า ความสูงและความกว้างขององค์ประกอบ
คุณสมบัติความสูงและความกว้างไม่รวมช่องว่างภายใน เส้นขอบ หรือระยะขอบ กำหนดความสูง/ความกว้างของพื้นที่ภายในช่องว่างภายใน ขอบ และระยะขอบของ องค์ประกอบ
คุณสมบัติ height และ width อาจมีค่าดังต่อไปนี้:
อัตโนมัติ - นี่เป็นค่าเริ่มต้น เบราว์เซอร์ คำนวณความสูงและความกว้าง
length - กำหนดความสูง/ความกว้างเป็น px, cm, ฯลฯ
% - กำหนดความสูง/ความกว้างเป็นเปอร์เซ็นต์ของ บล็อกที่มี
initial - ตั้งค่าความสูง/ความกว้างเป็น ค่าเริ่มต้น
สืบทอด - ความสูง/ความกว้างจะเป็น สืบทอดมาจากคุณค่าหลัก
ตั้งค่าความสูงและความกว้างของ <div> องค์ประกอบ:
div {
height:
200px;
width: 50%;
background-color: powderblue;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 200px and a width of 50%.</div>
</body>
</html>
ตั้งค่าความสูงและความกว้างของอีก <div> องค์ประกอบ:
div {
height:
100px;
width: 500px;
background-color: powderblue;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of an element</h2>
<div>This div element has a height of 100px and a width of 500px.</div>
</body>
</html>
หมายเหตุ: โปรดจำไว้ว่าคุณสมบัติ height และ width ไม่รวมช่องว่างภายใน และเส้นขอบ , หรือระยะขอบ! พวกเขาตั้งค่าความสูง/ความกว้างของพื้นที่ภายในช่องว่างภายใน ขอบ และระยะขอบขององค์ประกอบ!
max-width คุณสมบัติที่ใช้ในการกำหนดความกว้างสูงสุดขององค์ประกอบ
max-width สามารถระบุได้ใน ค่าความยาว เช่น px, cm ฯลฯ หรือเป็นเปอร์เซ็นต์ (%) ของ มีบล็อกหรือตั้งค่าเป็นไม่มี (นี่คือ ค่าเริ่มต้น. หมายความว่าไม่มีความกว้างสูงสุด)
ปัญหากับ <div> ด้านบนเกิดขึ้นเมื่อหน้าต่างเบราว์เซอร์มีขนาดเล็กกว่าความกว้างของ องค์ประกอบ (500px) เบราว์เซอร์จะเพิ่มแถบเลื่อนแนวนอนให้กับเพจ
การใช้ max-width แทน ในสถานการณ์นี้ จะปรับปรุงการจัดการหน้าต่างเล็ก ๆ ของเบราว์เซอร์
เคล็ดลับ: ลากหน้าต่างเบราว์เซอร์ให้กว้างน้อยกว่า 500px เพื่อดูความแตกต่างระหว่าง ทั้งสอง div!
หมายเหตุ: หากคุณใช้ทั้งสองอย่างด้วยเหตุผลบางประการ width คุณสมบัติและ max-width คุณสมบัติในองค์ประกอบเดียวกันและค่าของ width คุณสมบัติมีขนาดใหญ่กว่า ความกว้างสูงสุด คุณสมบัติ; ที่ max-width คุณสมบัติจะถูกใช้ (และ คุณสมบัติ width จะถูกละเว้น)
องค์ประกอบ <div> นี้มีความสูง 100 พิกเซล และ a ความกว้างสูงสุด 500 พิกเซล:
div {
max-width: 500px;
height:
100px;
background-color: powderblue;
}ลองด้วยตัวคุณเอง →
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<div>This div element has a height of 100px and a max-width of 500px.</div>
<p>Resize the browser window to see the effect.</p>
</body>
</html>
กำหนดความสูงและความกว้างขององค์ประกอบ
<!DOCTYPE html>
<html>
<head>
<style>
img.one {
height: auto;
}
img.two {
height: 200px;
width: 200px;
}
div.three {
height: 300px;
width: 300px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the height and width of elements</h2>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (200x200 pixels):</p>
<img class="two" src="ocean.jpg" width="300" height="300"><br>
<p>The height and width of this div element is 300px:</p>
<div class="three"></div>
</body>
</html>
ตัวอย่างนี้สาธิตวิธีการตั้งค่าความสูงและความกว้างขององค์ประกอบต่างๆ
ตั้งค่าความสูงและความกว้างของรูปภาพโดยใช้เปอร์เซ็นต์
<!DOCTYPE html>
<html>
<head>
<style>
html, body {
height: 100%;
}
img.one {
height: auto;
width: auto;
}
img.two {
height: 50%;
width: 50%;
}
</style>
</head>
<body>
<h2>Set the height and width in %</h2>
<p>Resize the browser window to see the effect.</p>
<p>Original image:</p>
<img class="one" src="ocean.jpg" width="300" height="300"><br>
<p>Sized image (in %):</p>
<img class="two" src="ocean.jpg" width="300" height="300">
</body>
</html>
ตัวอย่างนี้สาธิตวิธีการตั้งค่าความสูงและความกว้างของรูปภาพโดยใช้ค่าเปอร์เซ็นต์
ตั้งค่าความกว้างขั้นต่ำและความกว้างสูงสุดขององค์ประกอบ
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 400px;
min-width: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width and min-width of an element</h2>
<p>Resize the browser window to see the effect.</p>
<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
</body>
</html>
ตัวอย่างนี้สาธิตวิธีการตั้งค่าความกว้างขั้นต่ำและความกว้างสูงสุดขององค์ประกอบโดยใช้ค่าพิกเซล
กำหนดความสูงขั้นต่ำและความสูงสูงสุดขององค์ประกอบ
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-height: 600px;
min-height: 400px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-height and min-height of an element</h2>
<p>Resize the browser window to see the effect.</p>
<div>This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.
This is some text. This is some text. This is some text.</div>
</body>
</html>
ตัวอย่างนี้สาธิตวิธีการตั้งค่าความสูงขั้นต่ำและความสูงสูงสุดขององค์ประกอบโดยใช้ค่าพิกเซล
กำหนดความสูงขององค์ประกอบ
ตั้งค่าความสูงสูงสุดขององค์ประกอบ
ตั้งค่าความกว้างสูงสุดขององค์ประกอบ
ตั้งค่าความสูงขั้นต่ำขององค์ประกอบ
ตั้งค่าความกว้างขั้นต่ำขององค์ประกอบ
กำหนดความกว้างขององค์ประกอบ