Chiều cao tự động làm việc css như thế nào?
Techno, tôi đã lấy đề xuất của bạn và thực hiện một số thay đổi khác, và bây giờ nó hoạt động tốt. Đó là trang hiển thị tất cả OK. với nội dung DIV tự động điều chỉnh để hiển thị giống nhau trên PC hoặc Điện thoại thông minh, v.v. Show
Và FYI, và cho FYI của những người khác đã nhận xét về CSS của Trang web này không được tốt cho lắm, mà tôi biết là như vậy. Tôi không phải là chuyên gia CSS và thực sự không có thời gian để trở thành chuyên gia CSS ngay bây giờ. Và không chắc tôi muốn bao giờ, vì có bao nhiêu thứ khác mà tôi muốn học. Tôi là một chuyên gia khá giỏi về LAMP và JavaScript, không cần phải nói là có rất nhiều kiến thức chuyên môn. Vì ít người là chuyên gia về toàn bộ LAMP Stack và sau đó là cả JS. Vì vậy, trang web Notefab này là để hiển thị dịch vụ mới tuyệt vời này mà tôi đã phát triển (Được thành lập), một dịch vụ ghi chú tối ưu, thực sự là bộ não thứ 2 của bạn. Và phát triển Trang web đến mức đủ tốt để chúng tôi có thể giới thiệu nó cho các VC để huy động vốn. Khi chúng tôi đã nâng cấp vòng 1, sau đó tôi sẽ thuê một nhóm thiết kế CSS crack pot, để nâng cấp phần CSS của Trang web. Trong khi đó, tôi phải xoay sở với khả năng thành thạo CSS được thừa nhận là không quá xuất sắc của mình để phát triển Trang web để hiển thị trên màn hình bình thường. Trừ khi một trong các bạn là chuyên gia CSS muốn trở thành Đồng sáng lập và nhận chia sẻ cho công việc của bạn để cùng phát triển Trang web. Nếu có, hãy liên hệ, Nếu không, hãy ghi nhớ điều này trong trường hợp tôi có các câu hỏi sau này về các khía cạnh CSS của Trang web/Dịch vụ này đang được phát triển Trong CSS, chúng tôi có giá trị 4 có thể được sử dụng cho các thuộc tính như lề, định vị, chiều cao, chiều rộng, v.v. Tôi cảm thấy rằng tôi cần một nơi để ghi lại mọi thứ tôi biết về họ để nó có thể là tài liệu tham khảo cho bất kỳ ai muốn tìm hiểu sâu về điều 4Đối với bài viết này, tôi sẽ giải thích các chi tiết kỹ thuật về cách hoạt động của 4 ngay từ đầu và cách chúng tôi có thể tận dụng tối đa nó. Tất nhiên, sẽ có một số trường hợp sử dụng và ví dụGiới thiệuViệc sử dụng từ khóa 4 thay đổi từ tài sản này sang tài sản khác. Đối với bài viết này, tôi sẽ giải thích giá trị trong ngữ cảnh của từng thuộc tínhChiều rộng. Chiều rộng ban đầu của các phần tử cấp khối như 9 hoặc 0 là 4, khiến chúng chiếm toàn bộ không gian theo chiều ngang của khối chứa chúngTheo thông số CSS
Khi một phần tử có giá trị chiều rộng là 4, nó có thể có lề, phần đệm và đường viền mà không trở nên lớn hơn phần tử gốc của nó. Chiều rộng của hộp nội dung của nó sẽ là chính nội dung với phép trừ lề, phần đệm và đường viềnHãy xem mô hình mô phỏng ở trên là một ví dụ thực tế
0Tất cả mọi thứ đều ổn. Mục bị ràng buộc trong cha mẹ của nó Tuy nhiên, điều gì sẽ xảy ra nếu chúng ta thay đổi chiều rộng của mục thành 3 thay vì 4? 4Chiều rộng của mặt hàng là 6, là tổng của những điều sau đây
Nếu hướng là 7, thì 8 sẽ hoàn toàn bị bỏ qua. Trong trường hợp của chúng tôi, điều đó xảy ra. Tuy nhiên, nếu bố cục là 9, thì 90 sẽ bị bỏ quaThử nghiệm Các trường hợp sử dụng cho Giải thích những điều cơ bản là không đủ để chúng ta nắm bắt khái niệm, vì vậy tôi đã nghiên cứu để làm nổi bật một số trường hợp sử dụng thực tế cho 91Chiều rộng khác nhau giữa thiết bị di động và máy tính để bànChúng tôi có một nhóm các nút. Trên thiết bị di động, chúng tôi muốn chúng nằm cạnh nhau (mỗi trình bao bọc nút chiếm 193 phần tử gốc của nó), trong khi trên máy tính để bàn, mỗi phần tử phải chiếm toàn bộ chiều rộng của phần tử gốc của chúng. Làm thế nào để làm nó?
Tôi đã sử dụng flexbox để làm cho các nút xuất hiện cạnh nhau
Và trên máy tính để bàn, tôi cần mỗi cái có chiều rộng đầy đủ. Trong trường hợp đó, bạn có thể muốn sử dụng 94, phải không? 9Vì 95 là một phần tử khối, nên việc sử dụng 91 sẽ giúp nó lấp đầy không gian có sẵn của phần tử gốc của nó một cách độc đáoThử nghiệm Chiều cao. Khi đến với 98, mọi thứ đã khác. Chiều cao của một phần tử bằng với nội dung của nó trong đó giá trị mặc định là 4Xem xét ví dụ sau 2Để làm cho 20 chiếm toàn bộ chiều cao của thùng chứa của nó, chúng ta có thể sử dụng một trong các cách sau
9Lề và từ khóa Đối với lề, trường hợp sử dụng phổ biến nhất để căn giữa các phần tử có chiều rộng đã biết theo chiều ngang Xem xét ví dụ sau Hình chữ nhật màu xanh phải được căn giữa theo chiều ngang. Với mục đích đó, những điều sau đây nên được sử dụng 1Theo thông số CSS
Thử nghiệm Ký quỹ Một trường hợp sử dụng khác ít phổ biến hơn để căn giữa một phần tử được định vị tuyệt đối là 28. Khi chúng ta có một phần tử nên được căn giữa theo chiều ngang và chiều dọc bên trong cha của nó, chúng ta có thể muốn sử dụng 29 hoặc 90Để kỹ thuật trên hoạt động, chúng ta cần những điều sau đây
7 00Thử nghiệm Hộp linh hoạtSử dụng lề tự động với flexbox có thể rất hữu ích trong một số trường hợp sử dụng. Khi một mục con có biên độ 4, nó sẽ bị đẩy ra xa về phía đối diện. Ví dụ: nếu một mục linh hoạt có 93, nó sẽ được đẩy sang bên phảiHãy xem xét mô hình sau. Chúng tôi có hai hộp, xem xét rằng phụ huynh là một hộp chứa linh hoạt Chúng tôi muốn mục số 2 được đẩy sang bên phải. Lề tự động là hoàn hảo cho điều đó 01Không chỉ vậy, nó còn có thể hoạt động theo hướng ngang hoặc dọc. Xem ví dụ sau 02Ngoài ra, nếu chúng ta chỉ có một phần tử con, chúng ta có thể sử dụng 28 để căn giữa nó theo chiều ngang và chiều dọc 03Thuộc tính linh hoạt và từ khóa Trong flexbox, chúng ta có thể sử dụng 96 cho một mục con. Điều đó nghĩa là gì? . Khi một mục con có 96, điều đó tương đương với 98 có nghĩa là như sau 04Theo Mạng nhà phát triển Mozilla (MDN)
Một mục có 96 sẽ được định kích thước dựa trên chiều rộng và chiều cao của nó, nhưng nó có thể tăng hoặc giảm tùy thuộc vào không gian thừa có sẵn. Tôi đã không biết về điều đó trước khi nghiên cứu cho bài viết này 05 06Thử nghiệm Lưới CSS và Đặt cột Trong CSS Grid, chúng ta có thể đặt một cột thành 4, nghĩa là chiều rộng của nó sẽ dựa trên độ dài nội dung của nó. Xem bên dưới để biết ý tôi là gì 07Lề và Khi lưới CSS được sử dụng, lề tự động có thể được sử dụng để đạt được kết quả tương tự như flexbox. Khi chúng ta có một lưới và trong số các mục của lưới có 93 chẳng hạn, nó sẽ được đẩy sang bên phải và chiều rộng của nó sẽ dựa trên độ dài nội dung của nóXem xét ví dụ sau Chúng tôi muốn chiều rộng của mục số 1 dựa trên nội dung của nó chứ không phải trên khu vực lưới. Bằng cách sử dụng 93, chúng ta có thể đạt được những điều sau 08Bố cục từ phải sang tráiĐiều đáng nói là sử dụng 93 hoặc 17 có thể hoạt động tốt cho các bố cục từ trái sang phải, như tiếng Anh. Tuy nhiên, hãy cẩn thận để lật các giá trị đó khi làm việc trên một trang web đa ngôn ngữ. Tốt hơn nữa, tôi khuyên bạn nên sử dụng các thuộc tính flexbox hoặc grid trong trường hợp công việc có thể được thực hiện với chúng. Nếu không, thì hãy sử dụng lề tự động là phương án cuối cùng của bạn và thay vào đó, hãy sử dụng các thuộc tính logic CSStài sản trànKhi chúng ta có một phần tử, chúng ta nên nghĩ về nội dung tối thiểu và tối đa mà nó cần. Nếu nội dung vượt quá mức tối đa, thì chúng tôi cần hiển thị thanh cuộn Bạn có thể muốn sử dụng như sau 09Tuy nhiên, điều này có thể hiển thị thanh cuộn ngay cả khi chiều cao nội dung ngắn. Xem ví dụ bên dưới Trong Chrome Windows, thanh cuộn luôn được hiển thị. Đây là hành vi không chính xác và khó hiểu Thay vào đó, bằng cách sử dụng từ khóa 4, chúng tôi có thể đảm bảo rằng thanh cuộn sẽ không được hiển thị trừ khi chiều cao nội dung lớn hơn vùng chứa của nóTheo MDN
40Thuộc tính định vịĐối với các thuộc tính định vị CSS 19, 70, 71 và 72, chúng ta có thể sử dụng từ khóa 4 làm giá trị cho chúng. Điều tiếp theo tôi sẽ giải thích là mới đối với tôi và tôi đã học được nó khi nghiên cứu cho bài viết nàyHãy xem xét mô hình sau Chúng tôi có một trình bao bọc có phần đệm và có một mục con. Mục con được định vị tuyệt đối và vẫn không có bất kỳ thuộc tính định vị nào với nó 41Trong CSS, có một giá trị ban đầu/mặc định cho mỗi thuộc tính. Nếu tôi kiểm tra mục con và chuyển đến các kiểu được tính toán, bạn đoán giá trị của thuộc tính 72 là bao nhiêu?Giá trị mặc định cho 72 là 76. Tại sao điều đó xảy ra ngay cả khi tôi không đặt nó? . Cha mẹ đó có 78, vì vậy mục con được định vị 16px từ trên xuống và bên trái. Thú vị, không?Bây giờ, bạn có thể hỏi, lợi ích của việc đó là gì? Giả sử rằng mục con phải được đặt ở vị trí 79 từ bên trái trên các kích thước khung nhìn nhỏ và đối với máy tính để bàn, mục đó sẽ trở lại vị trí mặc định 42Làm cách nào để đặt lại 72 trên các khung nhìn lớn hơn? . Xem mô hình dưới đây để biết ý tôi là gìĐể đặt lại mục con theo đúng cách, chúng ta nên sử dụng 002. Theo MDN
Điều đó có nghĩa là nó sẽ tôn trọng phần đệm và nó sẽ không dán phần tử con vào cạnh phần tử cha của nó 43Điều tương tự cũng áp dụng cho tài sản 19. Đối với các thuộc tính 70 và 71, giá trị được tính toán mặc định của chúng lần lượt bằng với chiều rộng và chiều cao của phần tửThử nghiệm Các trường hợp sử dụng và ví dụĐiều đáng nói là các trường hợp sử dụng bên dưới có thể không đủ, nhưng tôi đã cố gắng thêm một số và hy vọng chúng sẽ hữu ích cho bạn Mũi tên chú giải công cụĐối với một chú giải công cụ, chúng tôi cần một mũi tên chỉ để làm cho nó rõ ràng hơn cho người dùng. Trong trường hợp chúng tôi đang làm việc trên một hệ thống thiết kế, chúng tôi nên tính đến nhiều trạng thái. Ví dụ: chú giải công cụ có mũi tên chỉ sang trái và một mũi tên khác chỉ sang phải 44Lưu ý rằng tôi đã sử dụng 002 để ghi đè lên 007 trong lần triển khai ban đầu. Đối với thông tin của bạn, điều này được sử dụng rất nhiều và tôi khuyên bạn nên sử dụng những điều sau đây 45Bằng cách sử dụng 3, chúng tôi đã tránh sử dụng giá trị được mã hóa cứng (chiều rộng mũi tên) có thể bị lỗi nếu chúng tôi thay đổi kích thước mũi tên. Đây là một giải pháp chứng minh tương lai hơnThành phần thẻBạn có thể có một thành phần thẻ, với một hành động ở trên cùng bên trái của nó, nó có thể chỉ nhằm mục đích trang trí hoặc có thể là một hành động hữu ích. Không có vấn đề gì, bạn nên tính đến việc có nó theo cả hai hướng Bằng cách sử dụng 002, chúng tôi có thể thiết lập lại triển khai cơ bản của nó một cách dễ dàng 46Flexbox và ký quỹ tự độngKhi nói đến flexbox, khả năng là vô tận. Bằng cách kết hợp nó với lề tự động, chúng tôi có thể tạo bố cục mạnh mẽ Xem xét ví dụ sau Chúng tôi có một hàng chứa tiêu đề, mô tả và nút hành động ở bên phải. Chúng tôi muốn nút hành động dính vào bên phải 47 48Và đó là nó. Bằng cách sử dụng 93, hành động được đẩy sang góc ngoài cùng bên phải. Thậm chí tốt hơn, chúng tôi có thể sử dụng các thuộc tính logic CSS nếu bạn đang xây dựng một trang web đa ngôn ngữ. CSS sẽ giống như sau 49Nếu bạn muốn tìm hiểu thêm về kiểu dáng Từ phải sang trái, tôi đã viết một hướng dẫn mở rộng về điều đó Lưới CSS và Lề tự độngKhi thêm lề vào các mục lưới, đó có thể là giá trị cố định, tỷ lệ phần trăm hoặc tự động. Tôi quan tâm hơn đến 4 cho bài viết này. Hãy xem xét những điều sau đây 0 1Tôi muốn căn nhãn vào cạnh trái của đầu vào. Để làm được điều đó, tôi cần áp dụng những điều sau đây 2thiết kế phương thứcKhi làm việc trên một thiết kế theo phương thức, điều quan trọng là phải tính đến điều gì sẽ xảy ra nếu chiều cao nội dung lớn. Đối với trường hợp này, chúng ta có thể sử dụng bên dưới Chiều cao tự động được tính như thế nào?Khi sử dụng từ khóa auto , chiều cao được tính dựa trên khu vực nội dung của phần tử trừ khi được chỉ định rõ ràng . Điều này có nghĩa là giá trị dựa trên tỷ lệ phần trăm vẫn là giá trị của khu vực nội dung thành phần.
Chiều cao có tự động theo CSS mặc định không?Giá trị mặc định là "tự động" . Nếu các thuộc tính chiều cao tối thiểu và chiều cao tối đa được sử dụng, nó sẽ ghi đè thuộc tính chiều cao. Nếu chiều cao được đặt thành một trong các giá trị số như (r)em, px hoặc % và nếu nội dung không vừa với chiều cao cụ thể, điều này sẽ gây tràn.
Chiều cao có tự động mặc định không?Chiều cao của phần tử không bao gồm phần đệm, đường viền hoặc lề.
. Định nghĩa và cách sử dụng Làm cách nào để đặt chiều cao đáp ứng trong CSS?Ví dụ về chiều cao và chiều rộng của CSS . Set the height and width of a element: div { height: 200px; width: 50%; .. . Set the height and width of another
element: div { height: 100px; width: 500px; .. . This element has a height of 100 pixels and a max-width of 500 pixels: div { max-width: 500px; height: 100px;. |