Tìm hiểu về Box-sizing trong CSS mới nhất 2022

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

Box-sizing trong CSS – Thuộc tính box-sizing có thể giúp việc xây dựng bố cục CSS dễ dàng và trực quan hơn rất nhiều. Vậy thật sự thì Box-sizing trong CSS là gì? Cách áp dụng nó như thế nào? Làm thế nào mà nó hữu ích và được yêu thích đến đến như vậy?

Trong bài viết này, chúng ta sẽ cùng nhau tìm hiểu Box-sizing trong CSS là gì và tất cả những điều thú vị xoay quanh nó nhé!

Hướng dẫn cách tạo 1 trang web miễn phí mới nhất 2019Hướng dẫn cách tạo 1 trang web miễn phí mới nhất 2019

Sự xuất hiện của Box Model

Trước khi tìm hiểu về Box-sizing là gì, chúng ta hãy tìm hiểu một chút về Box Model nhé.

Kể từ buổi bình minh của CSS, mô hình hộp (Box Model) đã hoạt động như thế này theo mặc định:

  • width + padding + border = chiều rộng hiển thị / hiển thị thực tế của hộp phần tử
  • height + padding + border = chiều cao hiển thị / hiển thị thực tế của hộp phần tử

Điều này có thể hơi phản trực quan, vì chiều rộng và chiều cao bạn đặt cho một phần tử đều đi ra ngoài cửa sổ ngay khi bạn bắt đầu thêm phần đệm và đường viền vào phần tử.

Quay lại thời xưa của thiết kế web, các phiên bản đầu tiên của Internet Explorer (<= IE6) đã xử lý mô hình hộp theo cách khác khi nó ở “chế độ quirks”.

Mô hình hộp “quirks” hoạt động như thế này: width = chiều rộng hiển thị / hiển thị thực tế của hộp phần tử, chiều cao = chiều cao hiển thị / hiển thị thực tế của hộp phần tử. Giá trị đường viền và phần đệm được di chuyển bên trong hộp của phần tử, cắt thành chiều rộng / chiều cao của hộp hơn là mở rộng nó.

widthboxwidthbox

Tuy nhiên, trong thời kỳ của thiết kế chiều rộng cố định, việc làm việc với mô hình hộp mặc định không có gì đặc biệt phức tạp khi bạn đã hiểu về nó. Bạn có thể thực hiện một chút số học để tìm ra bao nhiêu pixel bạn cần để cắt bớt chiều rộng hoặc chiều cao đã khai báo của phần tử để phù hợp với phần đệm và đường viền của phần tử đó.

Vấn đề đối với các nhà phát triển ngày nay là độ dài pixel tuyệt đối đó không chuyển sang responsive design, vì vậy, phép toán tương tự không còn áp dụng nữa.

Khi thiết kế responsive design (hoặc, như nó đã từng được biết đến, bố cục “linh hoạt” hoặc “lỏng”) bắt đầu trở nên phổ biến, các nhà phát triển và nhà thiết kế mong muốn có một bản cập nhật cho mô hình hộp.

Box-sizing trong CSS

Những mong muốn đó đã được thực hiện khi thuộc tính box-sizing được giới thiệu trong CSS3. Mặc dù kích thước hộp có ba giá trị có thể có (hộp nội dung, hộp đệm và hộp đường viền), giá trị phổ biến nhất là hộp có đường viền.

Ngày nay, các phiên bản hiện tại của tất cả các trình duyệt sử dụng mô hình hộp “chiều rộng hoặc chiều cao + phần đệm + đường viền = chiều rộng hoặc chiều cao thực tế” ban đầu.

Với box-sizing: border-box;, chúng ta có thể thay đổi mô hình hộp thành mô hình từng là “quirks mode”, trong đó chiều rộng và chiều cao được chỉ định của phần tử không bị ảnh hưởng bởi phần đệm hoặc đường viền. Điều này đã được chứng minh là rất hữu ích trong thiết kế đáp ứng (responsive design) đến mức nó xem như là thiết lập lại các phong cách.

Tại thời điểm này, bạn có thể tự hỏi mình, “Có thể là IE cũ đã làm điều gì đó đúng không?” Rất nhiều người nghĩ như vậy.

Bản demo này cho thấy cách border-box có thể giúp quản lý bố cục đáp ứng dễ dàng hơn. Chiều rộng của div chính là 50% và có 3 div con với các chiều rộng, khoảng đệm và lề khác nhau.

box-sizing trong CSSbox-sizing trong CSS

.parent {
width: 50%;
border: 5px solid #E18728;
float: left;
}

.child {
width: 90%;
padding: 20%;
border: 4px solid black;
margin: .5em auto;
}

.twins {
width: 50%;
padding: 1em;
border: 4px solid black;
float: left;
}


/* styling for Pen, not related to box-sizing or layout */

body {
font-family: sans-serif;
font-size: 1.1em;
}

.buttons {
margin-bottom: .5em;
}

p:not(.intro) {
text-align: center;
}

Các phương pháp sử dụng Box-Sizing trong CSS

