CSS 03 – Các thành phần trong CSS (P.1)

0
95

1. Thuộc tính kích thước

Thuộc tính width:  xác định độ rộng của một vùng , không bao gồm border, padding và margin. Giá trị của thuộc tính này thường sử dụng là px.

Thuộc tính height: xác định chiều cao  của một vùng, cũng không bao gồm border, margin và padding. Giá trị của thuộc tính chiều cao thường là px.

Ví dụ :

See the Pen vp_css_size_examp by Thien (@anhtomks) on CodePen.0

2. Thuộc tính float và clear.

Thuộc tính float dùng để xác định vị trí của một thành phần nằm  về bên trái hoặc bên phải so với thành phần bao ngoài của nó và tạo ra khoảng không gian trống ở bên còn lại (nếu có). Thuộc tính có 3 giá trị : left(nằm về bên trái) , right (nằm về bên phải), none(mặc định).

Khi sử dụng thuộc tính float cho một phần tử, nội dung bên dưới sẽ tự động tràn lên trên lấp đầy khoảng trống mà thuộc tính float tạo ra(nếu có). Khi áp dùng float thì thuộc tính giá trị display của phần tử sẽ chuyển đổi từ inline sang block và ngược lại.
Ví dụ:

See the Pen vp_css_size_examp by Thien (@anhtomks) on CodePen.0

Thuộc tính clear: Chính vì hiệu ứng tràn lên của thuộc tính float mà đôi khi nội dung tràn lên khiến cho giao diện website của chúng ta bị hỏng, và thuộc tính clear ra đời nhằm giải quyết vấn đề này. Thuộc tính clear giúp ngăn chặn sự tràn lên do thuộc tính float tạo ra, với 3 giá trị tương ứng.

Ví dụ:
Ở ví dụ trên, như bạn thấy đấy, tôi thêm một khối div nữa và nội dung tiếp tục bị tràn lên trên vì khoảng trống mà float của bức ảnh đầu tiên tạo ra vẫn còn đó, và giờ tôi sẽ sử dụng thuộc tính clear để khắc phục điều này.

See the Pen vp_css_clear_examp by Thien (@anhtomks) on CodePen.0

Như bạn thấy, tôi đã đặt thuộc tính clear với giá trị là both cho khối div thứ hai, và khối div thứ hai đã không còn bị tràn lên nữa.

 

Tác giả: Thiện Nguyễn

[Total: 1    Average: 1/5]

LEAVE A REPLY

Please enter your comment!
Please enter your name here