Inherit css là gì
|
Thuộc tính width thiết lập chiều rộng cho thành phần. Chiều rộng này không bao gồm: border, padding, margin
Với giá trị như sau:
HỌC WEB CHUẨN p { background: #cccccc; } p { background: #cccccc; width: 200px; }
Thuộc tính width được hỗ trợ trong đa số các trình duyệt. Giá trị "inherit" không hỗ trợ trình duyệt IE7 trở xuống, IE8 đòi hỏi phải có !Doctype The inherit CSS keyword causes the element to take the computed value of the property from its parent element. It can be applied to any CSS property, including the CSS shorthand property all. For inherited properties, this reinforces the default behavior, and is only needed to override another rule.
Note: Inheritance is always from the parent element in the document tree, even when the parent element is not the containing block. BCD tables only load in the browser
Đưa ra div: với bản đồ nền sau PIC-1Làm cho hiệu ứng phản ánh sau: PIC-2Có nhiều phương pháp, nhưng tất nhiên chúng ta cần tìm cách nhanh nhất và thuận tiện nhất, ít nhất là cho dù hình ảnh thay đổi như thế nào,divCách thay đổi kích thước, chúng ta không cần thay đổi mã của mình. Phương pháp 1: - webkit-box-reflect Đây là một thuộc tính CSS rất mới. Nó rất đơn giản để sử dụng và có thể phản ánh nội dung của chúng tôi từ mọi hướng. Nhưng khả năng tương thích quá ảm đạm: Về cơ bản, nó chỉ- webkit- Trình duyệt của hạt nhân được hỗ trợ. PIC-3Nhưng nó thực sự thuận tiện để sử dụng, giải pháp như sau: Nhưng nó thực sự thuận tiện để sử dụng, giải pháp như sau: div{ -webkit-box-reflect: below;}box-reflectCó bốn hướng để lựa chọn,below | above | left | rightNgười đại diện là trái và phải, và bạn có thể thấy cụ thể hơnMDN。 Luật 2: inherit, Sử dụng thừa kế Câu hỏi này chủ yếu là để giới thiệu phương pháp này, khả năng tương thích tốt. inheritCái gì, tổng quan về mỗi định nghĩa thuộc tính CSS chỉ ra rằng thuộc tính này là ("Inherited: Yes") Mặc định kế thừa ("Inherited: no"). Mặc định ("Inherited: no"). Điều này xác định cách tính giá trị khi bạn không chỉ định giá trị của phần tử. Sử dụnginheritKế thừa giá trị cha mẹ có thể giải quyết nhiều vấn đề dường như phức tạp. Đối với câu hỏi này, chúng tôi thêm một phần tử giả vào thùng chứa hình ảnh và sử dụngbackground-image:inheritKế thừa sơ đồ nền của giá trị cha mẹ, bất kể hình ảnh thay đổi như thế nào, mã CSS của chúng tôi không cần phải thay đổi: div:before { content: ""; position: absolute; top: 100%; left: 0; right: 0; bottom: -100%; background-image: inherit; transform: rotateX(180deg);;}Page 2border-style Viết tắt Xem các kết quả sau trong phần tử kiểm duyệt chrome element.style {border: none;border-top-style: none;border-right-style: none;border-bottom-style: none;border-left-style: none;border-width: initial;border-color: initial;}Xem các kết quả sau với firefox trong firebug để xem các phần tử: element.style { border: medium none;}Lưu ý rằng giá trị medium này Thứ hai, border:0 border-width Viết tắt Xem các kết quả sau trong phần tử kiểm duyệt chrome element.style {border: 0;border-top-width: 0px;border-right-width: 0px;border-bottom-width: 0px;border-left-width: 0px;border-style: initial;border-color: initial;}Xem các kết quả sau với firefox trong firebug để xem các phần tử: element.style { border: 0 none;}Lưu ý rằng sự khác biệt giữa border:none và border:0 trong firebug Hãy lấy một ví dụ để chỉ định "Border: 0" and "border-width: 3px" "Border: 0" and "border-style: dashed" "Border: none" and "border-width: 3px" "Border: none" and "border-style: dashed" Bạn bè quan tâm có thể sao chép mã trên trong trình duyệt này: Kết quả kiểm tra: 1、.zerotest .setwidth Mặc dù border-width:3px được xác định, border-style:none vì vậy khung không biên (IE7 sẽ hiển thị đường viền 3 pixel, có liên quan đến phân tích border:0. Nó sẽ được đề cập dưới đây) 2、.zerotest .setstyle Mặc dù border-style: dashed được xác định, border-width:0 vì vậy không có đường viền 3、.nonetest .setwidth Mặc dù border-width:3px được xác định, border-style:none So Borderless (IE7 4、.nonetest .setstyle Định nghĩa của border-style:dashed border-style là giá trị mặc định medium border-color là giá trị mặc định black, do đó, nó sẽ hiển thị khung dotter đen 3 pixel (IE7 dưới dạng pixel) Toàn diện 1, 4 có thể được phân tích theo IE7 border:0 Holly được phân tích là border-width:0 border:none Phân tích border-style:none Hãy xem trình duyệt tiêu chuẩn border:0 một border-width:0 hơn border:none, đó là lý do tại sao hiệu suất border:none cao hơn border:0 Vì vậy, thiết kế Hive được khuyến nghị sử dụng border:none để đạt được hiệu ứng không biên giới Page 3Sau khi cài đặt cài đặt bảng table-layer:fixed, người ta thấy rằng có một dòng sáp nhập trong bảng. Các chiều rộng dòng khác không được hợp nhất sẽ là trung bình và cài đặt của chiều rộng cột sẽ không hợp lệ. Nếu việc sáp nhập biểu mẫu được loại bỏ, nó có thể được hiển thị bình thường. Lý do: table-layout: fixed Các bảng, chiều rộng của mỗi cột được xác định bởi dòng đầu tiên và chiều rộng được chỉ định sau sẽ bị bỏ qua. Dòng đầu tiên của bạn được hợp nhất, vì vậy chiều rộng của mỗi cột được chia. Giải pháp 1:Thêm trước tbody Giải pháp 2:Đặt một dòng ẩn để chỉ định chiều rộng:
Phương pháp này có thể được hiển thị chính xác trong IE6,IE7, IE8, nhưng trong không -IE, nó không có tác dụng. Đây là một phương pháp khác:
Page 41. Điểm chuẩn tỷ lệ phần trăm của phần tử width/height/padding/margin Khi thiết lập tỷ lệ phần trăm của một phần tử width/height/padding/margin, mọi người đều biết điểm chuẩn là gì? Nâng một hạt dẻ: .parent { width: 200px; height: 100px;}.child { width: 80%; height: 80%;}.childchild { width: 50%; height: 50%;padding: 2%; margin: 5%; } Trong mã trước, width của phần tử childchild là gì? height Cái gì vậy? padding Cái gì vậy? margin Cái gì vậy? height Điểm chuẩn phần trăm của phần tử là height của phần tử cha. Từ điều này, tôi tin rằng mọi người đã đếm nó, mọi người đều có thể thử nó ~~ Các cuộc phỏng vấn thường gặp phải vấn đề kiểu css đơn giản để đạt được hình vuông thích ứng, nguyên tắc này dựa trên kiến thức ở trên. chỉ cần #box { width: 50%; padding-top: 50%; background: #000; }Bởi vì các giá trị điểm chuẩn của width và padding là width của các phần tử cha mẹ và width của body Cài đặt Bạn có thể thích ứng với kích thước của cửa sổ Trình duyệt, hình vuông là tự kích hoạt ~~ 2. Pure css Nhận ra hiệu ứng hình ảnh vị trí ba chiều Để giản dị, nếu bạn muốn đạt được hiệu ứng vị trí ba chiều của hình ảnh dưới đây, bạn cần áp dụng kiến thức của padding , width, height. PIC-1Một chút quen thuộc, nó có giống với phong cách của các cuốn sách được đề xuất trong phần mềm tiểu thuyết không? Ở đây, trước hết, chúng ta hãy nhìn vào vị trí của vị trí của nó. Một cấp độ hình ảnh ở giữa và hình ảnh của hai bên phải trái và phải, và các mặt khác là trái và phải, và mặt sau của hai - Vị trí thứ nguyên được trình bày. Ở đây tôi đã học được một css hoàn toàn phụ thuộc, và cách đơn giản có thể đạt được hiệu ứng ba chiều này. Các độ cao khác nhau là padding-top có sự hỗ trợ nhỏ và nhỏ. Ảnh hưởng của thứ tự gấp z-index được kiểm soát. . Sự sắp xếp của nth-of-type Điều khiển giả -Lement+positon Định vị được kết hợp. PIC-2Có phải là một chút suy nghĩ? Đừng đi xung quanh, trực tiếp áp dụng mã Page 5Bạn chưa cập nhật bài viết cột bao lâu. Nửa năm? Trong nửa sau của năm, quá bận rộn để cất cánh, hay nó là một sự cường điệu để ra mắt? Thời gian duy nhất của người đã đóng góp vào Python trong nửa đầu năm, và bây giờ nó gần như đã quên bảy hoặc tám (một "một" tuyệt vời "cho chính bạn). Hệ thống can đảm JS (thay đổi nền tảng, "lòng can đảm" của Liang Jingru bắt đầu). Tôi muốn đợi, đợi cho đến khi webapi và đặt một bước đi lớn sau khi học, svg+CSS hoạt hình trên JavaScript giống như một con hổ. Tuy nhiên, xem gió và nước được thảo luận trong nhóm của Nuggets, tôi đột nhiên cảm thấy rằng tôi hoàn toàn xa lạ (Cai Jianya nên được đặt ở đây? ), Vì vậy, một bài viết nhiều hơn về sự hiện diện. Bài viết này ban đầu được viết trong cuốn sách "SVG+CSS hoạt hình". ... Thời gian bắt đầu ở rất xa, nhưng keyframes Các khung chính, là một yếu tố quan trọng của hoạt hình điều khiển ở trạng thái của các thời điểm khác nhau, xác định dạng cuối cùng của 72 thay đổi, do đó, cột cập nhật này sẽ bắt đầu. Đối với tập sách, nếu bạn có thể đăng nó, thật tốt khi thay thế nó bằng các trường hợp khác, đó là từ cuối cùng. Khái niệm cơ bản của khung chính keyframes có thể được bỏ qua ở đây, sau đây là đầy đủ các hàng khô. Trường hợp: Vòng tròn không bao giờ dừng tất cả các cách Bởi vì nó chỉ là để giải thích các khung chính, chỉ có một hiệu ứng dịch chuyển ngang đơn giản được thực hiện. Do đó, bài viết này có thể được tách ra khỏi SVG. Nó chỉ liên quan đến các thuộc tính hoạt hình của CSS3. PIC-1Đây là một vòng tròn cố gắng lăn từ điểm bắt đầu đến cuối. Toàn bộ hành trình là 800px, nhưng tôi đã thiết lập ba trạm theo ba cách của nó phải vượt qua. Bây giờ, thông qua định nghĩa của các khung chính, hãy để vòng tròn đi vào trạm trên đường để đi và dừng một chút. 1. Trước hết CSS một phần xác định hoạt hình chuyển động cơ bản nhất, 4s Hoàn thành, tốc độ tuyến tínhcase- Chuỗi khung chính 1-Xuất hiện。 @keyframes move{0%{transform:translateX(0)}100%{transform:translateX(800px)}}c_move{animation:move 4s linear both} /*both: ở cuối sau khi tập thể dục*/Vai trò này chủ yếu là khi xác định hoạt hình lưu thông vô hạn. PIC-2Các thiết lập của nền tảng tự nhiên mang đến một nền tảng độc đáo và độc đáo. 2. Độ trễ bắt đầu Dưới đây, tôi muốn vòng tròn dừng ở điểm bắt đầu 2s trước khi bắt đầu di chuyển. Phản ứng đầu tiên là độ trễ trong thuộc tính hoạt hình animation-delay , Xác định thời gian là 2s, được chứ? OK, nhưng đây là một phương pháp nâng cao hơn. Chúng tôi đã sử dụng rất nhiều tỷ lệ phần trăm khi xác định các khung chính. Ở đây khung thời gian Nói cách khác Khung khóa xác định thuộc tính trạng thái của các nút thời gian khác nhau. Chúng ta hãy nhìn vào một hình ảnh bên dưới. Hình ảnh này không được nhầm lẫn với trình diễn đường dẫn trên. Đây là hình ảnh về dòng thời gian của một hình ảnh động. PIC-3Hãy để vòng tròn ở tại điểm bắt đầu 2s đó là biểu thức cho biết, được chuyển thành ngôn ngữ định nghĩa hoạt hình của chúng tôi. Đó là 2s trước chu kỳ hoạt hình 4s không có hiệu ứng hoạt hình. Do đó, tôi sẽ xác định các quy tắc hoạt hình như thế này: @keyframes move{0%{transform:translateX(0)}50%{transform:translateX(0px)}100%{transform:translateX(800px)}}Nhìn vào phân đoạn của trục thời gian ở trên, dễ hiểu hơn, để sau khi ở tại điểm bắt đầu 2s, 2s Để hoàn thành toàn bộ hoạt hình được hoàn thành tại điểm bắt đầu. Đây là hoặc một cách đơn giản hơn để viết0%, 50%{transform:translateX(0)}, Các thuộc tính tương tự có thể được hợp nhất với nhau, cách nhau bằng dấu phẩy.<4 PIC-43. Kết thúc trước Với cơ sở của sự chậm trễ, liệu có thể đẩy nó ra trước. Để phân biệt nó, tôi đã để hình ảnh động kết thúc trước 3s. Vẽ phân tích dòng thời gian đầu tiên. PIC-5Định nghĩa của khung chính tương ứng như sau: @keyframes move{0%{transform:translateX(0)}25%，100%{transform:translateX(800px)}}Kết quả cuối cùng của vòng tròn phải đi đến cuối hành trình với tốc độ 4 lần (sau tất cả, chúng ta phải nén bản gốc 4s thời gian để 1s để hoàn thành), và sau đó bạn có thể tận hưởng kết thúc của Hoạt hình ở cuối kết thúc.<4 PIC-64. Ở giữa chừng Những trạm đã được chuẩn bị để chơi bây giờ có thể đóng một vai trò. Tôi hy vọng rằng các vòng tròn được di chuyển như thế này: toàn bộ hành trình chỉ là trạm đầu tiên (sau khi di động 200px) ở lại 1s và một chút chỉnh lưu. Nó trông như thế nào với dòng thời gian? PIC-7Ở đây, có một số con số kỳ lạ, bạn cần giải thích nó. Trước tiên hãy làm rõ, chúng tôi phân tích dòng thời gian và cuối cùng nhận được nút thời gian. Đối với thiết kế của chúng tôi, hãy ở lại <+ Phía sau 600px, vì nó là tốc độ tuyến tính, vì vậy sau khi trục thời gian được chia thành ba phần của A+B+C, chạy 200px Trong khoảng thời gian A, chạy 600px Thời gian và tính thời gian của thời gian tương ứng 0.75s, C Thời gian tương ứng 2.25s, B là thời gian để duy trì 1s, sau đó thay thế nó làm phần trăm tương ứng. Sau khi phân tích dòng thời gian được hoàn thành, phần định nghĩa của phần CSS xuất hiện: @keyframes move{0%{transform:translateX(0)}18.75%, 43.75%{transform:translateX(200px)} /* 1s*/ Tương ứng để ở lại100%{transform:translateX(800px)}}case- Trình diễn khung chính-Điểm dừng bài viết đầu tiên 1s PIC-85. Nhảy về phía trước như lỗ sâu Không có vấn đề gì khi thêm một số khó khăn và dừng lại ở bất kỳ điểm nào ở giữa. Đó là cùng một ý tưởng tại một điểm và nhiều điểm. Bây giờ, tôi đã để vòng tròn nhảy về phía trước. Sau khi vào trạm đầu tiên, hãy ở lại <+ , Băng qua trạm thứ hai, đi thẳng đến trạm thứ ba, ở lại 1s và hoàn thành hành trình. Theo nguyên tắc gấp không gian, đã có một sự chuyển đổi ở mức 200 và 600. Phân tích dòng thời gian: PIC-9Tập trung vào phần màu đỏ, có thời gian của quá trình chuyển đổi, thay đổi 200px. mà không thay đổi thời gian Theo phân tích của dòng thời gian, CSS một phần của lý thuyết: @keyframes move{0%{transform:translateX(0)}25%,50%{transform:translateX(200px)}50%,75%{transform:translateX(600px)}100%{transform:translateX(800px)}}Hiệu ứng là gì? PIC-10Nó hoàn toàn khác với trí tưởng tượng. Vấn đề ở đâu? Đó là 50%thời gian. Và giá trị hợp lệ cuối cùng phải tuân theo, vì vậy định nghĩa ở trên tương đương với thông báo được chuyển đến trình duyệt: @keyframes move{0%{transform:translateX(0)}25%{transform:translateX(200px)}50%,75%{transform:translateX(600px)} /* Giải quyết 600px100%{transform:translateX(800px)}}Đây là lý do tại sao nó dường như được tăng tốc đến bài thứ ba sau khi đến trạm đầu tiên, và sau đó khoảng cách còn lại được hoàn thành sau khi ở lại. Bây giờ trò chơi ngày càng thú vị hơn, có lẽ chúng ta có thể thử Trình duyệt lừa dối 。 Vì chỉ có cùng thời điểm được phép xác định giá trị thuộc tính, điều gì sẽ xảy ra nếu tôi thêm một điểm thời gian bên cạnh? @keyframes move{0%{transform:translateX(0)}25%,50%{transform:translateX(200px)}50.0001%,75%{transform:translateX(600px)}100%{transform:translateX(800px)}}Nhìn vào thời điểm ** 50.0001%**, hãy đoán xem điều gì đã xảy ra? Đây là "trình duyệt gian lận" được đặt ở trên. Trong phạm vi 50%→ 50.0001%, 400px(200 → 600) đã xảy ra. Vì vậy, tôi có hiệu ứng dưới đây:case- CHUYỂN ĐỔI CHUYỂN ĐỔI KEY Về nguyên tắc, đây là một loại lừa dối thị giác. Xử lý giữa hai vị trí trong một khoảng thời gian rất ngắn. Bởi vì thời gian ngắn, nó có thể bị bỏ qua, do đó sẽ có ảo tưởng về việc nhảy. Tóm tắt Sau khi đọc các ví dụ đại diện ở trên, bạn có hiểu biết hoàn toàn mới về định nghĩa về các khung chính không? về chu kỳ hoạt hình để đạt được hiệu ứng tương tự, nhưng đối với hiệu ứng động của chu kỳ không giới hạn, độ trễ chỉ hoạt động chỉ một lần. Một khi hoạt hình bắt đầu bước vào chu kỳ của tuần và re -enrolls, cài đặt thuộc tính này không còn nữa được hỗ trợ. Do đó, nếu có thể, hãy cố gắng hoàn thành định nghĩa của các khung chính càng nhiều càng tốt. Page 6Trong quá khứ Web phát triển, kiểu nút thiết kế Photoshop thường được sử dụng. Tuy nhiên, với sự phát triển của công nghệ CSS3, bạn có thể tùy chỉnh các nút đẹp với một số dòng mã và bạn cũng có thể hiển thị độ dốc, khung hình, bóng văn bản và các hiệu ứng khác. Ưu điểm lớn nhất của nút loại này là nó lưu các bước tải hình ảnh và rất dễ dàng để chỉnh sửa, mở rộng và tùy chỉnh. Bạn chỉ cần thay đổi mã. Bài viết này đã thu thập 10 bộ dựa trên CSS3. Bạn có thể sử dụng các nút này bằng cách sao chép và dán mã vào tệp CSS. Tuy nhiên, cần lưu ý rằng CSS3 yêu cầu hỗ trợ trình duyệt. Về cơ bản, các nút này có thể được trình bày hoàn hảo trong hầu hết các trình duyệt hiện đại, nhưng sự hỗ trợ trong IE không đủ tốt. 1. Nút đẹp CSS3 PIC-12. Nút hiệu ứng bức xạ PIC-23. CSS3 Nút âm thanh nổi PIC-34. Nút CSS Dựa trên các giả thuyết giả PIC-45. Github Nút kiểu PIC-56. Nút truyền thông xã hội PIC-67. Nút kiểu kẹo PIC-78. Nút CSS3 Dựa trên RGBA PIC-8Nút 9. CSS3 Đặt PIC-910. Nút Long Bar 3D CSS3 PIC-10Văn bản gốc tiếng Anh:10 GORGEOUS CSS3 BUTTONS, READY TO BE USED! Page 7Ví dụ của bài viết này mô tả phương pháp của hiệu ứng hình ảnh thực hiện CSS PURE CSS. Chia sẻ nó cho tất cả mọi người để bạn tham khảo. Phương pháp thực hiện cụ thể như sau:
| ||||||||||||||||||||||||||||||||
