Rộng trong css là gì?
|
Không quá nhanh. Nó không hoàn toàn dễ dàng. Tôi chắc chắn rằng các nhà phát triển CSS ở mọi cấp độ kỹ năng đã thử làm điều gì đó tương tự như những gì tôi vừa mô tả, với những kết quả kỳ lạ cuối cùng dẫn đến việc phải vò đầu bứt tai và nhún vai sử dụng thử nghiệm với độ rộng tuyệt đối cho đến khi chúng tôi tìm thấy độ rộng phù hợp. Đây chỉ là một trong những điều trong CSS có vẻ dễ hiểu (và thực sự, nó nên như vậy), nhưng đôi khi không phải vậy — vì cách mà tỷ lệ phần trăm hoạt động trong CSS Show
Sử dụng box-sizing: border-boxĐây ban đầu là một bài đăng cũ hơn không xem xét khả năng sử dụng thuộc tính Điều này đảm bảo phần đệm được tính vào chiều rộng của các phần tử của bạn. Tất nhiên, không phải tất cả các dự án đều sử dụng điều này và điều này không khắc phục được thực tế là lợi nhuận có thể ảnh hưởng đến vị trí của một phần tử bên trong. Nhưng trong hầu hết các trường hợp, tôi thực sự khuyên bạn nên sử dụng phần đệm bên trong hộp thay vì lề để đảm bảo bạn không gặp sự cố này Các khối không cần 100% chiều rộngKhi chúng tôi hiểu sự khác biệt giữa các phần tử cấp khối và các phần tử nội tuyến, chúng tôi sẽ biết rằng một phần tử khối (chẳng hạn như
This paragraph is 400pixels wide and 100 pixels high
Hầu hết các nhà phát triển CSS đều hiểu khái niệm này khá rõ, nhưng tôi nghĩ sẽ hữu ích nếu chỉ ra nó ở đây như một phần giới thiệu để giải thích cách hoạt động của tỷ lệ phần trăm khi được sử dụng trên thuộc tính
This paragraph is 400pixels wide and 100 pixels high
Khi bạn cho một phần tử có chiều rộng 100% trong CSS, về cơ bản, bạn đang nói “Làm cho vùng nội dung của phần tử này chính xác bằng với chiều rộng rõ ràng của phần tử gốc — nhưng chỉ khi phần tử gốc của nó có chiều rộng rõ ràng. ” Vì vậy, nếu bạn có vùng chứa chính rộng 400px, phần tử con có chiều rộng 100% cũng sẽ rộng 400px và sẽ vẫn phải tuân theo lề, phần đệm và đường viền — bên trên cài đặt chiều rộng 100%. Hình ảnh dưới đây cố gắng minh họa điều này Và tất nhiên, quy tắc chính xác tương tự sẽ áp dụng cho bất kỳ giá trị phần trăm nào. Khu vực nội dung sẽ là tỷ lệ phần trăm của cài đặt chiều rộng được đặt rõ ràng của cha mẹ LƯU Ý THÊM. Chiều rộng của vùng nội dung con sẽ bằng chiều rộng của vùng nội dung của cha mẹ, nhưng sẽ không di chuyển ra ngoài cha mẹ trừ khi phần đệm hoặc lề của chính nó ảnh hưởng đến nó. Cảm ơn đã làm rõ điều này Trong nhiều trường hợp, áp dụng
This paragraph is 400pixels wide and 100 pixels high
Một trường hợp bạn có thể sử dụng
This paragraph is 400pixels wide and 100 pixels high
Một trường hợp khác mà điều này là cần thiết là khi sử dụng flexbox, đôi khi yêu cầu một phần tử được đặt thành 100% chiều rộng để chiếm toàn bộ dòng và ghi đè cách thức tự nhiên của flexbox để tạo khoảng cách đều các phần tử trên một dòng. Nhưng điều này phụ thuộc vào bố cục mà bạn đang cố gắng đạt được Và bài học nhỏ này nhắc lại một trong những điều khó chịu về bố cục CSS — đó là bạn không thể cung cấp cho một phần tử chiều cao bằng với phần tử cha của nó, trừ khi phần tử gốc được cung cấp (bạn đoán thế) một cài đặt chiều cao rõ ràng. Sự khác biệt duy nhất là trong trường hợp này, “tự động” sẽ không hoạt động mà thay vào đó là “chiều cao. 100%” là bắt buộc Và điều tuyệt vời là tất cả các trình duyệt (thậm chí IE6 và IE7) đều sử dụng tỷ lệ phần trăm chiều cao giống hệt nhau (loại trừ lỗi IE), miễn là bạn đặt chiều cao rõ ràng cho phần tử gốc, phần tử con sẽ lấp đầy chiều cao tới 100% như Bạn nghĩ sao? Bạn đã thấy đường viền bao quanh mọi hộp tức là. phần tử, phần đệm có thể xuất hiện bên trong mỗi hộp và lề có thể bao quanh chúng. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách chúng ta có thể thay đổi kích thước của hộp Chúng tôi có các thuộc tính sau cho phép bạn kiểm soát kích thước của hộp Thuộc tính height được sử dụng để đặt chiều cao của hộp Thuộc tính width được sử dụng để đặt chiều rộng của hộp Thuộc tính line-height dùng để thiết lập chiều cao của dòng văn bản Thuộc tính max-height được sử dụng để đặt chiều cao tối đa mà một hộp có thể được Thuộc tính chiều cao tối thiểu được sử dụng để đặt chiều cao tối thiểu mà một hộp có thể được Thuộc tính chiều rộng tối đa được sử dụng để đặt chiều rộng tối đa mà một hộp có thể được Thuộc tính chiều rộng tối thiểu được sử dụng để đặt chiều rộng tối thiểu mà một hộp có thể được Thuộc tính height và width cho phép bạn thiết lập chiều cao và chiều rộng cho hộp. Chúng có thể nhận các giá trị có độ dài, tỷ lệ phần trăm hoặc từ khóa auto Đây là một ví dụ -
This paragraph is 400pixels wide and 100 pixels high
Nó sẽ tạo ra kết quả sau - Thuộc tính line-height cho phép bạn tăng khoảng cách giữa các dòng văn bản. Giá trị của thuộc tính line-height có thể là số, độ dài hoặc tỷ lệ phần trăm Đây là một ví dụ -
This paragraph is 400pixels wide and 100 pixels high and here line height is 30pixels.
This paragraph is 400 pixels wide and 100 pixels high and here line height is 30pixels.
Nó sẽ tạo ra kết quả sau - Thuộc tính max-height cho phép bạn chỉ định chiều cao tối đa của hộp. Giá trị của thuộc tính chiều cao tối đa có thể là số, độ dài hoặc tỷ lệ phần trăm LƯU Ý - Thuộc tính này không hoạt động trong Netscape 7 hoặc IE 6 Đây là một ví dụ -
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
This paragraph is 400px wide and max height is 10px
Nó sẽ tạo ra kết quả sau - Thuộc tính chiều cao tối thiểu cho phép bạn chỉ định chiều cao tối thiểu của hộp. Giá trị của thuộc tính chiều cao tối thiểu có thể là số, độ dài hoặc tỷ lệ phần trăm LƯU Ý - Thuộc tính này không hoạt động trong Netscape 7 hoặc IE 6 Đây là một ví dụ -
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
This paragraph is 400px wide and min height is 200px
Nó sẽ tạo ra kết quả sau - Thuộc tính chiều rộng tối đa cho phép bạn chỉ định chiều rộng tối đa của hộp. Giá trị của thuộc tính chiều rộng tối đa có thể là số, độ dài hoặc tỷ lệ phần trăm LƯU Ý - Thuộc tính này không hoạt động trong Netscape 7 hoặc IE 6 Đây là một ví dụ -
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
This paragraph is 200px high and max width is 100px
Điều này sẽ tạo ra kết quả sau - Thuộc tính chiều rộng tối thiểu cho phép bạn chỉ định chiều rộng tối thiểu của hộp. Giá trị của thuộc tính chiều rộng tối thiểu có thể là số, độ dài hoặc tỷ lệ phần trăm |
