Hướng dẫn is box a css property? - hộp có phải là thuộc tính css không?

Thử nó

Theo mặc định trong mô hình hộp CSS, width và height bạn gán cho một phần tử chỉ được áp dụng cho hộp nội dung của phần tử. Nếu phần tử có bất kỳ đường viền hoặc đệm nào, thì điều này sẽ được thêm vào width và height để đi đến kích thước của hộp được hiển thị trên màn hình. Điều này có nghĩa là khi bạn đặt width và height, bạn phải điều chỉnh giá trị bạn đưa ra để cho phép bất kỳ đường viền hoặc đệm nào có thể được thêm vào. Ví dụ: nếu bạn có bốn hộp có

box-sizing = 
  content-box  |
  border-box   

Thuộc tính box-sizing có thể được sử dụng để điều chỉnh hành vi này:

• box-sizing = 
    content-box  |
    border-box   

  3 cung cấp cho bạn hành vi quy mô hộp CSS mặc định. Nếu bạn đặt chiều rộng của phần tử thành 100 pixel, thì hộp nội dung của phần tử sẽ rộng 100 pixel và chiều rộng của bất kỳ đường viền hoặc đệm nào sẽ được thêm vào chiều rộng được hiển thị cuối cùng, làm cho phần tử rộng hơn 100px.

• box-sizing = 
    content-box  |
    border-box   

  4 bảo trình duyệt tính đến bất kỳ đường viền nào và đệm trong các giá trị bạn chỉ định cho chiều rộng và chiều cao của phần tử. Nếu bạn đặt chiều rộng của một phần tử thành 100 pixel, 100 pixel sẽ bao gồm bất kỳ đường viền hoặc đệm bạn đã thêm, và hộp nội dung sẽ co lại để hấp thụ thêm chiều rộng đó. Điều này thường làm cho nó dễ dàng hơn nhiều để kích thước các yếu tố.

  box-sizing = 
    content-box  |
    border-box   

  5 là kiểu dáng mặc định mà các trình duyệt sử dụng cho các yếu tố

  box-sizing = 
    content-box  |
    border-box   

  6,

  box-sizing = 
    content-box  |
    border-box   

  7 và

  box-sizing = 
    content-box  |
    border-box   

  8 và cho các yếu tố

  box-sizing = 
    content-box  |
    border-box   

  9 có loại là

  <div class="content-box">Content boxdiv>
  <br />
  <div class="border-box">Border boxdiv>
  

  0,

  <div class="content-box">Content boxdiv>
  <br />
  <div class="border-box">Border boxdiv>
  

  1,

  <div class="content-box">Content boxdiv>
  <br />
  <div class="border-box">Border boxdiv>
  

  2,

  <div class="content-box">Content boxdiv>
  <br />
  <div class="border-box">Border boxdiv>
  

  3,

  <div class="content-box">Content boxdiv>
  <br />
  <div class="border-box">Border boxdiv>
  

  4, ____.

Lưu ý: Thường rất hữu ích khi đặt box-sizing thành

box-sizing = 
  content-box  |
  border-box   

<div class="content-box">Content boxdiv>
<br />
<div class="border-box">Border boxdiv>

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

box-sizing = 
  content-box  |
  border-box   

<div class="content-box">Content boxdiv>
<br />
<div class="border-box">Border boxdiv>

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Cú pháp

box-sizing: border-box;
box-sizing: content-box;

/* Global values */
box-sizing: inherit;
box-sizing: initial;
box-sizing: revert;
box-sizing: revert-layer;
box-sizing: unset;

Thuộc tính box-sizing được chỉ định là một từ khóa duy nhất được chọn từ danh sách các giá trị bên dưới.

Giá trị

box-sizing = 
  content-box  |
  border-box   

Đây là giá trị ban đầu và mặc định theo quy định của tiêu chuẩn CSS. Các thuộc tính width và height bao gồm nội dung, nhưng không bao gồm phần đệm, đường viền hoặc lề. Ví dụ,

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Ở đây, kích thước của phần tử được tính là: chiều rộng = chiều rộng của nội dung và chiều cao = chiều cao của nội dung. (Biên giới và đệm không được bao gồm trong tính toán.)

box-sizing = 
  content-box  |
  border-box   

Các thuộc tính width và height bao gồm nội dung, đệm và biên giới, nhưng không bao gồm lề. Lưu ý rằng đệm và đường viền sẽ ở bên trong hộp. Ví dụ,

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

box-sizing = 
  content-box  |
  border-box   

Ở đây, kích thước của phần tử được tính là: chiều rộng = đường viền + đệm + chiều rộng của nội dung và chiều cao = đường viền + đệm + chiều cao của nội dung.

Định nghĩa chính thức

box-sizing = 
  content-box  |
  border-box   

Cú pháp chính thức

box-sizing = 
  content-box  |
  border-box   

Ví dụ

Kích thước hộp với hộp nội dung và hộp viền

Ví dụ này cho thấy các giá trị box-sizing khác nhau làm thay đổi kích thước hiển thị của hai phần tử giống hệt nhau như thế nào.

HTML

<div class="content-box">Content boxdiv>
<br />
<div class="border-box">Border boxdiv>

CSS

div {
  width: 160px;
  height: 80px;
  padding: 20px;
  border: 8px solid red;
  background: yellow;
}

.content-box {
  box-sizing: content-box;
  /* Total width: 160px + (2 * 20px) + (2 * 8px) = 216px
     Total height: 80px + (2 * 20px) + (2 * 8px) = 136px
     Content box width: 160px
     Content box height: 80px */
}

.border-box {
  box-sizing: border-box;
  /* Total width: 160px
     Total height: 80px
     Content box width: 160px - (2 * 20px) - (2 * 8px) = 104px
     Content box height: 80px - (2 * 20px) - (2 * 8px) = 24px */
}

Kết quả

Xem thêm