Đơn vị khung nhìn so với tỷ lệ phần trăm. Đơn vị vh, vw, vmin, vmax
Các đơn vị tương đối mới đã được thêm vào CSS3 như vh , vw , vmin , vmax . Các đơn vị này được tính tương ứng với kích thước của cửa sổ trình duyệt. Vì máy tính để bàn chiều rộng cửa sổ trình duyệt chiều rộng hơn khung nhìn (chiều rộng của thanh cuộn được thêm vào), vì vậy nếu bạn đặt chiều rộng của phần tử thành 100vw, nó sẽ vượt xa html.
Cơm. 1. Ảnh nền toàn màn hình có chiều rộng 100vw Hỗ trợ trình duyệt
I E: 9.0 ngoại trừ vmax, sử dụng vm thay vì vmin
Bờ rìa: 12.0 ngoại trừ vmax, sử dụng vm thay vì vmin
Firefox: 19.0
Trình duyệt Chrome: 26.0
Opera: 15.0
Cuộc đi săn: 6.1
Safari của iOS: 8.0
Android: 4.4
Trình duyệt Chrome dành cho Android: 55.0
1. Đơn vị vh và vw
Kỹ thuật thiết kế web đáp ứng dựa trên việc sử dụng các giá trị phần trăm. Nhưng sự quan tâm còn xa Quyết định tốt nhất cho từng trường hợp, vì chúng được tính toán tương ứng với kích thước của điểm gần nhất phần tử cha. Vì vậy, nếu bạn muốn sử dụng chiều cao và chiều rộng của cửa sổ trình duyệt, tốt hơn nên sử dụng đơn vị vh và vw. Ví dụ: nếu chiều cao cửa sổ trình duyệt là 900px thì 1vh sẽ là 9px. Tương tự, nếu chiều rộng cửa sổ trình duyệt là 1600px thì 1vw sẽ là 16px.
1.1. Hình nền toàn màn hình đáp ứng
Vì chiều rộng của phần tử được chỉ định bằng 100vw lớn hơn chiều rộng của khung nhìn, để tạo toàn màn hình hinh nên Tốt hơn nên sử dụng chiều rộng 100%, chiều rộng này sẽ bằng chiều rộng của phần tử html gốc.
Toàn màn hình-bg ( nền: url(image.jpg); vị trí nền: giữa; kích thước nền: bìa; chiều rộng: 100%; chiều cao: 100vh; ) 
Cơm. 2. Hình nền toàn màn hình đáp ứng
1.2. Hiệu ứng trượt toàn trang
Để tạo khối bằng toàn bộ chiều cao của cửa sổ trình duyệt, bạn cần đặt chiều cao: 100%; cho ba phần tử - html, body và trực tiếp cho chính khối đó:
Phần Html, nội dung ( chiều cao: 100%; ) ( chiều cao: 100%; )
Vì kích thước phần trăm được tính tương ứng với giá trị của các phần tử cha nên bạn cần đặt các giá trị phù hợp cho từng phần tử DOM. Đơn vị đo vh không yêu cầu chuỗi giá trị, vì giá trị của nó được tính trực tiếp tương ứng với cửa sổ trình duyệt:
Phần ( chiều cao: 100vh; )
Hiệu ứng lật qua các slide khi bạn click vào mũi tên được thực hiện bằng cách sử dụng kịch bản nhỏ jQuery:
JQuery(document).ready(function($) ( $("nav").on("click", function() ( if ($(this).hasClass("down")) ( var movePos = $(window ).scrollTop() + $(window).height(); ) if ($(this).hasClass("top")) ( var movePos = $(window).scrollTop() - $(window).height( ); ) $("html, body").animate(( ScrollTop: movePos), 600); )); ));
Chiều cao được chỉ định bằng vh cũng có thể được sử dụng để căn giữa một phần tử trên trang.
CSS3 có đơn vị đo lường mới. (Tôi nghĩ tôi đã nói về điều này rồi. tiếng anh) Bạn đã nghe nói về px, pt, em và rem mới. Chúng ta hãy xem xét thêm một vài điều nữa: vw và vh.
Thường có những thành phần trong bố cục được đảm bảo phù hợp với khung nhìn của trình duyệt. TRONG trường hợp chung JavaScript được sử dụng cho việc này. Hãy kiểm tra kích thước của khung nhìn và thay đổi kích thước các phần tử cho phù hợp. Nếu người dùng thay đổi kích thước cửa sổ trình duyệt, quy trình sẽ được lặp lại.
Sử dụng vw/vh chúng ta có thể đặt kích thước của các phần tử tương ứng với kích thước của khung nhìn. Đơn vị vw/vh rất thú vị vì 1vw là đơn vị bằng 1/100 chiều rộng của khung nhìn. Ví dụ: để gán cho một phần tử có chiều rộng bằng với chiều rộng của khung nhìn, bạn cần đặt chiều rộng: 100vw.
Làm thế nào nó có thể được sử dụng
Hộp đèn là một ứng cử viên tuyệt vời để sử dụng vw và vh vì chúng thường được định vị so với khung nhìn, tuy nhiên tôi thấy rằng vị trí: cố định với các giá trị trên, dưới, trái và phải sẽ dễ sử dụng hơn vì bạn không phải đặt chiều cao và chiều rộng cả.Bạn có thể sử dụng các đơn vị đo lường mới để đặt kích thước của các phần tử ở trạng thái bình thường. Ví dụ: tôi có thể đăng ảnh chụp màn hình trên trang. Chiều cao của những ảnh chụp màn hình này không được vượt quá chiều cao của khung nhìn. Đối với điều này tôi có thể thiết lập chiều cao tối đa hình ảnh:
Img ( chiều cao tối đa:95vh; )
TRONG trong trường hợp này Tôi đặt chiều cao thành 95vh để chừa một khoảng trống xung quanh khi chúng ở trên màn hình.
Hỗ trợ trình duyệt
Nếu rem được hầu hết các trình duyệt chính hỗ trợ, bao gồm cả IE9, thì việc sử dụng vw và vh đáng để bạn tạm dừng. TRÊN khoảnh khắc này chỉ hỗ trợ họ trình duyệt web IE 9.Các đơn vị Kích thước CSSđóng một vai trò quan trọng trong việc tạo trang web và thiết lập kích thước của các thành phần khác nhau. Giá trị CSS có thể được biểu thị dưới dạng tích cực hoặc số âm, mặc dù một số thuộc tính chỉ chấp nhận số dương. Giá trị số kèm theo một chữ viết tắt gồm hai chữ cái đại diện cho đơn vị chiều dài thực tế. Ví dụ: cm (centimet), px (pixel) hoặc em CSS. Ngoại lệ cho quy tắc này là giá trị 0 (không), không yêu cầu đơn vị đo lường.
Đơn vị CSS có hai loại: tuyệt đối và tương đối.
Đơn vị độ dài tuyệt đối trong CSS
Các đơn vị CSS tuyệt đối không phù hợp với thiết kế web. Chúng đại diện cho sự thể hiện kỹ thuật số của kết quả đo trong thế giới vật lý và độc lập với kích thước và độ phân giải màn hình. Độ dài tuyệt đối có cùng giá trị có thể khác nhau bởi màn hình khác nhau. Điều này là do sự khác biệt về độ nhạy màn hình (số chấm trên mỗi inch).
Màn hình độ phân giải cao có độ phân giải cao hơn màn hình có độ phân giải thấp hơn, khiến hình ảnh và văn bản trông nhỏ hơn. Đơn vị tuyệt đối được sử dụng để xác định kiểu in, trong đó các phép đo xảy ra theo inch, điểm và pica.
Đơn vị tuyệt đối của độ dài:
- cm (cm);
- mm (milimét);
- theo số inch);
- pc(đỉnh);
- pt(điểm);
- px (pixel).
Hầu hết các đơn vị độ dài tuyệt đối đều vô dụng trên Internet. Ngoại lệ duy nhất là px. Pixel là đơn vị tương đối liên quan đến độ phân giải của màn hình. Đối với máy in và màn hình có rất độ phân giải cao một pixel trong CSS bằng nhiều pixel trên màn hình, vì vậy số px trên mỗi inch là khoảng 96. Pixel là đơn vị đo lường nhỏ nhất và thường được sử dụng làm đơn vị tham chiếu cho các pixel khác.
Đơn vị độ dài tương đối trong CSS
Đơn vị tương đối Kích thước độ dài trong CSS không có giá trị cố định. Ý nghĩa của chúng phụ thuộc vào người khác đặt giá trị hoặc các chức năng. Chúng phổ biến hơn trong thiết kế web vì chúng giúp xác định kích thước của một phần tử dễ dàng hơn. Với sự trợ giúp của họ, bạn có thể đặt chiều rộng, chiều cao, kích thước phông chữ, v.v. so với các thông số cơ bản khác.
Đơn vị tương đối tùy thuộc vào phông chữ
Các đơn vị tương đối phụ thuộc vào phông chữ được tham chiếu trước đặt kích thước giá trị thuộc tính phông chữ hoặc họ phông chữ:
- ex(chiều cao ký tự x);
- ch( độ rộng ký tự bằng 0 (0));
- đơn vị em trong CSS (chiều cao phông chữ của phần tử hiện tại);
- rem( kích thước phông chữ phần tử gốc).
bán tại
Định nghĩa là " chiều cao ký tự x của phông chữ hiện tại HOẶC nửa 1 em" Tức là chiều cao của chữ thường x phông chữ được cài đặt. Khi bạn thay đổi giá trị của thuộc tính họ phông chữ, đơn vị cũ sẽ thay đổi.
ch
Bằng độ rộng của ký tự 0 . Đơn vị đo này cũng thay đổi khi giá trị của thuộc tính font-family thay đổi.
em
Đơn vị em CSS có giá trị bằng kích thước phông chữ của phần tử nội dung hoặc phần tử gốc. Ví dụ: nếu kích thước phông chữ của phần tử cha là 30px thì giá trị 1em sẽ được tính là 30px (30 x 1) cho tất cả các phần tử con. Số không nhất thiết phải là số nguyên. Nếu trong ví dụ chúng ta thay thế 1em bằng 0,5 thì giá trị sẽ là 15px (30 x 0,5).
Đơn vị em nhận giá trị của thẻ cha. Điều này có thể dẫn đến kết quả không mong muốn khi sử dụng các phần tử lồng nhau.
Giả sử chúng ta có ba phần tử lồng nhau. Phần tử đầu tiên (root) có kích thước phông chữ là 30px và hai phần tử lồng nhau có kích thước phông chữ là 2em. Phần tử được lồng trong thư mục gốc sẽ có kích thước phông chữ được tính là 60px (30 x 2). Và phần tử được lồng bên trong nó sẽ có kích thước phông chữ được tính là 120px (60 x 2).
rem
rem tương tự như CSS em, nhưng giá trị của nó luôn bằng với kích thước phông chữ của phần tử gốc. Đơn vị rem rất hữu ích khi phát triển các trang web phản hồi vì nó cho phép bạn mở rộng toàn bộ trang bằng cách thay đổi kích thước phông chữ trong thành phần HTML.
Đơn vị độ dài phần trăm dựa trên kích thước khung nhìn
Khu vực xem dựa trên chiều rộng và chiều cao của khung nhìn và bao gồm:
- vh( chiều cao khung nhìn);
- vw( chiều rộng khung nhìn);
- vmin( nhỏ nhất của (vw, vh));
- vmax ( lớn nhất của (vw, vh)).
vw
Đây là chiều rộng của khung nhìn. 1vw bằng 1/100 chiều rộng khung nhìn. Hơi giống tỷ lệ phần trăm, ngoại trừ giá trị vẫn giữ nguyên cho tất cả các phần tử bất kể độ rộng của các phần tử cha của chúng. Ví dụ: nếu chiều rộng cửa sổ là 1000px thì 1vw sẽ bằng 10px.
vh
Tương tự như vw ( chiều rộng khung nhìn), chỉ có đơn vị đo này phụ thuộc vào chiều cao của vùng quan sát. 1vh bằng 1/100 chiều cao xem. Ví dụ: nếu chiều cao cửa sổ trình duyệt là 900px thì 1vh sẽ là 9px.
vmin
Vmin bằng 1/100 của giá trị tối thiểu giữa chiều cao và chiều rộng của khung nhìn. Nói cách khác, 1/100 cạnh có độ dài ngắn nhất. Ví dụ: nếu kích thước cửa sổ 1200 x 800 pixel, thì giá trị vmin sẽ là 8px .
vmax
vmax bằng 1/100 giá trị tối đa giữa chiều cao và chiều rộng của khung nhìn. Nói cách khác là 1/100 cạnh có chiều dài dài nhất. Ví dụ: nếu kích thước là 1200 x 800 pixel, thì vmax là 12px .
Quan tâm %
Khoảng cách được chỉ định dưới dạng phần trăm phụ thuộc vào độ dài của phần tử gốc. Ví dụ: nếu phần tử cha rộng 1000px và phần tử con của nó bằng 50% giá trị đó thì chiều rộng phần tử con sẽ là 500px.
HỖ TRỢ TRÌNH DUYỆT
em CSS, ex, px, cm, mm, in, pt và pc
được hỗ trợ trong tất cả các trình duyệt, bao gồm cả các phiên bản IE cũ hơn.
CSS sử dụng các đơn vị tuyệt đối và tương đối để định kích thước các phần tử khác nhau. Đơn vị tuyệt đối độc lập với thiết bị đầu ra, nhưng đơn vị tương đối xác định kích thước của một phần tử so với giá trị của kích thước khác.
Đơn vị tương đối
Các đơn vị tương đối thường được sử dụng để làm việc với văn bản. Trong bảng 1 liệt kê các đơn vị tương đối chính.
Đơn vị em là giá trị thay đổi, tùy thuộc vào kích thước phông chữ của phần tử hiện tại (kích thước được đặt thông qua thuộc tính kiểu phông chữ). Mỗi trình duyệt có kích thước văn bản tích hợp được sử dụng khi kích thước này không được chỉ định rõ ràng. Do đó, ban đầu 1em bằng cỡ chữ mặc định của trình duyệt hoặc cỡ chữ của phần tử gốc. Ký hiệu phần trăm giống hệt với em, trong đó giá trị của 1em và 100% bằng nhau.
Đơn vị cũ được định nghĩa là chiều cao của ký tự "x" viết thường. ex phải tuân theo các quy tắc tương tự như em, cụ thể là nó bị ràng buộc với kích thước phông chữ mặc định của trình duyệt hoặc kích thước phông chữ của phần tử cha của nó.
Đơn vị ch bằng độ rộng của ký tự "0" đối với phần tử hiện tại và giống như em, phụ thuộc vào kích thước phông chữ.
Sự khác biệt giữa em và rem như sau. em phụ thuộc vào kích thước phông chữ của phần tử gốc và thay đổi theo nó, còn rem được gắn với phần tử gốc, tức là kích thước phông chữ được chỉ định cho phần tử html.
Ngoài ra còn có một nhóm đơn vị tương đối gắn liền với kích thước của khung nhìn trình duyệt. Trong bảng 2 hiển thị danh sách chúng kèm theo mô tả.
Đơn vị tuyệt đối
Đơn vị tuyệt đối thể hiện kích thước vật lý- inch, cm, milimét, điểm, picas và pixel. Đối với các thiết bị có dpi thấp (số pixel trên inch xác định mật độ pixel), liên kết là trên mỗi pixel. Trong trường hợp này, một inch bằng 96 pixel. Rõ ràng, inch thật sẽ không khớp với inch trên thiết bị như vậy. Trên các thiết bị có độ phân giải cao, inch thực bằng inch trên màn hình nên kích thước pixel được tính là 1/96 inch. Trong bảng 3 liệt kê các đơn vị tuyệt đối cơ bản.
Ví dụ
tiêu đề 30px
Cỡ chữ 1,5 em
Tiêu đề 24 điểm
Dịch văn bản sang phải 30 mm
Ghi chú
Khi cài đặt kích thước, hãy đảm bảo chỉ định đơn vị đo, ví dụ: chiều rộng: 30px. Nếu không, trình duyệt sẽ không thể hiển thị kết quả mong muốn vì nó không hiểu kích thước bạn yêu cầu. Đơn vị không được thêm vào chỉ khi giá trị 0(lề: 0).
Internet Explorer hỗ trợ đơn vị vm thay vì vmin.
Sự chỉ rõ
Mỗi thông số kỹ thuật đều trải qua nhiều giai đoạn phê duyệt.
- Khuyến nghị - Thông số kỹ thuật đã được W3C phê duyệt và được khuyến nghị làm tiêu chuẩn.
- Đề xuất ứng viên ( Khuyến nghị có thể ) - nhóm chịu trách nhiệm về tiêu chuẩn hài lòng vì đã đáp ứng được mục tiêu của mình nhưng cần có sự trợ giúp từ cộng đồng phát triển để thực hiện tiêu chuẩn.
- Khuyến nghị đề xuất Khuyến nghị được đề xuất) - ở giai đoạn này, tài liệu được gửi tới Hội đồng tư vấn của W3C để phê duyệt lần cuối.
- Bản dự thảo đang hoạt động - Một phiên bản hoàn thiện hơn của bản dự thảo đã được thảo luận và sửa đổi để cộng đồng xem xét.
- Bản thảo của người biên tập ( bản thảo biên tập) - phiên bản dự thảo của tiêu chuẩn sau khi các biên tập viên dự án thực hiện các thay đổi.
- Bản nháp ( Thông số kỹ thuật dự thảo) - phiên bản dự thảo đầu tiên của tiêu chuẩn.
Khi làm việc với CCS, bạn rất dễ bị mắc kẹt ở một số điểm, bởi vì đôi khi ngay cả khi làm việc bằng phương pháp quen thuộc, vẫn có những vấn đề mới xuất hiện.
Khi Internet phát triển, nhu cầu về các giải pháp mới cũng tăng theo. Và vì bạn và tôi đều là nhà thiết kế web và nhà phát triển front-end nên chúng ta không có lựa chọn nào khác ngoài việc có thể làm việc với nhiều lựa chọn khác nhau và có thể hoạt động tốt.
Điều này có nghĩa là chúng ta cần có khả năng làm việc tốt ngay cả với những công cụ cụ thể thường rất hiếm khi được sử dụng, nhưng có những tình huống cần đến chúng.
Hôm nay chúng tôi muốn kể cho bạn nghe về một số Công cụ CSS. Mỗi công cụ này giống như một đơn vị đo lường, chẳng hạn như pixel hoặc ems, nhưng rất có thể bạn chưa biết về chúng.
Hãy bắt đầu với thứ gì đó trông giống thứ gì đó mà bạn có thể đã quen thuộc. Đơn vị em được xác định là cỡ chữ hiện tại. Vì vậy, ví dụ: nếu bạn đặt kích thước phông chữ trên phần tử nội dung, thì giá trị em của bất kỳ phần tử thấp hơn nào trong phần nội dung sẽ bằng kích thước phông chữ đó.
Ở đây chúng tôi đã viết rằng kích thước phông chữ của div sẽ là 1,2em. Kích thước này lớn hơn 1,2 lần so với kích thước phông chữ mà nó kế thừa từ đó là 14px. Vậy kết quả là 16,8px.
Tuy nhiên, điều gì sẽ xảy ra nếu bạn xếp chồng các kích thước phông chữ do em xác định vào nhau? Trong đoạn tiếp theo, chúng ta áp dụng CCS tương tự như trên. Mỗi div kế thừa kích thước phông chữ từ cha mẹ của nó, mang lại cho chúng ta kích thước phông chữ lớn hơn dần dần.
Mặc dù điều này có thể phù hợp trong một số trường hợp nhưng thông thường chúng ta chỉ muốn dựa vào một số liệu duy nhất để đo lường. Trong trường hợp này chúng ta nên sử dụng rem. Chữ “r” trong rem là viết tắt của “gốc”; nó bằng cỡ chữ được đặt trong phần tử gốc; trong hầu hết các trường hợp nó là một phần tử HTML.
Html (cỡ chữ: 14px; ) div (cỡ chữ: 1.2rem; )
Trong cả ba div từ ví dụ trước, phông chữ có thể đạt tới 16,8px.
5 điểm, Lưới
Rem không chỉ hữu ích cho việc hiệu chỉnh phông chữ. Ví dụ: chúng ta có thể dựa trên toàn bộ hệ thống lưới hoặc thư viện giao diện người dùng dựa trên việc sử dụng kích thước Phông chữ HTML root rem và sử dụng phép tính của chúng ở những nơi nhất định. Điều này sẽ giúp chúng tôi hiệu chỉnh và tính toán phông chữ dễ dự đoán hơn.
Vùng chứa (chiều rộng: 70rem; // 70 * 14px = 980px )
Ý tưởng đằng sau ý tưởng này là cho phép giao diện của chúng tôi tương xứng với kích thước của nội dung. Mặc dù không nhất thiết trong mọi trường hợp nó đều có ý nghĩa giống nhau.
vh và vw
Kỹ thuật thiết kế web đáp ứng phụ thuộc rất nhiều vào quy tắc phần trăm. Tuy nhiên Phần trăm CSS không phải lúc nào cũng là giải pháp tốt nhất cho mọi vấn đề. Chiều rộng CSS có liên quan đến phần tử gần nhất có chứa phần tử gốc. Điều gì sẽ xảy ra nếu chúng ta muốn sử dụng chiều rộng hoặc chiều cao của khung nhìn thay vì chiều rộng phần tử gốc? Đây chính xác là những gì các đơn vị vh và vw giúp thực hiện.
Phần tử vh có chiều cao bằng 1/100 của khung nhìn. Ví dụ: nếu chiều cao của trình duyệt là 900px thì 1vh có thể cao tới 9px. Ngoài ra nếu chiều rộng khung nhìn là 750px thì 1vw có thể đạt tới 7,5px.
Có vẻ như quy tắc này có thể được sử dụng vô tận. Ví dụ, một cách rất đơn giản để đạt được bằng cách sử dụng một Chuỗi CSS các slide có chiều cao đầy đủ hoặc xấp xỉ chiều cao đầy đủ có thể là:
Trượt (chiều cao: 100vh; )
Giả sử bạn muốn tạo tiêu đề lấp đầy toàn bộ chiều rộng của màn hình. Để làm điều này, bạn cần đặt cỡ chữ thành vw. Kích thước này sẽ tương đương với chiều rộng của trình duyệt.
vmin và vmax
Trong khi vh và vm luôn liên quan đến chiều cao và chiều rộng của khung nhìn thì vmin và vmax cũng liên quan đến mức tối đa và tối thiểu của chiều cao và chiều rộng đó, tùy thuộc vào cái nào nhỏ hơn và cái nào lớn hơn. Ví dụ: nếu trình duyệt có cài đặt rộng 1100px và cao 700px thì 1vmin sẽ là 7px và 1vmax sẽ là 11px. Tuy nhiên, nếu chiều rộng được đặt thành 800px và chiều cao thành 1080px thì vmin sẽ là 8px trong khi vmax sẽ được đặt thành 10,8px.
Trong trường hợp nào bạn có thể sử dụng các giá trị này?
Hãy tưởng tượng rằng bạn muốn một phần tử luôn hiển thị trên màn hình. Sử dụng chiều cao và chiều rộng, đặt theo giá trị vmin dưới 100 sẽ cho phép bạn đạt được điều này. Ví dụ: một phần tử hình vuông chạm vào ít nhất hai phần của màn hình có thể được xác định như sau:
Hộp ( chiều cao: 100vmin; chiều rộng: 100vmin; )
Nếu bạn muốn một hình vuông bao phủ toàn bộ khu vực hiển thị của khung nhìn, hãy sử dụng các quy tắc tương tự, ngoại trừ vmax.
Hộp ( chiều cao: 100vmax; chiều rộng: 100vmax; )
Sự kết hợp của các quy tắc này sẽ cho phép bạn sử dụng kích thước khung nhìn của mình rất linh hoạt và đạt năng suất tối đa.
cũ và ch
Các đơn vị ex và ch, cũng như em và rem, đề cập đến phông chữ và cỡ chữ hiện tại. Tuy nhiên, vì chúng dựa trên các thước đo dành riêng cho phông chữ, ex và ch cũng ánh xạ tới họ phông chữ, trái ngược với em và rem.
Đơn vị ch, hay đơn vị ký tự, được định nghĩa là một "thước đo cải tiến" về chiều rộng của ký tự 0. Khái niệm này đã gây ra nhiều tranh luận, nhưng ý tưởng cơ bản là cho một phông chữ có chiều rộng cố định, một hình vuông có chiều rộng là N ký tự đơn vị như chiều rộng: 40ch; luôn có thể chứa một chuỗi 40 ký tự trong phông chữ cụ thể đó. Trong khi sử dụng bình thường Quy tắc đặc biệt này nằm ở cách sắp xếp chữ nổi, tất nhiên khả năng sáng tạo ở đây vượt xa những câu nói đơn giản này.
Đơn vị cũ được định nghĩa là "chiều cao x của phông chữ hiện tại HOẶC một giây của em". Chiều cao của phông chữ này - chiều cao chữ viết thường x của phông chữ đó. Thông thường, đây là khoảng giữa của phông chữ.
Có nhiều lĩnh vực có thể sử dụng các đơn vị như vậy. Thường xuyên nhất trong nhà in. Ví dụ: phần tử sup, hoạt động như chỉ số trên, có thể được thêm vào dòng bằng cách sử dụng vị trí thích hợp và giá trị cuối cùng 1ex. Tương tự như vậy, bạn có thể đặt lại phần tử dưới cùng. Lỗi trình duyệt được sửa bằng các quy tắc căn chỉnh dọc dành riêng cho chỉ số trên và chỉ số dưới, nhưng nếu muốn kiểm soát nhiều hơn, bạn có thể thử cách sau:
Sup ( vị trí: tương đối; đáy: 1ex; ) phụ ( vị trí: tương đối; đáy: -1ex; )
Phần kết luận
Điều quan trọng là phải theo kịp sự phát triển và phổ biến của CSS, cũng như tìm hiểu về các công cụ mới và thêm chúng vào danh sách kỹ năng của bạn. Rất có thể, bạn sẽ gặp phải những vấn đề có thể giải quyết được nhờ sự trợ giúp của các đơn vị này. Hãy dành thời gian của bạn và đọc các đặc điểm kỹ thuật. Đăng ký nhận thông tin cập nhật từ cssweekly. Và tất nhiên, đừng quên đăng ký để cập nhật hàng tuần và các video hướng dẫn miễn phí trên Tuts+!
