Danh Mục Bài Viết
Ok anh em, Tiếp theo trong chủ đề học nhanh Css cùng Minacode. Bài này mình sẽ làm rõ khái niệm display và các thuộc tính của nó như display: none, visibility:hidden hay cách sử dụng width và max-width trong Css. Nào Let's go thôi.
Thuộc tính display là một trong những thuộc tính Css quan trọng nhất để kiểm soát bố cục của một trang web hoặc để thay đổi cách hiển thị mặc định của các phần tử Html.
Nó được sử dụng để chỉ định cách hiển thị một phần tử trên trang web. 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.
Các bạn xem thêm:
Các phần tử block LUÔN 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 (kéo dài sang trái và phải hết mức có thể).
Một số các thẻ có display mặc định là block như:
Các 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 nếu cần thiết.
Một số các thẻ có display mặc định là inline như:
Các giá trị của thuộc tính display:Chúng ta thường sử dụng display: none kết hợp 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.
Giống với display: none, visibility:hidden cũng ẩn một phần tử. Tuy nhiên, phần tử sau khi ẩn vẫn sẽ chiếm không gian như ban đầu của nó và không bị các phần từ khác thay thế, do đó không ảnh hưởng đến bố cục của bạn.
Thay đổi giá trị mặc định của display
Như mình đã đề cập ở trên, mọi phần tử đều có giá trị hiển thị mặc định của nó. Tuy nhiên, bạn có thể dễ dàng thay đổi nó vơi Css.
p {
display: inline;
}hay
span {
display: block;
}Việc đặt width cho phần tử là block sẽ ngăn phần tử đó kéo dài ra các cạnh của vùng chứa nó. Sau đó, bạn có thể đặt lề thành tự động với margin: auto, để 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à khoảng trống còn lại sẽ được chia đều cho hai lề.
Lưu ý: Khi chúng ta đặt cho một thẻ div với width: 500px thì khi cửa sổ trình duyệt nhỏ hơn chiều rộng của phần tử là 500px. Trình duyệt sau đó thêm một thanh cuộn ngang vào trang.
Thay vào đó, trong trường hợp này, việc sử dụng max-width 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 rất 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ỏ.
<!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>
<h2>Minacode|Max-width</h2>
<div class="ex1">Phần từ này width: 500px;</div>
<br>
<div class="ex2">Phần từ này max-width: 500px;</div>
<p><strong>Mẹo:</strong> Bạn hay thay đổi kích thước chiều rộng màn hình để thấy sự khác biệt nhé!</p>
</body>
</html>Ta có:
>>Còn tiếp>>
.png)
.png)
-min.png)
Banker To Coder
Hi All,
Nguyên đây! MinaCode là website mình tạo ra với mong muốn chia sẻ chút kiến thức liên quan đến lập trình FullStack.
Ngôn ngữ lập trình chủ yếu được sử dụng là Htm, Css, Javascript, Php cùng một số thư viện như Jquery, Fontawesome... Phía Frontend và Farmework Laravel phía Backend.
Mình chưa bao giờ tham gia bất cứ một trường lớp nào về lập trình. Tất cả kiến thức mình chia sẻ đều là trên tình thần tự học. Do đó:
+ MinaCode phù hợp với những tay ngang, xem lập trình như là một kỹ năng bổ trợ trong công việc hay là một kênh kiếm thêm thu nhập từ những very mini projects.
+ MinaCode không phù hợp với những bạn đang được đào tạo bài bản, chính quy.
Mình tin rằng, Trong tương lai không xa. Lập trình sẽ trở nên một kỹ năng không thể thiếu đối với các bạn trẻ.
Cuối cùng thì Ngôn ngữ lập trình không quan trọng bằng Tư duy lập trình. Mình chúc các bạn sẽ có được những kiến thức bổ ích với MinaCode.
--Ngô Sỹ Nguyên--
.png)
