Danh Mục Bài Viết
Ok anh em, Tiếp theo chủ đề học nhanh Css cùng Minacode. Bài viết này mình sẽ nói về các thuộc tính Height, Width và Max-Width trong Css nhé! Nào Let's Go thôi
Height và width là các thuộc tính được sử dụng để đặt chiều cao và chiều rộng của một phần tử.
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 50px;
width: 100%;
border: 1px solid #4CAF50;
}
</style>
</head>
<body>
<h2>Minacode|height-width</h2>
<div>Phần tử này rộng 100% và cao 50px.</div>
</body>
</html>Ta có:
Các bạn lưu ý, Thuộc tính chiều cao và chiều rộng được áp dụng cho phần nội dung bên trong không bao gồm border, padding hoặc margin.
Chúng có các giá trị:
Thuộc tính max-width được sử dụng để đặt chiều rộng tối đa của một phần tử. Mặc định của một phần tử là không có chiều rộng tối đa. Có thể chỉ định cho thuộc tính này bằng các giá trị độ dài , như px, cm, v.v. hoặc theo phần trăm (%)).
Để làm rõ sữ khác nhau của việc bạn style cho chiều rộng của một phần tử là width hay max-width. Mình có một ví dụ như sau:
1, Mình sử dụng width
<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Minacode|max-width</h2>
<div>Phần từ này cao 100px và rộng 500px.</div>
<p>Hay thay đổi kích thước trình duyệt.</p>
</body>
</html>Ta có:
2, Mình sử dụng max-width
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Minacode|max-width</h2>
<div>Phần từ này cao 100px và rộng 500px.</div>
<p>Hay thay đổi kích thước trình duyệt.</p>
</body>
</html>Ta có:
Nhìn sẽ không có sự khác biệt đúng không. Sự cố sẽ xảy ra khi cửa sổ trình duyệt của bạn nhỏ hơn chiều rộng của phần tử (500px). Trình duyệt trong trường hợp không có max-width sau đó sẽ thêm một thanh cuộn ngang vào trang.
Vậy 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.
Các bạn đã thấy được sự khách biệt khi chúng ta dùng max-width thay vì width rồi đúng không. Hãy vận dụng luôn nhé!
>>Còn tiếp nhé>>
.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)
