Hướng dẫn block box css
Bài viết được sự cho phép của tác giả Lương Văn Phúc Show Đâ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 element 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 element trên trang web, chúng đẩy nhau hay hút lại với nhau như thế nào, từ đó giúp bạn có thể layout được các element tới những vị trí một cách chính xác nhất. Bạn có thể theo dõi bài viết phần 1 và 2 tại đây:
Block và InlineCó lẽ hầu hết các bạn đều đã quen với 2 loại box cơ bản này rồi: block và inline. Nếu bạn nào không nhận ra chúng, thì có thể các bạn sẽ nhận ra dòng CSS ví dụ như Vậy block và
inline nó khác nhau thế nào, một thẻ Nếu một element có thuộc tính
Có nhiều thẻ mặc định đã là block rồi, ví dụ như Tiếp theo, nếu một element có thuộc tính
Một ví dụ đơn giản là dễ thấy nhất: Block direction và Inline directionNếu nói về block và inline mà không nói về hướng mà chúng được 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 định khi bạn vào một trang web, thì hầu hết chúng có Với block direction, các block sẽ được sắp xếp chồng lên nhau chiều dọc (element sau nằm dưới element trên). Còn với inline direction, các element sẽ được sắp xếp cạnh nhau theo hàng ngang. Hướng sắp xếp của các box khi writing-mode là horizontal (chiều ngang) Bổ sung với mục đích tham khảo: với Hướng sắp xếp của các box khi writing-mode là vertical (chiều dọc) Thuộc tính hiển thị bên trong (inner) và ngoài (outer)Bạn có biết một element tồn tại 2 loại thuộc tính hiển thị là bên trong và bên ngoài không? Khi bạn viết
Bạn có thấy lạ lẫm không? Một ví dụ khác, khi bạn viết
Ví dụHãy cùng xem qua một ví dụ đơn giản sau nhé: Một element với thuộc tính display là inline.
Ở ví dụ trên, thẻ
Tiếp theo, chúng ta thử chuyển nó về block xem sao: Một element với thuộc tính display là block.
display: inline-blockTrong một số trường hợp, bạn sẽ muốn dung hòa các hiệu ứng của
block và inline. Chẳng hạn như bạn vẫn muốn tùy chỉnh kích thước của element với Một element với thuộc tính display là inline-block. Kế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ư “Margin collapsing”. Như bạn đã thấy, kiến thức cơ bản về layout thật ra rất đơn giản nhưng có thể vì 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é. Bài viết gốc được đăng tải tại grab-cv.com Có thể bạn quan tâm:
Xem thêm TOP tuyển dụng lập trình IT mới nhất tại TopDev |