CSS 数学函数

ກົງຢູ່ພວກມັນ CSS ການນຳໃຊ້ສາມາດການສະແດງວຽກງານທີ່ຈະໃຊ້ເປັນຄູ່ມູນ. ບົດນີ້ຈະອະທິບາຍ: calc()、max() ກັບ min() ກົງຢູ່ພວກມັນ.

ກົງຢູ່ພວກມັນ calc()

calc() ກົງຢູ່ພວກມັນຈະດຳເນີນການການຄວາມຍຸດງານແລະຈະໃຊ້ຜົນຈະໃຊ້ເປັນຄູ່ມູນ.

ກົດລະບຽບ CSS

calc(expression)

让我们看一个例子：

实例

使用 calc() ການຄວາມຍຸດງານວັດຖຸ <div> ມີລະດັບການເລັກ:

#div1 {
  position: absolute;
  left: 50px;
  width: calc(100% - 100px);
  border: 1px solid black;
  background-color: yellow;
  padding: 5px;
}

亲自试一试

ກົງຢູ່ພວກມັນ max()

max() ກົງຢູ່ພວກມັນຈະໃຊ້ລາຍການຕົວເລກຖ້າປະກອບດ້ວຍຄຳແຍກດ້ວຍຄຳແຍກທີ່ຫຼາຍກວ່າ ເພື່ອເປັນຄູ່ມູນພາກສ່ວນ.

ກົດລະບຽບ CSS

max(value1, value2, ...)

让我们看一个例子：

实例

使用 max() ການຈັດວັດຖຸ #div1 ມີການກະຈາຍລະດັບການເລັກນວນ 50% ຫຼື 300px ທີ່ຫຼາຍກວ່າ:

#div1 {
  background-color: yellow;
  height: 100px;
  width: max(50%, 300px);
}

亲自试一试

min() 函数

min() 函数使用逗号分隔的值列表中的最小值作为属性值。

ກົດລະບຽບ CSS

min(value1, value2, ...)

让我们看一个例子：

实例

使用 min() 将 #div1 的宽度设置为 50% 或 300px 中的较小值：

#div1 {
  background-color: yellow;
  height: 100px;
  width: min(50%, 300px);
}

亲自试一试

CSS ປື້ມການສະແດງຫົວຂໍ້

ສຳລັບລາຍການຄູ່ມິຕິການ CSS ທັງໝົດ ຂ້ອຍບອກເຂົາໄປຫາ ປື້ມການສະແດງຫົວຂໍ້ CSS.