07/09/2018, 14:40

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

Thiết lập thuộc tính height và awidth Thuộc tính height và awidth được sử dụng để xác định chiều cao và chiều rộng của phần tử. Thuộc tính height và awidth có thể để auto (mặc đinh, nghĩa là trình duyệt sẽ tự điều chỉnh chiều cao và chiều rộng). Hoặc xác định ...

Thiết lập thuộc tính height và awidth

Thuộc tính height và awidth được sử dụng để xác định chiều cao và chiều rộng của phần tử. Thuộc tính height và awidth có thể để auto (mặc đinh, nghĩa là trình duyệt sẽ tự điều chỉnh chiều cao và chiều rộng). Hoặc xác định theo giá trị đo lường như px, cm…, hoặc theo tỷ lệ % của khối chứa phần tử đó.

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

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

Lưu ý: thuộc tính height hoặc awidth không bao gồm padding, đường viền border hay margin. Chúng ta thiết lập chiều cao / chiều rộng phần bên trong padding, đường viền và margin của phần tử.

Thiết lập thuộc tính max-awidth

Thuộc tính max-awidth được sử dụng để xác định độ rộng tối đa của phần tử. Thuộc tính này có thể mang giá trị độ dài như px, cm, hoặc theo tỷ lệ % của khối chứa phần tử đó. Bạn cũng có thể để mặc định, nghĩa là không thiết lập giá trị max-awidth.

Vấn đề với <div> ở trên xảy ra khi cửa sổ trình duyệt nhỏ hơn chiều rộng của phần tử (500px). Vì vâyh trình duyệt sẽ thêm thanh cuộn ngang vào trang. Thay vào đó sử dụng thuộc tính max-awidth, trong trường hợp này, sẽ cải thiện việc xử lý các trình duyệt của các cửa sổ nhỏ.

Mẹo: kéo cửa sổ trình duyệt xuống nhỏ hơn 500px, để thấy sự khác biệt giữa hai thẻ div.

Lưu ý: Giá trị của thuộc tính max-awidth sẽ được ưu tiên hơn thuộc tính awidth.

Ví dụ sau minh họa một phần tử <div> với chiều cao 100 pixel và chiều rộng tối đa 500 pixel:

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

Tất cả thuộc tính chiều cao và chiều rộng trong CSS

Thuộc tính Mô tả
height thiêt lập chiều cao của phần tử
max-height thiêt lập chiều cao tối đa của phần tử
max-awidth thiết lập chiều rộng tối đa của phần tử
min-height thiết lập chiều cao tối thiểu của phần tử
min-awidth thiết lập chiều rộng tối thiểu của phần tử
awidth thiết lập chiều rộng của phần tử
Tham khảo thêm các khóa học lập trình web từ Front-end đến Back-end do trực tiếp giảng viên quốc tế trường FPT Arena giảng dạy giúp bạn thành thạo kỹ năng lập trình web từ CƠ BẢN – NÂNG CAO với giá chỉ từ 290,000đ:
  • Học lập trình front-end cơ bản với bootstrap 4/html5/css3
  • Học lập trình front-end nâng cao qua Project thực tế
  • Học thiết kế web với Photoshop, CSS theo kiểu SASS
  • Học cách sử dụng Git_hub cho lập trình viên
  • Học lập trình Back-end PHP theo mô hình MVC cơ bản
  • Học lập trình Back-end PHP theo mô hình MVC nâng cao
  • Học lập trình Cơ sở dữ liệu với AngularJS
  • Học lập trình theme wordpress. Làm ra mọi website hoàn chỉnh với wordpress
  • Combo lập trình front-end từ cơ bản – nâng cao
  • Combo lập trình back-end từ cơ bản đến nâng cao
  • Combo lập trình web với word press từ A-Z
0