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ị

 class="group">
     class="group__item">
         class="c-button">Sign In
    
class="group__item"> class="c-button c-button--ghost">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
 class="group">
     class="group__item">
         class="c-button">Sign In
    
 class="group__item">
 class="c-button c-button--ghost">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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
 class="group__item">
 class="c-button c-button--ghost">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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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ính

Chiều rộng.
4

Chiều rộng ban đầu của các phần tử cấp khối như

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

9 hoặc
.group {
    display: flex;
}

.group__item {
    width: 50%;
}
0 là
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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úng

Theo 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à

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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ền

Chiều cao tự động làm việc css như thế nào?

Hãy xem mô hình mô phỏng ở trên là một ví dụ thực tế

 class="wrapper">
   class="item">

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

0

Tất cả mọi thứ đều ổn. Mục bị ràng buộc trong cha mẹ của nó

Chiều cao tự động làm việc css như thế nào?

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ì
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

4?

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

4

Chiều cao tự động làm việc css như thế nào?

Chiề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ì
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

90 sẽ bị bỏ qua

Chiều cao tự động làm việc css như thế nào?

Thử nghiệm

Các trường hợp sử dụng cho
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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

91

Chiều rộng khác nhau giữa thiết bị di động và máy tính để bàn

Chiều cao tự động làm việc css như thế nào?

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ó?

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

94, phải không?

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

9

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

95 là một phần tử khối, nên việc sử dụng
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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 đáo

Thử nghiệm

Chiều cao.
4

Khi đến với

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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à
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

4

Xem xét ví dụ sau

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

2

Để làm cho

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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

  1. Đặt chiều cao cố định cho
     class="group">
         class="group__item">
             class="c-button">Sign In
        
         class="group__item">
             class="c-button c-button--ghost">Register
        
    
    
    21, sau đó thêm
     class="group">
         class="group__item">
             class="c-button">Sign In
        
         class="group__item">
             class="c-button c-button--ghost">Register
        
    
    
    22 cho phần tử
     class="group">
         class="group__item">
             class="c-button">Sign In
        
         class="group__item">
             class="c-button c-button--ghost">Register
        
    
    
    20
  2. Sử dụng flexbox cho
     class="group">
         class="group__item">
             class="c-button">Sign In
        
         class="group__item">
             class="c-button c-button--ghost">Register
        
    
    
    21 và nó sẽ kéo dài mục con
     class="group">
         class="group__item">
             class="c-button">Sign In
        
         class="group__item">
             class="c-button c-button--ghost">Register
        
    
    
    20 theo mặc định

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

9

Chiều cao tự động làm việc css như thế nào?

Lề và từ khóa
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

Chiều cao tự động làm việc css như thế nào?

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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

1

Theo 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

Chiều cao tự động làm việc css như thế nào?

Thử nghiệm

Ký quỹ
4 với các yếu tố được định vị tuyệt đối

Chiều cao tự động làm việc css như thế nào?

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à

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

29 hoặc
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

90

Để kỹ thuật trên hoạt động, chúng ta cần những điều sau đây

  1. Chiều rộng và chiều cao được thiết lập
  2. Phần tử phải có
     class="group">
         class="group__item">
             class="c-button">Sign In
        
         class="group__item">
             class="c-button c-button--ghost">Register
        
    
    
    91

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

7

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

00

Thử 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 độ

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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ó
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

93, nó sẽ được đẩy sang bên phải

Hã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

Chiều cao tự động làm việc css như thế nào?

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 đó

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

01

Chiều cao tự động làm việc css như thế nào?

Không chỉ vậy, nó còn có thể hoạt động theo hướng ngang hoặc dọc. Xem ví dụ sau

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

02

Chiều cao tự động làm việc css như thế nào?

Ngoài ra, nếu chúng ta chỉ có một phần tử con, chúng ta có thể sử dụng

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

28 để căn giữa nó theo chiều ngang và chiều dọc

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

03

Chiều cao tự động làm việc css như thế nào?

Thuộc tính linh hoạt và từ khóa
4

Trong flexbox, chúng ta có thể sử dụng

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

96 cho một mục con. Điều đó nghĩa là gì? . Khi một mục con có
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

96, điều đó tương đương với
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

98 có nghĩa là như sau

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

04

Theo 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ó

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

05

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

06

Chiều cao tự động làm việc css như thế nào?

Thử nghiệm

Lưới CSS và
4

Đặt cột
4

Chiều cao tự động làm việc css như thế nào?

Trong CSS Grid, chúng ta có thể đặt một cột thành

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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ì

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

07

Lề và
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ó

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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

Chiều cao tự động làm việc css như thế nào?

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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

93, chúng ta có thể đạt được những điều sau

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

08

Chiều cao tự động làm việc css như thế nào?

Bố cục từ phải sang trái

Điều đáng nói là sử dụng

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

93 hoặc
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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 CSS

tà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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

09

Tuy 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

Chiều cao tự động làm việc css như thế nào?

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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

40

Thuộc tính định vị

Đối với các thuộc tính định vị CSS

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

19,
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

70,
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

71 và
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

72, chúng ta có thể sử dụng từ khóa
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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ày

Hãy xem xét mô hình sau

Chiều cao tự động làm việc css như thế nào?

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ó

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

41

Trong 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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

72 là bao nhiêu?

Chiều cao tự động làm việc css như thế nào?

Giá trị mặc định cho

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

72 là
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

76. Tại sao điều đó xảy ra ngay cả khi tôi không đặt nó? . Cha mẹ đó có
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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í

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

42

Làm cách nào để đặt lại

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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ì

Chiều cao tự động làm việc css như thế nào?

Để đặt lại mục con theo đúng cách, chúng ta nên sử dụng

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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ó

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

43

Điều tương tự cũng áp dụng cho tài sản

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

19. Đối với các thuộc tính
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

70 và
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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

Chiều cao tự động làm việc css như thế nào?

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

44

Lưu ý rằng tôi đã sử dụng

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

002 để ghi đè lên
 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

45

Bằ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ơn

Thà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

Chiều cao tự động làm việc css như thế nào?

Bằng cách sử dụng

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

46

Flexbox 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

Chiều cao tự động làm việc css như thế nào?

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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

47

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

48

Và đó là nó. Bằng cách sử dụng

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

49

Nế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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

4 cho bài viết này. Hãy xem xét những điều sau đây

Chiều cao tự động làm việc css như thế nào?

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

0

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

1

Tô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

 class="group">
     class="group__item">
         class="c-button">Sign In
    
     class="group__item">
         class="c-button c-button--ghost">Register
    

2

Chiều cao tự động làm việc css như thế nào?

thiết kế phương thức

Chiều cao tự động làm việc css như thế nào?

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;.