15 Kiểu hiển thị tập hợp chính xác các quy tắc CSS khi chúng được viết trong các biểu định kiểu khác nhau. Mặt khác, khung Phần tử > Tính toán liệt kê các giá trị CSS đã giải quyết mà Chrome sử dụng để hiển thị phần tử
- CSS bắt nguồn từ thừa kế
- người chiến thắng thác
- Thuộc tính viết tay [chính xác], không viết tắt [súc tích]
- Các giá trị được tính toán, ví dụ:
width: 100%2 thay vìwidth: 100%3
Hiểu CSS trong ngăn Điện toán
Khung Tính toán cũng hiển thị các thuộc tính khác nhau theo cách khác
Được khai báo và kế thừa
Ngăn Điện toán liệt kê các thuộc tính được khai báo trong bất kỳ biểu định kiểu nào bằng phông chữ thông thường, cả sở hữu và kế thừa của phần tử. Nhấp vào biểu tượng mở rộng bên cạnh họ để xem nguồn của họ.
Để xem phần khai báo trong ngăn Kiểu, hãy di chuột qua thuộc tính được mở rộng và nhấp vào nút mũi tên .
Để xem khai báo trong ngăn Nguồn, hãy nhấp vào liên kết tới tệp nguồn
Đối với các thuộc tính có nhiều nguồn, ngăn Tính toán hiển thị nguồn đầu tiên
thời gian chạy
Ngăn Tính toán liệt kê các giá trị thuộc tính được tính toán khi chạy trong văn bản nhạt .
Trong ví dụ này, Chrome đã tính toán như sau cho phần tử width: 100%4
- Người thân của
width: 100%5 cha mẹ của nó,width: 100%6 width: 100%7 liên quan đến con của nó, hai phần tửwidth: 100%8
Không kế thừa và tùy chỉnh
Để ngăn Điện toán hiển thị tất cả các thuộc tính và giá trị của chúng, hãy chọn Hiển thị tất cả. Tất cả tài sản bao gồm.
- Giá trị ban đầu cho các thuộc tính không được kế thừa trong văn bản nhạt .
- Thuộc tính tùy chỉnh—với tiền tố
width: 100%9 trong văn bản thông thường. Các thuộc tính như vậy được kế thừa theo mặc định
Gotchas
không ảnh hưởng đến cách ngăn Tính toán hiển thị các thuộc tính. nhợt nhạt hay không
Để chia danh sách lớn này thành các danh mục, hãy kiểm tra Nhóm.
Ví dụ này hiển thị các giá trị ban đầu cho thuộc tính không được kế thừa trong Hoạt ảnh và thuộc tính tùy chỉnh trong Biến CSS
Tìm kiếm trùng lặp
Để điều tra một thuộc tính cụ thể và các bản sao tiềm ẩn của thuộc tính đó, hãy nhập tên thuộc tính đó vào hộp văn bản Bộ lọc. Bạn có thể thực hiện việc này cả trong bảng Kiểu và Bảng điện toán