Sử dụng Height và Width trong CSS
Giới thiệu nội dung bài viết
Như trong bài viết về Sử dụng CSS trong HTML anh đã chia sẻ, các thuộc tính được sử dụng trong CSS nhằm giúp hiển thị, định dạng các phần tử trong HTML khi ta lập trình web. Trong bài viết hôm nay anh sẽ tiếp tục chia sẻ cho các bạn về thuộc tính height và width trong CSS dùng để thiết lập chiều cao và dài cho phần tử HTML.
Anh sẽ trình bày và hướng dẫn cách làm cho mỗi thuộc tính thông qua các ví dụ minh hoạ. Trước hết, các bạn sẽ được tìm hiểu các giá trị có trong thuộc tính height và width bao gồm auto, length, phần trăm, initial, inherit. Sau đó tiếp tục đi qua các thuộc tính max-width, min-width, max-height, min-height trong lập trình web CSS.
Cụ thể cách thao tác như thế nào với mỗi thuộc tính, các bạn tiếp tục đọc những chia sẻ dưới đây của anh để tìm hiểu thêm nhé!
1. Thuộc tính height và width trong css
Chúng ta sử dụng thuộc tính height và width để thiết lập chiều cao và dài cho một phần tử HTML
Thuộc tính height và width có thể có các giá trị sau.
-
auto : đây là thuộc tính mặc định. Trình duyệt sẽ tính chiều cao và dài cho một phần tử HTML
-
length : sử dụng px, cm, và các đơn vị đo khác để xác định chiều cao và dài cho phần tử HTML
-
% : sử dụng phần trăm để tính giá trị chiều cao và dài cho các phần tử HTML
- initial : thiết lập chiều cao và dài cho giá trị ban đầu của phần tử HTML
- inherit : thiết lập chiều cao và dài được kế thừa từ phần tử cha
Ví dụ sau đây ta tạo ra một thẻ div có chiều cao là 200px và chiều dài là chiếm 50%
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 200px;
width: 50%;
background-color: powderblue;
}
</style>
</head>
<body>
- Ví dụ chúng ta có thể thiết lập chiều cao là 100px và chiều dài là 500px như sau
1
2
3
4
5
6
7
8
9
10
11
12
<!DOCTYPE html>
<html>
<head>
<style>
div {
height: 100px;
width: 500px;
background-color: powderblue;
}
</style>
</head>
<body>
2. Thuộc tính max-width trong css
Chúng ta sử dụng thuộc tính max-width để thiết lập giá trị maximum (giá trị lớn nhất) của chiều dài của một phần tử HTML.
Giá trị max-width có thể là px, cm, hoặc %. Ví dụ nếu ta sử dụng thẻ div nếu chiều dài của thẻ div mà lớn hơn chiều dài của trình duyệt thì nó sẽ xuất hiện một thanh kéo ngang như vậy thì rất bất tiện cho người dùng vì họ phải kéo chuột mới thấy hết những nội dung còn lại.
Chúng ta sử dụng max-width để giải quyết bất cập trên.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
<style>
div {
max-width: 500px;
height: 100px;
background-color: powderblue;
}
</style>
</head>
<body>
<h2>Set the max-width of an element</h2>
<p>This div element has a height of 100px and a max-width of 500px:</p>
<div></div>
<p>Nếu ta thay đổi kích thước của trình duyệt nhỏ lại thì tự động thẻ div sẽ tự điều chỉnh cho vừa với trình duyệt.</p>
</body>
</html>
Nếu ta thay đổi kích thước của trình duyệt nhỏ lại thì tự động thẻ div sẽ tự điều chỉnh cho vừa với trình duyệt và sẽ không xuất hiện thanh kéo ngang.
3. Thuộc tính min-width trong css
Ngược với thuộc tính max-width thì thuộc tính min-width sử dụng để thiết lập giá trị min (nhỏ nhất) của chiều dài của một phần tử HTML.
Nếu nội dung bên trong của phần tử HTML mà nhỏ hơn giá trị min-width thì giá trị min-width sẽ được sử dụng
Nếu nội dung bên trong của phần tử HTML mà lớn hơn giá trị min-width thì giá trị min-width sẽ không được sử dụng
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
<style>
span {
background-color: yellow;
}
span.ex1 {
min-width: 500px;
display: inline-block;
}
</style>
</head>
<body>
<h1>The min-width Property</h1>
<h2>min-width: none (default):</h2>
<span>Lorem ipsum dolor sit amet...</span>
<h2>min-width: 500px:</h2>
<span class="ex1">Lorem ipsum dolor sit amet...</span>
</body>
</html>
4. Thuộc tính max-height trong css
Thuộc tính max-height để thiết lập giá trị maximum (giá trị lớn nhất) của chiều cao của một phần tử HTML
Nếu nội dung bên trong phần tử HTML mà cao hơn giá trị max-height thì sẽ xuất hiện thanh cuộn theo chiều dọc
Nếu nội dung bên trong phần tử HTML mà không cao hơn giá trị max-height thì giá trị này không được sử dụng
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
<style>
p.ex1 {
max-height: 50px;
overflow: auto;
}
</style>
</head>
<body>
<h1>The max-height Property</h1>
<h2>max-height: none (default):</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
<h2>max-height: 50px:</h2>
<p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit. Vestibulum volutpat tellus diam, consequat gravida libero rhoncus ut. Maecenas imperdiet felis nisi, fringilla luctus felis hendrerit sit amet. Pellentesque interdum, nisl nec interdum maximus, augue diam porttitor lorem, et sollicitudin felis neque sit amet erat.</p>
</body>
</html>
5. Thuộc tính min-height trong css
Sử dụng thuộc tính min-height để thiết lập chiều cao nhỏ nhất (tối thiểu) cho một phần tử HTML. Nó ngược lại với max-height.
Nếu nội dung bên trong phân tử mà nhỏ hơn giá trị min-height thì giá trị min-height sẽ được sử dụng
Nếu nội dung bên trong phần tử là lớn hơn giá trị min-height thì giá trị min-height không được sử dụng
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
<style>
p {
background-color: yellow;
}
p.ex1 {
min-height: 100px;
}
</style>
</head>
<body>
<h1>The min-height Property</h1>
<h2>min-height: none (default):</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>
<h2>min-height: 200px:</h2>
<p class="ex1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam semper diam at erat pulvinar, at pulvinar felis blandit...</p>
</body>
</html>
6. Thực hành online và source code
Mọi người hãy Subscribe kênh youtube dưới đây nhé để cập nhật các video mới nhất về kỹ thuật và kỹ năng mềm
Các khoá học lập trình MIỄN PHÍ tại đây
Comments
