- Trang chủ
- Tham khảo
- CSS
- Thuộc tính width
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:
| width | đơn vị | width: 200px; | Định rõ đơn vị cho chiều rộng, đơn vị có thể là px, em, %, ... |
| auto | width: auto; | Định chiều rộng tự động, đây là dạng mặc định. | |
| inherit | width: inherit; | Xác định thừa hưởng thuộc tính từ thành phần cha [thành phần bao ngoài]. |
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
- Inheritance
- Use the initial keyword to set a property to its initial value.
- Use the revert keyword to reset a property to the value established by the user-agent stylesheet [or by user styles, if any exist].
- Use the revert-layer keyword to reset a property to the value established in a previous cascade layer.
- Use the unset keyword to set a property to its inherited value if it inherits or to its initial value if not.
- The all property lets you reset all properties to their initial, inherited, reverted, or unset state at once.
Đư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 2
border-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
div {border: 1px solid black; margin: 1em;}.zerotest div {border: 0;}.nonetest div {border: none;}div.setwidth {border-width: 3px;}div.setstyle {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 3
Sau 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:
| 1 | 2 | |
| 1.1 | 2.1 | 2.2 |
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:
td{border:1px solid red;}| 1 | 2 | |
| 1.1 | 2.1 | 2.2 |
Page 4
1. Đ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ã
* { margin: 0; padding: 0; } .box { width: 300px; height: 200px; position: relative; } .img { width: auto; height: 0; } .box img { width: 100%; display: inline-block; } .box .img:nth-of-type[1] { display: inline-block; position: absolute; left: 50%; top: 50%; padding-bottom: 50%; transform: translate[-50%, -50%]; z-index: 6; } .box .img:nth-of-type[2], .box .img:nth-of-type[3] { position: absolute; top: 50%; transform: translateY[-50%]; padding-bottom: 63%; z-index: 3; } .box .img:nth-of-type[2] { right: 0; } .box .img:nth-of-type[3] { left: 0; }Page 5
Bạ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.