Chủ nhật, ngày 11 tháng 12 năm 2016

CSS3 – Đã đến lúc sử dụng hàm calc()

Ngày đăng: 28/5/2012, 9:44:6PM | Lượt xem: 1,333
Hot!

Nếu như bạn thường xuyên phải gặp khó khăn trong việc canh chỉnh kích thước của các thành phần HTML, thì nay vấn đề này có thể được giải quyết một cách đơn giản trong CSS3 nhờ vào hàm calc().

icon_calculatorNếu như bạn thường xuyên phải gặp khó khăn trong việc canh chỉnh kích thước của các thành phần HTML, thì nay vấn đề này có thể được giải quyết một cách đơn giản trong CSS3 nhờ vào hàm calc().

Trước đây, calc() chỉ mới được hỗ trợ trên IE9 và FF4 trở đi, nhưng hiện tại với sự hỗ trợ từ Chrome 19, tính năng này sẽ bắt đầu thực sự được phổ biến trong các ứng dụng web về sau.

Hàm calc() ra đời nhằm cung cấp khả năng tính toán cho CSS, khiến nó linh động và đơn giản hóa công việc cho các designer. Không chỉ đơn thuần áp dụng cho việc tính toán kích thước, việc nhiều tính năng mới của CSS3 đòi hỏi sự phức tạp và chính xác của các con số.
Bạn có thể sử dụng các phép tính đơn giản (+, -, *, /) và có thể trộn lẫn các đơn vị khác nhau như %, rem, em, px,... Ví dụ:

#div1 {
width: calc(100% – 300px);
width: -webkit-calc(100% – 300px);
width: -moz-calc(100% – 300px);
}

Tất nhiên bạn cũng có thể sử dụng hàm này cho bất kì thuộc tính nào sử dụng giá trị là các con số, ví dụ như các thuộc tính khác để xác định vị trí (left, top, margin,…)

Để dự phòng, bạn có thể sử dụng thêm -o-calc() để đợi sẵn tính năng này trên Opera.

Tham khảo thêm tại http://www.caniuse.com/calccalc() specification.

YinYangIt’s Blog

http://yinyangit.wordpress.com
 Chia sẻ qua: 
Hot!
Ý kiến bạn đọc

These items will be permanently deleted and cannot be recovered. Are you sure?

Gallery

image

Maecenas viverra rutrum pulvinar

Maecenas viverra rutrum pulvinar! Aenean vehicula nulla sit amet metus aliquam et malesuada risus aliquet. Vestibulum rhoncus, dolor sit amet venenatis porta, metus purus sagittis nisl, sodales volutpat elit lorem…

Read more

Text Links

Thiết kế logo chuyên nghiệp Insky
DAFABET
W88 w88b.com/dang-ky-tai-khoan-w88
W88
Copyright © 2011 - 2012 vietshare.vn by phamkhuong102@gmail.com doanhkisi2315@gmail.com. All rights reserved.