Làm cách nào để vẽ một hộp trong HTML?

Khối và hộp nội tuyến

Trong CSS, chúng ta thường có hai loại hộp - hộp khối và hộp nội tuyến. Loại đề cập đến cách hộp hoạt động theo luồng trang và liên quan đến các hộp khác trên trang. Hộp có loại trưng bày trong và loại trưng bày ngoài

Nói chung, bạn có thể đặt các giá trị khác nhau cho kiểu hiển thị bằng thuộc tính

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

Loại màn hình bên ngoài

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

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

• Hộp sẽ phá vỡ trên một dòng mới
• Các thuộc tính

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

  1 và

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

  2 được tôn trọng
• Phần đệm, lề và đường viền sẽ khiến các phần 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 khoảng trống có sẵn trong vù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 bằng hộp 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ư

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

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

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

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

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

• Hộp sẽ không phá vỡ một dòng mới
• Thuộc tính

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

  1 và

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

  2 sẽ không á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;
}

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

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

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

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

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

Hộp cũng có kiểu hiển thị bên trong, cho biết cách bố trí các phần tử bên trong hộp đó

Bố cục khối và nội tuyến là cách mọi thứ hoạt động mặc định trên web. Theo mặc định và không có bất kỳ hướng dẫn nào khác, các thành phần bên trong hộp cũng được bố trí theo quy trình bình thường và hoạt động như khối hoặc hộp nội tuyến

Ví dụ, bạn có thể thay đổi kiểu hiển thị bên trong bằng cách cài đặt

.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;
}

Khi bạn chuyển sang tìm hiểu chi tiết hơn về Bố cục CSS, bạn sẽ gặp phải ________ 71 và nhiều giá trị bên trong khác mà các hộp của bạn có thể có, ví dụ như ________ 73

Ghi chú. Để đọc thêm về các giá trị của 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 hướng dẫn MDN Bố cục khối và nội tuyến

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

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

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

• Một đoạn văn có đường viền được thêm vào trong CSS. Trình duyệt hiển thị cái này dưới dạng hộp khối. Đoạ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 đặt ra 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 các phần tử con của vùng chứa, là các mục 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 vùng chứa và ngắt thành một dòng mới
• Một đoạn văn cấp khối, bên trong có hai phần tử

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

  5. Các phần tử này thường là

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

  1, tuy nhiên, một trong các phần 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 phần 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 bắt buộc ngắt dòng
• Phần tử

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

  61 được đặt thành

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

  62 tạo một hộp nội tuyến chứa một số mục linh hoạt
• Cả hai đoạn đều được đặt thành

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

  63. Tất cả các bộ chứa flex nội tuyến và các đoạn văn chạy cùng nhau trên một dòng thay vì chia thành 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

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

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

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

.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à. Việc thay đổi giá trị của thuộc tính

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

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

Toàn bộ mô hình hộp CSS áp dụng cho hộp khối và xác định cách các phần khác nhau của hộp — lề, đường viền, phần đệm và nội dung — phối hợp với nhau để tạo hộp mà bạn có thể nhìn thấy trên 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

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

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

Tạo một hộp khối trong CSS, chúng ta có

• hộp nội dung. Khu vực hiển thị nội dung của bạn;
• hộp đệm. Phần đệm nằm xung quanh nội dung dưới dạng khoảng trắng;
• Hộp viền. Hộp viền bao bọc nội dung và bất kỳ phần đệm nào;
• hộp ký quỹ. Lề là lớp ngoài cùng, bao bọc nội dung, phần đệm và đường viền dưới dạng khoảng trắng giữa hộp này và các thành phần khác;

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

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

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

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

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

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

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

Nếu chúng tôi cho rằng một hộp có CSS ​​sau

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

Không gian thực tế mà hộp chiếm sẽ rộng 410px (350 + 25 + 25 + 5 + 5) và cao 210px (150 + 25 + 25 + 5 + 5)

Ghi chú. Lề không được tính vào kích thước thực 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ỉ ảnh hưởng đến không gian bên ngoài hộp. Diện tích của hộp dừng lại ở đường viền — nó không mở rộng ra ngoài lề

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

