home

หน้าแรก
 Computer >> คอมพิวเตอร์ >  >> การเขียนโปรแกรม >> CSS

CSS ความสูงและความกว้าง

เมื่อคุณออกแบบหน้าเว็บ คุณอาจต้องการระบุขนาดเฉพาะสำหรับองค์ประกอบที่ปรากฏบนหน้าเว็บ ตัวอย่างเช่น คุณอาจต้องการให้กล่องมีความสูงระดับหนึ่ง หรือบรรทัดข้อความให้มีความกว้างตามที่กำหนด

นั่นคือที่มาของคุณสมบัติความสูงและความกว้างของ CSS คุณสมบัติความสูงและความกว้างช่วยให้คุณกำหนดความสูงและความกว้างขององค์ประกอบใน CSS

บทแนะนำนี้จะกล่าวถึงตัวอย่าง พื้นฐานของคุณสมบัติความสูงและความกว้างของ CSS และวิธีใช้คุณสมบัติความสูงและความกว้างต่ำสุดและสูงสุดเพื่อออกแบบองค์ประกอบที่ตอบสนอง เมื่ออ่านบทช่วยสอนนี้จบ คุณจะเป็นผู้เชี่ยวชาญในการใช้คุณสมบัติความสูงและความกว้างของ CSS เพื่อกำหนดขนาดขององค์ประกอบในหน้าเว็บ

ความสูงและความกว้าง CSS

การตั้งค่าความสูงและความกว้างขององค์ประกอบบนหน้าเว็บทำให้คุณสามารถกำหนดพื้นที่ที่องค์ประกอบจะใช้บนหน้าเว็บได้ นี้สามารถช่วยคุณพัฒนาโครงสร้างสำหรับองค์ประกอบในหน้าเว็บของคุณเพื่อให้แต่ละองค์ประกอบปรากฏอย่างถูกต้องตามความต้องการของคุณ

ในการกำหนดว่าองค์ประกอบสามารถยืดในแนวนอนและแนวตั้งได้ไกลแค่ไหน คุณสามารถใช้คุณสมบัติความกว้างและความสูงตามลำดับ

คุณสมบัติความกว้างและความสูงช่วยให้คุณกำหนดความกว้างและความสูงเฉพาะสำหรับพื้นที่เนื้อหาของกล่องได้ ซึ่งหมายความว่าคุณสมบัติความกว้างและความสูงจะควบคุมพื้นที่ที่มีเนื้อหาในกล่อง และไม่ส่งผลต่อระยะขอบหรือช่องว่างภายในที่กำหนดไว้สำหรับกล่อง

คุณสมบัติความสูงและความกว้างใช้ไวยากรณ์ต่อไปนี้:

height: heightValue;
width: widthValue;

ค่า heightValue และ widthValue สามารถยอมรับค่าใดค่าหนึ่งต่อไปนี้:

81% ของผู้เข้าร่วมกล่าวว่าพวกเขารู้สึกมั่นใจมากขึ้นเกี่ยวกับโอกาสในการทำงานด้านเทคโนโลยีหลังจากเข้าร่วม bootcamp จับคู่กับ Bootcamp วันนี้

ผู้สำเร็จการศึกษาจากหลักสูตร bootcamp โดยเฉลี่ยใช้เวลาน้อยกว่าหกเดือนในการเปลี่ยนอาชีพ ตั้งแต่เริ่มต้น bootcamp ไปจนถึงหางานแรก

  • อัตโนมัติ:เบราว์เซอร์จะคำนวณความสูงและความกว้างโดยอัตโนมัติ
  • ความยาว:ความกว้างหรือความสูงของกล่องเป็น px, em, rem ฯลฯ
  • เปอร์เซ็นต์:ความกว้างหรือความสูงของกล่องเป็นเปอร์เซ็นต์ของขนาดของบล็อกที่องค์ประกอบปรากฏขึ้น
  • ค่าเริ่มต้น:ค่าเริ่มต้นที่ระบุสำหรับช่อง
  • สืบทอด:ค่าเดียวกับความกว้างหรือความสูงของกล่องที่องค์ประกอบปรากฏขึ้น

ตอนนี้เรารู้พื้นฐานของคุณสมบัติความสูงและความกว้างแล้ว เราสามารถสำรวจตัวอย่างของแต่ละคุณสมบัติเหล่านี้ในการดำเนินการได้

