[Tự học CSS] Tìm hiểu về thuộc tính display trong layout và max-width trong CSS » Cafedev.vn

Posted on by mtoplistChuyên mục:Top List

Cafedev chia sẻ cho ace về thuộc tính display và max-width của layout trong CSS thông qua ví dụ và thực hành chi tiết tại bài này.

Thuộc tính display là thuộc tính CSS quan trọng nhất để kiểm soát bố cục(layout).

1. Thuộc tính display

Thuộc tính display chỉ định nếu / cách một phần tử được hiển thị.

Mỗi phần tử HTML đều có giá trị hiển thị mặc định tùy thuộc vào loại phần tử đó. Giá trị hiển thị mặc định cho hầu hết các phần tử là block hoặc inline.

2. Phần tử cấp khối

Một phần tử cấp khối(Block) luôn bắt đầu trên một dòng mới và chiếm toàn bộ chiều rộng có sẵn (trải dài sang trái và phải hết mức có thể).

Ví dụ về các phần tử cấp khối:

  • < div >
  • < h1 > – < h6 >
  • < p >
  • < form >
  • < header >
  • < footer >
  • < section >

3. Phần tử nội tuyến(Inline)

Một phần tử nội tuyến không bắt đầu trên một dòng mới và chỉ chiếm nhiều chiều rộng khi cần thiết.

Ví dụ về các phần tử nội tuyến:

  • < span >
  • < a >
  • < img >

4. Display: none;

display: none; thường được sử dụng với JavaScript để ẩn và hiển thị các phần tử mà không cần xóa và tạo lại chúng.

Phần tử < script > sử dụng display: none; như mặc định.

5. Ghi đè Giá trị Hiển thị Mặc định

Như đã đề cập, mọi phần tử đều có giá trị hiển thị mặc định. Tuy nhiên, bạn có thể ghi đè điều này.

Thay đổi phần tử nội tuyến thành phần tử khối hoặc ngược lại, có thể hữu ích để làm cho trang trông theo một cách cụ thể và vẫn tuân theo các tiêu chuẩn web.

Một ví dụ phổ biến là tạo các phần tử <li> nội tuyến cho các menu ngang:

<!DOCTYPE html>
<html>
<head>
<style>
li {
  display: inline;
}
</style>
</head>
<body>

<p>Display a list of links as a horizontal menu:</p>

<ul>
  <li><a href="/html/default.asp" target="_blank">HTML</a></li>
  <li><a href="/css/default.asp" target="_blank">CSS</a></li>
  <li><a href="/js/default.asp" target="_blank">JavaScript</a></li>
</ul>

</body>
</html>

Lưu ý: Việc đặt thuộc tính hiển thị của một phần tử chỉ thay đổi cách phần tử được hiển thị, KHÔNG PHẢI loại phần tử đó. Vì vậy, một phần tử nội tuyến với display: block; không được phép có các phần tử khối khác bên trong nó.

Ví dụ sau đây hiển thị các phần tử < span >dưới dạng các phần tử khối:

<!DOCTYPE html>
<html>
<head>
<style>
span {
  display: block;
}
</style>
</head>
<body>

<span>A display property with a value of "block" results in</span> <span>a line break between the two elements.</span>

</body>
</html>

Việc ẩn một phần tử có thể được thực hiện bằng cách đặt thuộc tính display thành none. Phần tử sẽ bị ẩn và trang sẽ được hiển thị như thể phần tử không có ở đó:

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  display: none;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the h1 element with display: none; does not take up any space.</p>

</body>
</html>

visibility:hidden; cũng ẩn một phần tử.

Tuy nhiên, phần tử sẽ vẫn chiếm một vùng như trước. Phần tử sẽ bị ẩn, nhưng vẫn ảnh hưởng đến bố cục:

<!DOCTYPE html>
<html>
<head>
<style>
h1.hidden {
  visibility: hidden;
}
</style>
</head>
<body>

<h1>This is a visible heading</h1>
<h1 class="hidden">This is a hidden heading</h1>
<p>Notice that the hidden heading still takes up space.</p>

</body>
</html>

6. Sử dụng width, max-width và margin: auto;

Như đã đề cập trong chương trước; một phần tử cấp khối luôn chiếm toàn bộ chiều rộng có sẵn (trải dài sang trái và phải hết mức có thể).

  • Đặt chiều rộng của phần tử cấp khối sẽ ngăn nó kéo dài ra các cạnh của vùng chứa. Sau đó, bạn có thể đặt lề thành tự động, để căn giữa phần tử theo chiều ngang trong vùng chứa của nó. Phần tử sẽ chiếm chiều rộng được chỉ định và không gian còn lại sẽ được chia đều giữa hai lề

Lưu ý: Sự cố với < div > ở trên xảy ra khi cửa sổ trình duyệt nhỏ hơn chiều rộng của phần tử. Sau đó, trình duyệt sẽ thêm một thanh cuộn ngang vào trang.

  • Trong trường hợp này, sử dụng max-widththay vào đó sẽ cải thiện khả năng xử lý các cửa sổ nhỏ của trình duyệt. Điều này quan trọng khi làm cho một trang web có thể sử dụng được trên các thiết bị nhỏ

Mẹo: Thay đổi kích thước cửa sổ trình duyệt rộng dưới 500px, để xem sự khác biệt giữa hai div!

Đây là một ví dụ về hai thẻ div được mô tả ở trên:

<!DOCTYPE html>
<html>
<head>
<style>
div.ex1 {
  width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}

div.ex2 {
  max-width:500px;
  margin: auto;
  border: 3px solid #73AD21;
}
</style>
</head>
<body>

<div class="ex1">This div element has width: 500px;</div>
<br>

<div class="ex2">This div element has max-width: 500px;</div>

<p><strong>Tip:</strong> Drag the browser window to smaller than 500px wide, to see the difference between 
the two divs!</p>

</body>

Full series tự học CSS từ cơ bản tới nâng cao.

Nếu bạn thấy hay và hữu ích, bạn có thể tham gia các kênh sau của cafedev để nhận được nhiều hơn nữa:

Chào thân ái và quyết thắng!

Đăng ký kênh youtube để ủng hộ Cafedev nha các bạn, Thanks you!

mtoplist