CSS โมดูลหน้า

CSS โมดูลหน้า

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

โมเดลกรอบ CSS ละเอียดที่ล้อมรอบองค์ประกอบ HTML แต่ละองค์ประกอบ ซึ่งรวมถึงเมื่อเคลื่อนไหวตัวชนะด้านนอก ขอบเข็มขัด ด้านในเมื่อเคลื่อนไหวตัวชนะและเนื้อหา ภาพด้านล่างแสดงโมเดลกรอบ:

CSS โมดูลหน้า

คำอธิบายสำหรับส่วนต่างๆ:

  • เนื้อหา - พื้นที่ของโกดัง ที่แสดงข้อความและรูปภาพ
  • เมื่อเคลื่อนไหวตัวชนะด้านใน - ลบพื้นที่รอบเนื้อหา และเมื่อเคลื่อนไหวตัวชนะด้านในเป็นเงาโดยมาตราฐาน
  • ขอบเข็มขัด - รอบด้านในเมื่อเคลื่อนไหวตัวชนะและด้านเข็มขัด
  • เมื่อเคลื่อนไหวตัวชนะด้านนอก - ลบพื้นที่ด้านนอกของเข็มขัด และเมื่อเคลื่อนไหวตัวชนะด้านนอกเป็นเงาโดยมาตราฐาน

โมเดลกรอบอนุญาตให้เราเพิ่มขอบเข็มขัดรอบองค์ประกอบ และกำหนดช่องว่างระหว่างองค์ประกอบ

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

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

เมื่อเคลื่อนไหวตัวชนะด้านใน ด้านเข็มขัด และเมื่อเคลื่อนไหวตัวชนะด้านนอก คือตัวเลือกที่มีอยู่ โดยมาตราฐานค่าเริ่มต้นคือ 0 แต่หลายองค์ประกอบจะถูกตั้งค่าด้วยสไตล์ตัวแทนผู้ใช้ โดยสามารถนำมาใช้เพื่อปิดทับสไตล์ของเบราวเซอร์นี้ด้วยการตั้งค่า margin และ padding ขององค์ประกอบเป็น 0 ซึ่งสามารถทำได้แยกๆ หรือใช้เลือกทั่วไปเพื่อตั้งค่าทุกองค์ประกอบ:

* {
  margin: 0;
  padding: 0;
}

ใน CSS กว้างและสูงหมายถึงกว้างและสูงของพื้นที่เนื้อหา การเพิ่มเข้าไปด้วยเมื่อเคลื่อนไหวตัวชนะด้านใน ด้านเข็มขัด และเมื่อเคลื่อนไหวตัวชนะด้านนอก จะเพิ่มขนาดของโกดังทั้งหมด แต่จะไม่ส่งผลต่อขนาดของพื้นที่เนื้อหา

ตั้งค่าเมื่อเคลื่อนไหวตัวชนะด้านนอกทุกด้านของโกดังเป็น 10 พิกเซล และเมื่อเคลื่อนไหวตัวชนะด้านในเป็น 5 พิกเซล ถ้าต้องการให้โกดังนี้มีขนาด 100 พิกเซล จะต้องตั้งค่ากว้างของเนื้อหาเป็น 70 พิกเซล ดูภาพด้านล่าง:

ตัวอย่างของ CSS โมดูลหน้า 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

คำแนะนำ：เมื่อเคลื่อนไหวตัวชนะด้านใน ด้านเข็มขัด และเมื่อเคลื่อนไหวตัวชนะด้านนอก สามารถนำมาใช้กับทุกด้านขององค์ประกอบ หรือใช้กับด้านเดี่ยวๆ

คำแนะนำ：เมื่อเคลื่อนไหวตัวชนะด้านนอกสามารถมีค่าลบ และในหลายกรณีจะใช้ค่าลบเมื่อเคลื่อนไหวตัวชนะด้านนอก

ตัวอย่าง

แสดงโมเดลกรอบมอเตอร์:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

ทดลองด้วยตัวเอง

กว้างและสูงขององค์ประกอบ

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

คำเตือนสำคัญ：เมื่อตั้งค่า width และ height ขององค์ประกอบด้วย CSS แล้ว ต้องการคำนวณขนาดขององค์ประกอบทั้งหมด ต้องเพิ่มเข้าไปด้วยเมื่อเคลื่อนไหวตัวชนะด้านนอก ด้านล่าง ด้านขวา และด้านซ้าย ขององค์ประกอบ

ตัวอย่าง

<div> อาหารกว้างทั้งหมดจะเป็น 350px：

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

ทดลองด้วยตัวเอง

คำนวณดังนี้:

320px (ความกว้าง)
+ 20px (มุมของด้านซ้าย + มุมของด้านขวา)
+ 10px (ขอบซ้าย + ขอบขวา)
+ 0px (มุมนอกซ้าย + มุมนอกขวา)
= 350px

ความกว้างทั้งหมดขององค์ประกอบควรคำนวณเช่นนี้:

ความกว้างทั้งหมดขององค์ประกอบ = ความกว้าง + มุมของด้านซ้าย + มุมของด้านขวา + ขอบด้านซ้าย + ขอบด้านขวา + มุมนอกด้านซ้าย + มุมนอกด้านขวา

ความสูงทั้งหมดขององค์ประกอบควรคำนวณเช่นนี้:

ความสูงทั้งหมดขององค์ประกอบ = ความสูง + มุมของด้านบน + มุมของด้านล่าง + ขอบด้านบน + ขอบด้านล่าง + มุมนอกด้านบน + มุมนอกด้านล่าง