Trong quá trình phát triển của mình, đã có rất nhiều cách sử dụng Box-Sizing trong CSS. Chúng ta hãy cùng xem nhé.

Box-Sizing kiểu cũ

Đây là box-sizing: border-box;trong những thời điểm đầu tiên của mô hình này

* {
box-sizing: border-box;
}

Phương pháp này hoạt động khá tốt, nhưng nó loại bỏ các yếu tố giả, có thể dẫn đến một số kết quả không mong muốn. Một thiết lập đã sửa đổi bao gồm các phần tử giả đã nhanh chóng xuất hiện:

Box-Sizing phổ biến

*, *:before, *:after {
box-sizing: border-box;
}

Phương pháp này cũng chọn các phần tử giả, cải thiện hiệu ứng chuẩn hóa của hộp viền.

Tuy nhiên, bộ chọn * gây khó khăn cho các nhà phát triển khi sử dụng content-box hoặc padding-box ở nơi khác trong CSS. Điều này đưa chúng ta đến công cụ tiên phong hiện tại để có phương pháp thực hành tốt nhất:

Box-Sizing phổ biến với tính kế thừa

html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}

Thiết lập này mang lại cho bạn sự linh hoạt hơn so với các phiên bản trước – bạn có thể sử dụng content-box hoặc padding-box (nếu được hỗ trợ) tùy ý mà không phải lo lắng về việc một bộ chọn đa năng sẽ ghi đè CSS của bạn.

Chúng tôi đã đi sâu hơn về kỹ thuật này và lý do đằng sau nó trong “Kế thừa kích thước hộp có lẽ là phương pháp hay nhất tốt hơn một chút”. Một điểm tiềm ẩn với nó là kích thước hộp thường không được kế thừa, vì vậy, đó là hành vi chuyên biệt, không hoàn toàn giống với thứ mà bạn thường đặt khi thiết lập lại.

Cách sử dụng Box-Sizing trong CSS thực tế

Khi các bạn học qua Box Model trong CSS thì sẽ thấy có một đặc điểm khi sử dụng Padding và Border thì cái khung phần tử của bạn sẽ bị chuyển biến kích thước nếu bạn có đặt thêm thuộc tính width và height để xây dựng kích thước cho nó.

Ví dụ: cái box của bạn có width là 500px và height là 500px (500×500 px) nhưng nếu bạn đặt thêm padding là 15px nữa thì cái khung của bạn sẽ có click thước là 530×530 px. Bởi vì nếu cộng thêm pading là 15px nữa thì cái khung của bạn sẽ tự động cộng thêm 30px (15px cho top và và 15px cho bottom, tương tự với left và right), tương tự vớiborder.

Hướng dẫn về box-sizing trong css mới nhất 2020Hướng dẫn về box-sizing trong css mới nhất 2020

Lưu ý về Box-sizing trong CSS

box-sizing là một tính chất trong CSS3 nên khi thực hiện bạn phải viết thành 3 lần với các tiền tố không giống nhau, ví dụ:

box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

Trong đó, nếu viết k có tiền tố là dành cho trình duyệt IE8, Opera 7, Firefox và Google chrome bản mới. -webkit là dành cho Google Chrome bản cũ và -moz là dành cho Firefox bản cũ.

Các 

giá trị

 của box-sizing

Bây giờ box-sizing có support một số giá trị giống như sau:

  • content-box: 

    giá trị

     mặc định, nghĩa là 

    trị giá

     width và height chỉ 

    ứng dụng

     cho khu vực 

    content

     bên trong, 

    k

     

    bao gồm

     padding, border và margin.

  • border-box: Khi 

    thiết lập

     

    giá trị

     này, thì width và heigh sẽ 

    bao gồm

     cho cả phần 

    content

    , padding và border nhưng 

    k

     

    gồm có

     margin.

  • padding-box: Với 

    giá trị

     này thì width và height chỉ 

    gồm có

     cho phần 

    nội dung

     và padding, 

    không

     

    bao gồm

     border và margin.

lưu ý: padding-box chỉ có chức năng với trình duyệt Firefox.

Nên 

sử dụng

 box-sizing cho 

toàn bộ

 phần tử

Theo trải nghiệm của mình thì khi code CSS cho web, bạn hãy dùng box-sizing với giá trị là border-box cho toàn bộ các phần tử trong website để các phần tử có kích thước chính xác khi bạn khai báo, tránh việc cộng thêm các phần border và padding sẽ gây ra rắc rối nếu bạn sử dụng hai cái này thường xuyên.

Để thiết lập box-sizing: content-box cho toàn bộ phần tử, chúng ta sẽ dùng vùng lựa chọn là *, nghĩa là gồm có mọi phần tử.

*
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;

Lời kết

Như vậy chúng ta đã biết được Box-Sizing trong CSS, tầm quan trọng của nó và những ứng dụng trong thực tế. Chúc các bạn thành công!!!

(Nguồn: internet)

ATPWEB – Xây dựng ngôi nhà Online

Liên hệ:

  • Hotline: 0707 6666 56
  • Fanpage: http://facebook.com/atpweb.vn
  • Website: atpweb.vn

Đánh giá post

mtoplist