30px bằng bao nhiêu

Chào các bạn. Mình là Minh, hiện tại đang làm Front End Developer tại công ty Framgia. Đối với một Front End Dev như mình, dựng layout cho websites là công việc hàng ngày, và đảm bảo các websites này tương thích với các trình duyệt cũng như responsive là yêu cầu bắt buộc. Sau đây mình sẽ nói về một bài toán khá là cơ bản khi dựng layout.

Bài toán

Yêu cầu: Dàn layout 2 cột

.container{
  position: relative;
  padding-left: 330px;
}
.navigation { 
  position: absolute;
  left: 0;
  height: 500px;
  width: 300px;
}

.main-content{
  width: 100%;
  height: 500px;
}

2 và

.container{
  position: relative;
  padding-left: 330px;
}
.navigation { 
  position: absolute;
  left: 0;
  height: 500px;
  width: 300px;
}

.main-content{
  width: 100%;
  height: 500px;
}

3 như hình bên dưới với cùng chiều cao là 500px, độ rộng của

.container{
  position: relative;
  padding-left: 330px;
}
.navigation { 
  position: absolute;
  left: 0;
  height: 500px;
  width: 300px;
}

.main-content{
  width: 100%;
  height: 500px;
}

2 là 300px,

.container{
  position: relative;
  padding-left: 330px;
}
.navigation { 
  position: absolute;
  left: 0;
  height: 500px;
  width: 300px;
}

.main-content{
  width: 100%;
  height: 500px;
}

2 cách

.container{
  position: relative;
  padding-left: 330px;
}
.navigation { 
  position: absolute;
  left: 0;
  height: 500px;
  width: 300px;
}

.main-content{
  width: 100%;
  height: 500px;
}

3 một khoảng 30px,

.container{
  position: relative;
  padding-left: 330px;
}
.navigation { 
  position: absolute;
  left: 0;
  height: 500px;
  width: 300px;
}

.main-content{
  width: 100%;
  height: 500px;
}

3 có độ rộng là phần còn lại.

HTML

    
Navigation Here
    
Main Content Here

Với yêu cầu bài toán như vậy, ta có thể có một vài cách để CSS như sau: Cách 1

.navigation { 
  height: 500px;
  width: 28%;
  margin-right: 2%;
  float: left;
}

.main-content{
  width: 70%;
  height: 500px;
  float: left;
}

Demo Cách 1 Cách 1 này code viết rõ ràng mạch lạc đấy nhưng độ rộng đang tính theo đơn vị

.container{
  position: relative;
  padding-left: 330px;
}
.navigation { 
  position: absolute;
  left: 0;
  height: 500px;
  width: 300px;
}

.main-content{
  width: 100%;
  height: 500px;
}

8 nên chưa đáp ứng chính xác yêu cầu của bài toán, thử Cách 2 xem nhé.

Cách 2

.container{
  position: relative;
  padding-left: 330px;
}
.navigation { 
  position: absolute;
  left: 0;
  height: 500px;
  width: 300px;
}

.main-content{
  width: 100%;
  height: 500px;
}

Demo Cách 2 Sau khi xem demo Cách 2 , chúng ta thấy cách này làm đúng như yêu cầu bài toán, có điều mình thấy code chưa thật tốt, set cho thằng

.container{
  position: relative;
  padding-left: 330px;
}
.navigation { 
  position: absolute;
  left: 0;
  height: 500px;
  width: 300px;
}

.main-content{
  width: 100%;
  height: 500px;
}

2 và

.container{
  position: relative;
  padding-left: 330px;
}
.navigation { 
  position: absolute;
  left: 0;
  height: 500px;
  width: 300px;
}

.main-content{
  width: 100%;
  height: 500px;
}

3 mà phải lôi cả cha của nó vào

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

1 để style. Haizz.

Có một giải pháp mà giải quyết được cả 2 vấn đề ở Cách 1 và Cách 2. Đó là dùng hàm

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

2, để biết cách dùng như thế nào, hãy lăn chuột xuống và tiếp tục đọc nhé .

Calc[] là gì?

Chào các bạn. Hôm nay mình sẽ giới thiệu tới các bạn hàm

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

2 .

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

2 là một hàm trong CSS cho phép thực hiện các phép tính đơn giản như

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

5. Bạn có thể sử dụng hàm này với tất cả các thuộc tính CSS về kích thước như là

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

6 , và một điểm rất hay nữa là

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

2 cho phép tính toán các đơn vị với nhau.

Cú pháp

Đây là một ví dụ như kết hợp giữa hai đơn vị

.container{
  position: relative;
  padding-left: 330px;
}
.navigation { 
  position: absolute;
  left: 0;
  height: 500px;
  width: 300px;
}

.main-content{
  width: 100%;
  height: 500px;
}

8 và

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

9. Để gán độ rộng cho class

@mixin calc[$property, $expression] {
  #{$property}: -moz-calc[#{$expression}];
  #{$property}: -webkit-calc[#{$expression}];
  #{$property}: calc[#{$expression}];
}

.container {
    @include calc[width, '100% - 30px'];
}

0 là 100% - 30px, chúng ta sử dụng cú pháp như sau:

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

Hoặc với

@mixin calc[$property, $expression] {
  #{$property}: -moz-calc[#{$expression}];
  #{$property}: -webkit-calc[#{$expression}];
  #{$property}: calc[#{$expression}];
}

