CSS Height, Width

  • Thanh Vo

    Tác giả

    Thanh Vo

  • Ngày đăng

    3 thg 11, 2022

  • Số lượt xem

    569 lượt xem


CSS Height, Width dùng để xác định chiều dài và chiều rộng của element trong HTML.

CSS đặt height và width

Các thuộc tính heightwidth được sử dụng để đặt height và width của một element. Các thuộc tính height và width không bao gồm padding, border hoặc margin. Nó đặt height/width của khu vực bên trong padding, border và margin của element.

CSS height và width Values

Thuộc tính heightwidth có thể có các giá trị sau:

  • auto - margin được trình duyệt tự động tính
  • length - chỉ định chiều rộng margin bằng px, pt, cm, etc.
  • % - chỉ định margin tính bằng % chiều rộng của element hiện tại
  • inherit - chỉ định rằng margin phải được kế thừa từ element cha

Ví dụ

Element này có chiều cao 200px và chiều rộng 50%
div {    height: 200px;    width: 50%;    background-color: powderblue;  }

 

Lưu ý: Hãy nhớ rằng các thuộc tính heightwidth không bao gồm padding, border hoặc margin! Nó chỉ thiết lập height / width của khu vực bên trong padding, border và margin của element!

CSS max-width

Thuộc tính max-width được sử dụng để đặt chiều rộng tối đa của một element.

max-width có thể được chỉ định trong các giá trị chiều dài, như px, cm, v.v. hoặc theo phần trăm (%) của element chứa hoặc đặt thành none (đây là mặc định, có nghĩa là không có chiều rộng tối đa).

Sự cố với <div> ở trên xảy ra khi cửa sổ trình duyệt nhỏ hơn width của element (500px). Sau đó, trình duyệt sẽ thêm một thanh cuộn ngang vào trang.

Thay vào đó, sử dụng max-width, trong trường hợp này, sẽ cải thiện khả năng xử lý các cửa sổ nhỏ của trình duyệt.

Lưu ý: Nếu bạn vì một số lý do, hãy sử dụng cả thuộc tính width và thuộc tính max-width trên cùng một element và giá trị của thuộc tính width lớn hơn thuộc tính max-width; Thuộc tính max-width sẽ được sử dụng (và thuộc tính width sẽ bị bỏ qua).

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

Tổng số đánh giá: 0

Xếp hạng: 5 / 5 sao

Danh sách bài học về CSS

Liên Kết Chia Sẻ

Đây là liên kết chia sẻ bới cộng đồng người dùng, chúng tôi không chịu trách nhiệm gì về nội dung của các thông tin này. Nếu có liên kết nào không phù hợp xin hãy báo cho admin.