Khi thiết kế một trang web, bạn có thể muốn chỉ định kích thước cụ thể cho các phần tử xuất hiện trên trang web. Ví dụ:bạn có thể muốn một hộp có chiều cao nhất định hoặc một dòng văn bản kéo dài theo chiều rộng nhất định.
Đó là nơi xuất hiện thuộc tính chiều cao và chiều rộng trong CSS. Thuộc tính chiều cao và chiều rộng cho phép bạn đặt chiều cao và chiều rộng của một phần tử trong CSS.
Hướng dẫn này sẽ thảo luận, với các ví dụ, khái niệm cơ bản về thuộc tính chiều cao và chiều rộng CSS và cách sử dụng thuộc tính chiều cao và chiều rộng tối thiểu và tối đa để thiết kế các phần tử đáp ứng. Khi đọc xong hướng dẫn này, bạn sẽ trở thành chuyên gia trong việc sử dụng các thuộc tính chiều cao và chiều rộng CSS để đặt kích thước của một phần tử trên trang web.
Chiều cao và Chiều rộng CSS
Đặt chiều cao và chiều rộng của một phần tử trên trang web cho phép bạn xác định không gian mà phần tử đó sẽ chiếm trên trang web. Điều này có thể giúp bạn phát triển cấu trúc cho các phần tử trên trang web của mình để mỗi phần tử xuất hiện chính xác dựa trên nhu cầu của bạn.
Để xác định khoảng cách mà một phần tử có thể kéo dài theo chiều ngang và chiều dọc, bạn có thể sử dụng các thuộc tính chiều rộng và chiều cao tương ứng.
Thuộc tính chiều rộng và chiều cao cho phép bạn đặt chiều rộng và chiều cao cụ thể cho vùng nội dung của hộp. Điều này có nghĩa là các thuộc tính chiều rộng và chiều cao kiểm soát không gian mà nội dung của hộp có và không ảnh hưởng đến bất kỳ lề hoặc phần đệm nào được đặt cho hộp.
Thuộc tính chiều cao và chiều rộng sử dụng cú pháp sau:
height: heightValue; width: widthValue;
Các giá trị heightValue và widthValue có thể chấp nhận bất kỳ giá trị nào sau đây:
81% người tham gia cho biết họ cảm thấy tự tin hơn về triển vọng công việc công nghệ của mình sau khi tham gia một cuộc thi đào tạo. Kết hợp với bootcamp ngay hôm nay.
Sinh viên tốt nghiệp bootcamp trung bình đã dành ít hơn sáu tháng để chuyển đổi nghề nghiệp, từ khi bắt đầu bootcamp đến khi tìm được công việc đầu tiên của họ.
- auto:Trình duyệt tự động tính toán chiều cao và chiều rộng.
- chiều dài:Chiều rộng hoặc chiều cao của hộp tính bằng px, em, rem, v.v.
- phần trăm:Chiều rộng hoặc chiều cao của một hộp dưới dạng phần trăm kích thước của khối mà một phần tử xuất hiện trong đó.
- ban đầu:Giá trị mặc định được chỉ định cho hộp.
- inherit:Có cùng giá trị với chiều rộng hoặc chiều cao của hộp trong đó một phần tử xuất hiện.
Bây giờ chúng ta đã biết những kiến thức cơ bản về các thuộc tính chiều cao và chiều rộng, chúng ta có thể khám phá một ví dụ về từng thuộc tính này đang hoạt động.
Thuộc tính chiều cao và chiều rộng CSS
Giả sử chúng ta đang thiết kế một trang web cho một quán cà phê địa phương tên là The Pickled Apple. Quán cà phê này đã yêu cầu chúng tôi tạo một hộp trên trang “Giới thiệu” trên trang web của họ, hộp này sẽ lưu trữ mô tả ngắn gọn về quán cà phê.
Hộp này phải rộng 200px và cao 200px và có nền màu xám nhạt. Các thứ nguyên này đã được chọn để đảm bảo rằng các yếu tố khác mà chúng tôi muốn thêm vào trang web sẽ phù hợp khi chúng tôi triển khai chúng.
Chúng tôi có thể sử dụng mã sau để tạo hộp:
<html>
<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.</p>
<style>
.aboutBox {
height: 200px;
width: 200px;
background-color: lightgray;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Hãy chia nhỏ mã của chúng ta. Trong tệp HTML của chúng tôi, chúng tôi đã tạo một đoạn văn bản bằng thẻ
. Thẻ
này có tên lớp là aboutBox , mà chúng tôi sử dụng trong tệp CSS của mình để tạo kiểu cho đoạn văn bản.
Trong tệp CSS của chúng tôi, chúng tôi đã xác định quy tắc kiểu áp dụng cho bất kỳ phần tử nào có tên lớp aboutBox . Quy tắc kiểu này đặt chiều cao của phần tử thành 200px, chiều rộng của phần tử là 200px và đặt màu nền của phần tử thành màu xám nhạt.
Nếu chúng ta muốn phần tử của mình rộng 100px, chúng ta có thể thay đổi thuộc tính width bằng 100px. Hoặc nếu chúng tôi muốn phần tử của mình cao 300px, chúng tôi có thể thay đổi thuộc tính height bằng 300px.
Thuộc tính độ dài tối thiểu và tối đa của CSS
Chiều rộng và chiều cao là các giá trị cố định. Điều này có nghĩa là chiều rộng và chiều cao bạn chỉ định sẽ giữ nguyên và không thay đổi nếu bạn thay đổi kích thước cửa sổ hoặc xem trang web trên một thiết bị khác (trừ khi bạn sử dụng giá trị chiều cao tương đối, chẳng hạn như tỷ lệ phần trăm của kích thước gốc yếu tố).
Điều quan trọng cần hiểu là vì nếu bạn muốn thiết kế trải nghiệm có thể truy cập được, thì việc đặt chiều cao và chiều rộng cụ thể cho các phần tử có thể không thực tế. Ví dụ:nếu bạn chỉ định chiều rộng của hình ảnh là 500px, điều đó có thể khiến hình ảnh hiển thị không chính xác nếu người dùng xem trang web trên thiết bị di động có kích thước màn hình có thể nhỏ hơn.
Đó là nơi xuất hiện các giá trị độ dài tối thiểu và tối đa.
Để làm cho một phần tử thích ứng với các kích thước màn hình và chế độ xem khác nhau, bạn có thể sử dụng các thuộc tính chiều rộng tối thiểu, chiều rộng tối đa, chiều cao tối thiểu và chiều cao tối đa. Khi bạn chỉ định các thuộc tính này, các giá trị được chỉ định cho chiều rộng và chiều cao sẽ bị ghi đè.
Thuộc tính min-height xác định chiều cao tối thiểu của một thuộc tính. Nếu chiều cao tối thiểu được chỉ định, chiều cao của phần tử không bao giờ được thấp hơn giá trị của chiều cao tối thiểu. Thuộc tính min-width xác định chiều rộng tối thiểu của một thuộc tính và hoạt động theo cách tương tự.
Tương tự, nếu bạn muốn xác định chiều cao hoặc chiều rộng tối đa của thuộc tính, bạn có thể sử dụng chiều cao tối đa và chiều rộng tối đa tương ứng.
Hãy quay lại ví dụ về quán cà phê của chúng ta ở phần trước. Giả sử chúng ta muốn chiều rộng của hộp thay đổi tùy thuộc vào kích thước màn hình của người dùng. Chiều rộng tối đa của hộp phải là 500px và hộp của chúng ta không bao giờ được hẹp hơn 100px. Chúng tôi có thể hoàn thành mục tiêu này bằng cách sử dụng mã sau:
<html>
<p class="aboutBox">The Pickled Apple, based in Springfield, Illinois, has been proudly serving high-quality teas, specialty coffees, and delicious cakes since 2004.</p>
<style>
.aboutBox {
max-width: 500px;
min-width: 100px;
background-color: lightgray;
}
nút trong trình chỉnh sửa mã ở trên để xem đầu ra của mã HTML / CSS của chúng tôi.
Hãy chia nhỏ mã của chúng ta và thảo luận về cách nó hoạt động. Trong tệp HTML của chúng tôi, chúng tôi đã chỉ định một đoạn văn bản giữa các thẻ
chứa văn bản giống như ví dụ đầu tiên của chúng tôi. Tên lớp được liên kết với đoạn văn bản này là aboutBox .
Trong tệp CSS của chúng tôi, chúng tôi đã chỉ định ba thuộc tính được liên kết với aboutBox lớp học.
Thuộc tính max-width được đặt thành 500px, có nghĩa là chiều rộng tối đa của hộp là 500px. Thuộc tính min-width được đặt thành 100px, có nghĩa là hộp sẽ không bao giờ hẹp hơn 100px, bất kể người dùng đang xem trang web trên thiết bị nào. Thuộc tính background-color được đặt thành lightgray, đặt màu nền của hộp của chúng ta thành màu xám nhạt.
Kích thước của ô này sẽ thay đổi tùy thuộc vào kích thước của trình duyệt. Vì vậy, nếu bạn làm cho cửa sổ trình duyệt nhỏ hơn, kích thước của hộp sẽ thay đổi tương ứng. Tuy nhiên, bất kể cửa sổ trình duyệt xuất hiện lớn đến mức nào, chiều rộng của thẻ
sẽ không bao giờ vượt quá 500px.
Kết luận
Thuộc tính chiều cao và chiều rộng CSS cho phép bạn xác định chiều cao và chiều rộng của một phần tử trên trang web.
Tuy nhiên, các thuộc tính này đặt một giá trị cố định cho chiều cao và chiều rộng của một phần tử. Nếu bạn muốn kích thước của hộp thay đổi tùy thuộc vào kích thước của cửa sổ trình duyệt, bạn có thể sử dụng các thuộc tính min-height, min-width, max-height và max-width.
Hướng dẫn này đã thảo luận, có tham chiếu đến các ví dụ, khái niệm cơ bản về chiều cao và chiều rộng trong CSS, cách sử dụng thuộc tính chiều cao và chiều rộng cũng như cách sử dụng thuộc tính chiều cao và chiều rộng tối đa và tối thiểu tương ứng để đặt kích thước của một phần tử trên web trang. Bây giờ, bạn đã sẵn sàng để bắt đầu sử dụng các thuộc tính chiều cao và chiều rộng như một chuyên gia!