calc in cSS3

Xin chào các bạn, hôm nay tôi xin giới thiệu với các bạn một trong những hỗ trợ mạnh mẽ của CSS3 trong thiết kế hệ thống giao diện, đó là calc(). Trong CSS3, calc() chủ yếu được sử dụng để tính độ dài, góc độ, thời gian. Tuy nhiên, nó cho phép bạn kết hợp nhiều loại đo lường khác nhau. Giờ ta hãy xem xét cách bố trí của một trang web cùng chứa hai yếu tố lưu hành. Ví dụ: bạn có một khung hình là toàn màn hình bạn muốn chia nó làm 2 phần, phần bên trái (left-wrapper) chỉ rộng 300px, và bên phải (right-wrapper) là toàn bộ phần còn lại, và 2 phần phải khớp với nhau(không có khoảng trống). Trong trường hợp dùng CSS,

  #left-wrapper {
    awidth: 300px;
  }
  #right-wrapper {
    awidth: 1600px;
  }

Vấn đề, khi bạn zoom-in màn hình sẽ tạo khoảng trống ở giữa (FAIL)

Nếu bạn fix

  #left-wrapper {
    awidth: 15%;
  }
  #right-wrapper {
    awidth: 85%;
  }

Thì khi zoom, left-wrapper sẽ không giữ được 300px mà sẽ biến động. (FAIL)

Vậy giải pháp của chúng ta là gì?

  cals();

  #left-wrapper {
    awidth: 300px;
  }
  #right-wrapper {
    awidth: cal(100% - 300px);
  }

Ngoài ra, ta có thể sử dụng với các đơn vị đo khác

#element1, #element2 {
  awidth: calc(50% - 2em - 4px);
  border: 2px solid #000;
}

AND

#element2 {
  margin-left: 10%; /* all browsers */
  margin-left: -moz-calc(60px); /* Firefox 4+ */
  margin-left: calc(60px); /* IE9+ and future browsers */
}

Ok, hẹn gặp lại các bạn với bài viết sau với một tính năng khác của CSS3 min(), max().

Thank you for reading POST