Như cái tiêu đề thì trong bài này chúng ta sẽ cùng tìm hiểu về chiều cao và chiều rộng trong CSS, để xem nó được sử dụng như thế nào nhé !
Chiều rộng – width trong CSS
Để sử dụng thuộc tính chiều rộng trong CSS chúng ta sử dụng cú pháp
vùng chọn {
width: kích thước;
}
Ví dụ bạn có một cái khung nội dung và muốn thiết lập chiều rộng cho nó thì sẽ viết đoạn code tương tự như sau:
#khung-noi-dung-so-01 {
width: 300px;
}
Một số lưu ý với thuộc tính width:
- Thuộc tính width có giá trị mặc định là auto. Trình duyệt sẽ tự động thiết lập chiều rộng của phần tử ứng với từng loại hiển thị tương ứng của phần tử:
- Với các phần tử hiển thị theo kiểu khối block thì thuộc tính này có giá trị là 100% độ rộng của phần tử mẹ chứa nó.
- Với các phần tử hiển thị theo kiểu trong hàng inline thì thuộc tính này có giá trị đúng bằng nội dung của phần tử.
Chiều cao – height trong CSS
Để sử dụng thuộc tính chiều cao trong CSS chúng ta sử dụng cú pháp tương tự với chiều rộng như sau:
vùng chọn {
height: kích thước;
}
Ví dụ bạn có một cái khung nội dung và muốn thiết lập chiều cao cho nó thì sẽ viết đoạn code tương tự như sau:
#khung-noi-dung-so-01 {
height: 100px;
}
Tương tự như thuộc tính width, thuộc tính height có giá trị mặc định là auto. Trình duyệt sẽ tự động thiết lập chiều cao của phần tử ứng với nội dung của phần tử.
Sau đây là ví dụ sử dụng chiều rộng và chiều cao với width và height, các bạn thay các giá trị kích thước để xem sự thay đổi nhé !
<html lang="vi">
<head>
<meta charset="utf-8" />
<title>Tiêu đề webiste</title>
<style type="text/css">
body {
text-align: center;
border: solid black 10px;
width: 600px;
}
#khung-so-01 {
background: green;
border: solid yellow 2px;
color: #fff;
padding: 30px;
margin: 20px;
width: 300px;
height: 100px
}
#khung-so-02 {
background: yellow;
border: solid green 2px;
color: blue;
padding: 30px;
margin: 20px;
width: 350px;
height: 50px
}
</style>
</head>
<body>
<div id="khung-so-01">
Nội dung trong khung số 01
</div>
<div id="khung-so-02">
Nội dung trong khung số 02
</div>
</body>
</html>
Chiều cao tối đa và chiều rộng tối đa
Trong một số trường hợp, để tránh việc vùng chọn của chúng ta vượt quá kích thước hiển thị của thiết bị thì chúng ta phải thiết lập giới hạn về chiều cao và chiều rộng cho nó. Cụ thể là:
- max-height: kích thước; chiều cao tối đa của vùng chọn;
- max-width: kích thước; chiều rộng tối đa của vùng chọn;
- các đơn vị chúng ta cũng sử dụng tương tự như widht và height như: %, em, px,…
Oke, nội dung bài này chỉ như vậy thôi, các bạn copy ví dụ dán vào Codepen, xem nó hiển thị thế nào, sau đó thay đổi các giá trị hoặc tùy chọn theo ý để dễ hình dung hơn nhé !
Bài học trước đó và tiếp theo
![[Học CSS] Bài 04: Nhúng CSS vào HTML](https://hocban.vn/wp-content/uploads/2017/05/Hoc-CSS-211x150.jpg "[Học Css] Bài 04: Nhúng Css Vào Html")
