CSS ส่วนประกอบแผงความประกอบ

CSS ส่วนประกอบแผงความประกอบ

ที่นี้คุณจะเรียนรู้ความสัมพันธ์ CSS ที่เกี่ยวกับส่วนตัวผู้ใช้ดังนี้:

  • resize
  • outline-offset

การสนับสนุนเบราจ์เวอร์

ตัวเลขในตารางแสดงถึงเบราจ์เวอร์ฉบับแรกที่สนับสนุนความสัมพันธ์นี้อย่างเต็มที่.

property Chrome IE Firefox Safari Opera
resize 4.0 ไม่สนับสนุน 5.0 4.0 15.0
outline-offset 4.0 15.0 5.0 4.0 9.5

CSS ปรับขนาด

resize ความสัมพันธ์ที่กำหนดว่าองค์ประกอบควรที่จะ (และหากเป็นไปได้) ถูกปรับขนาดโดยผู้ใช้.

องค์ประกอบ div นี้สามารถปรับขนาดโดยผู้ใช้ได้!

ปรับขนาด: คลิกและลากมุมล่างขวาขององค์ประกอบ div นี้:

สัญญาณเตือน：Internet Explorer ไม่สนับสนุนความสัมพันธ์ resize:

ตัวอย่างดังต่อไปนี้ทำให้ผู้ใช้สามารถปรับขนาดความกว้างขององค์ประกอบ <div> ได้เท่านั้น:

ตัวอย่าง

div {
  resize: horizontal;
  overflow: auto;
}

ทดลองด้วยตัวเอง

ตัวอย่างดังต่อไปนี้ทำให้ผู้ใช้สามารถปรับขนาดความสูงขององค์ประกอบ <div> ได้เท่านั้น:

ตัวอย่าง

div {
  resize: vertical;
  overflow: auto;
}

ทดลองด้วยตัวเอง

ตัวอย่างดังต่อไปนี้ทำให้ผู้ใช้สามารถปรับขนาดความสูงและความกว้างขององค์ประกอบ <div> ได้:

ตัวอย่าง

div {
  resize: both;
  overflow: auto;
}

ทดลองด้วยตัวเอง

ในหลายแบบเบราจ์เวอร์ <textarea> จะมีความสามารถปรับขนาดโดยเริ่มต้น. ตรงนี้เราใช้ความสัมพันธ์ resize ในการปิดการปรับขนาดนี้:

ตัวอย่าง

textarea {
  resize: none;
}

ทดลองด้วยตัวเอง

การย้ายเขตเขียน CSS

outline-offset ความสัมพันธ์ที่เพิ่มช่องว่างระหว่างลอยแบบและชายเครื่องหมายขององค์ประกอบ:

div นี้มีลอยแบบด้านนอกของชายเครื่องหมาย 15px

สัญญาณเตือน：ลอยแบบต่างจากชายเครื่องหมาย! ต่างจากชายเครื่องหมาย ลอยแบบนั้นถูกวาดนอกชายเครื่องหมายขององค์ประกอบและอาจจะทับเนื้อหาอื่น ๆ พร้อม ๆ ที่ลอยแบบยังไม่ได้เป็นส่วนหนึ่งของขนาดขององค์ประกอบ: ความกว้างและความสูงขององค์ประกอบทั้งหมดไม่ได้รับผลกระทบจากความกว้างของลอยแบบ:

ตัวอย่างดังต่อไปนี้ใช้ความสัมพันธ์ outline-offset ในการเพิ่มช่องว่างระหว่างชายเครื่องหมายและลอยแบบของมุมนอก:

ตัวอย่าง

div.ex1 {
  margin: 20px;
  border: 1px solid black;
  outline: 4px solid red;
  outline-offset: 15px;
} 
div.ex2 {
  margin: 10px;
  border: 1px solid black;
  outline: 5px dashed blue;
  outline-offset: 5px;
}

ทดลองด้วยตัวเอง

CSS property ส่วนประกอบตัวแปลง

ตารางด้านล่างนี้ระบุทั้งหมดของ property ส่วนประกอบตัวแปลง

property การอธิบาย
outline-offset เพิ่มช่องว่างระหว่างขอบของภาพรอยแบบและขอบของส่วนประกอบ
resize กำหนดว่าส่วนประกอบจะสามารถปรับขนาดได้โดยผู้ใช้หรือไม่