ก่อนหน้านี้ฉันพบข้อผิดพลาดแปลก ๆ เมื่อเรียนรู้ bootstrap ถ้าฉันทำงานเตรียมการก่อนเรียนรู้ bootstrap ฉันสามารถหลีกเลี่ยงข้อผิดพลาดบางอย่างในระดับที่มากขึ้นหรือน้อยลง ด้านล่างบรรณาธิการจะแนะนำคุณเกี่ยวกับความรู้เกี่ยวกับแอตทริบิวต์กล่องชายแดน
ในไฟล์ CSS ของ Boostrap: boostrap.css มีรหัสชิ้นหนึ่ง:
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; การปรับขนาดกล่อง: กล่องชายแดน; -ซึ่งหมายความว่าเมื่อเขียนโค้ดคุณสมบัตินี้จะอยู่ทุกที่ แล้วการปรับขนาดกล่องนี้คืออะไร: Boder-Box? ก่อนอื่นให้ดูที่รหัสธรรมดามาก:
<div> <div> </div> </div>
เรียกใช้รหัสเพื่อค้นหา: ความสูงภายนอกคือ 702px ความกว้างภายในคือ 500px และความสูงคือ 500px; ทุกคนไม่ควรสงสัยที่นี่มาดูรหัสอีกชิ้นหนึ่งตอนนี้:
* {-webkit-box-sizing: border-box; -moz-box-sizing: border-box; การปรับขนาดกล่อง: กล่องชายแดน; } <div> <div> </div> </div>รหัสนี้เป็นการเพิ่มรหัสสองรหัสแรก สามารถเข้าใจได้ง่ายๆว่าตอนนี้คุณเริ่มเขียนโค้ดในกรอบของ Boostrap ผลลัพธ์ของการทำงานของรหัสคือ: ความกว้างของด้านนอกคือ 500px และความสูงของด้านในคือ 298px;
เหตุผลสำหรับผลลัพธ์นี้คือ: การปรับขนาดกล่อง: กล่องชายแดนเพื่อให้ความกว้างและความสูงขององค์ประกอบจะไม่ได้รับผลกระทบจากการขยายและเส้นขอบ ตัวอย่างเช่นในรหัสข้างต้นแม้ว่าด้านนอกจะมีช่องว่างภายในและเส้นขอบการขยายและเส้นขอบจะไม่ส่งผลกระทบต่อความกว้างและความสูงของด้านนอกและความกว้างและความสูงของด้านนอกยังคงเป็น 500px; แต่ช่องว่างและชายแดนไปไหน? คำตอบ: เข้าไปข้างใน! เปิดเครื่องมือการดีบักของเบราว์เซอร์และดูรายละเอียดสไตล์ของด้านนอก:
เราสามารถเห็นได้อย่างชัดเจนว่าช่องว่างภายในและชายแดนนั้นถูกต้อง แต่พวกเขาครอบครองพื้นที่ด้านในของด้านนอก ตั้งแต่การขยาย: 100px อยู่ที่ความกว้างและค่าความสูง 200px ของด้านนอกและชายแดนจะอยู่ที่ความกว้าง 2px และค่าความสูงของด้านในดังนั้นด้านในสามารถรับความกว้าง 298px และค่าความสูงของด้านนอกเท่านั้น
หากคุณมีประสบการณ์ในการพัฒนาเว็บภายใต้ IE คุณจะพบว่าการปรับขนาดกล่อง: กล่องชายแดนเป็นโหมดแปลก ๆ ของ IE รุ่นล่าง
ข้างต้นเป็นความรู้ที่เกี่ยวข้องเกี่ยวกับการเตรียม boostrap สำหรับกล่องชายแดนที่แนะนำโดยบรรณาธิการ คุณได้เรียนรู้แล้วหรือยัง? หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับทุกคนในเวลา ในเวลาเดียวกันฉันขอขอบคุณทุกคนที่ให้การสนับสนุนเว็บไซต์ Wulin.com!
ด้านล่างนี้เป็นการแนะนำสั้น ๆ เกี่ยวกับความเข้าใจในกล่องชายแดนขนาดกล่อง
-webkit-box-sizing: border-box; จากนั้นความกว้างและความสูงที่กำหนดโดย DIV จะรวมถึงเส้นขอบและการขยาย
<! doctype html> <html> <head> <mhead> <title> การปรับแต่งกล่อง </title> <style type = "text/css">. testdiv {padding: 10px ;; ความกว้าง: 100px; border: 10px solid} </style> </head> border-box; "> พิเศษ </div> </body> </html>