คุณสมบัติความสูงและความกว้าง CSS

สมมติว่าเรากำลังออกแบบเว็บไซต์สำหรับร้านกาแฟท้องถิ่นชื่อ The Pickled Apple ร้านกาแฟแห่งนี้ขอให้เราสร้างกล่องในหน้า "เกี่ยวกับ" ของเว็บไซต์ ซึ่งควรเก็บคำอธิบายสั้นๆ เกี่ยวกับร้านกาแฟ

กล่องนี้ควรมีความกว้าง 200px และสูง 200px และมีพื้นหลังสีเทาอ่อน มิติข้อมูลเหล่านี้ได้รับการคัดเลือกเพื่อให้แน่ใจว่าองค์ประกอบอื่นๆ ที่เราต้องการเพิ่มลงในหน้าเว็บจะพอดีเมื่อเราใช้งาน

เราสามารถใช้รหัสต่อไปนี้เพื่อสร้างกล่อง:

<html>

<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.</p>

<style>

.aboutBox {
	height: 200px;
	width: 200px;
	background-color: lightgray;
}

CSS ความสูงและความกว้าง ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

มาทำลายรหัสของเรากัน ในไฟล์ HTML ของเรา เราได้สร้างย่อหน้าของข้อความโดยใช้แท็ก

แท็ก

นี้มีชื่อคลาส aboutBox ที่เราใช้ในไฟล์ CSS เพื่อจัดรูปแบบย่อหน้าของข้อความ

ในไฟล์ CSS ของเรา เราได้กำหนดกฎของสไตล์ที่ใช้กับองค์ประกอบใดๆ ที่มีชื่อคลาส aboutBox . กฎลักษณะนี้กำหนดความสูงขององค์ประกอบเป็น 200px ความกว้างขององค์ประกอบเป็น 200px และตั้งค่าสีพื้นหลังขององค์ประกอบเป็นสีเทาอ่อน

หากเราต้องการให้องค์ประกอบของเรากว้าง 100px เราสามารถเปลี่ยนคุณสมบัติความกว้างให้เท่ากับ 100px หรือถ้าเราต้องการให้องค์ประกอบสูง 300px เราก็สามารถเปลี่ยนคุณสมบัติความสูงให้เท่ากับ 300px

คุณสมบัติ CSS ขั้นต่ำและความยาวสูงสุด

ความกว้างและความสูงเป็นค่าคงที่ ซึ่งหมายความว่าความกว้างและความสูงที่คุณระบุจะยังคงเหมือนเดิมและจะไม่เปลี่ยนแปลงหากคุณปรับขนาดหน้าต่างหรือดูหน้าเว็บบนอุปกรณ์อื่น (เว้นแต่คุณจะใช้ค่าความสูงสัมพัทธ์ เช่น เปอร์เซ็นต์ของขนาดพาเรนต์ องค์ประกอบ).

นี่เป็นสิ่งสำคัญที่ต้องเข้าใจ เพราะถ้าคุณต้องการออกแบบประสบการณ์ที่สามารถเข้าถึงได้ การกำหนดความสูงและความกว้างเฉพาะสำหรับองค์ประกอบอาจไม่เป็นประโยชน์ ตัวอย่างเช่น หากคุณระบุความกว้างของรูปภาพเป็น 500px อาจทำให้รูปภาพแสดงผลไม่ถูกต้องหากผู้ใช้ดูไซต์บนอุปกรณ์เคลื่อนที่ซึ่งขนาดหน้าจออาจเล็กกว่า

นั่นคือที่มาของค่าความยาวต่ำสุดและสูงสุด

ในการทำให้องค์ประกอบปรับให้เข้ากับหน้าจอและขนาดวิวพอร์ตที่แตกต่างกัน คุณสามารถใช้คุณสมบัติความกว้างต่ำสุด ความกว้างสูงสุด ความสูงต่ำสุด และความสูงสูงสุด เมื่อคุณระบุคุณสมบัติเหล่านี้ ค่าที่ระบุสำหรับความกว้างและความสูงจะถูกแทนที่

