CSS box-model ໄດ້ອະທິບາຍດ້ວຍຕົວຢ່າງ.

ມື້ນີ້ຂ້ອຍຈະອະທິບາຍກ່ຽວກັບຮູບແບບຂອງກ່ອງໂດຍການຊ່ວຍເຫຼືອຂອງ CSS ພື້ນຫລັງແລະຊັບສິນພື້ນຖານ. ຄຸນລັກສະນະພື້ນຫລັງແລະພື້ນຫລັງແມ່ນຫຍັງ? ສິ່ງທີ່ພວກມັນໃຊ້ ສຳ ລັບແລະຄວາມແຕກຕ່າງລະຫວ່າງພວກມັນ?

ດີ, ນັ້ນແມ່ນ ຄຳ ຖາມ ໜຶ່ງ ທີ່ເນັ້ນເຖິງຄວາມຄິດຂອງຜູ້ເລີ່ມຈົນເຖິງລະດັບປານກາງຂອງນັກພັດທະນາເວັບ. ບາງຄົນກໍ່ມີຄວາມລຶ້ງເຄີຍກັບມັນແລະບາງຄົນກໍ່ຍັງສົງໃສວ່າພວກເຂົາສາມາດໃຊ້ 2 ຄຸນສົມບັດເຫຼົ່ານີ້ຢູ່ບ່ອນໃດ.

ດີ, ກ່ອນທີ່ທ່ານຈະເຂົ້າໃຈ 2 ຄຸນສົມບັດເຫຼົ່ານີ້, ທ່ານ ຈຳ ເປັນຕ້ອງເຂົ້າໃຈຮູບແບບ CSS box-model. ສະນັ້ນ, ໃຫ້ເລີ່ມຕົ້ນດ້ວຍມັນ.

ທຳ ອິດສ້າງ“ div” ແລະໃສ່ປ້າຍ“ p” ຢູ່ພາຍໃນຂອງມັນເຊັ່ນນີ້,

ເນື້ອໃນບາງຢ່າງຢູ່ທີ່ນີ້…

ແລະຈາກນັ້ນໃຫ້ຮູບແບບບາງຢ່າງ.

ຂະນະທີ່ທ່ານສາມາດເຫັນໄດ້ວ່າພວກເຮົາບໍ່ໄດ້ຈັດແຈງຫລືຂອບເຂດໃດ ໜຶ່ງ ໃຫ້ກັບສ່ວນປະກອບ "div" ດັ່ງນັ້ນສ່ວນປະກອບ "div" ບໍ່ມີຊ່ອງໃສ່ກະດານຫລືຊາຍແດນ - box ເທື່ອແລະກ່ອງທັງ ໝົດ ຖືກຖືວ່າເປັນເນື້ອຫາ.

ດັ່ງທີ່ສະແດງໃນຮູບພາບຂ້າງລຸ່ມນີ້.

ທ່ານສາມາດກວດເບິ່ງຕົວເອງໂດຍການເປີດເຄື່ອງມືພັດທະນາ chrome

ຕອນນີ້, ໃຫ້ແຜ່ນ div ຈາກ 50px ຈາກດ້ານເທິງ, ລຸ່ມ, ຊ້າຍ, ຂວາ.

div {
 ພື້ນຫລັງ: # 666;
 ຄວາມກວ້າງ: 300px;
 ຄວາມສູງ: 250px;
 padding: 50px; // padding ຈາກດ້ານເທິງ, ລຸ່ມ, ຊ້າຍ, ຂວາ
}

ດຽວນີ້, ພວກເຮົາມີ padding-box ຂະ ໜາດ 50px & content-box ແມ່ນຢູ່ພາຍໃນ padding-box ດັ່ງທີ່ສະແດງໃນຮູບພາບຂ້າງລຸ່ມນີ້.

ໃນປັດຈຸບັນ, ພວກເຮົາສຸດທ້າຍມີ padding-box ຂອງ 50px

