รับทําเว็บไซต์ รับทําseo
 
รับทําเว็บไซต์ รับทําseo
บทความที่น่าสนใจ

บทความ ที่น่าสนใจ

Box-sizing กับการกำหนดขนาดของ Element ใน CSS

    Box-sizing เป็นคุณสมบัติใหม่ของ css เพื่อช่วยในการจัดการ layout ได้ดีขึ้น ถ้าหากใครเคยทำงานกับ css มาสักระยะจะรู้ว่าการกำหนด width, padding, และ border นั้นสามารถทำให้เราสับสนได้

     

    การใช้ box-sizing: border-box นั้นใช้สำหรับเมื่อเราต้องการกำหนดขนาดของ element นั้นตามค่า width เลยโดยไม่นำ padding และ border มาคิดภายนอก ยกเว้น margin ที่จะคิดภายนอก element เช่นเดิม

    ซึ่งหากเราจะเขียน CSS โดยไม่ใช้ box-sizing: border-box และมี border มี padding ด้วย เราต้องคำนวณโดยการไปหักลบจากค่า width ที่ต้องการโดยคิดค่า width ที่ต้องการไว้ว่าเท่าไหร่ และไปลบกับค่า padding และ border ที่จะเพิ่มเข้ามาในด้าน ขวา และ ซ้าย และกำหนดค่า width ที่ลบไปแล้วเขียนใน CSS เช่น


    .box{
      border-width: 10px;
      margin: 20px auto;
      padding: 50px;
      width: 500px;
    }
     
    จากขนาดความกว้างที่ตั้งไว้ width: 500px และ padding: 50px, border-width: 10px รวมแล้วมีความกว้างทั้งหมด 620px (500 + padding 50 ด้านซ้าย +padding 50 ด้านขวา + border-width 10 ด้านซ้าย + border-width 10 ด้านขวา)


    หากไม่ต้องการการคำนวณแบบที่กล่าวไป มีวิธีที่ง่ายกว่านั้นคือการใช้ box-sizing: border-box;


    .box{
      -webkit-box-sizing: border-box;
         -moz-box-sizing: border-box;
              box-sizing: border-box;
    }
    .box{
      border-width: 10px;
      margin: 20px auto;
      padding: 50px;
      width: 500px;
    }
     
     

บทความที่น่าสนใจ

บทความ ล่าสุด

บทความ ความรู้ด้านไอที, คอมพิวเตอร์ Techonlogy, Gadget, ความรู้เกี่ยวกับคอมพิวเตอร์ กับทาง SoftMelt.com