CSS
Box Model <div> <p> <table> <body>
สิ่งที่เกี่ยวข้องกับ Box Model Division <div></div> เป็นเหมือนกล่องเอนกประสงค์ที่ใส่ Element อื่นๆเข้าไปไว้ภายใน เป็นแท็กที่ไม่มีลักษณะเฉพาะตัว ทำให้สามารถตกแต่งได้ตามต้องการ Containing Block Block ที่บรรจุ Element อื่นไว้ภายใน เมื่อมีการเปลี่ยนแปลง จะมีผลต่อ Element ภายในโดยอัตโนมัติ ที่เรียกว่า “Inherit”
Block Level Element Element ที่จะวางที่บรรทัดใหม่เสมอ <p> , <h1> - <h6>, <div>,<table>,<ol>,<ul> Inline Element Element ที่จะไม่มีการขึ้นบรรทัดใหม่ <span>,<b>, <a>, <img> , <strong> , <em>
Inline Element (เรียงจากซ้ายไปขวา) Block Level Element <div> <p> <table> <span> <b> <img> Inline Element (เรียงจากซ้ายไปขวา) Block Level Element (เรียงจากบนลงล่าง)
โครงสร้างของ Box Model Margin พื้นที่ว่างรอบๆ Element Border เส้นขอบ Padding พื้นที่ว่างระหว่างเส้นขอบกับสิ่งที่บรรจุภายใน Content Area พื้นที่บรรจุเนื้อหาหรือสิ่งที่ต้องการ
การกำหนดขนาดใน Box Area px pixel mm milimetre in Inch % Percentage
margin กำหนดสี่ด้านพร้อมกัน margin-top กำหนดเฉพาะส่วนบน Box Model Property Margin margin กำหนดสี่ด้านพร้อมกัน margin-top กำหนดเฉพาะส่วนบน margin-right กำหนดเฉพาะส่วนขวา margin-bottom กำหนดเฉพาะส่วนล่าง margin-left กำหนดเฉพาะส่วนซ้าย value : length | percentage | auto
Box Model Property Border เส้นขอบ border กำหนดลักษณะ(width, style, color) เส้นขอบทั้งสี่ด้าน และ ทุกด้านเหมือนกันหมด border-top กำหนดลักษณะ(width, style, color) เส้นขอบเฉพาะด้านบน border-right กำหนดลักษณะ(width, style, color) เส้นขอบเฉพาะด้านขวา border-bottom กำหนดลักษณะ(width, style, color) เส้นขอบเฉพาะด้านล่าง border-left กำหนดลักษณะ(width, style, color) เส้นขอบเฉพาะด้านซ้าย border-style กำหนดแบบการตกแต่งแต่ละด้าน border-top-style border-right-style border-left-style border-bottom-style
border-width กำหนดความกว้างของเส้นขอบทั้งสี่ด้าน border-top-width กำหนดความกว้างเฉพาะเส้นขอบด้านบน border-right-width กำหนดความกว้างเฉพาะเส้นขอบด้านขวา border-bottom-width กำหนดความกว้างเฉพาะเส้นขอบด้านล่าง border-left-width กำหนดความกว้างเฉพาะเส้นขอบด้านซ้าย border-color กำหนดสีของเส้นขอบแต่ละด้าน border-top-color border-right-color border-bottom-color border-left-color border : 2px solid black ;
Border-style
Border-width Thin Medium Thick ขนาด Border-color ชื่อสี รหัสค่าสี #RGB
padding กำหนดสี่ด้านพร้อมกัน padding-top กำหนดเฉพาะด้านบน padding-right กำหนดเฉพาะด้านขวา padding-bottom กำหนดเฉพาะด้านล่าง padding-left กำหนดเฉพาะด้านซ้าย Value : length | percentage
Content Area width ความกว้าง length | % | auto height ความยาว length | % | auto
การกำหนด Property แบบย่อ (Shorthand Properties) มีค่าเดียว property : a; มีสองค่า property : a b; กำหนดให้ด้านบนและล่าง ให้เป็นค่า a กำหนดให้ด้านซ้ายและขวา ให้เป็นค่า b มีสามค่า property : a b c; กำหนดให้ด้านบนให้เป็นค่า a กำหนดให้ด้านล่าง ให้เป็นค่า c border-width:1px; border-width:1px 2px; 1px 2px border-width:1px 2px 3px; 1px 2px 3px
มีสี่ค่า กำหนดตามแบบเข็มนาฬิกา (บน ขวา ล่าง ซ้าย) property : a b c d; border-width:1px 2px 3px 4px; 1px 4px 2px 3px
Floating Left ให้ Element ชิดซ้ายสุด Right ให้ Element ชิดขวาสุด None คงเดิม float : left; float : right float : none
ลักษณะการ Float Element การ Float จะอยู่ในส่วนของ Container ไม่ออกนอกกรอบ BOX1 BOX2
Element ที่มีการ Float หลายตัว จะเรียงต่อกัน ไม่ทับซ้อนกัน BOX1 BOX2 BOX3
การ Float ไม่จำเป็นต้องเรียงติดกัน หากไม่มีที่ว่างเหลือพอ จะเริ่มที่แถวใหม่ เพราะจะต้องไม่ทับซ้อนของ Element ก่อนหน้า BOX1 BOX2 BOX3
การ Float ของ Element หากมีเนื้อที่เหลือพอ Element ที่ตามมาจะใช้พื้นที่ที่เหลือต่อไป xxxxx xxxxx xxxxx xxxxxxxxxxxxxxxxx xxxxxxxx xxxxx xxxxx xxxxx xxxxxxxx xxxxxx xxxx. xxxx xx xxx xxxx xxxx xxxxx xxx xx xxx. xxxxx xxx xxx xxx xxx xxx xx xxxxx. BOX2
การ Clear Float clear : both; Clear ทั้งหมด clear : left; Clear เฉพาะ Float Left clear : right; Clear เฉพาะ Float Right xxxxx xxxxx xxxx xxxxxxxxxx xxxx xxxxxxxxx xxx xxxx xxxxxx xxxxxx xxxxxxxxxxxx xxxxxx. xxxxx xxxx xxxx xxxxxxx xxxx xxxxx xxxxxxx xxxxx xxxxxxxx xxx xxx xxxxxxxx xx xxxxx xxxx xx xx. BOX1 xxxxx xxxxx xxxx xxxxxxxxxx xxxx xxxxxxxxx xxx xxxx xxxxxx xxxxxx xxxxxxxxxxxx xxxxxx. xxxxx xxxx xxxx xxxxxxx xxxx xxxxx xxxxxxx xxxxx xx xxxxxx xxx xxx xxxxxxxx xx xxxxx xxxx xx xx. BOX1
Positioning เป็นการจัดตำแหน่งของ Element ใน Browser อย่างอิสระ โดยจะต้องระบุว่า จะใช้ Container ใดเป็นหลัก การใช้ position property จะมีผลเฉพาะตัวเอง ไม่ถ่ายทอดไปสู่ Element ภายใน
Position Property ที่เป็น Static Static จะไม่สามารถปรับตำแหน่งได้ แต่สามารถใช้ ค่า Margin เพื่อปรับเลื่อนได้ Fixed เป็นการวางตำแหน่งตายตัว ใช้หน้า Browser เป็นหลัก โดยนับจากมุมซ้ายสุด Relative คล้ายกับ Static แต่สามารถปรับระยะห่างได้ตามต้องการ ด้วยค่า offset Absolute เป็นการวางตำแหน่งที่เป็นอิสระที่สุด โดยจะใช้ Container ที่ใกล้สุดเป็นหลัก แต่จะต้องไม่ใช่ position ที่เป็น Static
Offset Property top top: 50%; right right: 30px; bottom bottom: 10px; left left: -2em; BOX1 top: 50%; left: 50%;
position : static #Box1{ position : static; top: 50px; left: 20px; } margin-left: -10px;
position : fixed #Box1{ position : fixed; top: 50px; left: 20px; } - x
position : relative #Box1{ position : relative; top: 50px; left: 20px; } top : 50px; left : 20px; Box1
position : absolute
Z-index ในการจัด Position แบบ Absolute อาจเกิดการทับซ้อนกันได้ ดังนั้นจึงสามารถเรียงลำดับ Element ที่ซ้อนกันเป็นชั้นๆว่า Element ใดจะมาก่อนหรือหลังได้ ซึ่งค่าของ z-index ที่มากกว่า จะอยู่สูงกว่าค่าที่มีน้อยกว่า BOX3 z-index:1 BOX2 z-index:2 BOX1 z-index:3
Form กับ CSS Input.txtname{ text-align: right; background: #FFFFCC; border-top: 2px solid #CCC; border-left: 2px solid #CCC; border-right: 1px solid #CCC; border-bottom: 1px solid #CCC; margin-top: 5px; }