Anh em đã biết những thuộc tính CSS này chưa hè?
Sau khi nghĩ dưỡng 2/9 hơn nữa tháng nằm qua 3 cái bệnh viện thì giờ mình quay lại đây. Hy vọng sắp tới sẽ chuyên cần hơn trong việc chém gió này keke.
Thôi vào việc luôn get go 😁
margin-inline:
Nó sẽ tương ứng với việc các bạn viết margin-left và margin-right
Ví dụ luôn cho dễ đi vào lòng người nè: Bình thường mình muốn cho 1 block ra giữa mình có thể dùng margin-left:auto
và margin-right: auto
còn sau khi các bạn đọc đến đây rồi thì => margin-inline: auto
thấy hịn hơn chưa 😁
margin-block:
Tương tự nhưng khác chiều thôi nó sẽ tương ứng với top và bottom
Ví dụ luôn: Thay vì các bạn viết margin-top: 20px
và margin-right: 20px
=> margin-block: 20px
cũng hịn hịn hơn xíu gòi đó 😁
Thì có margin thì cũng sẽ có padding thôi chứ chạy đi đâu nữa 😝 => padding-inline & padding-block
aspect-ratio:
là 1 thuộc tính giúp chúng ta hiển thị hình ảnh theo tỉ lệ (1:1, 16:9, 4:3).
<img src="link-img" alt="" />
.aspect {
aspect-ratio: 1/1;
// aspect-ratio: 16/9;
// aspect-ratio: 4/3;
}
.aspect img {
width: 100%;
height: 100%;
object-fix: cover;
}
Đa số trình duyệt đều hỗ trợ rồi tầm 80% trừ những trình duyệt cũ quá hoi (< safafi 14.8). Bạn có thể check trên trang caniuse.com nghen.
inset
thuộc tính này thường giúp mình viết thay cho trường hợp top: 0, right: 0, bottom: 0, left: 0 để phủ 1 lớp absolute full thằng cha relative luôn hoặc top: 0, left: 0, width: 100%, height: 100% cũng có tác dụng tương tự thì mình có thể viết gọn thành inset: 0
nó là viết tắt của inset: top right bottom left
tương tự cách viết tắt của padding và margin thôi hehe
Hy vọng anh em đọc xong bài này có thể giúp anh em biết được vài thuộc tính mới trong css, áp dụng luôn vào dự án đang làm của mình cho quen tay nhé. Mình sẽ update bài này nếu có thêm cái mới nghen 🥰