[CSS] Thuộc tính chiều cao (height) và chiều rộng (width) trong CSS – Technology Diver

Posted on by adminChuyên mục:Kiến thức Internet

Thuộc tính chiều cao (height) và chiều rộng (width) trong CSS | Trong bài viết này chúng ta sẽ cùng tìm hiểu về giá trị cơ bản dùng để quy định thuộc tính về chiều cao và chiều rộng của một phần tử HTML. Hai giá trị cơ bản này thường được dùng nhiều khi bạn thiết kế CSS Layout, qua đó bạn cần thiết lập các tinh chỉnh về cách hiển thị theo kích thước phần tử mong muốn.

thuộc tính chiều cao chiều rộng trong css

Các thuộc tính đầy đủ của chiều cao (height) và chiều rộng (width) trong CSS bao gồm:

  • height: thiết lập chiều cao của một phần tử.
  • max-height: thiết lập chiều cao tối đa của một phần tử.
  • min-height: thiết lập chiều cao tối thiểu của một phần tử.
  • width: thiết lập chiều rộng của phần tử.
  • max-width: thiết lập chiều rộng tối đa của một phần tử.
  • min-width: thiết lập chiều rộng tối thiểu của một phần tử.

Xin lưu ý thêm là bạn chỉ có thể thiết lập kích thước với các phần tử Block, Table và các đối tượng (hình ảnh, video, flash,…) chứ không thể thiết lập cho các phần tử Inline.

1. Thuộc tính ‘ height ’ và ‘ width ’ trong CSS

1.1 Thuộc tính ‘ height ’

Thuộc tính ‘height‘ trong CSS sẽ quy định giá trị về chiều cao của phần tử. Các đơn vị đo lường chấp nhận sẽ gồm: pixel (px), centimet (cm), point (pt), phần trăm (%),..

Cú pháp thuộc tính ‘height’

height: 200px;
height: 50% ;
height: auto;
height: inherit;

1.2 Thuộc tính ‘ width ’

Thuộc tính ‘width‘ trong CSS hẳn nhiên sẽ quy định giá trị về chiều rộng của phần tử HTML. Các đơn vị đo lường chấp nhận sẽ gồm: pixel (px), centimet (cm), point (pt), phần trăm (%),..

Cú pháp thuộc tính ‘height’

width: 150px;
width: 30% ;
width: auto;
width: inherit;

1.3 Ví dụ sử dụng ‘ height ’ và ‘ width ’

+ Ví dụ 1
Với ví dụ 1, mình quy định chiều cao của thẻ div là 200 px và chiều rộng là 500 px. Cho cái background màu lên dễ nhìn.

2. Chiều cao và chiều rộng tối đa / tối thiểu

Đối với các thuộc tính dạng min-*, max-* thì nghĩa là nó sẽ căn độ dài của phần tử dựa vào các nội dung bên trong nhưng sẽ có kích thước tối thiểu/tối đa được phép sử dụng. Ví dụ bạn có phần #content, bên trong #content bạn có phần #post và thiết lập chiều rộng cho #post là 500px. Thì nếu bạn đặt thuộc tính max-width cho #content là 400px thì cái thằng #post nó cũng chỉ giãn được tối đa là 400px chứ không thể hơn.

Nhìn chung thì nội dung bài viết về chiều cao và chiều rộng trong CSS dùng để quy định thuộc tính phần tử HTML khá là cơ bản và đơn giản. Bạn chỉ cần thực hành vài dòng code là đã có thể làm quen ngay rồi. Chúc các bạn thành công.

Nguồn: https://final-blade.com/

admin