Phần tử ngăn xếp css

Một trong những lợi ích chính của việc sử dụng CSS là bạn không còn bị buộc phải sắp xếp các trang web của mình thành các bảng. Khả năng bố cục của CSS cung cấp cho bạn toàn quyền kiểm soát vị trí và kích thước của tất cả các thành phần trang

Nếu bạn đã thử trình bày một trang có các bảng, thì trước đây có lẽ bạn đã từng bực bội vì trình duyệt của bạn không thể hiển thị trang của bạn chính xác như bạn muốn. Cấu trúc bảng không phải là thiết bị bố cục trang linh hoạt nhất vì chúng không thực sự được thiết kế cho mục đích này. Tuy nhiên, giờ đây, với một số hỗ trợ trình duyệt đáng tin cậy trong thế hệ trình duyệt hiện tại, bạn có một tùy chọn mới và được cải thiện nhiều

Trang này được cập nhật lần cuối vào ngày 21-08-2012

Làm việc với div

Các

phần tử rất phù hợp để tiếp quản từ các bảng dưới dạng công cụ bố cục. Nó là một thành phần cấp độ khối được sử dụng để chia trang thành các phần hợp lý và có thể chứa bất cứ thứ gì bạn cần bên trong nó. Bạn có thể có các khối văn bản trong div và sau đó đặt chúng lại với nhau trong một bố cục. Bạn có quyền tự do vô hạn, với khả năng thêm các khối này hoặc “các lớp” chồng lên nhau. Kiểm tra ví dụ này

Thẻ div có một vài thuộc tính của riêng nó (tiết kiệm cho align="left | right | center"), với tất cả định dạng của nó được áp dụng thông qua biểu định kiểu. Để thiết lập một khối điều hướng đơn giản, chúng tôi sẽ sử dụng mã như thế này (với CSS nằm trong khối kiểu hoặc)

div#navigation {chiều rộng. 200px; . xám; . 10px;

...navigation links...

Mã ví dụ này sử dụng một số mã CSS rất đơn giản. Tất cả các phần tử cấp độ khối có thể có thuộc tính chiều rộng, được chỉ định theo đơn vị hoặc theo tỷ lệ phần trăm, sau đó tôi chỉ cần thêm màu nền và một số khoảng trống xung quanh nội dung div

yếu tố nổi

Vì các bộ phận là cấp khối (i. e. , chúng mặc định là 100% chiều rộng màn hình có sẵn và thêm ngắt dòng giữa chúng), tất cả chúng sẽ chỉ xếp chồng lên nhau bên dưới trừ khi bạn định vị chúng theo một cách nào đó. Cách đơn giản nhất để làm điều này là sử dụng thuộc tính float của CSS, xương sống của hầu hết các bố cục CSS. Bạn có thể di chuyển bất kỳ phần tử nào sang trái hoặc phải và nó sẽ tự căn chỉnh sang một bên của bất kỳ phần tử nào mà nó chứa bên trong

# cột1 {phao. bên trái; . 200px; . 10px;
# cột2 {phao. bên trái; . 200px; . 20px;

Để tạo bố cục theo cột, bạn chỉ cần di chuyển tất cả các phần chia cột về cùng một phía và chúng sẽ xếp cạnh nhau, miễn là chúng phù hợp. Bố cục nội dung theo cách này có những lợi ích ngay lập tức như tải xuống liên tục (khi văn bản được tải, nó sẽ được hiển thị trên trang ngay lập tức, vì vậy khách truy cập của bạn có thể đọc khi trang đang hình thành xung quanh văn bản). Bạn cũng có thể đặt lề và phần đệm cụ thể cho từng cột, giúp bạn tự do hơn trong việc sắp xếp nội dung của mình. Dưới đây là một ví dụ về mã giống như CSS ở trên, với cả hai phần tử div đều có dấu phẩy. bên trái;

