สิ่งที่คุณไม่รู้เกี่ยวกับการคำนวณส่วนต่างเปอร์เซ็นต์ใน CSS

นักออกแบบเว็บไซต์ส่วนใหญ่คิดว่าพวกเขารู้ CSS ค่อนข้างดี ท้ายที่สุดมีไม่มากไป - ประเภทตัวเลือกไม่กี่คุณสมบัติโหลไม่กี่และกฎการเรียงซ้อนบางอย่างที่คุณแทบจะไม่จำเป็นต้องจำตั้งแต่พวกเขาเดือดลงไปสามัญสำนึก แต่เมื่อคุณลงสู่ระดับ nitty-gritty มีรายละเอียดที่คลุมเครือมากมายที่นักออกแบบจำนวนน้อยเข้าใจอย่างแท้จริง.

เมื่อฉันตรวจสอบผลลัพธ์ของการทดสอบ CSS ฟรีที่ฉันเสนอให้ทางออนไลน์ในช่วงหกเดือนที่ผ่านมาฉันค้นพบ คำถามหนึ่งที่เกือบ ไม่มีใคร ได้ถูกต้อง. จากคนหลายพันคนที่ทำการทดสอบ, น้อยกว่า 14% ทำให้ถูกต้อง.

คำถามเดือดถึงเรื่องนี้: คุณคำนวณอัตรากำไรขั้นต้นอย่างไร?

คำถาม

สมมติว่าไซต์ของคุณมีที่เก็บ div, และภายในนั้นเนื้อหา div:

ตอนนี้เราจะให้เนื้อหานั้น div ขอบบน:

.เนื้อหา margin-top: 10%;  

ตกลงดังนั้นมันคือ 10% ... แต่ 10% ของ อะไร? นั่นคือคำถามที่ มีเพียง 13.8% เท่านั้นที่ตอบคำถามได้อย่างถูกต้อง. และโปรดทราบว่าคนเหล่านี้สามารถเข้าถึง Google ได้!

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

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

• 10% ของส่วนสูงของเนื้อหา div
• 10% ของความสูงของตู้คอนเทนเนอร์
• 10% ของความกว้างของ div เนื้อหา
• 10% ของความกว้างของตู้คอนเทนเนอร์

จำไว้ว่ามีเพียง 13.8% ของคนที่สามารถเลือกคำตอบที่ถูกต้องจากรายการนี้ นั่นเป็นวิธีที่เลวร้ายยิ่งกว่าโอกาส!

ดูคำตอบอย่างใกล้ชิด คุณจะเห็นว่ามีเพียงสองสิ่งที่คุณต้องรู้:

คอนเทนเนอร์หรือเนื้อหา?

อย่างแรกคือ ขนาดของระยะขอบตามขนาดของ div เนื้อหาเองหรือตามขนาดของ div container?

ตอนนี้นี่ไม่ใช่ gimme แต่คุณสามารถไว้ใจสัญชาตญาณของคุณได้ ถ้าฉันตั้งค่า div ให้เป็น 50% ของความกว้างของตู้คอนเทนเนอร์และจากนั้นฉันต้องการให้ระยะขอบซ้ายและขวาของมันเติมเต็มส่วนที่เหลือของพื้นที่ฉันจะตั้งให้ 25% ของแต่ละส่วน 100%) เพื่อให้สามารถใช้งานได้ระยะขอบร้อยเปอร์เซ็นต์จะต้องขึ้นอยู่กับขนาดของภาชนะ.

แน่นอนว่าสองในสามของผู้ที่ทำแบบทดสอบจะได้รับคำตอบในส่วนนี้.

ความกว้างหรือความสูง?

ที่สอง, คือขนาดของระยะขอบตามความกว้างหรือความสูงขององค์ประกอบนั้น?

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

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

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

อย่ารู้สึกแย่ถ้าคุณคิดว่ามันต้องสูง เกือบ 80% ของคนที่ทำการทดสอบเห็นด้วยกับคุณ:

มันสมเหตุสมผล ... ไม่จริง!

ยังไม่เชื่อเหรอ นี่คือคำพูดจากสเปค W3C CSS:

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

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

ดังนั้น ณ จุดนี้คุณอาจคิดว่าผู้สร้าง CSS นั้นเป็นเช่นนั้น เป็นบ้า, หรือพวกเขาเพิ่งทำผิดพลาดโง่จริง ๆ แต่ฉันมาที่นี่เพื่อบอกคุณมีสองเหตุผลที่ดีที่จะตั้งระยะห่างในแนวดิ่งตามความกว้างของบล็อกที่มี:

ความสอดคล้องแนวนอนและแนวตั้ง

แน่นอนว่ามีคุณสมบัติชวเลขที่ช่วยให้คุณระบุระยะขอบสำหรับทั้งสี่ด้านของบล็อก:

กำไรขั้นต้น: 10%;

สิ่งนี้ขยายเป็น:

margin-top: 10%; ระยะขอบ - ขวา: 10%; ขอบล่าง: 10%; ระยะขอบซ้าย: 10%;

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

หลีกเลี่ยงการพึ่งพาแบบวงกลม

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

ความสูงของบล็อกนั้นแตกต่างกัน โดยปกติแล้วความสูง ขึ้นอยู่กับความสูงรวมของเนื้อหา. เปลี่ยนความสูงของเนื้อหาและคุณเปลี่ยนความสูงของบล็อก ดูปัญหา?

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

การกำหนดระยะขอบตามแนวตั้งบน ความกว้าง ของคอนเทนเนอร์แบ่งการพึ่งพาแบบวงกลมนั้นและทำให้สามารถจัดเค้าโครงหน้ากระดาษได้.

Ace the Class

ดังนั้นคุณมีมัน: คำถามที่ยากที่สุดในการทดสอบและตอนนี้คุณสามารถตอบได้ ต้องการทราบว่าคุณจะทำอย่างไรในการทดสอบที่เหลือ? ลองด้วยตัวคุณเอง ฉันสัญญาว่าคำถามส่วนใหญ่นั้นง่ายกว่าคำถามนี้มาก.

ในขณะเดียวกันฉันกำลังค้นหาคำถามที่ยากที่สุดใหม่! รายละเอียดของ CSS ที่คุณคิดว่าไม่มีใครรู้?

หมายเหตุจากบรรณาธิการ: สิ่งนี้เขียนขึ้นสำหรับ Hongkiat.com โดย เควินแยง. Kevin ได้เขียนเกี่ยวกับเว็บตั้งแต่ปี 1999 โดยมีหนังสือเกี่ยวกับ PHP, CSS และ JavaScript เป็นชื่อของเขา เขายังเป็นเจ้าภาพพอดคาสต์พูดในที่ประชุมและจัดทำวิดีโอฝึกอบรมเกี่ยวกับเว็บ ตอนนี้เขาเป็นผู้นำทีมพัฒนาที่ Sit the Test ซึ่งเป็นเว็บแอปพลิเคชันสำหรับการสร้างและทำการทดสอบออนไลน์.

เพิ่มเติมเกี่ยวกับ Hongkiat:

• ออกแบบเว็บไซต์: ความสูงของคอลัมน์เท่ากับด้วย CSS
• 6 เคล็ดลับ CSS เพื่อจัดแนวเนื้อหาในแนวตั้ง
• ดูหน่วย CSS: พิกเซล, EM, และเปอร์เซ็นต์
• A Look Into: CSS3 Box-sizing

อ่านแล้ว: 10 คุณสมบัติ CSS3 ที่ซ่อนอยู่ที่คุณควรรู้