Trong mô hình hộp thay thế, chiều rộng bất kỳ là chiều rộng của hộp hiển thị trên trang. Chiều rộng của vùng nội dung là chiều rộng đó trừ đi chiều rộng của phần đệm và đường viền (xem hình ảnh bên dưới). Không cần thêm đường viền và phần đệm để 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

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

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

Nếu chúng tôi 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ế chiếm 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 phần tử của bạn (là lựa chọn phổ biến của các nhà phát triển), hãy đặt thuộc tính

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

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

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

Để hiểu ý tưởng cơ bản, bạn có thể đọc bài viết Thủ thuật CSS về kích thước hộp

Ghi chú. Một chút lịch sử thú vị — Internet Explorer được sử dụng để mặc định là mô hình hộp thay thế, không có cơ chế nào để chuyển đổi

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

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

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

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

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

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

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

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

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

Ghi chú. Bạn có thể tìm thấy một giải pháp cho nhiệm vụ này tại đây

Sử dụng DevTools của trình duyệt để 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ể giúp 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 phần tử trong DevTools của Firefox, bạn có thể thấy kích thước của phần tử cộng với lề, phần đệ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 như bạn nghĩ hay không

Lề, đệm và đường viền

Bạn đã thấy các thuộc tính

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

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

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

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

Lề

Lề 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ị dương hoặc âm. Đặt lề âm ở một bên hộp của bạn có thể khiến nó chồng lên 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 tính toán kích thước của hộp hiển thị

Chúng tôi 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

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

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

  14

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

  15

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

  16

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

  17

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

Thu hẹp ký quỹ

Tùy thuộc vào việc hai phần tử có lề chạm nhau có lề dương hay âm mà kết quả sẽ khác nhau

• Hai biên dương 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ẽ thu gọn và giá trị nhỏ nhất (xa nhất từ ​​0) sẽ được sử dụng
• Nếu một lề là số âm, giá trị của nó sẽ bị trừ khỏi tổng

Trong ví dụ dưới đây, chúng ta có hai đoạn văn. Đoạn trên cùng có

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

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

Bạn có thể kiểm tra điều này bằng cách đặt

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

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

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

biên giới

Đường viền được vẽ giữa lề và phần đệm của 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

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

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

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

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

Đối với các đường viền tạo kiểu, 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ó một kiểu, 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 hoặc màu của cả bốn đường viền cùng một lúc bằng cách sử dụng thuộc tính

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

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

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

  27

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

  28

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

  29

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

  30

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

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

  31

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

  32

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

  33

Để đặt chiều rộng, kiểu hoặc màu của một mặt, hãy sử dụng một trong các thuộc tính longhand chi tiết hơn

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

  34

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

  35

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

  36

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

  37

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

  38

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

  39

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

  40

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

  41

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

  42

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

  43

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

  44

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

  45

Trong ví dụ bên dưới, chúng tôi đã sử dụng nhiều cách viết tắt và viết tay khác nhau để tạo đường viền. 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 dành cho thuộc tính đường viền cung cấp cho bạn thông tin về các kiểu đường viền có sẵn khác nhau

đệm

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

Thuộc tính

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

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

  47

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

  48

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

  49

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

  00

Trong ví dụ bên dưới, bạn có thể thay đổi các giá trị cho phần đệm trên lớp

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

.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 hoàn toàn áp dụng cho 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 phần tử

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

Trong ví dụ bên dưới, chúng ta có một

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

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

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

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

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

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

Sử dụng màn hình. chặn Nội tuyến

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

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

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

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

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

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

Một phần tử với

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

• Các thuộc tính

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

  1 và

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

  2 được tôn trọng
• ________ 493, ________ 495 và ________ 494 sẽ khiến các phần tử khác bị đẩy ra khỏi hộp

Tuy nhiên, nó không chuyển sang 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

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

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

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 tiếp cận lớn hơn bằng cách thêm

.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ị trong một hàng bằng cách sử dụ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;
}

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

.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 đã đọc đến cuối bài viết này, nhưng liệu bạn có nhớ được thông tin quan trọng nhất không? . Mô hình hộp

Tóm lược

Đó 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 quay lại bài học này trong tương lai nếu bạn cảm thấy bối rối về kích thước của các hộp trong bố cục của mình

Trong bài viết tiếp theo, chúng ta sẽ xem cách nền và đường viền 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

Làm cách nào để tạo hộp div trong HTML?