ວິນະມິດ CSS

ວິນະມິດ CSS

ທຸກພາສາ HTML ສາມາດເປັນການຄົ້ນຫາຫຼັກ. ໃນ CSS, ເມື່ອກ່າວເຖິງການອອກແບບ ແລະການຈັດວາງ, ຈະໃຊ້ສະໝຫຼອງ “ຮູບຈຳນວນ” ຫຼື “ຮູບຕັ້ງວຽກ”.

CSS 框模型实质上是一个包围每个 HTML 元素的框。它包括：外边距、边框、内边距以及实际的内容。下图展示了框模型：

ວິນະມິດ CSS

对不同部分的说明：

  • 内容 - 框的内容，其中显示文本和图像。
  • 内边距 - 清除内容周围的区域。内边距是透明的。
  • 边框 - 围绕内边距和内容的边框。
  • 外边距 - 清除边界外的区域。外边距是透明的。

框模型允许我们在元素周围添加边框，并定义元素之间的空间。

元素框的最内部分是实际的内容，直接包围内容的是内边距。内边距呈现了元素的背景。内边距的边缘是边框。边框以外是外边距，外边距默认是透明的，因此不会遮挡其后的任何元素。

ຄຳເຕືອນ:背景应用于由内容和内边距、边框组成的区域。

内边距、边框和外边距都是可选的，默认值是零。但是，许多元素将由用户代理样式表设置外边距和内边距。可以通过将元素的 margin 和 padding 设置为零来覆盖这些浏览器样式。这可以分别进行，也可以使用通用选择器对所有元素进行设置：

* {
  margin: 0;
  padding: 0;
}

在 CSS 中，width 和 height 指的是内容区域的宽度和高度。增加内边距、边框和外边距不会影响内容区域的尺寸，但是会增加元素框的总尺寸。

假设框的每个边上有 10 个像素的外边距和 5 个像素的内边距。如果希望这个元素框达到 100 个像素，就需要将内容的宽度设置为 70 像素，请看下图：

ຄູ່ມີຫົວຂໍ້ CSS 
#box {
  width: 70px;
  margin: 10px;
  padding: 5px;
}

ຄຳເຕືອນ:padding, border ແລະ margin ສາມາດນຳໃຊ້ໃສ່ທຸກດ້ານຂອງສິ່ງມີ ຫຼື ນຳໃຊ້ໃສ່ດ້ານພຽງຢ່າງດຽວ.

ຄຳເຕືອນ:margin ສາມາດມີຄວາມນິຍົມອາດ ແລະ ໃຊ້ຄວາມນິຍົມນີ້ຫຼາຍຄັ້ງ.

ຕົວຢ່າງ

ສະແດງວິນຍານການເຮັດວຽກຂອງບາງບາງປະກອບສ່ວນ:

div {
  width: 300px;
  border: 15px solid green;
  padding: 50px;
  margin: 20px;
}

Try it yourself

ວັດສະພາບຂອງສິ່ງມີ ແລະ ວັດສະພາບມີລະດັບ

ເພື່ອທຳນາຍວັດສະພາບຂອງສິ່ງມີຢ່າງດີໃນທຸກສາຍພະຍາຍາມ ທ່ານຕ້ອງຮູ້ວ່າວິນຍານການເຮັດວຽກຂອງບາງບາງປະກອບສ່ວນວັດສະພາບ.

ຄຳເຕືອນຫຼັກ:ທີ່ຈະນຳໃຊ້ CSS ທີ່ກຳນົດລະດັບ width ແລະ height ຂອງສິ່ງມີ ພຽງແຕ່ຈະກຳນົດລະດັບຂອງເຂດຂວັງ. ເພື່ອທຳນາຍວັດສະພາບທັງໝົດຂອງສິ່ງມີ ຈະຕ້ອງທຳນາຍການກຳນົດຂອງບາງບາງປະກອບສ່ວນ ເຊັ່ນບາງບາງຂອງ padding, border ແລະ margin.

ຕົວຢ່າງ

<div> ວັດສະພາບລະດັບມູນຄ່າຂອງສິ່ງມີ 350px:

div {
  width: 320px;
  padding: 10px;
  border: 5px solid gray;
  margin: 0; 
}

Try it yourself

Calculation as follows:

320px (width)
+ 20px (left + right padding)
+ 10px (left + right border)
+ 0px (left + right margin)
= 350px

The total width of the element should be calculated as follows:

Total width of element = width + left padding + right padding + left border + right border + left margin + right margin

The total height of the element should be calculated as follows:

Total height of element = height + top padding + bottom padding + top border + bottom border + top margin + bottom margin