Box-sizing trong CSS – w3seo sử dụng thuộc tính box-sizing trong CSS

Posted on by mtoplistChuyên mục:Top List

Rate this post

Sử dụng Box-sizing là một thuộc tính quan trọng trong việc thiết kế css cho website. Hôm nay các bạn hãy cùng chúng tôi tìm hiểu thuộc tính này, và liệu thuộc tính này có phù hợp trong quá trình thiết kế website của các bạn.

Các bài viết liên quan:

Thuộc tính CSS box-sizing

Thuộc tính box-sizing CSS đảm bảo rằng phần padding và đường border không làm tăng chiều rộng và chiều cao của các phần tử.

Đặt CSS box-sizing thành border-box CSS để đảm bảo rằng kích thước phần tử bao gồm đường border và phần đệm.

Bạn có thể cho phép người dùng kiểm soát kích thước của các phần tử nhất định bằng cách sử dụng thuộc tính thay đổi kích thước.

Không có CSS box-sizing

Box model tuân theo các nguyên tắc sau:

  • CSS tính toán chiều rộng của các phần tử bằng cách thêm chiều rộng, phần padding và border lại với nhau.
  • CSS tính toán chiều cao của các phần tử bằng cách thêm chiều cao, phần padding và border lại với nhau.

Do đó, các nhà phát triển cần điều chỉnh các giá trị khi đặt chiều rộng và chiều cao để chừa khoảng trống cho đường border và phần đệm.

Div nhỏ hơn (chiều rộng là 300px và chiều cao là 100px).

Div lớn hơn (chiều rộng cũng là 300px và chiều cao là 100px).

Trong ví dụ này, có hai phần tử <div>:

Cái đầu tiên có chiều cao, chiều rộng và đường border CSS.

Cái thứ hai có cùng các tham số được gán nhưng nó cũng có phần padding CSS.

Kết quả là phần tử thứ hai sẽ xuất hiện lớn hơn phần tử đầu tiên.

.div1 {
    width: 300px;
    height: 100px;
    border: 1px solid blue; 
}

.div2 {
    width: 300px;
    height: 100px;
   padding: 50px;
   border: 1px solid red;
}

Với CSS box-sizing

Cả hai div đều có cùng kích thước!

Vì Box model tạo ra nhiều vấn đề cho các nhà phát triển, CSS3 đã giới thiệu CSS box-sizing.

Định cỡ hộp CSS đảm bảo rằng tổng chiều rộng và chiều cao của các phần tử bao gồm phần padding và đường border. Kết quả là, các phần tử không xuất hiện lớn hơn chúng nên có.

border-box

border-box CSS là lựa chọn phổ biến nhất để thiết lập CSS box-sizing. Nó đảm bảo rằng hộp nội dung sẽ thu nhỏ lại để tạo không gian cho phần padding và đường viền.

Do đó, nếu bạn đặt chiều rộng phần tử của mình thành 200 pixel, border-box đảm bảo rằng nội dung, phần padding và đường border phù hợp với số này.

Trong ví dụ này, box-sizing: border-box; được thêm vào cả hai phần tử <div>:

Thí dụ

.div1 {
    width: 400px;
    height: 200px;
    border: 2px solid red;
    box-sizing: border-box;
}

.div2 {
    width: 400px;
   height: 200px;
   padding: 30px;
   border: 2px solid green;
   box-sizing: border-box;
}

Mẹo: border-box là lựa chọn tốt nhất để thiết kế bố cục và quản lý kích thước của các phần tử HTML.

Bạn không cần đặt thuộc tính này cho từng phần tử riêng lẻ. Thay vào đó, hãy sử dụng bộ chọn dấu hoa thị (*) để chọn tất cả các phần tử.

Trong ví dụ này, chúng tôi áp dụng box-sizing: border-box; cho tất cả các phần tử trong tài liệu HTML:

Thí dụ

* {
    box-sizing: border-box;
}

content-box

content-box đặt hành vi thông thường là thêm phần padding và đường border vào các phần tử một cách riêng biệt.

Nếu bạn đặt chiều rộng của phần tử là 200 pixel, mục sẽ xuất hiện lớn hơn khi bạn thêm phần padding và đường viền.

Người dùng có thể thay đổi kích thước các phần tử

Đây là một vùng chứa có thể thay đổi kích thước. Hãy thử kéo góc dưới cùng bên phải!

div {       
    resize: horizontal;  /* This allows to resize the div's width */     
    overflow: auto;  
}

Thuộc tính thay đổi kích thước là để cho biết liệu một phần tử có thể thay đổi kích thước bởi người dùng hay không. Nó có thể có bốn giá trị: ngang, dọc, cả hai và không.

div {
    resize: vertical; /* This allows to resize the div's height */
    overflow: auto;  
}

Ví dụ dưới đây cho thấy cách bạn có thể cho phép người dùng thay đổi kích thước chiều rộng của vùng chứa:

Thí dụ

div {       
    resize: both;    /* This allows to resize both of the div's size properties */   
    overflow: auto;  
}

CSS box-sizing CSS: Mẹo hữu ích

padding-box được sử dụng để áp dụng chiều rộng và chiều cao của các phần tử vào phần padding và content của chúng. Các trình duyệt không còn hỗ trợ thuộc tính này.

Hầu hết các trình duyệt hiện đại đều hỗ trợ thuộc tính box-sizing.

mtoplist