Với các phần tử nổi này, bạn có thể bắt chước cấu trúc bảng và có trang của mình ở bố cục truyền thống mà không có tất cả các nhược điểm của bảng. Các phần tử nổi cần thực hành một chút (đặc biệt nếu các cột không có cùng chiều cao), nhưng có thể dẫn đến nhiều bố cục truyền thống và phi truyền thống. Nhưng CSS không chỉ đơn thuần mô phỏng các cơ chế bố cục trong quá khứ — giờ đây bạn có thể kiểm soát vị trí của các thành phần trên trang đến từng pixel

Định vị CSS

Có hai loại định vị khác ngoài thả nổi. tuyệt đối và tương đối. Các mã bạn sẽ sử dụng là

thẻ {vị trí. sự lựa chọn; . 0px; . 0px; . 0px; . 0px;

Khả năng tương thích của trình duyệt Lưu ý

Định vị tuyệt đối và tương đối là một tính năng của đặc tả CSS2 và do đó được hỗ trợ bởi » Internet Explorer 4+, » Mozilla, » Firefox, » Opera và » Safari. Để có kết quả tốt nhất, hãy sử dụng các trình duyệt mới nhất hiện có, vì chúng sẽ có khả năng kết xuất được cải thiện và chính xác hơn. Không sử dụng những thứ này nếu người dùng của bạn có thể đang sử dụng các trình duyệt cũ hơn

định vị tuyệt đối

Nếu bạn định vị một phần tử (hình ảnh, bảng hoặc bất kỳ thứ gì) hoàn toàn trên trang của mình, phần tử đó sẽ xuất hiện ở pixel chính xác mà bạn chỉ định. Giả sử tôi muốn một hình ảnh xuất hiện 46 pixel từ đầu trang và 80 pixel từ bên phải, tôi có thể làm được. Mã CSS bạn cần thêm vào hình ảnh là

hình ảnh {vị trí. tuyệt đối; . 46px; . 80px;

Bạn chỉ cần thêm phương pháp định vị mà bạn đang sử dụng lúc đầu, sau đó đẩy hình ảnh ra khỏi các cạnh mà nó sẽ gần nhất. Bạn có thể thêm CSS trực tiếp vào thẻ bằng cách sử dụng thuộc tính style (như được hiển thị trong phần giới thiệu về biểu định kiểu) hoặc bạn có thể sử dụng các lớp và id và đặt chúng vào biểu định kiểu của mình. Nó hoạt động theo cùng một cách. Phương pháp được đề xuất là thêm các lớp cho các thành phần bố cục sẽ xuất hiện trên mọi trang, nhưng đặt mã nội tuyến cho những thứ chỉ dùng một lần

Hình ảnh sẽ xuất hiện như vậy. Như bạn có thể thấy, có thể có những thứ trùng lặp với định vị tuyệt đối

Lớp định vị

Để tạo cái mà chúng ta gọi là các lớp với thẻ div, hãy sử dụng mã như thế này

________số 8_______

Trước tiên, bạn chỉ định vị trí của lớp, sau đó là kích thước của lớp (không bắt buộc, lớp sẽ tự thay đổi kích thước). Nếu bạn muốn tạo màu cho nền của lớp, hãy thêm màu nền. màu đỏ; . Như thường lệ, bạn có thể sử dụng màu websafe hoặc màu được đặt tên

Bất kỳ thứ gì có thể xuất hiện trên một trang bình thường đều có thể được định vị bằng div. Chúng tải nhanh hơn nhiều so với cách bố trí bảng. Các bảng không hiển thị trên màn hình cho đến khi chúng được tải xuống toàn bộ. Với các lớp, tất cả thông tin mà trình duyệt cần được chứa trong các thuộc tính kiểu mà bạn đã thêm. Do đó, nó sẽ hiển thị ngay khi bất kỳ phần nào của nó được tải xuống

Để có được các lớp chồng lên nhau, bạn cần sử dụng lệnh z-index. Thêm chỉ mục z. 1 với mã định vị và phần tử này sẽ xuất hiện phía trên mọi thứ mà không cần lệnh này. Nếu bạn muốn một cái gì đó khác đi qua lớp này, hãy thêm z-index. 2 và vân vân. Chỉ số càng cao, div sẽ xuất hiện ở đầu trang càng gần

Đặt lớp chứa nội dung trang của bạn ở đầu mã của bạn. Đây là những gì độc giả muốn xem ngay lập tức. Sau đó, điều hướng của bạn và các thành phần trình bày khác có thể tải xung quanh điều này, cho phép người đọc của bạn bắt đầu đọc ngay khi có thể và cung cấp điều hướng của bạn khi nó có nhiều khả năng được sử dụng nhất. sau khi trang đã được đọc

Để xem một số ví dụ về các thiết kế được bố trí với cả định vị nổi và định vị tuyệt đối, hãy xem phần thiết kế lại của tôi

Định vị tương đối

Khi bạn định vị một thứ gì đó một cách tương đối, bạn đang sửa đổi vị trí của nó so với vị trí của nó nếu bạn không thay đổi bất cứ điều gì. Tôi thấy đó là cách dễ nhất để suy nghĩ về nó. Chẳng hạn, trong câu tiếp theo, tôi sẽ dời một số từ xuống 12px và sang phải 22px so với vị trí bắt đầu của chúng

Vâng, đây là một số từ (một số từ)

Những từ trong ngoặc đơn là những từ ở vị trí ban đầu của chúng và những từ in đậm là những từ được di chuyển. Mã CSS để di chuyển chúng là

một vài từ

Bạn nên chú ý rằng nếu bạn muốn di chuyển thứ gì đó sang trái, bạn sử dụng mã bên phải và đẩy nó ra khỏi bên đó và ngược lại

Để ghi đè thuộc tính vị trí kế thừa và đặt lại phần tử thành một phần bình thường của trang, hãy đặt thuộc tính đó thành vị trí. tĩnh

định tâm ngang

Căn giữa một div hoặc bất kỳ phần tử cấp khối nào khác theo chiều ngang là một trường hợp đặc biệt đối với bố cục CSS, thậm chí còn hơn thế nữa vì có một lỗi trong cách triển khai tiêu chuẩn của Internet Explorer. Cách tiêu chuẩn là đặt các giá trị lề ngang của phần tử thành tự động, như vậy

#wrapper {chiều rộng. 760px; . 0 ô tô;

Điều đó sẽ hoạt động trong các trình duyệt như Firefox, Safari hoặc Opera. Tuy nhiên, điều này sẽ không có hiệu lực trong các phiên bản Internet Explorer dưới 7. Tuy nhiên, có một cách hack mà chúng tôi có thể sử dụng để chúng tôi có thể căn giữa theo chiều ngang trong tất cả các trình duyệt. Tóm lại, IE căn giữa các phần tử cấp khối không chính xác nếu phần tử chứa chúng có căn chỉnh văn bản. trung tâm áp dụng. Vì vậy, chúng ta có thể áp dụng thuộc tính này cho phần tử div2 và tất cả các phần tử bên trong nó sẽ được căn giữa

nội dung {căn chỉnh văn bản. trung tâm;

Sau đó, một bước cuối cùng là cần thiết. Tất nhiên, dòng trên cũng sẽ căn giữa tất cả văn bản bên trong các phần tử được căn giữa, điều này thường không phải là điều chúng ta muốn, vì vậy chúng ta cần căn chỉnh văn bản trong khoảng lùi về bên trái. Vì vậy, đây là tất cả các mã

nội dung {căn chỉnh văn bản. trung tâm;
#wrapper {chiều rộng. 760px; . 0 ô tô; . bên trái;

Dễ dàng khi bạn biết làm thế nào, eh? . Nếu bạn muốn các phần tử khác được định vị tuyệt đối bên trong trình bao bọc, trước tiên hãy đặt nó ở vị trí tương đối

#wrapper {vị trí. liên quan đến; . 760px; . 0 ô tô; . bên trái;

Điều này sẽ tạo ra một yếu tố bên trong mà bạn hoàn toàn đặt ở vị trí hàng đầu, ví dụ:. 0; . 0;