Một Số Thuộc Tính Điều Khiển Cho CSS

Hello anh em, sau bao ngày vắng bóng thì Huy Đẹp Trai trở lại đây, thì hôm nay cũng rảnh share 1 số phần khá bổ ích về CSS cho anh em mà mình đã xem tại hocwebchuan.com


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


22 nhận xét:

  1. A nghĩ là nên bổ sung thêm chi tiết bên cạnh như đối với padding và margin e ạ :3 Cả display thì mọi người còn hay dùng grid và inline-block nữa, table cũng có.

    Trả lờiXóa
  2. Ké cái button đi Huy đẹp trai :v

    Trả lờiXóa
  3. Khá hữu ích đấy, cái này nếu a nghĩ có mô tả từng thuộc tính luôn thì bài viết xuất sắc :)

    Trả lờiXóa
  4. Khung bình luận đẹp nhỉ :)

    Trả lờiXóa
  5. qua tương tác vs em nè :) bài viết hay lắm em

    Trả lờiXóa

- Không spam bừa bãi, thô tục
- Tích chọn "Thông báo cho tôi" để nhận phản hồi từ tác giả qua mail.