ດຽວນີ້ໃຫ້ເອົາຄວາມກວ້າງອອກຈາກສ່ວນ“ p” ດັ່ງນັ້ນມັນຈຶ່ງຈະຂະຫຍາຍອອກໄປເຕັມເນື້ອໃນຂອງກ່ອງເນື້ອຫາ.

ໜ້າ {
 ພື້ນຫລັງ: ສີແດງ;
}

ທ່ານສາມາດເບິ່ງຜົນໄດ້ຮັບໃນຮູບພາບຂ້າງລຸ່ມນີ້.

‘P’ ອົງປະກອບທີ່ຂະຫຍາຍອອກມາເພື່ອເຮັດໃຫ້ເນື້ອໃນຂອງເນື້ອໃນເຕັມຮູບແບບ

ຕອນນີ້, ໃຫ້ເວົ້າວ່າທ່ານຕື່ມຮູບພື້ນຫລັງມາເປັນ "div" ແລະ ກຳ ນົດຂະ ໜາດ ພື້ນຫລັງຂອງມັນໃຫ້ "ບັນຈຸ" ເພື່ອເຮັດໃຫ້ມັນປັບຂະ ໜາດ ຂອງມັນຢູ່ໃນກ່ອງແລະທ່ານຍັງໃຫ້ມັນບາງຂອບເຂດເພາະວ່າຖ້າບໍ່ມີຊາຍແດນຈະບໍ່ມີຊາຍແດນ.

div {
 ພື້ນຫລັງ: # 666 url ('https://bit.ly/2gzkSPX') ບໍ່ເຮັດຊ້ ຳ;
 ພື້ນຫລັງຂະຫນາດ: ບັນຈຸ;
 ຊາຍແດນ: ສີດໍາແຂງ 10px;
 ຄວາມກວ້າງ: 300px;
 ຄວາມສູງ: 250px;
 padding: 50px;
}

ຫຼັງຈາກນັ້ນມັນຈະມີລັກສະນະເປັນແບບນີ້ຕາມຮູບຂ້າງລຸ່ມ.

ທ່ານສາມາດກວດເບິ່ງມັນໄດ້ເຊັ່ນດຽວກັນໂດຍການເຂົ້າໄປໃນເຄື່ອງມືພັດທະນາ chrome ແລະເລື່ອນຜ່ານແບບ box-model ດັ່ງທີ່ສະແດງໃນຮູບ

ໂດຍຄ່າເລີ່ມຕົ້ນ, div-background-origin ຖືກ ກຳ ນົດໄວ້ໃນ padding-box ແລະນັ້ນ ໝາຍ ຄວາມວ່າຮູບພາບຈະເລີ່ມຕົ້ນຈາກ border-box, ແລະຍັງຈະສາມາດເບິ່ງເຫັນໄດ້ໃນ content-box ເພາະວ່າ content-box ແມ່ນຢູ່ໃນ padding-box.

ພື້ນຫລັງ - ຕົ້ນສະບັບ: padding-box; / * ຄ່າເລີ່ມຕົ້ນ * /

ບອກວ່າພວກເຮົາຕ້ອງການໃຫ້ຮູບເລີ່ມຈາກ padding-box ແຕ່ພວກເຮົາພຽງແຕ່ຕ້ອງການເປີດເຜີຍສ່ວນຂອງຮູບພາບທີ່ຢູ່ໃນເນື້ອໃນຂອງກ່ອງ - ຫຼັງຈາກນັ້ນພວກເຮົາ ຈຳ ເປັນຕ້ອງ ກຳ ນົດພື້ນຫລັງຂອງ clip ໄປຫາ content-box.

div {
 ພື້ນຫລັງ: # 666 url ('https://bit.ly/2gzkSPX') ບໍ່ເຮັດຊ້ ຳ;
 ພື້ນຫລັງຂະຫນາດ: ບັນຈຸ;
 clip-background: content-box;
 ຊາຍແດນ: ສີດໍາແຂງ 10px;
 ຄວາມກວ້າງ: 300px;
 ຄວາມສູງ: 250px;
 padding: 50px;
}

