Thuộc tính box sizing trong CSS3

Thuộc tính box sizing được sử dụng để thay đổi chiều cao và độ rộng của phần tử. Bắt đầu từ CSS2, thuộc tính box làm việc như sau: awidth + padding + border = chiều rộng thực sự của một phần tử box height + padding + border = chiều cao thực sự của một phần tử box Nghĩa là, khi bạn ...

Thuộc tính box sizing được sử dụng để thay đổi chiều cao và độ rộng của phần tử.

Bắt đầu từ CSS2, thuộc tính box làm việc như sau:

awidth + padding + border = chiều rộng thực sự của một phần tử box

height + padding + border = chiều cao thực sự của một phần tử box

Nghĩa là, khi bạn đã xác định chiều cao và chiều rộng, thì kích cỡ của box sẽ lớn hơn một chút do phải cộng thêm padding và border vào chiều cao và độ rộng bạn đã thiết lập.

Thuộc tính sizing trong CSS2

Ví dụ sau minh họa cách sử dụng của thuộc tính sizing trong CSS2:

<html>
   <head>
   
      <style>
         .div1 {
            awidth: 200px;
            height: 100px;
            border: 1px solid green;
         }
         .div2 {
            awidth: 200px;
            height: 100px;    
            padding: 50px;
            border: 1px solid pink;
         }
      </style>
      
   </head>
   <body>
      <div class="div1">Hoc CSS co ban tai code24h</div></br>
      <div class="div2">Hoc CSS co ban tai code24h</div>
   </body>
</html>

Kết quả là

Trong ví dụ trên, mình thiết lập chiều cao và chiều rộng cho hai hình ảnh là như nhau, tuy nhiên bạn có thể thấy rằng kết quả hiển thị là khác nhau, đó là do trong hình thứ hai mình thêm thuộc tính padding.

Thuộc tính box sizing trong CSS3

Ví dụ dưới đây minh họa cách sử dụng của thuộc tính box-sizing trong CSS3:

<html>
   <head>
   
      <style>
         .div1 {
            awidth: 300px;
            height: 100px;
            border: 1px solid blue;
            box-sizing: border-box;
         }
         .div2 {
            awidth: 300px;
            height: 100px;
            padding: 50px;
            border: 1px solid red;
            box-sizing: border-box;
         }
      </style>
      
   </head>
   <body>
      <div class="div1">Hoc CSS co ban tai code24h</div>&lt/br>
      <div class="div2">Hoc CSS co ban tai code24h</div>
   </body>
</html>

Trong ví dụ trên, bạn để ý rằng cả hai hình ảnh đều có cùng chiều cao và chiều rộng và cùng thuộc tính box-sizing:border-box.

Kết quả là:

Mặc dù trong hình ảnh thứ hai, mình xác định thêm thuộc tính padding, tuy nhiên bằng việc sử dụng cùng thuộc tính box-sizing:border-box, thì chiều cao và chiều rộng của hai hình vẫn là như nhau.

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại code24h.com:

Bài liên quan

7 thuộc tính cơ bản trong CSS3 mà bạn cần phải biết

Sau 13 năm là một phần không thể thiếu trong việc thiết kế web, Cascading Style Sheets (CSS) đã được phát triển thành một công cụ vô cùng mạnh mẽ, cho phép bạn phát triển những trang web với nhiều hiệu ứng và trông đẹp mắt hơn rất nhiều. Bài viết này sẽ chia sẻ với các bạn những kỹ thuật cơ bản ...

Trịnh Tiến Mạnh viết 19:57 ngày 04/10/2018

Làm bóng đổ với thuộc tính box-shadow của CSS3

Thuộc tính mới “box-shadow” của CSS3 là một trong những thuộc tính khá hữu dụng và được sử dụng nhiều trong quá trình viết CSS . Với thuộc tính này bạn có thể tạo cho các thành phần trong website của mình hiệu ứng bóng đổ đẹp mắt. Tuy nhiên thuộc tính này không được hỗ trợ trên ...

Trần Trung Dũng viết 19:56 ngày 04/10/2018

Thuộc tính z-index trong CSS

Hướng dẫn làm menu dọc hai cấp với CSS Thuộc tính Position:fixed trong CSS Thuộc tính After và Before trong CSS Thuộc tính Clear:both,left,right trong CSS Thuộc tính z-index trong CSS được sinh ra nhằm giải quyết cấp độ hiển thị của các thẻ HTML lên trình duyệt Browser. Video học ...

Tạ Quốc Bảo viết 17:32 ngày 04/09/2018

Thuộc tính thẻ a trong CSS

Thuộc tính background trong CSS Thuộc tính định dạng văn bản trong CSS Thuộc tính display trong CSS Thuộc tính float trong CSS Giới thiệu các thẻ a trong CSS định dạng cho thẻ a thông qua những ví dụ chi tiết giúp bạn đọc dễ hình dung nhất. Mình cùng tìm hiểu nhé! Ở bài trước ...

Hoàng Hải Đăng viết 17:27 ngày 04/09/2018

Thuộc tính box sizing trong CSS3

Thuộc tính box sizing được sử dụng để thay đổi chiều cao và độ rộng của phần tử. Bắt đầu từ CSS2, thuộc tính box làm việc như sau: awidth + padding + border = chiều rộng thực sự của một phần tử box height + padding + border = chiều cao thực sự của một phần tử box Nghĩa là, khi bạn ...

Trịnh Tiến Mạnh viết 12:35 ngày 14/08/2018
0