Hướng dẫn property of css box model - thuộc tính của mô hình hộp css

Các thuộc tính mô hình hộp CSS là gì?

Mô hình hộp CSS mà nó bao gồm: lề, biên giới, đệm và nội dung thực tế.block boxes and inline boxes. The type refers to how the box behaves in terms of page flow and in relation to other boxes on the page. Boxes have an inner display type and an outer display type.

Đó không phải là thuộc tính của mô hình hộp CSS?

Mô hình hộp W3C không bao gồm đệm và viền trong tổng chiều rộng hoặc chiều cao của nó.

Hộp A có phải là thuộc tính CSS không?

• Với thuộc tính quy mô hộp CSS, thuộc tính quy mô hộp cho phép chúng tôi bao gồm phần đệm và đường viền trong tổng chiều rộng và chiều cao của một phần tử. Nếu bạn đặt quy mô hộp: Hộp viền; Trên một yếu tố, phần đệm và đường viền được bao gồm trong chiều rộng và chiều cao: cả hai div đều có cùng kích thước!
• Các thuộc tính width và height được tôn trọng.
• display3, display5 và display4 sẽ khiến các yếu tố khác bị đẩy ra khỏi hộp.
• Hộp sẽ mở rộng theo hướng nội tuyến để lấp đầy không gian có sẵn trong thùng chứa của nó. Trong hầu hết các trường hợp, hộp sẽ trở nên rộng như thùng chứa của nó, lấp đầy 100% không gian có sẵn.

Một số phần tử HTML, chẳng hạn như

và

, sử dụng block làm loại hiển thị bên ngoài của chúng theo mặc định.

Nếu một hộp có loại hiển thị bên ngoài là

.box {
  box-sizing: border-box;
}

1, thì:

• Hộp sẽ không đột nhập vào một dòng mới.
• Các thuộc tính width và height sẽ không được áp dụng.
• Phần đệm dọc, lề và đường viền sẽ được áp dụng nhưng sẽ không khiến các hộp nội tuyến khác di chuyển ra khỏi hộp.
• Phần đệm ngang, lề và đường viền sẽ được áp dụng và sẽ khiến các hộp nội tuyến khác di chuyển ra khỏi hộp.

Một số phần tử HTML, chẳng hạn như

.box {
  box-sizing: border-box;
}

4,

.box {
  box-sizing: border-box;
}

5,

.box {
  box-sizing: border-box;
}

6 và

.box {
  box-sizing: border-box;
}

7 Sử dụng

.box {
  box-sizing: border-box;
}

1 làm loại hiển thị bên ngoài của chúng theo mặc định.

Loại hiển thị bên trong

Các hộp cũng có một loại hiển thị bên trong, chỉ ra cách các yếu tố bên trong hộp đó được đặt ra.

Bố cục khối và nội tuyến là cách mặc định mọi thứ hoạt động trên web. Theo mặc định và không có bất kỳ hướng dẫn nào khác, các phần tử bên trong một hộp cũng được trình bày trong dòng chảy bình thường và hoạt động dưới dạng các hộp khối hoặc nội tuyến.normal flow and behave as block or inline boxes.

Bạn có thể thay đổi loại hiển thị bên trong ví dụ bằng cách đặt

.box {
  box-sizing: border-box;
}

