Đây là bài viết cuối trong series về CSS Box Model của mình. Nếu như các bài viết trước tập trung phân tích sâu về một phần tử và các thuộc tính của nó, thì bài viết này sẽ giúp bạn có cái nhìn bao quát hơn về mối quan hệ giữa các phần tử trên trang web, chúng giúp nhau hay hút Các bạn có thể theo dõi bài viết phần 1 và 2 tại đây - Phần 1. CSS Box Model – Cơ bản dành cho người mới bắt đầu
- Phần 2. CSS Box Model và box-sizing. border-box là gì vậy?
Chặn và Nội tuyếnCó lẽ hầu hết các bạn đều đã quen với 2 loại box cơ bản này rồi. khối và nội tuyến. Nếu bạn không nhận ra chúng, thì có thể bạn sẽ nhận ra dòng CSS ví dụ như .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
6 và .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
7Do đó chặn và nội tuyến nó khác nhau thế nào, một thẻ .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
8 nó khác gì một thẻ .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
9? Nếu một phần tử có thuộc tính .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
0 là .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
1, thì nó sẽCó nhiều thẻ mặc định đã bị chặn rồi, ví dụ như .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
8, .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
2, .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
3, .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
4, nên mặc định các thẻ đó sẽ biểu hiện với các tính chất như mô tả bên trên. Đương nhiên khi chúng ta gọi là “default”, điều đó có nghĩa là chúng ta có thể thay đổiTiếp theo, nếu một phần tử có thuộc tính .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
0 là .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
6, thì nó sẽMột ví dụ đơn giản là dễ thấy nhất Hướng khối và hướng nội tuyếnNếu nói về block và inline mà không nói về hướng mà chúng sắp đặt thì hơi thiếu sót. Tuy nhiên vấn đề này cũng có nhiều thứ để bàn (nằm ngoài mục đích của bài viết), nên mình chỉ nêu vài ý cơ bản ở đây Mặc dù đã xác định khi bạn vào một trang web, thì hầu hết chúng có .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
9 là .child {
display: block; /* <= thêm dòng này */
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
0, có nghĩa là nội dung sẽ được sắp xếp từ trái sang phải (ngang) và từ trên xuống dưới (tb). trên dưới). Thường thì chúng ta ít nói đến điều này, vì ngôn ngữ tiếng Việt và tiếng Anh đều đi theo hướng như vậyVới hướng khối, các khối sẽ được sắp xếp chồng lên nhau theo chiều dọc (phần tử sau phần tử nằm dưới phần tử trên). Còn với hướng nội tuyến, các phần tử sẽ được sắp xếp cạnh nhau theo hàng ngang
Hướng sắp xếp của các hộp khi chế độ viết nằm ngang ( chiều ngang)Bổ sung cho mục đích tham khảo. with .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
9 là vertical thì hướng của các khối sẽ đi theo chiều ngang. Tuy nhiên, bản chất cách thức hoạt động của nó cũng không thay đổi
Hướng sắp xếp của các hộp khi chế độ viết là dọc ( dọc)Thuộc tính hiển thị bên trong (inner) và bên ngoài (bên ngoài)Bạn có biết một phần tử tồn tại ở 2 loại thuộc tính được hiển thị là bên trong và bên ngoài không? - bên ngoài. bạn đang tuyên bố rằng phần tử của bạn là một khối khi tương tác với các phần tử xung quanh
- Bên trong. bạn đang tuyên bố rằng các phần tử trực tiếp của nó sẽ được bố trí theo cách bình thường như mô tả ở trên (gọi là dòng chảy bình thường)
Bạn có thấy lạ không? - bên ngoài. bạn đang tuyên bố rằng phần tử của bạn là một khối khi tương tác với các phần tử xung quanh
- Bên trong. bạn đang tuyên bố rằng các phần tử trực tiếp của nó sẽ trở thành các mục linh hoạt và được bố trí dựa trên các quy tắc của flexbox
Câu hỏi phỏng vấn mẹo về React. Thành phần hay phần tử được hiển thị trong trình duyệt? Cách đặt tên lớp của phần tử trong HTML sao cho phù hợp? Ví dụHãy cùng xem qua một ví dụ đơn giản sau nhé
Một phần tử với thuộc tính hiển thị là nội tuyến. .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
1.child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
At the ví dụ trên, thẻ .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
9 default is a inline box, because the- Nó nằm cùng dòng với các nội dung khác
- toàn bộ chiều rộng và chiều cao bị bỏ qua. Lưu ý mã CSS không lỗi trong trường hợp này, nó chỉ không có tác dụng mà thôi
- Với phần đệm là 50px, bạn thấy nó đưa ra các chữ xung quanh ra xa theo chiều ngang, nhưng chiều dọc thì không dẫn, mặc dù nó vẫn tồn tại (bằng chứng là màu nền của nó)
- Với lề trên và dưới là 100px, nó hoàn toàn bị loại bỏ
Tiếp theo, chúng ta thử chuyển nó về khối xem sao
Một phần tử với thuộc tính hiển thị là khối. .child {
display: block; /* <= thêm dòng này */
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
- Vì là khối nên nó tự động rớt xuống một dòng mới
- Chiều rộng và chiều cao lúc này có tác dụng
- Với phần đệm là 50px, bạn thấy nó tạo ra các chữ xung quanh ra xa theo cả chiều ngang và chiều dọc
- Ký quỹ lúc này đã có tác dụng
trưng bày. chặn Nội tuyếnTrong một số trường hợp, bạn sẽ muốn dung hòa các hiệu ứng của khối và nội tuyến. Không hạn chế vì bạn vẫn muốn tùy chỉnh kích thước của phần tử với .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
2 và .child {
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
0, nhưng bạn vẫn muốn nó nằm trong dòng với các phần tử khác. Với .child {
display: block; /* <= thêm dòng này */
background-color: lightblue;
width: 100px;
height: 100px;
padding: 50px;
margin: 50px 0;
}
7, bạn sẽ giúp phần tử có một số tính chất của cả khối và nội tuyến
Một phần tử với thuộc tính display là inline-blockKết luậnBài viết cũng khá dài rồi nên mình không muốn trình bày thêm những vấn đề liên quan khác ví dụ như “Sập lề”. Như bạn đã thấy, kiến thức cơ bản về bố cục thật ra rất đơn giản nhưng có thể do không được dạy ở trường đại học (thời của mình) nên rất ít bạn có thể hiểu và áp dụng một cách đúng đắn. Tuy nhiên nó cũng khá đơn giản thôi nên các bạn hãy dành thời gian để hiểu rõ về nó nhé | 