.container {
    @include calc[width, '100% - 30px'];
}

1 bạn có thể sử dụng mixin sau:

@mixin calc[$property, $expression] {
  #{$property}: -moz-calc[#{$expression}];
  #{$property}: -webkit-calc[#{$expression}];
  #{$property}: calc[#{$expression}];
}

.container {
    @include calc[width, '100% - 30px'];
}

Trình duyệt hỗ trợ

Hàm

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

2 chạy được trên các trình duyệt hiện đại, cụ thể các trình duyệt như hình phía dưới:

Cách dùng

Chúng ta có thể sử dụng hàm

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

2 trong một số trường hợp sau:

1: Set giá trị cho các elements.

Như ví dụ trên khi mình muốn set

@mixin calc[$property, $expression] {
  #{$property}: -moz-calc[#{$expression}];
  #{$property}: -webkit-calc[#{$expression}];
  #{$property}: calc[#{$expression}];
}

.container {
    @include calc[width, '100% - 30px'];
}

4,

@mixin calc[$property, $expression] {
  #{$property}: -moz-calc[#{$expression}];
  #{$property}: -webkit-calc[#{$expression}];
  #{$property}: calc[#{$expression}];
}

.container {
    @include calc[width, '100% - 30px'];
}

5 hoặc một thuộc tính nào đó cho một element, cú pháp rất đơn giản phải không. Mình lấy một ví dụ khác trong trường hợp muốn set thuộc tính

@mixin calc[$property, $expression] {
  #{$property}: -moz-calc[#{$expression}];
  #{$property}: -webkit-calc[#{$expression}];
  #{$property}: calc[#{$expression}];
}

.container {
    @include calc[width, '100% - 30px'];
}

6 cho class

@mixin calc[$property, $expression] {
  #{$property}: -moz-calc[#{$expression}];
  #{$property}: -webkit-calc[#{$expression}];
  #{$property}: calc[#{$expression}];
}

.container {
    @include calc[width, '100% - 30px'];
}

7 một khoảng là 50% trừ đi 15px:

.position-left {
    left: calc[50% - 15px];
    left: -moz-calc[50% - 15px];
    left: -webkit-calc[50% - 15px];
}

2: Tạo khoảng cách cho các elements.

Yêu cầu: Tạo 1 row có 2 columns với độ rộng là 50% và cách nhau 30px, giả sử 2 columns đó có class là

@mixin calc[$property, $expression] {
  #{$property}: -moz-calc[#{$expression}];
  #{$property}: -webkit-calc[#{$expression}];
  #{$property}: calc[#{$expression}];
}

.container {
    @include calc[width, '100% - 30px'];
}

8. Với yêu cầu trên mình có thể viết như sau:

HTML

    
Column width 50%
    
Column width 50%

CSS

.column-1-2{
    display: inline-block;
    width: calc[50% - 15px];
    width: -moz-calc[50% - 15px];
    width: -webkit-calc[50% - 15px];
}
.column-1-2:first-child {
    margin-right: 30px;
}

3: Code dễ hiểu hơn và chính xác hơn.

Yêu cầu: Tạo 1 row có 6 columns với độ rộng bằng nhau, giả sử 6 columns đó có class là

@mixin calc[$property, $expression] {
  #{$property}: -moz-calc[#{$expression}];
  #{$property}: -webkit-calc[#{$expression}];
  #{$property}: calc[#{$expression}];
}

.container {
    @include calc[width, '100% - 30px'];
}

9. Ta có thể tự tính toán được độ rộng của mỗi column là :

.position-left {
    left: calc[50% - 15px];
    left: -moz-calc[50% - 15px];
    left: -webkit-calc[50% - 15px];
}

0

.column-1-6 {
    width: 16.6667%;
}

Nhìn vào đoạn code trên ta thấy khá là khó hiểu, hơn nữa

.position-left {
    left: calc[50% - 15px];
    left: -moz-calc[50% - 15px];
    left: -webkit-calc[50% - 15px];
}

1 là làm tròn của phép chia 100 cho 6. Ta hoàn toàn có thể sử dụng

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

2 để code trở nên dễ hiểu và chính xác hơn.

.column-1-6{
    width: calc[100% / 6];
    width: -moz-calc[100% / 6];
    width: -webkit-calc[100% / 6];
}

Đáp án bài toán

Sau khi cùng tìm hiểu về hàm

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

2, mình tin là các bạn đã có đáp án về Cách 3 cho Bài toán ban đầu rồi. Chỉ cần sửa lại một chút ở cách 1 là được, đó là: Cách 3

.navigation { 
  height: 500px;
  width: 28%;
  margin-right: 2%;
  float: left;
}

.main-content{
  width: 70%;
  height: 500px;
  float: left;
}

0

Demo Cách 3

Kết luận

Trên đây là một số hiểu biết của mình về hàm

.container {
    width: calc[100% - 30px];
    width: -moz-calc[100% - 30px];
    width: -webkit-calc[100% - 30px];
}

2 trong CSS, nếu nó có ích cho bạn, hãy Upvote cho mình nhé. PS: Nếu có bất cứ câu hỏi hoặc góp ý, cứ thẳng tay comment nhé. Good bye!