CSS BOX Model

การเริ่มทำความเข้าใจเรื่อง box model นั่นไม่ใช่เรื่องยากครับ และถ้าเราเข้าใจถูกต้องตั้งแต่ต้นแล้ว ขั้นสูงอย่างการวางเลเอาท์ ก็จะไม่เป็นปัญหาเลย

อื่นใดสำหรับ box model แล้วก็คือ การทำความเข้าใจหลักการ ของชิ้นหนึ่งๆ ที่แสดงลักษณะออกมาเป็นกล่อง ที่โดนเราระบุ ความกว้าง ความสูงให้นั่นเอง เช่น tag div ถ้าเราจะกำหนดความกว้างความสูงให้กับ div หนึ่งๆ css จะรวมค่าความกว้างของทุกอย่างของ class นั้นๆ เข้าไปด้วยกันเลย ไม่ว่าจะเป็น พื้นที่สำหรับข้อมูล padding margin และ border

อย่างไร

เช่น เราอยากจะสร้าง div 1 อัน มีความกว้างโดยรวม 100px padding 5px, margin, 5px, border 5px เราจะเขียนคลาสออกมาได้ ตามตัวอย่างนี้

กล่องรูปภาพแสดงการเขียน css box model

จากโค้ด class .boxmodel ผลรวมทั้งหมดของความกว้าง จะเท่ากับ 100 พอดี ซึ่งลักษณะนี้ พื้นที่สำหรับแสดงผลข้อมูลจะเหลือเพียง 70px โดยลักษณะการรวมความกว้าง จะรวมตามแนวแกน x และ y ครับ

รักกันชอบกันอย่าลืมแชร์นะครัช:
error0
Tweet 20
fb-share-icon20

Back to Top

6 Responses to CSS BOX Model

  1. ยากนะ

    พรีวิวใน ไออี กะ ไฟร์ฟ๊อกซ์ ไม่เท่ากันจ้า

    Reply

  2. zyncmaster

    ชอบครับๆ

    ผมอยากใช้ CSS มานานมาก แต่งงว่ายังไง

    สะดวกมากมาย

    Reply

  3. เดวิด

    บทความเป็นประโยชน์มากเลยครับ สำหรับผู้ที่ต้องการศึกษา css อยากให้เขียนไปเรื่อย ๆ เลยครับ

    Reply

  4. bukoilza

    ผมก็มาหาคำตอบ อีกแล้วครับ

    Reply

  5. แทน

    ผมว่าบทความนี้แปลกๆนะครับ ไม่จริงเสมอไปครับ การแสดงผลใน firefox ก็ไม่เป็นไปตามนี้

    Reply

Leave a Reply to Chok Evolution Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Back to Top

Social Share Buttons and Icons powered by Ultimatelysocial