Những gì bạn không biết về cách tính tỷ lệ phần trăm trong CSS
Hầu hết các nhà thiết kế web nghĩ rằng họ biết CSS khá tốt. Rốt cuộc, không có gì nhiều cho nó - một vài loại bộ chọn, vài chục thuộc tính và một số quy tắc xếp tầng mà bạn hầu như không cần nhớ vì chúng có nghĩa là thông thường. Nhưng khi bạn xuống đến mức độ khó chịu, có rất nhiều chi tiết tối nghĩa mà ít nhà thiết kế thực sự hiểu.
Khi tôi kiểm tra kết quả của một thử nghiệm CSS miễn phí mà tôi đã cung cấp trực tuyến trong sáu tháng qua, tôi đã phát hiện ra một câu hỏi gần như không một ai đã đúng. Trong số hàng ngàn người tham gia bài kiểm tra, Ít hơn 14% hiểu đúng.
Câu hỏi đặt ra cho vấn đề này: Làm thế nào để bạn tính toán tỷ lệ phần trăm lợi nhuận?
Câu hỏi
Nói rằng trang web của bạn có một container div, và bên trong đó, một nội dung div:
Bây giờ, hãy đưa ra nội dung đó div lề trên:
.nội dung lề-top: 10%;
Được rồi, vậy là 10%, nhưng 10% gì? Đó là câu hỏi mà chỉ có 13,8% người dân có thể trả lời đúng. Và hãy ghi nhớ: những người này có quyền truy cập vào Google!
Điều tôi thích về câu hỏi này là có vẻ như câu trả lời nên rõ ràng. Nhiều đến nỗi, tôi nghi ngờ hầu hết mọi người chỉ đoán (và đoán sai). Nhưng có lẽ nó không dường như rõ ràng với bạn Ý tôi là, nếu bạn thực sự sử dụng trí tưởng tượng của mình, có nhiều cách trình duyệt có thể tính toán được một mức lợi nhuận như thế này.
Vì vậy, nếu tôi thu hẹp nó cho bạn vì câu hỏi trong bài kiểm tra thực sự là nhiều lựa chọn. Đây là lựa chọn của bạn:
- 10% chiều cao của div nội dung
- 10% chiều cao của div container
- 10% chiều rộng của div nội dung
- 10% chiều rộng của div container
Hãy nhớ rằng, chỉ có 13,8% mọi người có thể chọn câu trả lời đúng từ danh sách này. Đó là cách tồi tệ hơn cơ hội!
Nhìn kỹ vào các câu trả lời; bạn sẽ thấy thực sự chỉ có hai điều bạn cần biết:
Container hoặc Nội dung?
Đầu tiên là kích thước của lề dựa trên kích thước của chính div nội dung hoặc dựa trên kích thước của div container?
Bây giờ đây không phải là một gimme, nhưng bạn có thể tin tưởng vào bản năng của mình. Nếu tôi đặt div là 50% chiều rộng của thùng chứa, và sau đó tôi muốn lề trái và phải của nó lấp đầy phần còn lại của không gian, thì tự nhiên tôi sẽ đặt chúng ở mức 25% mỗi phần (vì vậy tỷ lệ phần trăm tăng lên 100%). Để làm việc đó, tỷ lệ phần trăm phải dựa trên kích thước của container.
Chắc chắn, hai phần ba số người tham gia bài kiểm tra có được phần này của câu trả lời đúng.
Chiều rộng hoặc chiều cao?
Thứ hai, là kích thước của lề trên dựa trên chiều rộng hoặc chiều cao của phần tử đó?
Nếu bạn đã chú ý, có lẽ bạn đã cảnh giác. Đối với rất ít người để chọn câu trả lời đúng, đây phải là một câu hỏi mẹo, đúng?
Tuy nhiên, tôi cá là bạn khó có thể tin rằng câu trả lời không phải Chiều cao. À, không phải.
Vâng, chúng tôi đang nói về một lợi nhuận hàng đầu ở đây. Có, kích thước của lề đó là một phép đo dọc. Có, nếu một khối bằng 50% chiều cao của container và bạn đã đặt cho nó một lề cao nhất là 25%, bạn sẽ hy vọng rằng nó sẽ bằng 25% chiều cao của container. Và bạn đã sai.
Đừng cảm thấy tồi tệ nếu bạn nghĩ nó phải có chiều cao. Gần 80% những người tham gia bài kiểm tra đồng ý với bạn:
Nó làm cho Sense không, thực sự!
Vẫn không tin chứ? Đây là một trích dẫn từ thông số CSS W3C:
Tỷ lệ phần trăm được tính tương ứng với chiều rộng của khối chứa hộp được tạo. Lưu ý rằng điều này cũng đúng với lề trên và lề dưới.
Điều tương tự cũng xảy ra đối với phần đệm trên và dưới, trong trường hợp bạn đang tự hỏi. Đối với đường viền, việc xác định chiều rộng của chúng là phần trăm.
Vì vậy, tại thời điểm này, có lẽ bạn đang nghĩ rằng những người tạo ra CSS là bonkers, hoặc họ chỉ phạm một sai lầm thực sự ngu ngốc. Nhưng tôi ở đây để nói với bạn, có hai lý do chính đáng để căn cứ lề dọc trên chiều rộng của khối chứa:
Tính nhất quán theo chiều ngang và chiều dọc
Tất nhiên, có một thuộc tính tốc ký cho phép bạn chỉ định lề cho cả bốn mặt của một khối:
ký quỹ: 10%;
Điều này mở rộng đến:
tỷ lệ ký quỹ cao nhất: 10%; lề phải: 10%; lề dưới: 10%; lề trái: 10%;
Bây giờ, nếu bạn đã viết một trong những điều trên, có lẽ bạn sẽ mong muốn các lề ở cả bốn phía của khối có kích thước bằng nhau, phải không? Nhưng nếu lề trái và lề phải dựa trên chiều rộng của container và đỉnh lề và đáy lề dựa trên chiều cao của nó, thì chúng thường khác nhau!
Tránh phụ thuộc thông tư
CSS đưa ra nội dung trong các khối được xếp theo chiều dọc xuống trang, do đó chiều rộng của một khối thường được quyết định hoàn toàn bởi chiều rộng của cha mẹ. Nói cách khác, bạn có thể tính chiều rộng của một khối mà không cần lo lắng về những gì phía trong khối đó.
Chiều cao của một khối là một vấn đề khác nhau. Thông thường, chiều cao phụ thuộc vào chiều cao kết hợp của nội dung của nó. Thay đổi chiều cao của nội dung và bạn thay đổi chiều cao của khối. Xem vấn đề?
Để có được chiều cao của nội dung, bạn cần biết các lề trên và dưới được áp dụng cho nội dung đó. Và nếu các lề đó phụ thuộc vào chiều cao của khối cha, bạn sẽ gặp rắc rối, vì bạn không thể tính toán cái này mà không biết cái kia!
Căn cứ lề dọc trên chiều rộng của container phá vỡ sự phụ thuộc vòng tròn đó và làm cho nó có thể bố trí trang.
Ace lớp
Vì vậy, bạn có nó: câu hỏi khó nhất trong bài kiểm tra, và bây giờ bạn có thể trả lời nó. Bạn muốn biết làm thế nào bạn làm trong phần còn lại của bài kiểm tra? Hãy thử nó. Tôi hứa, hầu hết các câu hỏi dễ hơn nhiều so với câu hỏi này.
Trong khi đó, tôi đang tìm kiếm một câu hỏi khó nhất mới! Chi tiết nào về CSS mà bạn nghĩ không ai biết?
Ghi chú của biên tập viên: Điều này được viết cho Hongkiat.com bởi Kevin Yank. Kevin đã viết về web từ năm 1999, với những cuốn sách về PHP, CSS và JavaScript với tên của anh ấy. Anh ấy cũng đã tổ chức podcast, phát biểu tại các hội nghị và đào tạo video, tất cả về Web. Hiện anh đang lãnh đạo nhóm phát triển tại Sit the Test, một ứng dụng web để thực hiện và làm các bài kiểm tra trực tuyến.
Thêm thông tin về Hongkiat:
- Thiết kế web: Chiều cao cột bằng với CSS
- 6 thủ thuật CSS để căn chỉnh nội dung theo chiều dọc
- Nhìn vào các đơn vị CSS: Pixels, EM và Tỷ lệ phần trăm
- Nhìn vào: Kích thước hộp CSS3
Đọc ngay: 10 thuộc tính CSS3 ẩn bạn nên biết
