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.
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ị
Sign In
Register
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
Sign In
Register
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
Sign In
Register
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ệu
Việc sử dụng từ khóa
Sign In
Register
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.
Sign In
Register
4
Chiều rộng ban đầu của các phần tử cấp khối như
Sign In
Register
9 hoặc .group {
display: flex;
}
.group__item {
width: 50%;
}
0 là
Sign In
Register
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
'lề-trái' + 'đường viền-trái-rộng' + 'đệm-trái' + 'chiều rộng' + 'đệm-phải' + 'độ rộng đường viền bên phải' + 'lề-phải' = chiều rộng của khối chứa
Khi một phần tử có giá trị chiều rộng là
Sign In
Register
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ế
Sign In
Register
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
.group {
display: flex;
}
.group__item {
width: 50%;
}
3 thay vì
Sign In
Register
4?
Sign In
Register
4Chiều rộng của mặt hàng là
.group {
display: flex;
}
.group__item {
width: 50%;
}
6, là tổng của những điều sau đây'border-left-width' + 'padding-left' + 'width' + 'padding-right' + 'border-right-width' = chiều rộng của mục 15 + 16 + 506 + 16 + 15 = 506px
Nếu hướng là
.group {
display: flex;
}
.group__item {
width: 50%;
}
7, thì .group {
display: flex;
}
.group__item {
width: 50%;
}
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à .group {
display: flex;
}
.group__item {
width: 50%;
}
9, thì
Sign In
Register
90 sẽ bị bỏ quaThử nghiệm
Các trường hợp sử dụng cho
Sign In
Register
91
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
Sign In
Register
91Chiều rộng khác nhau giữa thiết bị di động và máy tính để bàn
Chú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ó?
Sign In
Register
Tôi đã sử dụng flexbox để làm cho các nút xuất hiện cạnh nhau
.group {
display: flex;
}
.group__item {
width: 50%;
}
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
Sign In
Register
94, phải không?
Sign In
Register
9Vì
Sign In
Register
95 là một phần tử khối, nên việc sử dụng
Sign In
Register
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.
Sign In
Register
4
Khi đến với
Sign In
Register
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à
Sign In
Register
4Xem xét ví dụ sau
Sign In
Register
2Để làm cho
Sign In
Register
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- Đặt chiều cao cố định cho
Sign In
Register
21, sau đó thêm
Sign In
Register
22 cho phần tử
Sign In
Register
20 - Sử dụng flexbox cho
Sign In
Register
21 và nó sẽ kéo dài mục con
Sign In
Register
20 theo mặc định
Sign In
Register
9Lề và từ khóa
Sign In
Register
4
Đố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
Sign In
Register
1Theo thông số CSS
Nếu cả 'lề trái' và 'lề phải' đều là 'tự động', giá trị được sử dụng của chúng bằng nhau. Điều này căn giữa phần tử theo chiều ngang đối với các cạnh của khối chứa
Thử nghiệm
Ký quỹ
Sign In
Register
4 với các yếu tố được định vị tuyệt đối
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à
Sign In
Register
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
Sign In
Register
29 hoặc
Sign In
Register
90Để kỹ thuật trên hoạt động, chúng ta cần những điều sau đây
- Chiều rộng và chiều cao được thiết lập
- Phần tử phải có
Sign In
Register
91
Sign In
Register
7
Sign In
Register
00Thử nghiệm
Hộp linh hoạt
Sử 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 độ
Sign In
Register
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ó
Sign In
Register
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 đó
Sign In
Register
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
Sign In
Register
02Ngoài ra, nếu chúng ta chỉ có một phần tử con, chúng ta có thể sử dụng
Sign In
Register
28 để căn giữa nó theo chiều ngang và chiều dọc
Sign In
Register
03Thuộc tính linh hoạt và từ khóa
Sign In
Register
4
Trong flexbox, chúng ta có thể sử dụng
Sign In
Register
96 cho một mục con. Điều đó nghĩa là gì? . Khi một mục con có
Sign In
Register
96, điều đó tương đương với
Sign In
Register
98 có nghĩa là như sau
Sign In
Register
04Theo Mạng nhà phát triển Mozilla [MDN]
Mục có kích thước theo thuộc tính chiều rộng và chiều cao của nó, nhưng lớn lên để hấp thụ mọi không gian trống thừa trong hộp chứa linh hoạt và thu nhỏ đến kích thước tối thiểu để vừa với hộp chứa. Điều này tương đương với cài đặt “flex. 1 1 ô tô”
Một mục có
Sign In
Register
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
Sign In
Register
05
Sign In
Register
06Thử nghiệm
Lưới CSS và
Sign In
Register
4
Đặt cột
Sign In
Register
4
Trong CSS Grid, chúng ta có thể đặt một cột thành
Sign In
Register
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ì
Sign In
Register
07Lề và
Sign In
Register
4 Lề
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ó
Sign In
Register
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
Sign In
Register
93, chúng ta có thể đạt được những điều sau
Sign In
Register
08Bố cục từ phải sang trái
Điều đáng nói là sử dụng
Sign In
Register
93 hoặc
Sign In
Register
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àn
Khi 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
Sign In
Register
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
Sign In
Register
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
Phụ thuộc vào tác nhân người dùng. Nếu nội dung vừa với hộp đệm, nội dung đó trông giống như hiển thị, nhưng vẫn thiết lập bối cảnh định dạng khối mới. Trình duyệt máy tính để bàn cung cấp thanh cuộn nếu nội dung tràn
Sign In
Register
40Thuộc tính định vị
Đối với các thuộc tính định vị CSS
Sign In
Register
19,
Sign In
Register
70,
Sign In
Register
71 và
Sign In
Register
72, chúng ta có thể sử dụng từ khóa
Sign In
Register
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ó
Sign In
Register
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
Sign In
Register
72 là bao nhiêu?Giá trị mặc định cho
Sign In
Register
72 là
Sign In
Register
76. Tại sao điều đó xảy ra ngay cả khi tôi không đặt nó? . Cha mẹ đó có
Sign In
Register
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í
Sign In
Register
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
Sign In
Register
42Làm cách nào để đặt lại
Sign In
Register
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
Sign In
Register
002. Theo MDN
Phần tử được định vị ở nơi nó sẽ được định vị theo chiều ngang nếu nó là phần tử tĩnh
Đ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ó
Sign In
Register
43Điều tương tự cũng áp dụng cho tài sản
Sign In
Register
19. Đối với các thuộc tính
Sign In
Register
70 và
Sign In
Register
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
Sign In
Register
44Lưu ý rằng tôi đã sử dụng
Sign In
Register
002 để ghi đè lên
Sign In
Register
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
Sign In
Register
45Bằng cách sử dụng
.group {
display: flex;
}
.group__item {
width: 50%;
}
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
Sign In
Register
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
Sign In
Register
46Flexbox và ký quỹ tự động
Khi 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
Sign In
Register
47
Sign In
Register
48Và đó là nó. Bằng cách sử dụng
Sign In
Register
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
Sign In
Register
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ự động
Khi 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
Sign In
Register
4 cho bài viết này. Hãy xem xét những điều sau đây
Sign In
Register
0
Sign In
Register
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
Sign In
Register
2thiết kế phương thức
Khi 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;.