.box {
  width: 350px;
  inline-size: 350px;
  height: 150px;
  block-size: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Khi bạn chuyển sang tìm hiểu về bố cục CSS chi tiết hơn, bạn sẽ gặp

.box {
  width: 350px;
  inline-size: 350px;
  height: 150px;
  block-size: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

.box {
  width: 350px;
  inline-size: 350px;
  height: 150px;
  block-size: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Lưu ý: Để đọc thêm về các giá trị hiển thị và cách các hộp hoạt động trong bố cục khối và nội tuyến, hãy xem khối hướng dẫn MDN và bố cục nội tuyến. To read more about the values of display, and how boxes work in block and inline layout, take a look at the MDN guide Block and Inline Layout.

Ví dụ về các loại hiển thị khác nhau

Ví dụ dưới đây có ba phần tử HTML khác nhau, tất cả đều có loại hiển thị bên ngoài là block.

• Một đoạn văn với một biên giới được thêm vào trong CSS. Trình duyệt hiển thị đây là một hộp khối. Đoạn văn bắt đầu trên một dòng mới và mở rộng toàn bộ chiều rộng có sẵn.
• Một danh sách, được trình bày bằng cách sử dụng

  .box {
    width: 350px;
    inline-size: 350px;
    height: 150px;
    block-size: 150px;
    margin: 10px;
    padding: 25px;
    border: 5px solid black;
  }
  

  5. Điều này thiết lập bố cục flex cho trẻ em của container, đó là các mặt hàng flex. Bản thân danh sách là một hộp khối và - giống như đoạn văn - mở rộng ra toàn bộ chiều rộng của container và chia thành một dòng mới.
• Một đoạn cấp độ khối, bên trong là hai yếu tố

  .box {
    box-sizing: border-box;
  }
  

  5. Các yếu tố này thường sẽ là

  .box {
    box-sizing: border-box;
  }
  

  1, tuy nhiên, một trong các yếu tố có một lớp "khối" được đặt thành

  .box {
    width: 350px;
    inline-size: 350px;
    height: 150px;
    block-size: 150px;
    margin: 10px;
    padding: 25px;
    border: 5px solid black;
  }
  

  8.

Trong ví dụ tiếp theo, chúng ta có thể thấy các yếu tố

.box {
  box-sizing: border-box;
}

• Các phần tử

  .box {
    box-sizing: border-box;
  }
  

  5 trong đoạn đầu tiên là nội tuyến theo mặc định và do đó không buộc các dòng phá vỡ.
• Phần tử

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

  1 được đặt thành

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

  2 tạo một hộp nội tuyến chứa một số mục Flex.
• Hai đoạn văn đều được đặt thành

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

  3. Tất cả các hộp và hộp Flex Flex đều chạy cùng nhau trên một dòng thay vì đột nhập vào các dòng mới (như chúng sẽ làm nếu chúng được hiển thị dưới dạng các phần tử cấp khối).

Để chuyển đổi giữa các chế độ hiển thị, bạn có thể thay đổi

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

.box {
  width: 350px;
  inline-size: 350px;
  height: 150px;
  block-size: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

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

.box {
  width: 350px;
  inline-size: 350px;
  height: 150px;
  block-size: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Điều quan trọng cần nhớ bây giờ là: Thay đổi giá trị của thuộc tính display có thể thay đổi xem loại hiển thị bên ngoài của hộp là khối hay nội tuyến. Điều này thay đổi cách nó hiển thị cùng với các yếu tố khác trong bố cục.

Mô hình hộp CSS là gì?

Toàn bộ mô hình hộp CSS áp dụng cho các hộp chặn và xác định cách các phần khác nhau của hộp - lề, đường viền, đệm và nội dung - làm việc cùng nhau để tạo một hộp mà bạn có thể thấy trên một trang. Hộp nội tuyến chỉ sử dụng một số hành vi được xác định trong mô hình hộp.

Để thêm độ phức tạp, có một mô hình hộp tiêu chuẩn và hộp thay thế. Theo mặc định, trình duyệt sử dụng mô hình hộp tiêu chuẩn.

Các bộ phận của một hộp

Tạo một hộp khối trong CSS Chúng tôi có:

• Hộp nội dung: Khu vực nơi nội dung của bạn được hiển thị; Kích thước Nó sử dụng các thuộc tính như

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

  9 và display0 hoặc width và height.: The area where your content is displayed; size it using properties like

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

  9 and display0 or width and height.
• Hộp đệm: Phần đệm nằm xung quanh nội dung như không gian trắng; Kích thước nó sử dụng display3 và các thuộc tính liên quan.: The padding sits around the content as white space; size it using display3 and related properties.
• Hộp viền: Hộp viền bọc nội dung và bất kỳ phần đệm nào; Kích thước nó sử dụng display4 và các thuộc tính liên quan.: The border box wraps the content and any padding; size it using display4 and related properties.
• Hộp lề: Biên độ là lớp ngoài cùng, bao bọc nội dung, đệm và đường viền như khoảng trắng giữa hộp này và các yếu tố khác; Kích thước nó sử dụng display5 và các thuộc tính liên quan.: The margin is the outermost layer, wrapping the content, padding, and border as whitespace between this box and other elements; size it using display5 and related properties.

Sơ đồ dưới đây cho thấy các lớp sau:

Mô hình hộp CSS tiêu chuẩn

Trong mô hình hộp tiêu chuẩn, nếu bạn cho một hộp một thuộc tính

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

Nếu chúng ta cho rằng một hộp có các CSS sau:

.box {
  width: 350px;
  height: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Không gian thực tế được lấy bởi hộp sẽ rộng 410px (350 + 25 + 25 + 5 + 5) và cao 210px (150 + 25 + 25 + 5 + 5).

Lưu ý: Biên độ không được tính vào kích thước thực tế của hộp - chắc chắn, nó ảnh hưởng đến tổng dung lượng mà hộp sẽ chiếm trên trang, nhưng chỉ có khoảng trống bên ngoài hộp. Khu vực của hộp dừng ở biên giới - nó không kéo dài vào lề. The margin is not counted towards the actual size of the box — sure, it affects the total space that the box will take up on the page, but only the space outside the box. The box's area stops at the border — it does not extend into the margin.

Mô hình hộp CSS thay thế

Trong mô hình hộp thay thế, bất kỳ chiều rộng nào là chiều rộng của hộp có thể nhìn thấy trên trang. Chiều rộng diện tích nội dung là chiều rộng trừ đi chiều rộng cho phần đệm và đường viền (xem hình ảnh bên dưới). Không cần phải thêm đường viền và đệm để có được kích thước thực của hộp.

Để bật mô hình thay thế cho một phần tử, hãy đặt block0 trên đó:

.box {
  box-sizing: border-box;
}

Nếu chúng ta giả sử hộp có cùng CSS như trên:

.box {
  width: 350px;
  inline-size: 350px;
  height: 150px;
  block-size: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Bây giờ, không gian thực tế được lấy bởi hộp sẽ là 350px theo hướng nội tuyến và 150px theo hướng khối.

Để sử dụng mô hình hộp thay thế cho tất cả các yếu tố của bạn (đây là lựa chọn phổ biến giữa các nhà phát triển), hãy đặt thuộc tính block1 trên phần tử block2 và đặt tất cả các yếu tố khác để kế thừa giá trị đó:

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

Để hiểu ý tưởng cơ bản, bạn có thể đọc bài viết của CSS Tricks về quy mô hộp.

Lưu ý: Một chút thú vị của lịch sử - Internet Explorer được sử dụng để mặc định cho mô hình hộp thay thế, không có cơ chế có sẵn để chuyển đổi. An interesting bit of history — Internet Explorer used to default to the alternative box model, with no mechanism available to switch.

Chơi với các mô hình hộp

Trong ví dụ dưới đây, bạn có thể thấy hai hộp. Cả hai đều có một lớp block3, cung cấp cho họ cùng một width, height, display5, display4 và display3. Sự khác biệt duy nhất là hộp thứ hai đã được thiết lập để sử dụng mô hình hộp thay thế.

Bạn có thể thay đổi kích thước của hộp thứ hai (bằng cách thêm CSS vào lớp block9) để làm cho nó khớp với hộp đầu tiên về chiều rộng và chiều cao không?

Lưu ý: Bạn có thể tìm thấy một giải pháp cho nhiệm vụ này ở đây. You can find a solution for this task here.

Sử dụng trình duyệt devtools để xem mô hình hộp

Các công cụ dành cho nhà phát triển trình duyệt của bạn có thể làm cho việc hiểu mô hình hộp dễ dàng hơn nhiều. Nếu bạn kiểm tra một yếu tố trong các devtools của Firefox, bạn có thể thấy kích thước của phần tử cộng với lề, đệm và đường viền của nó. Kiểm tra một yếu tố theo cách này là một cách tuyệt vời để tìm hiểu xem hộp của bạn có thực sự có kích thước mà bạn nghĩ là không!

Lề, đệm và biên giới

Bạn đã thấy các thuộc tính display5, display3 và display4 đang hoạt động trong ví dụ trên. Các thuộc tính được sử dụng trong ví dụ đó là những người viết chữ và cho phép chúng tôi đặt tất cả bốn mặt của hộp cùng một lúc. Những chữ viết tắt này cũng có các thuộc tính dài tương đương, cho phép kiểm soát các mặt khác nhau của hộp riêng lẻ.shorthands and allow us to set all four sides of the box at once. These shorthands also have equivalent longhand properties, which allow control over the different sides of the box individually.

Hãy khám phá các thuộc tính này chi tiết hơn.

Lề

Biên độ là một không gian vô hình xung quanh hộp của bạn. Nó đẩy các yếu tố khác ra khỏi hộp. Lợi nhuận có thể có giá trị tích cực hoặc âm. Đặt biên độ âm ở một bên của hộp của bạn có thể khiến nó chồng chéo những thứ khác trên trang. Cho dù bạn đang sử dụng mô hình hộp tiêu chuẩn hay thay thế, lề luôn được thêm vào sau khi kích thước của hộp có thể nhìn thấy đã được tính toán.

Chúng ta có thể kiểm soát tất cả các lề của một phần tử cùng một lúc bằng cách sử dụng thuộc tính display5 hoặc mỗi bên bằng cách sử dụng các thuộc tính dài tương đương:

• width4
• width5
• width6
• width7

Trong ví dụ dưới đây, hãy thử thay đổi các giá trị ký quỹ để xem hộp được đẩy xung quanh như thế nào do biên tạo hoặc loại bỏ không gian (nếu đó là lề âm) giữa phần tử này và phần tử chứa.

Thu gọn lề

Tùy thuộc vào việc hai yếu tố có tỷ suất lợi nhuận có tỷ suất lợi nhuận dương hay âm, kết quả sẽ khác nhau:

• Hai lề tích cực sẽ kết hợp để trở thành một biên độ. Kích thước của nó sẽ bằng với biên độ cá nhân lớn nhất.
• Hai lề âm sẽ sụp đổ và giá trị nhỏ nhất (xa nhất từ ​​0) sẽ được sử dụng.
• Nếu một lề là âm, giá trị của nó sẽ bị trừ khỏi tổng số.

Trong ví dụ dưới đây, chúng tôi có hai đoạn văn. Đoạn trên cùng có width6 trong số 50 pixel, phần còn lại có width4 của 30 pixel. Các lề đã sụp đổ với nhau để biên độ thực tế giữa các hộp là 50 pixel chứ không phải tổng số của hai lề.

Bạn có thể kiểm tra điều này bằng cách đặt width4 của đoạn hai đến 0. Biên độ có thể nhìn thấy giữa hai đoạn sẽ không thay đổi - nó giữ lại 50 pixel được đặt trong width6 của đoạn một. Nếu bạn đặt nó thành -10px, bạn sẽ thấy rằng biên độ tổng thể sẽ trở thành 40px -nó sẽ trừ đi từ 50px.

Một số quy tắc ra lệnh khi tỷ suất lợi nhuận và không sụp đổ. Để biết thêm thông tin, hãy xem trang chi tiết về việc làm chủ việc thu gọn lề. Điều chính cần nhớ là việc sụp đổ lề là một điều xảy ra nếu bạn đang tạo không gian với lề và không có được không gian mà bạn mong đợi.

Biên giới

Biên giới được vẽ giữa lề và đệm của một hộp. Nếu bạn đang sử dụng mô hình hộp tiêu chuẩn, kích thước của đường viền sẽ được thêm vào width và height của hộp. Nếu bạn đang sử dụng mô hình hộp thay thế thì kích thước của đường viền làm cho hộp nội dung nhỏ hơn vì nó chiếm một số trong đó có sẵn width và height.

Đối với đường viền kiểu dáng, có một số lượng lớn các thuộc tính - có bốn đường viền và mỗi đường viền có kiểu dáng, chiều rộng và màu sắc mà chúng ta có thể muốn thao tác.

Bạn có thể đặt chiều rộng, kiểu dáng hoặc màu sắc của cả bốn biên giới cùng một lúc bằng thuộc tính display4.

Để đặt các thuộc tính của từng bên, hãy sử dụng:

• height7
• height8
• height9

• 0

Để đặt chiều rộng, kiểu hoặc màu của tất cả các mặt, sử dụng:

• 1

• 2

• 3

Để đặt chiều rộng, kiểu dáng hoặc màu sắc của một mặt duy nhất, hãy sử dụng một trong các thuộc tính dài hơn của hạt:

• 4

• 5

• 6

• 7

• 8

• 9

• 0

• 1

• 2

• 3

• 4

• 5

Trong ví dụ dưới đây, chúng tôi đã sử dụng nhiều tốc ký và tay dài khác nhau để tạo ra biên giới. Chơi xung quanh với các thuộc tính khác nhau để kiểm tra xem bạn có hiểu cách chúng hoạt động không. Các trang MDN cho các thuộc tính biên giới cung cấp cho bạn thông tin về các kiểu biên giới có sẵn khác nhau.

Đệm

Phần đệm nằm giữa biên giới và khu vực nội dung và được sử dụng để đẩy nội dung ra khỏi biên giới. Không giống như lề, bạn không thể có một phần đệm tiêu cực. Bất kỳ nền được áp dụng cho phần tử của bạn sẽ hiển thị phía sau phần đệm.

Tài sản display3 kiểm soát phần đệm ở tất cả các mặt của một phần tử. Để kiểm soát từng bên, hãy sử dụng các thuộc tính dài này:

• 7

• 8

• 9

• .box {
    box-sizing: border-box;
  }
  

  00

Trong ví dụ dưới đây, bạn có thể thay đổi các giá trị để đệm trên lớp block3 để thấy rằng điều này thay đổi trong đó văn bản bắt đầu liên quan đến hộp. Bạn cũng có thể thay đổi phần đệm trên lớp

.box {
  box-sizing: border-box;
}

Mô hình hộp và hộp nội tuyến

Tất cả những điều trên áp dụng đầy đủ cho các hộp khối. Một số thuộc tính cũng có thể áp dụng cho các hộp nội tuyến, chẳng hạn như các thuộc tính được tạo bởi một phần tử

.box {
  box-sizing: border-box;
}

Trong ví dụ dưới đây, chúng ta có một

.box {
  box-sizing: border-box;
}

Sử dụng Hiển thị: Khối nội tuyến

.box {
  box-sizing: border-box;
}

.box {
  box-sizing: border-box;
}

Một yếu tố có

.box {
  box-sizing: border-box;
}

• Các thuộc tính width và height được tôn trọng.
• display3, display5 và display4 sẽ khiến các yếu tố khác bị đẩy ra khỏi hộp.

Tuy nhiên, nó không chia tay một dòng mới và sẽ chỉ trở nên lớn hơn nội dung của nó nếu bạn thêm các thuộc tính width và height một cách rõ ràng.

Trong ví dụ tiếp theo này, chúng tôi đã thêm

.box {
  box-sizing: border-box;
}

.box {
  box-sizing: border-box;
}

.box {
  width: 350px;
  inline-size: 350px;
  height: 150px;
  block-size: 150px;
  margin: 10px;
  padding: 25px;
  border: 5px solid black;
}

Trường hợp điều này có thể hữu ích là khi bạn muốn cung cấp cho một liên kết một khu vực hit lớn hơn bằng cách thêm display3.

.box {
  box-sizing: border-box;
}

.box {
  box-sizing: border-box;
}

.box {
  box-sizing: border-box;
}

Bạn thấy điều này khá thường xuyên trong các thanh điều hướng. Điều hướng bên dưới được hiển thị thành một hàng bằng FlexBox và chúng tôi đã thêm phần đệm vào phần tử

.box {
  box-sizing: border-box;
}

.box {
  box-sizing: border-box;
}

.box {
  box-sizing: border-box;
}

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

.box {
  box-sizing: border-box;
}

Thêm

.box {
  box-sizing: border-box;
}

.box {
  box-sizing: border-box;
}

Kiểm tra kỹ năng của bạn!

Bạn đã đạt đến cuối bài viết này, nhưng bạn có thể nhớ thông tin quan trọng nhất không? Bạn có thể tìm thấy một số bài kiểm tra tiếp theo để xác minh rằng bạn đã giữ lại thông tin này trước khi bạn tiếp tục - xem Kiểm tra kỹ năng của bạn: Mô hình hộp.

Bản tóm tắt

Đó là hầu hết những gì bạn cần hiểu về mô hình hộp. Bạn có thể muốn trở lại bài học này trong tương lai nếu bạn thấy mình bối rối về cách các hộp lớn trong bố cục của bạn.

Trong bài viết tiếp theo, chúng ta sẽ xem xét cách thức nền và biên giới có thể được sử dụng để làm cho các hộp đơn giản của bạn trông thú vị hơn.

• Trước
• Tổng quan: Khối xây dựng
• Tiếp theo

Trong mô -đun này