ທ່ານສາມາດເຫັນຜົນໄດ້ຮັບໃນຮູບພາບຂ້າງລຸ່ມນີ້ເຊິ່ງມີພຽງແຕ່ສ່ວນຂອງຮູບພາບທີ່ຢູ່ໃນເນື້ອໃນ - ກ່ອງຈະເຫັນໄດ້ແຕ່ຮູບພາບແມ່ນເລີ່ມຈາກກ່ອງໃສ່ ໜ້າ ຈໍເພາະວ່ານັ້ນແມ່ນຄ່າເລີ່ມຕົ້ນຂອງ "ພື້ນຫລັງ-orgin".

ດັ່ງທີ່ທ່ານສາມາດເຫັນໄດ້ວ່າມີພຽງບາງສ່ວນຂອງຮູບເທົ່ານັ້ນທີ່ສາມາດເບິ່ງເຫັນໄດ້ພາຍໃນເນື້ອໃນ - ກ່ອງແລະສ່ວນທີ່ເຫຼືອແມ່ນຖືກປິດບັງ

ໃນປັດຈຸບັນ, ຂໍໃຫ້ເປີດເຜີຍສ່ວນຂອງພາບພື້ນຫລັງທີ່ມາພາຍໃນກ່ອງໃສ່ກະດານ, ສຳ ລັບສິ່ງທີ່ພວກເຮົາ ຈຳ ເປັນຕ້ອງ ກຳ ນົດພື້ນຫລັງຂອງ clip ກັບໄປທີ່ padding-box ເຊິ່ງແມ່ນຄ່າເລີ່ມຕົ້ນກ່ອນທີ່ພວກເຮົາຈະປ່ຽນມັນ.

div {
 ພື້ນຫລັງ: # 666 url ('https://bit.ly/2gzkSPX') ບໍ່ເຮັດຊ້ ຳ;
 ພື້ນຫລັງຂະຫນາດ: ບັນຈຸ;
 background-clip: padding-box;
 ຊາຍແດນ: ສີດໍາແຂງ 10px;
 ຄວາມກວ້າງ: 300px;
 ຄວາມສູງ: 250px;
 padding: 50px;
}

ທ່ານສາມາດເຫັນໃນຜົນໄດ້ຮັບຂ້າງລຸ່ມນີ້ວ່າຕອນນີ້ສ່ວນຂອງຮູບພາບທີ່ມາພາຍໃນ padding-box ກໍ່ສາມາດເບິ່ງເຫັນໄດ້ເພາະວ່າພວກເຮົາໄດ້ຕັ້ງພື້ນຫຼັງ clip ກັບໄປ padding-box.

ຕອນນີ້ພວກເຮົາຍັງສາມາດເຫັນສ່ວນຂອງຮູບພາບທີ່ຢູ່ໃນກ່ອງໃສ່ກະດານ

ໃນປັດຈຸບັນ, ໃຫ້ແນ່ໃຈວ່າຮູບພາບພື້ນຫລັງຂອງ div ຂອງພວກເຮົາເລີ່ມຕົ້ນຈາກຊ່ອງຊາຍແດນແລະ ສຳ ລັບສິ່ງທີ່ພວກເຮົາ ຈຳ ເປັນຕ້ອງໃຫ້ພື້ນຖານຄວາມເປັນມາຂອງຊາຍແດນ box ຂອງພວກເຮົາ. ແຕ່ກ່ອນອື່ນ ໝົດ, ຈົ່ງເພີ່ມຂະ ໜາດ ຂອງຊາຍແດນເພື່ອສັງເກດຄວາມແຕກຕ່າງ.

div {
 ພື້ນຫລັງ: # 666 url ('https://bit.ly/2gzkSPX') ບໍ່ເຮັດຊ້ ຳ;
 ພື້ນຫລັງຂະຫນາດ: ບັນຈຸ;
 background-origin: border-box;
 background-clip: padding-box;
 ຊາຍແດນ: ສີດໍາແຂງ 20px; / * ຄວາມກວ້າງຂອງຊາຍແດນແມ່ນ 20px ດຽວນີ້ * /
 ຄວາມກວ້າງ: 300px;
 ຄວາມສູງ: 250px;
 padding: 50px;
}

