Một số thuộc tính hữu ích cơ bản trong CSS

Share on Facebook Share on Twitter

Xin chào tất cả các bạn, đã lâu mình không ra bài viết vì một số việc khá là bận. Hôm nay rảnh share cho mọi người một số thuộc tính cơ bản trong CSS.
Để xem đầy đủ các bạn có thể tham khảo ở hocwebchuan.com nhé!

Thuộc tính padding khi sử dụng sẽ thêm khoảng không gian bên trong thành phần, khoảng không gian này sẽ được cộng dồn thêm vào chiều rộng hoặc chiều cao của thành phần (tùy vào hướng sử dụng padding).+ Dạng cơ bản gồm 4 thuộc tính:- Padding-top: thêm khoảng không gian bên trong hướng trên thành phần.- Padding-right: thêm khoảng không gian bên trong hướng bên phải thành phần.- Padding-bottom: thêm khoảng không gian bên trong hướng dưới thành phần.- Padding-left: thêm khoảng không gian bên trong hướng bên trái thành phần.


Thuộc tính margin khi sử dụng sẽ thêm khoảng không gian bên ngoài thành phần, khoảng không gian này không cộng dồn thêm vào chiều rộng hoặc chiều cao của thành phần.+ Dạng cơ bản gồm 4 thuộc tính:- Margin-top: thêm khoảng không gian bên ngoài phía trên thành phần.- Margin-right: thêm khoảng không gian bên ngoài phía bên phải thành phần.- Margin-bottom: thêm khoảng không gian bên ngoài phía dưới thành phần.- Margin-left: thêm khoảng không gian bên ngoài phía bên trái thành phần.

Thuộc tính float: xác định sự trôi nổi của thành phần.

Nếu chỉ định nghĩa thuộc tính float đơn giản như vậy chắc chắn chúng ta sẽ không thể nào hiểu được thuộc tính này, chúng ta hãy xem trước các giá trị của float để xem thuộc tính float tác động lên thành phần như thế nào, rồi sau đó chúng ta sẽ rút ra định nghĩa về float, hãy kiên nhẫn từng bước:

+ Gồm 3 thuộc tính:

- Float: left

- Float: right

- Float: none

Thuộc tính clear: ngăn chặn thành phần A chiếm vùng không gian của thành phần B (với thành phần B là thành phần sử dụng float).

Thuộc tính clear có các giá trị sau:

+ Gồm 4 thuộc tính:

- Clear: left

- Clear: right

- Clear: both

- Clear: none

Thuộc tính display : Xác định sự hiển thị cho thành phần, chuyển đổi thành phần từ dạng dạng này sang dạng khác.

Thuộc tính display có rất nhiều dạng, trong phạm vi bài học chỉ đề cập đến các dạng thường dùng sau:
+ Gồm 3 thuộc tính:

- Display: none

- Display: block

- Display: inline

Thuộc tính position xác đinh vị trí tương đối và tuyệt đối cho thành phần, vị trí này phụ thuộc vào các giá trị khai báo của thành phần và thành phần bao ngoài nó.

Vị trí này có gốc được tính phía trên, bên phải, phía dưới và bên trái thành phần.

Các giá trị của thuộc tính position.

+ Gồm 4 thuộc tính:

- Postition: relative

- Postition: absolute

- Postition: fixed

- Postition: static