Như hình trên bạn thấy chiều rộng (width) và chiều cao (height) không bao gồm phần padding, border, margin.
1. Thiết lập chiều rộng và chiều cao
Thuộc tính width dùng để thiết lập chiều rộng cho phần nội dung của phần tử.
Thuộc tính height dùng để thiết lập chiều cao cho phần nội dung của phần tử.
+ Nếu bạn không thiết lập chiều rộng và chiều cao cho phần nội dung thì trình duyệt sẽ tính toán và tự thiết lập cho nó. (Nếu là phần tử khối thì nó sẽ có chiều rộng là 100%).
+ Giá trị của thuộc tính width có thể xác định theo đơn vị px hoặc % (phần trăm chiều rộng phần nội dung của phần tử chứa nó)
+ Giá trị của thuộc tính height có thể xác định theo đơn vị px.
Lưu ý: Thường thì người ta chỉ thiết lập chiều rộng với đơn vị % chẳng hạn như width: 100%; và thường không ai thiết lập chiều cao.
2. Thuộc tính max-width
Nếu ta thiết lập chiều rộng cho một phần tử quá dài mà trong khi phần tử chứa nó lại quá ngắn thì sẽ dẫn đến việc phần tử chứa nó tự động tạo một thanh cuộn nằm ngang mất thẩm mỹ
Từ đây, thuộc tính max-width được dùng để thiết lập chiều rộng cho phần tử kèm theo tính năng tự động thu hẹp chiều rộng nếu phần tử chứa nó quá ngắn.
Như hình trên bạn thấy thuộc tính width làm cho trình duyệt tạo một thanh cuộn ngang mất thẩm mỹ.
Như hình trên bạn thấy thuộc tính max-width tự động thu hẹp chiều rộng nếu phần tử chứa nó quá ngắn.
Lưu ý: Thuộc tính max-width sẽ ghi đè lên thuộc tính width.
3. Thuộc tính max-height
Như hình trên bạn thấy khi dùng thuộc tính height thì chiều cao của phần tử sẽ không thay đổi.
Như hình trên bạn thấy thuộc tính max-height dùng để thiết lập chiều cao cho phần tử kèm theo tính năng tự động rút thấp lại hoặc kéo cao ra phụ thuộc vào nội dung của phần tử (nhưng đương nhiên chiều cao của phần tử sẽ không vượt quá giá trị được thiết lập).
Như hình trên bạn thấy khi nội dung của phần tử quá nhiều vượt quá giá trị của thuộc tính max-height thì nội dung sẽ bị tràn ra ngoài.
4. Thuộc tính min-height
Như hình trên bạn thấy thuộc tính min-height dùng để thiết lập chiều cao tối thiếu cho một phần tử. Nếu nội dung của phần tử đó quá cao thì chiều cao của phần tử sẽ tự động được tăng lên.
5. Thuộc tính min-width
Như hình trên bạn thấy
+ Phần tử được thiết lập bởi thuộc tính width sẽ có chiều rộng cố định
+ Nếu chiều rộng màn hình hiển thị > giá trị của thuộc tính min-width thì chiều rộng sẽ là chiều rộng màn hình hiển thị.
+ Nếu chiều rộng màn hình hiển thị < giá trị của thuộc tính min- width (hoặc giá trị của thuộc tính width) thì sẽ xuất hiện thêm thanh cuộn nằm ngang và chiều rộng lúc đó chính là giá trị của thuộc tính min-width (hoặc giá trị của thuộc tính width)
6. Thuộc tính overflow
Như các ví dụ trên bạn thấy nếu phần nội dung của phần tử lớn hơn giá trị chiều rộng hoặc chiều cao mà ta thiết lập, thì nội dung đó sẽ bị tràn ra bên ngoài.
Để khắc phục tình trạng này, ta có thể sử dụng thuộc tính overflow với giá trị auto (tự tạo thanh cuộn cho phần tử đó) hoặc giá trị hidden (ẩn phần bị tràn)
Lưu ý: Thuộc tính overflow này có nhiều giá trị và tôi sẽ viết kỹ trong series này nhưng ở phần sau.
7. Lời cuối bài
Đến đây chắc các bạn đã biết thiết lập chiều rộng và chiều cao cho phần nội dung của phần tử theo ý của mình. Ở bài sau tôi sẽ viết về Mô hình hộp (Box Model) trong CSS
The post [CSS bài 11] Cách thiết lập chiều rộng và chiều cao cho phần tử appeared first on Học online.
from WordPress http://ift.tt/2wxm8aL
via IFTTT
Không có nhận xét nào:
Đăng nhận xét