sách gpt4 ai đã đi

Lớp đẩy/kéo có tác dụng gì trong hệ thống lưới?

In lại Tác giả: Technical Little Cat Thời gian cập nhật: 2023-10-29 11:18:54 33 4
mua khóa gpt4 Nike

Khi tôi xem xét nhiều hệ thống và khung lưới CSS, chúng thường có thiết lập cột và hàng chuẩn với độ rộng theo phần trăm. Ví dụ như thế này:

Cột lưới chuẩn:

.cột-10 {
chiều rộng: 83.33333%;
chiều rộng: calc(100% / 12 * 10);
chiều rộng: -webkit-calc(100% / 12 * 10);
chiều rộng: -moz-calc(100% / 12 * 10); }

Tuy nhiên, ngoài ra, tôi thường thấy các lớp khác, chẳng hạn như.xô hoặc.sự lôi kéo. Ví dụ như thế này:

Kiểu đẩy/kéo:

.đẩy-10 {
bên trái: 83.33333%;
bên trái: calc(100% / 12 * 10);
bên trái: -webkit-calc(100% / 12 * 10);
bên trái: -moz-calc(100% / 12 * 10); }

.kéo-10 {
bên trái: -83,33333%;
bên trái: calc(-100% / 12 * 10);
bên trái: -webkit-calc(-100% / 12 * 10);
bên trái: -moz-calc(-100% / 12 * 10); }

Tôi đã bắt đầu sử dụng hệ thống lưới rất nhiều, nhưng tôi chưa bao giờ cần sử dụng những lớp này. Có lẽ vì tôi không biết họ đang làm gì. Vậy câu hỏi của tôi là:

  1. Các lớp học đẩy thường làm gì?
  2. Lớp kéo thường làm gì?
  3. Bạn muốn sử dụng từng loại khi nào?
  4. Bạn sử dụng từng cái như thế nào?
  5. Một ví dụ cụ thể được đưa ra để chứng minh điều này.

1 Câu trả lời

Chúng được sử dụng để sắp xếp lại nội dung. Giả sử bạn muốn nội dung của mình xuất hiện đầu tiên trong thẻ HTML , theo sau là thanh bên, nhưng bạn lại muốn thanh bên xuất hiện đầu tiên trên màn hình (bên trái), theo sau là nội dung (bên phải).

Lấy Bootstrap làm ví dụ:


Đây là nội dung xuất hiện đầu tiên trong đánh dấu, nhưng có vẻ như nó xuất hiện thứ hai trong chế độ xem.

Đây là thanh bên, đứng thứ hai trong mã đánh dấu, nhưng có vẻ như đứng đầu trong chế độ xem.


col-sm-đẩy-3 Di chuyển cột 25% từ bên trái (bên trái: 25%).

col-sm-kéo-9 Di chuyển cột sang phải 75% (đúng: 75%).

Vì vậy, trong trường hợp này, cột lớn được "đẩy" đến chiều rộng của cột nhỏ và cột nhỏ được "kéo" đến chiều rộng của cột lớn.

Bản demo sử dụng Bootstrap


Giống như thế này:

.đẩy-10 {
bên trái: calc(100% / 12 * 10);
}

Nghĩa là, lấy chiều rộng của vùng chứa (100%), chia cho số cột trong lưới (12), sau đó nhân với số cột bạn muốn đẩy vào (10). Còn lại cho bạn 83.333333333%.

Giới thiệu về css - Các lớp đẩy/kéo có tác dụng gì trong hệ thống lưới? , chúng tôi đã tìm thấy một câu hỏi tương tự trên Stack Overflow: https://stackoverflow.com/questions/23556230/

33 4 0
Công nghệ mèo con
Hồ sơ cá nhân

Tôi là một lập trình viên xuất sắc, rất giỏi!

Nhận phiếu giảm giá Didi Taxi miễn phí
Mã giảm giá Didi Taxi
Giấy chứng nhận ICP Bắc Kinh số 000000
Hợp tác quảng cáo: 1813099741@qq.com 6ren.com