Các Thuộc Tính height, width Và max-width Trong CSS

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

Các thuộc tính height và width trong CSS được sử dụng để thiết lập chiều cao và chiều rộng của một phần tử HTML.

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

Các thuộc tính height và width trong CSS

Các thuộc tính width và height được sử dụng để thiết lập chiều cao và chiều rộng của một phần tử trong HTML.

Các thuộc tính width và height không bao gồm padding, border hay margin. Nó chỉ giúp thiết lập chiều cao/chiều rộng của phần bên trong padding, border và margin của một phần tử.

Các giá trị của các thuộc tính height và width trong CSS

Các thuộc tính height và width có thể có các giá trị sau đây:

  • auto – Đây là giá trị mặc định. Trình duyệt sẽ tính toán chiều cao và chiều rộng
  • length – Xác định chiều cao/rộng dưới dạng các đơn vị px, cm,…
  • % – Xác định chiều cao/chiều rộng ở dạng phần trăm của phần tử cha
  • initial – Thiết lập chiều cao/chiều rộng về giá trị mặc định của nó
  • inherit – Chiều cao/chiều rộng sẽ được kế thừa từ các giá trị của phần tử cha

Các ví dụ về các thuộc tính height và width trong CSS

Ví dụ 1 :











Set the height and width of an element



This div element has a height of 200px and a width of 50%.

Kết quả :
image 210
Ví dụ 2 :











Set the height and width of an element



This div element has a height of 100px and a width of 500px.

Kết quả :
image 211

Chú ý: Nhớ rằng các thuộc tính height và width thì sẽ không bao gồm padding, borders hay margins! Chúng thiết lập chiều cao/chiều rộng cho phần nội dung bên trong padding, border và margin của phần tử!

Thiết lập giá trị cho thuộc tính max-width

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

Thuộc tính max-width có thể có các giá trị biểu diễn ở dạng đơn vị dài (length) như px, cm,… hoặc ở dạng phần trăm (%) của phần tử cha hoặc được thiết lập về none (đây là mặc định. Có nghĩa là không có chiều rộng tối đa).

Có một vấn đề với phần tử

ở trên đó là khi cửa sổ trình duyệt nhỏ hơn chiều rộng của phần tử (500px) thì trình duyệt sẽ thêm một thanh cuộn ngang vào trang.

Khi các bạn sử dụng max-width để thay thế thì các bạn sẽ cải thiện được các xử lí của trình duyệt ở các cửa sổ nhỏ.

Chú ý: Kéo các cửa sổ trình duyệt về chiều rộng nhỏ hơn 500px để có thể thấy được sự khác nhau giữa hai phần tử

nhé.

Chú ý: Nếu như các bạn vì một lí do nào đó mà sử dụng cả thuộc tính width và max-width trên cùng một phần tử và giá trị của thuộc tính width lớn hơn so với max-width thì thuộc tính max-width sẽ được sử dụng (và thuộc tính width sẽ được bỏ qua).

Ví dụ :











Set the max-width of an element



This div element has a height of 100px and a max-width of 500px.


Resize the browser window to see the effect .

Kết quả :
image 212

Các bạn nhớ làm cả hai ví dụ với width và max-width rồi thay đổi kích thước trình duyệt nhỏ hơn 500px chiều rộng để thấy sự khác nhau nhé !!!

Qua bài viết này thì những bạn đã hiểu và biết cách sử dụng những thuộc tính width, height và max-width rồi đúng không nào. Hẹn gặp lại những bạn trong những bài viết tiếp theo nhé ! ! !
Link link đến kênh Youtube hướng dẫn : https://www.youtube.com/channel/UCqiFQ9ECF7gMIfLPTHbrf2Q
Link link đến bài viết CSS : https://final-blade.com/front-end/css/

admin