Trong hướng dẫn tự học CSS này bạn sẽ được tìm hiểu cách sử dụng CSS để thiết kích thước chiều rộng (width) và chiều cao (height) cho các phần tử HTML.
Thiết lập kích thước phần tử trong CSS
CSS có một số thuộc tính kích thước, chẳng hạn như:
- width: Chiều rộng
- height: Chiều cao
- max-width: Chiều rộng tối đa
- min-width: Chiều rộng tối thiểu
- max-height: Chiều cao tối đa
- min-height: Chiều cao tối thiểu
Những thuộc tính kích thước trong CSS này cho phép bạn kiểm soát chiều rộng và chiều cao của một phần tử.
Các phần tiếp theo đây mình giúp giúp bạn hiểu rõ cách sử dụng các thuộc tính này để tạo bố cục trang web tốt hơn.
Thiết lập chiều rộng và chiều cao
Thuộc tính width và height xác định chiều rộng và chiều cao của vùng nội dung của một phần tử.
Chiều rộng và chiều cao này không bao gồm phần đệm (padding), đường viền (border) hoặc lề (margin).
Tại sao thì vui lòng xem lại bài Box Model trong CSS để biết cách tính chiều rộng và chiều cao thực tế của phần tử nhé.
Hãy thử ví dụ sau và xem nó thực sự hoạt động như thế nào:
HTML:
<div>Thử thiết lập kích thước phần tử xem nó hoạt động thế nào</div>CSS:
div {
width: 300px;
height: 200px;
background: #003999;
}Các quy tắc CSS trên chỉ định chiều rộng cố định là 300px và chiều cao là 200px cho phần tử div.
Thuộc tính chiều rộng và chiều cao có thể nhận các giá trị sau:
- Một trong các loại kích thước px, em, rem, pt, cm, v.v. (Xem bài viết Thuộc tính font trong CSS để hiểu hơn về các loại kích thước)
- %: Chỉ định chiều rộng tính bằng phần trăm (%) chiều rộng của phần tử chứa nó.
- auto: Trình duyệt tự tính toán chiều rộng phù hợp cho phần tử.
- initial: Đặt chiều rộng và chiều cao thành giá trị mặc định của nó, giá trị này là tự động.
- inherit: Chỉ định rằng chiều rộng sẽ được kế thừa từ phần tử cha của nó.
Mẹo: Thông thường khi bạn tạo phần tử khối (block), chẳng hạn như div, p, v.v., trình duyệt sẽ tự động đặt chiều rộng của chúng thành 100% chiều rộng có sẵn và chiều cao vừa đủ để hiển thị tất cả nội dung nó chứa. Bạn nên tránh đặt chiều rộng và chiều cao cố định trừ khi cần thiết (Vì còn phải thiết kế đáp ứng – Responsive nữa)
Chú ý: Bạn đang muốn học để lập trình Website chuyên nghiệp? Thế thì xem ngay khóa học lập trình Full stack tại đây: https://niithanoi.edu.vn/hoc-lap-trinh.html
Thiết lập chiều rộng tối đa và chiều cao tối đa
Bạn có thể sử dụng thuộc tính max-width và max-height để chỉ định chiều rộng và chiều cao tối đa của vùng nội dung.
Chiều rộng và chiều cao tối đa này cũng không bao gồm padding, border, magin.
Một phần tử không được rộng hơn giá trị max-width, ngay cả khi giá trị thuộc tính width được đặt lớn hơn.
Ví dụ: Nếu chiều rộng được đặt thành 300px và chiều rộng tối đa được đặt thành 200px, thì chiều rộng thực tế của phần tử sẽ là 200px. Hãy xem ví dụ:
HTML:
<div>Chiều rộng tối đa của thẻ div này được đặt là 200px. Thế nên cho dù ta có đặt width = 300px thì nó cũng không thể rộng hơn được</div>
<p>Còn thẻ p này thì có chiều rộng tối đa là 1000px cơ.</p>CSS:
div {
width: 300px;
max-width: 200px;
background: #003999;
}
p {
float: left;
max-width: 1000px;
background: #eee8aa;
}Lưu ý: Nếu thuộc tính min-width có giá trị lớn hơn giá trị của thuộc tính max-width, trong trường hợp này, giá trị chiều rộng tối thiểu thực tế sẽ là giá trị được áp dụng.
Tương tự như thế, một phần tử đã áp dụng max-height sẽ không bao giờ cao hơn giá trị được chỉ định, ngay cả khi thuộc tính height được đặt thành giá trị lớn hơn.
Ví dụ: Nếu chiều cao được đặt thành 200px và chiều cao tối đa được đặt thành 100px, thì chiều cao thực của phần tử sẽ là 100px.
HTML:
<div>Chiều cao tối đa của thẻ div này được đặt là 30px. Thế nên cho dù ta có đặt height = 200px thì nó cũng không thể cao hơn được</div>
<p>Còn thẻ p này thì có chiều rộng tối đa là 500px cơ.</p>CSS:
div {
height: 200px;
max-height: 30px;
background: #003999;
}
p {
max-height: 500px;
background: #eee8aa;
}Lưu ý: Nếu giá trị thuộc tính min-height lớn hơn max-height, trong trường hợp này, giá trị chiều cao tối thiểu trên thực tế sẽ là giá trị được áp dụng
Thiết lập chiều rộng tối thiểu và chiều cao tối thiểu trong CSS
Bạn có thể sử dụng thuộc tính min-width và min-height chỉ định chiều rộng và chiều cao tối thiểu của vùng nội dung.
Chiều rộng và chiều cao tối thiểu này không bao gồm padding, border, margin.
Một phần tử không được hẹp hơn giá trị min-width, ngay cả khi giá trị thuộc tính width được đặt thành giá trị nhỏ hơn.
Ví dụ: Nếu width được đặt thành 300px và min-width được đặt thành 400px, thì chiều rộng thực tế của phần tử sẽ là 400px. Hãy xem nó thực sự hoạt động như thế nào:
HTML:
<div>Chiều rộng tối thiểu là 300px nên dù có đặt width = 200px thì nó cũng không thể nhỏ hơn</div>
<p>Thẻ p này min-width là 400px cơ.</p>CSS:
div {
width: 200px;
min-width: 300px;
background: #003999;
}
p {
float: left;
min-width: 400px;
background: #eee8aa;
}Lưu ý: Thuộc tính min-width thường được sử dụng để đảm bảo rằng một phần tử có chiều rộng tối thiểu ngay cả khi nó không có nội dugn. Tuy nhiên, nếu nội dung nó lớn hơn giá trị tối thiểu thì nó vẫn được mở rộng thoải mái.
Tương tự, một phần tử được áp dụng min-height sẽ không bao giờ nhỏ hơn giá trị được chỉ định, ngay cả khi đặt giá trị thuộc tính height nhỏ hơn.
Ví dụ: Nếu height được đặt thành 200px và min-height được đặt thành 300px, thì chiều cao thực của phần tử sẽ là 300px
HTML:
<div>Chiều cao tối thiểu của thẻ div này là 300px vì thế nó không thể nhỏ hơn cho dù có đặt height = 200px</div>
<p>Còn thể p này có chiều cao tối thiểu là 100px.</p> CSS:
div {
height: 200px;
min-height: 300px;
background: #003999;
}
p {
min-height: 100px;
background: #eee8aa;
}Thiết lập khoảng chiều rộng và khoảng chiều cao trong CSS
Thuộc tính min-width và min-height thường được sử dụng kết hợp với thuộc tính max-width và max-height để tạo ra phạm vi chiều rộng và chiều cao cho một phần tử.
Điều này có thể rất hữu ích để tạo ra các bố cục thiết kế linh hoạt
Trong ví dụ sau, chiều rộng tối thiểu của thẻ div sẽ là 300px và nó có thể kéo dài chiều rộng lên đến tối đa 500px.
HTML:
<div></div>CSS:
div {
float: left;
min-width: 300px;
max-width: 500px;
height: 100px;
background: #003999;
}Bạn thử chạy ví dụ trên xem.
Lúc đầu nó chỉ hiển thị kích thước là 300px. Tuy nhiên, hãy thử thêm vài dòng văn bản vào trong thẻ div để thấy nó hoạt động như thế nào.
Tương tự, bạn có thể xác định khoảng chiều cao cho một phần tử.
Trong ví dụ dưới đây, chiều cao tối thiểu của thẻ div sẽ là 100px và nó có thể cao lên đến tối đa 500px.
HTML:
<div></div>CSS
div {
min-height: 100px;
max-height: 500px;
background: #003999;
}Hãy thử ví dụ và thêm nội dung vào thẻ div để xem cách nó hoạt động nhé.
Như vậy, qua bài viết này mình đã hướng dẫn bạn cách thiết lập kích thước trong CSS. Hi vọng bạn hiểu và vận chúng linh hoạt trong lập trình web.
Đọc thêm: Cách CSS Bảng