CSS ການວາງຕົວນັກສະແດງ

CSS ການວາງຕົວນັກສະແດງ

在本章中，您将学到以下 CSS 用户界面属性：

  • resize
  • outline-offset

浏览器支持

表格中的数字注明了完全支持该属性的首个浏览器版本。

属性 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 用户界面属性

下表列出了所有用户界面属性：

属性 描述
outline-offset 在轮廓和元素的边框边缘之间添加空间。
resize 规定元素是否可由用户调整大小。