Chiều cao tối đa trong css

bài 10. Chiều cao/Chiều rộng CSS

Nội dung

• Cài đặt chiều cao (Chieu cao) và chiều rộng (Chiều rộng) trong CSS
  • • Ví dụ 1
    • Ví dụ 2
  • Max-width setting setting
    • Ví dụ 3
  • Ví dụ minh họa
  • Tất cả các thuộc tính về chiều cao và chiều rộng trong CSS

Hai thuộc tính chiều cao và chiều rộng được sử dụng để đặt chiều cao và chiều rộng tương ứng cho một phần tử trong CSS

Thuộc tính chiều cao và chiều rộng có thể được thiết lập giá trị mặc định là tự động. Ngoài ra giá trị của 2 thuộc tính này sử dụng các đơn vị đo có trong CSS bao gồm pixel (px), centimet (cm), điểm (pt), phần trăm (%)…

Ví dụ minh họa dưới đây cho một phần tử có chiều cao 200 pixel và chiều rộng là 50%

Ví dụ 1

div {
height: 200px;
width: 50%;
background-color: powderblue;
}

Ví dụ dưới đây minh họa cho một phần tử có chiều cao 100 pixel và chiều rộng 500 pixel

Ví dụ 2

div {
height: 100px;
width: 500px;
background-color: powderblue;
}

Chú thích. Thuộc tính height và width không bao gồm phần đệm, đường viền(đường viền), hoặc lề(lề) của một phần tử mà chính bằng phần chiều cao/chiều rộng nằm phía trong phần đệm, đường viền và lề

Max-width setting setting

Thuộc tính chiều rộng tối đa được sử dụng để thiết lập chiều rộng tối đa cho một phần tử

chiều rộng tối đa có thể nhận các giá trị chiều dài bao gồm pixel (px), centimet (cm), điểm (pt), phần trăm (%). or value none (ở đây là giá trị mặc định)

Sẽ có một vấn đề đặt ra đó là khi cửa sổ duyệt số của chúng ta có chiều rộng nhỏ hơn chiều rộng của một phần tử (500px) thì phần tử đó hiển thị như thế nào? . Sau đó trình duyệt sẽ thêm thanh cuộn ngang vào trang

Thay vì công việc phải sử dụng chiều rộng tối đa, trong trường hợp này, sẽ xử lý các trình duyệt được duyệt khi có cửa sổ nhỏ

Mạch nhỏ. Chúng ta cho cửa sổ duyệt xuống nhỏ hơn 500px, để thấy sự khác biệt giữa hai thẻ

Trong bài học CSS trước Taimienphi. vn đã giới thiệu cho bạn thuộc tính Outline trong CSS, trong bài học tiếp theo Taimienphi dưới đây. vn sẽ giới thiệu tiếp cho bạn các thuộc tính tùy chỉnh kích thước trong CSS nhé

Các thuộc tính tùy chỉnh kích thước trong CSS được sử dụng để kiểm tra giám sát chiều cao và chiều rộng của phần tử. Tham khảo tiếp bài học CSS dưới đây của Taimienphi. vn để tìm hiểu chi tiết các thuộc tính tùy chỉnh kích thước trong CSS

1. Thuộc tính tùy chỉnh kích thước trong CSS

Bằng cách sử dụng các thuộc tính chiều rộng, chiều cao, chiều rộng tối đa và chiều cao tối đa,. trong CSS để kiểm tra kích thước của phần tử

1. 1. Thuộc tính chiều rộng và chiều cao trong CSS

Thuộc tính chiều rộng và chiều cao xác định chiều rộng và chiều cao vùng nội dung của phần tử. Phần chiều rộng và chiều cao này không bao gồm phần đệm, đường viền (đường viền) và dấu lề (lề)

Các thuộc tính này có thể lấy giá trị theo độ dài (px, pt, em,. ), Tỷ lệ phần trăm (%) hoặc từ khóa tự động (keyword auto)

Lưu ý. Thuộc tính chiều rộng và chiều cao không lấy giá trị âm

Ví dụ

Kết quả đầu ra có dạng như dưới đây

1. 2. Thuộc tính max-height

Thuộc tính max-height cho phép chỉ định chiều cao tối đa cho nội dung trong khung. Chiều cao tối đa này không bao gồm phần đệm, đường viền (đường viền) và lề (lề)

Phần áp dụng thuộc tính max-height không bao giờ được cao hơn giá trị được xác định duy nhất, ngay cả khi giá trị thuộc tính chiều cao được thiết lập lớn hơn. Ví dụ, nếu giá trị thuộc tính chiều cao được thiết lập là 200px và chiều cao tối đa được thiết lập là 100px, thì chiều cao thực tế của phần tử là 100px

Ví dụ

Kết quả đầu ra có dạng như dưới đây

Thuộc tính max-height thường được sử dụng cùng thuộc tính min-height để tính chiều cao trung bình của phần tử liên quan

1. 3. Thuộc tính min-height

Sử dụng thuộc tính min-height để chỉ định chiều cao tối thiểu cho nội dung trong khung. Chiều cao tối thiểu này không bao gồm phần đệm, đường viền (đường viền) và lề (lề)

Phần tử áp dụng chiều cao tối thiểu không bao giờ nhỏ hơn chiều cao tối thiểu chỉ được định nghĩa. Không giới hạn nếu chiều cao được thiết lập là 200px và chiều cao tối thiểu được thiết lập là 300px, chiều cao thực tế của phần tử là 300px

Ví dụ

Kết quả đầu ra có dạng như dưới đây

Thuộc tính min-height thường được sử dụng cùng thuộc tính max-height để tính chiều cao trung bình của phần tử liên quan

1. 4. Thuộc tính max-width

Thuộc tính max-width cho phép chỉ định chiều rộng tối đa cho nội dung trong khung. Chiều rộng tối đa này không bao gồm phần đệm, đường viền (đường viền) và lề (lề)

Phần ứng dụng thuộc tính max-width của phần tử không bao giờ được mở rộng hơn giá trị được chỉ định, ngay cả khi giá trị thuộc tính chiều rộng được thiết lập lớn hơn. Ví dụ, nếu giá trị thuộc tính chiều rộng được thiết lập là 300px và chiều rộng tối đa được thiết lập là 200px, thì chiều cao thực tế của phần tử là 200px

Ví dụ

Kết quả đầu ra có dạng như dưới đây

Thuộc tính max-width thường được sử dụng cùng thuộc tính min-width để tính chiều rộng trung bình của phần tử liên quan

1. 5. Thuộc tính chiều rộng tối thiểu

Sử dụng thuộc tính độ rộng tối thiểu để chỉ định chiều rộng tối thiểu cho nội dung trong khung. Chiều rộng tối thiểu này không bao gồm phần đệm, đường viền (đường viền) và lề (lề)

Phần tử áp dụng chiều rộng tối thiểu không bao giờ nhỏ hơn chiều cao tối thiểu được chỉ định. Không giới hạn nếu chiều rộng được thiết lập là 300px và chiều rộng tối thiểu được thiết lập là 400px, chiều cao thực tế của phần tử là 400px