คุณสมบัติ min-height กำหนดความสูงขั้นต่ำของคุณสมบัติ หากระบุความสูงต่ำสุด ความสูงขององค์ประกอบต้องไม่ต่ำกว่าค่าความสูงต่ำสุด คุณสมบัติ min-width กำหนดความกว้างขั้นต่ำของคุณสมบัติและทำงานในลักษณะเดียวกัน

ในทำนองเดียวกัน หากคุณต้องการกำหนดความสูงหรือความกว้างสูงสุดของพร็อพเพอร์ตี้ คุณสามารถใช้ max-height และ max-width ตามลำดับ

กลับไปที่ตัวอย่างร้านกาแฟของเราจากก่อนหน้านี้ สมมติว่าเราต้องการให้ความกว้างของกล่องของเราเปลี่ยนไปตามขนาดของหน้าจอของผู้ใช้ ความกว้างสูงสุดของกล่องควรเป็น 500px และกล่องของเราไม่ควรแคบกว่า 100px เราสามารถบรรลุเป้าหมายนี้โดยใช้รหัสต่อไปนี้:

<html>

<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.</p>

<style>

.aboutBox {
	max-width: 500px;
	min-width: 100px;
	background-color: lightgray;
}

CSS ความสูงและความกว้าง ปุ่มในตัวแก้ไขโค้ดด้านบนเพื่อดูผลลัพธ์ของโค้ด HTML/CSS

มาทำลายโค้ดของเราและอภิปรายกันว่ามันทำงานอย่างไร ในไฟล์ HTML ของเรา เราได้ระบุย่อหน้าของข้อความระหว่างแท็ก

ซึ่งมีข้อความเดียวกันกับตัวอย่างแรกของเรา ชื่อคลาสที่เกี่ยวข้องกับข้อความย่อหน้านี้คือ aboutBox .

ในไฟล์ CSS ของเรา เราได้ระบุคุณสมบัติสามประการที่เกี่ยวข้องกับ aboutBox ชั้นเรียน

คุณสมบัติความกว้างสูงสุดถูกตั้งค่าเป็น 500px ซึ่งหมายความว่าความกว้างสูงสุดของกล่องคือ 500px คุณสมบัติ min-width ถูกตั้งค่าเป็น 100px ซึ่งหมายความว่ากล่องจะไม่ปรากฏแคบกว่า 100px ไม่ว่าผู้ใช้จะดูไซต์บนอุปกรณ์ใด คุณสมบัติสีพื้นหลังถูกตั้งค่าเป็นสีเทาอ่อน ซึ่งกำหนดสีพื้นหลังของกล่องของเราเป็นสีเทาอ่อน

ขนาดของช่องนี้จะเปลี่ยนไปตามขนาดของเบราว์เซอร์ ดังนั้น หากคุณทำให้หน้าต่างเบราว์เซอร์เล็กลง ขนาดของกล่องก็จะเปลี่ยนไปตามนั้น อย่างไรก็ตาม ไม่ว่าหน้าต่างเบราว์เซอร์จะใหญ่แค่ไหน ความกว้างของแท็ก

จะไม่เกิน 500px

บทสรุป

คุณสมบัติความสูงและความกว้าง CSS ช่วยให้คุณกำหนดความสูงและความกว้างขององค์ประกอบบนหน้าเว็บได้

อย่างไรก็ตาม คุณสมบัติเหล่านี้ตั้งค่าคงที่สำหรับความสูงและความกว้างขององค์ประกอบ หากคุณต้องการให้ขนาดของกล่องเปลี่ยนแปลงโดยขึ้นอยู่กับขนาดของหน้าต่างเบราว์เซอร์ คุณสามารถใช้คุณสมบัติ min-height, min-width, max-height และ max-width

บทช่วยสอนนี้กล่าวถึงโดยอ้างอิงจากตัวอย่าง พื้นฐานของความสูงและความกว้างใน CSS วิธีใช้คุณสมบัติความสูงและความกว้าง และวิธีใช้คุณสมบัติความสูงและความกว้างสูงสุดและต่ำสุดที่สอดคล้องกันเพื่อกำหนดขนาดขององค์ประกอบบนเว็บ หน้าหนังสือ. ตอนนี้คุณพร้อมที่จะเริ่มใช้คุณสมบัติความสูงและความกว้างอย่างผู้เชี่ยวชาญแล้ว!