07/09/2018, 14:42

Bố cục trong CSS – width và max-width

Cách sử dụng awidth, max-awidth và margin: auto; Như bạn đã biết, một phần tử block-level luôn chiếm toàn bộ chiều rộng cho phép (trải từ trái sang phải). Thiết lập thuộc tính awidth cho phần tử block-level sẽ ngăn không cho phần tử trải toàn bộ chiều rộng. Phần ...

Cách sử dụng awidth, max-awidth và margin: auto;

Như bạn đã biết, một phần tử block-level  luôn chiếm toàn bộ chiều rộng cho phép (trải từ trái sang phải). Thiết lập thuộc tính awidth cho phần tử block-level sẽ ngăn không cho phần tử trải toàn bộ chiều rộng. Phần tử đó sẽ chiếm chiều rộng mà bạn thiết lập, khoảng trống còn lại sẽ được chia đều giữa hai lề.

Lưu ý: vấn đề với <div> ở trên xảy ra khi cửa sổ trình duyệt nhỏ hơn độ rộng của phần tử. Trình duyệt sau đó thêm một thanh cuộn ngang vào trang.

Thay vào đó sử dụng chiều rộng tối đa, 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ỏ. Điều này rất quan trọng khi tạo một trang web có thể sử dụng được trên các thiết bị nhỏ:

Mẹo: thay đổi kích thước cửa sổ trình duyệt xuống dưới 500px, để thấy sự khác biệt giữa hai div!

Đây là một ví dụ của hai div trên:

div.ex1 {
    awidth: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}

div.ex2 {
    max-awidth: 500px;
    margin: auto;
    border: 3px solid #73AD21;
}
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