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

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 dưới đây Taimienphi.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 soá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.

thuoc tinh tuy chinh kich thuoc trong css hoc css

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

Mục Lục bài viết:
1. Thuộc tính tùy chỉnh kích thước trong CSS
   1.1. Thuộc tính width và height trong CSS
1.2. Thuộc tính max-height
1.3. Thuộc tính min-height
1.4. Thuộc tính max-width
1.5. Thuộc tính min-width

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 width, height, max-width và max-height, ... trong CSS để kiểm soát kích thước của phần tử.

1.1. Thuộc tính width và height trong CSS

Thuộc tính width height 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 padding, đường viền (border) và lề (margin).

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 auto (keyword auto).

Lưu ý: Thuộc tính width và height không lấy giá trị âm.

Ví dụ:

thuoc tinh tuy chinh kich thuoc trong css

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

thuoc tinh tuy chinh kich thuoc trong css 2

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 padding, đường viền (border) và lề (margin).

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

Ví dụ:

thuoc tinh tuy chinh kich thuoc trong css 3

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

thuoc tinh tuy chinh kich thuoc trong css 4

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 padding, đường viền (border) và lề (margin).

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

Ví dụ:

thuoc tinh tuy chinh kich thuoc trong css 5

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

thuoc tinh tuy chinh kich thuoc trong css 6

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 padding, đường viền (border) và lề (margin).

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

Ví dụ:

thuoc tinh tuy chinh kich thuoc trong css 7

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

thuoc tinh tuy chinh kich thuoc trong css 8

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 min-width

Sử dụng thuộc tính min-width để 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 padding, đường viền (border) và lề (margin).

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

Ví dụ:

thuoc tinh tuy chinh kich thuoc trong css 9

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

thuoc tinh tuy chinh kich thuoc trong css 10

https://thuthuat.taimienphi.vn/thuoc-tinh-tuy-chinh-kich-thuoc-trong-css-50607n.aspx
Bài học trên đây Taimienphi.vn vừa giới thiệu cho bạn các thuộc tính tùy chỉnh kích thước trong CSS. Trong bài học tiếp theo Taimienphi.vn sẽ giới thiệu tiếp cho bạn về Scrollbar trong CSS nhé.

Tác giả: Hoàng Bách     (4.0★- 3 đánh giá)  ĐG của bạn?

  

Bài viết liên quan

Thuộc tính định dạng danh sách (list) trong CSS
Thuộc tính padding trong CSS
Thuộc tính border trong CSS, cú pháp và ví dụ minh họa
Tìm hiểu Link trong CSS, cú pháp và ví dụ
Thuộc tính background trong CSS
Từ khoá liên quan:

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

, CSS, học CSS,

SOFT LIÊN QUAN
  • Rapid CSS

    Chỉnh sửa mã nguồn CSS

    Rapid CSS là một trình soạn thảo nâng cao có thể giúp bạn dễ dàng tạo và sửa tập tin định dạng CSS với bất kỳ kích thước và độ phức tạp cao với rất nhiều chức năng trợ giúp như tự động hoàn thành, khảo sát mã và kiểm tra ...

Tin Mới

  • Tìm hiểu Link trong CSS, cú pháp và ví dụ

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về hình ảnh (image) trong CSS. Trong bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về link trong

  • Học thuộc tính cursor trong CSS, có ví dụ

    Trong các bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về thuộc tính padding trong CSS. Bài học tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính cursor trong

  • Thuộc tính border trong CSS, cú pháp và ví dụ minh họa

    Trong bài học CSS trước Taimienphi.vn đã giới thiệu cho bạn về các thuộc tính định dạng bảng trong CSS. Trong bài viết tiếp theo dưới đây Taimienphi.vn sẽ giới thiệu tiếp cho bạn về thuộc tính border trong

  • Code Genshin Impact mới nhất

    Sau bao nhiêu ngày chờ đợi, cuối cùng siêu phẩm MMORPG 3D Genshin Impact đã xuất hiện trên Google Play và App Store, cho phép người dùng tải và cài đặt trên điện thoại ngay từ bây giờ. Bài viết này sẽ hướng dẫn bạn cách nhận và nhập Code Genshin Impact đơn giản nhất.


 Mùa hè tới rồi muốn so sánh giá tìm điều hòa giá rẻ nhất thị trường hãy dùng TopGia để so sanh gia có nhiều mẫu dieu hoa để so sanh sanh, xem dieu hoagiá rẻ để so sánh giá