ດັ່ງທີ່ທ່ານສາມາດເຫັນໃນຮູບພາບຂ້າງລຸ່ມນີ້ເພາະວ່າຮູບພາບພື້ນຫລັງຕອນນີ້ເລີ່ມຈາກ box-border ນັ້ນເປັນເຫດຜົນທີ່ສ່ວນນ້ອຍຂອງຮູບພາບຖືກປົກຄຸມດ້ວຍສີ ດຳ, ໃນ ຄຳ ສັບອື່ນຂອງສ່ວນຂອງຮູບແມ່ນຢູ່ເບື້ອງຫຼັງຊາຍແດນສີ ດຳ.

ໃນປັດຈຸບັນຮູບພາບແມ່ນເລີ່ມຕົ້ນຈາກເຂດຊາຍແດນ

ດຽວນີ້ເພື່ອພິສູດຈຸດຂອງຂ້ອຍວ່າຮູບພາບເລີ່ມຈາກເຂດຊາຍແດນແລະນັ້ນແມ່ນເຫດຜົນທີ່ສ່ວນນ້ອຍໆຂອງຮູບຢູ່ເບື້ອງຫຼັງຊາຍແດນສີ ດຳ, ໃຫ້ເຮົາມີຄວາມຕ້ານທານບາງດ້ານເພື່ອໃຫ້ມັນສາມາດຈາງຫາຍໄປແລະພວກເຮົາສາມາດເຫັນສ່ວນຂອງຮູບພາບທີ່ ແມ່ນຢູ່ເບື້ອງຫລັງຊາຍແດນ.

div {
 ພື້ນຫລັງ: # 666 url ('https://bit.ly/2gzkSPX') ບໍ່ເຮັດຊ້ ຳ;
 ພື້ນຫລັງຂະຫນາດ: ບັນຈຸ;
 background-origin: border-box;
 background-clip: padding-box;
 ຊາຍແດນ: 20px ແຂງ rgba (0,0,0,0,5); / * ໃຊ້ rgba () * /
 ຄວາມກວ້າງ: 300px;
 ຄວາມສູງ: 250px;
 padding: 50px;
}
ໃນທີ່ນີ້ທ່ານສາມາດເບິ່ງຮູບພາບທີ່ຢູ່ເບື້ອງຫຼັງຊາຍແດນທີ່ຈ່ອຍຜອມ

ໃນທີ່ນີ້ທ່ານສາມາດເຂົ້າໄປເບິ່ງ, ຕອນນີ້ທ່ານສາມາດເຫັນສ່ວນຂອງຮູບພາບທີ່ຢູ່ເບື້ອງຫຼັງຊາຍແດນແລະມັນຍັງພິສູດໃຫ້ເຫັນເຖິງຈຸດຂອງຂ້າພະເຈົ້າວ່າຕອນນີ້ຮູບເລີ່ມແຕ່ເຂດຊາຍແດນເພາະວ່າພວກເຮົາ ກຳ ນົດພື້ນຖານເບື້ອງຕົ້ນມາເປັນຊາຍແດນ.

ໃນປັດຈຸບັນທີ່ທ່ານຮູ້ຄວາມແຕກຕ່າງລະຫວ່າງພື້ນຫລັງ - ຕົ້ນ ກຳ ເນີດແລະພື້ນຫລັງ - ຄລິບແລະທ່ານຍັງຮູ້ກ່ຽວກັບແບບ CSS box-model, ເວລາຂອງມັນ ສຳ ລັບທ່ານທີ່ຈະໄປແລະສ້າງສິ່ງມະຫັດສະຈັນບາງຢ່າງກັບມັນ. # ກູດດີ

ຖ້າທ່ານພາດຫົວຂໍ້ທີ່ຜ່ານມາຂອງຂ້ອຍກ່ຽວກັບການເຂົ້າເຖິງເວັບໄຊຕ໌ແລ້ວນີ້ແມ່ນການເຊື່ອມຕໍ່ຫາມັນ, ຢ່າລືມອ່ານ. ກົດ​ບ່ອນ​ນີ້