Google วันนี้มีอะไร ? ฉลอง 40 ปี ลูกบาศก์รูบิค

19/05/2014

แปลความหมายเพลง Olivia Ong – The Girl From Ipanema

20/05/2014

พื้นฐาน CSS Properties – Box Model – กล่อง กรอบ ขอบ เขต

19/05/2014
empty image
empty image

Box Model

หรือจะแบบไทยๆ ว่า อะไรดี… เรื่องนี้จะเกี่ยวกับการกำหนดรูปแบบของ กรอบ ขอบเขต ของ element ซึ่งเป็นเรื่องที่สำคัญอันดับต้นๆ เลยล่ะในการออกแบบเว็บไซต์ ที่จริง position ก็สำคัญพอๆ กัน -..-
เอาล่ะ ดูรูปกันก่อน

border ขอบหรือกรอบ (สีแดง)
margin พื้นที่ส่วนที่ขยายออกจากขอบออกไปด้านนอก (สีขาว)
padding พื้นที่ส่วนที่ขยายออกจากขอบเข้ามาด้านใน (สีดำ)
content คือเนื้อหาของเว็บไซต์ ไม่ว่าจะเป็นข้อความ รูปภาพ วิดีโอ อื่นๆ (สีเทา)

มาดูรายละเอียดกันเลย…

 1. border

มีรายละเอียดปลีกย่อยเยอะพอสมควร

ลักษณะการเขียนในแบบต่างๆ
border-width: กำหนดความกว้าง สามารถกำหนดได้เป็น thin บาง, medium กลาง, thick หนาสุด หรือใส่เป็น px ก็ได้
border-style: กำหนดรูปแบบของขอบ ดูเพิ่มเติมด้านล่าง
border-color: กำหนดสีของขอบ ก็ใส่ค่าเป็นค่าของสี
หรือ
border-[top|right|bottom|left]-[width|style|color]: value; ใน [] คือเลือกอย่างใดอย่างหนึ่ง เป็นการกำหนดเฉพาะด้าน เช่น
border-top-width: 10px; กำหนดระยะของขอบด้านบน
border-right-color: red; กำหนดขอบด้านซ้ายให้มีสีแดง

border-[top|right|bottom|left]:width style color: กำหนดความกว้าง รูปแบบ สี เฉพาะด้านที่เลือก เช่น
border-top: 2px dashed red; กำหนดให้ขอบด้านบนมีขนาด 2px เป็นเส้นปะ มีสีแดง

ตัวอย่าง

 

border: 5px solid #3399FF; กำหนดให้ขอบทั้งหมดสีฟ้า
border-bottom-color: red; กำหนดอีกครั้งให้ขอบล่างสีแดง

กำหนดความมนของขอบ
border-radius: radius; กำหนด 1 ค่าจะเป็นการกำหนดรัศหมีขอบ หรือความมนของขอบ ให้ทั้ง 4 ด้าน เช่น

border-radius: 20px;

 

แต่ถ้ากำหนด 2 ค่า จะเป็น บนซ้าย+ล่างขวา และ บนขวา+ล่างซ้าย เช่น

border-radius: 20px 50px;

แต่ถ้ากำหนด 4 ค่า จะเป็นการกำหนดขนาดของด้านต่างๆ เรียงดังนี้ top-left top-right bottom-right bottom-left เช่น

border-radius: 0px 50px 30px 10px;

และแบบอื่นๆ  
border-[top|bottom]-[right|left]-radius: radius; กำหนดความมนเฉพาะด้าน เช่น
   border-top-right-radius: 5px; กำหนดให้ขอบบนขวา มีความมน 5px

 Value ของ style ….

 -none ไม่มีขอบ
 -hidden ซ่อนขอบ
 -dotted เป็นจุด
Internet Explorer
Chrome
-dashed เป็นเส้นประ
 -solid เส้นธรรมดา
 -double เส้นคู่กัน
 -groove เป็นร่องเข้าไปในเส้นขอบ
 -ridge ขอบนูน 3 มิติ
 -inset ลักษณะเหมือนปุ่มยุบเข้าด้านใน
 -outset ลักษณะเหมือนปุ่มนูน

และการเขียนแบบสั้นหรือ shorthand
border:width style color; เป็นการกำหนดให้ทั้ง 4 ด้านมีรูปแบบดังที่กำหนด เช่น
   border: thin dotted red;
   border: 10px solid #00f;

 2. margin

value : ค่าเป็นตัวเลข , % , auto
property อื่นๆ
margin-top ยืดด้านบน
margin-right ยืดด้านขวา
margin-bottom ยืดด้านล่าง
margin-left ยืดด้านซ้าย

ส่วนใหญ่จะเขียนแบบสั้นกัน ง่ายกว่า…

1. เขียนแบบ 4 ค่า
margin: 30px 20px 30px 20px; ความหมาย ค่าจะเรียงตามเข็มคือ บน  ขวา ล่าง ซ้าย
2. เขียนแบบ 2 ค่า
margin: 30px 10px; ความหมาย ยืดบนล่าง 30px, ยืดซ้ายขวา 10px
3. เขียนแบบ 1 ค่า
margin: 20px; ความหมาย ยืดทุกด้าน 20px

3. padding

ก็เหมือนกับ margin แหละนะ

value : ค่าเป็นตัวเลข , % , auto
property อื่นๆ
margin-top หดเข้าจากด้านบน
margin-right หดเข้าจากด้านขวา
margin-bottom หดเข้าจากด้านล่าง
margin-left หดเข้าจากด้านซ้าย

การเขียนก็เหมือนกันกับ margin…
ตัวอย่าง
ความแตกต่างระหว่าง margin และ padding ลองสังเกตุที่ขอบสีดำ

margin
padding

 

 4. width และ height

width ความกว้างของ element
height ความสูงของ element
Value ของทั้งสองมี ค่า px , % , auto เป็นค่าปกติ ซึ่งขนาดมันจะขยายออกเองตามขนาดของ content หรือเนื้อหา , ข้อความ

ตัวอย่าง
1. ขนาด content สูงกว่าขนาดของความสูงของ element ที่กำหนด

2. กำหนดความกว้างน้อยไป ก็จะเป็นแบบนี้

และยังมี
min-width ความกว้างต่ำสุดที่เป็นไปได้ โดยจะไม่แคบบกว่านี้ แต่กว้างกว่านี้ได้
max-width ความกว้างสูงสุดที่เป็นไปได้ โดยจะไม่สามารถกว้างกว่านี้ได้อีก
min-height ความสูงต่ำสุดที่เป็นไปได้ โดยจะไม่ต่ำไปกว่านี้
max-height ความสูงสูงสุดที่เป็นไปได้ โดยจะไม่สูงไปกว่านี้

 5. overflow

กำหนดรูปแบบ เมื่อขนาดของ element หนึ่งมีขนาดใหญ่ จนไปทับ element อื่นๆ
overflow: value; กำหนดรูปแบบเมื่อเกินทั้งแนวตั้งแนะแนวนอน
overflow-x: value; กำหนดรูปแบบเมื่อเกินไปทางแกน x หรือแนวนอน
overflow-y: value; กำหนดรูปแบบเมื่อเกินไปทางแกน y หรือแนวตั้ง

Value มี
visible ซึ่งเป็นค่าปกติคือ โชว์ส่วนที่เกินไว้นั่นแหละ

hidden ซ่อนส่วนที่เกิน





scroll เพิ่มแถบเลื่อน

auto อัติโนมัติ

Box Model ….Zzz
Ref.
http://www.w3schools.com/cssref/