5 tháng 9, 2019

Không gian 3 chiều trong html

Hiện nay, cấu trúc của một trang Web càng ngày càng trở lên phức tạp, mô hình không gian 3 chiều ra đời nhằm đáp ứng nhu cầu cao cho việc hiển thị tài liệu html
Bình thường khi nhìn vào một trang Web, chúng ta sẽ nghĩ phần hiển thị lên trang Web là hiển thị trên một mặt phẳng. Nhưng do nhu cầu hiển thị của trang Web ngày càng trở lên phức tạp hơn nên mô hình không gian 3 chiều cho html ra đời. 



Nhìn vào hình trên các bạn sẽ thấy, trong chiếc hộp có 3 hình chữ nhật. Hình màu xanh, hình màu vàng và hình màu đỏ. Khi hiển thị ra màn hình thì chúng ta sẽ tưởng rằng hình màu đỏ và hình màu vàng nằm chung một mặt phẳng. Nhưng thực tế thì không phải như vậy, do hình màu đỏ nằm phía trước hình màu vàng nên một phần hình màu vàng bị hình màu đỏ che khuất. 
Mặt phẳng nằm phía sau 3 hình chữ nhật đó là phần nền của của trang Web. 


Thuộc tính của không gian 3 chiều


1. Thuộc tính z-index

Nhìn vào hình trên bạn sẽ thấy, chỉ số z dùng để chỉ độ sâu của phần tử html. Chỉ số z càng lớn thì càng gần màn hình và cách xa nền trang, chỉ số z càng nhỏ thì càng gần nền trang và cách xa màn hình. 

2. Thuộc tính tọa độ theo mặt phẳng

Left: Khoảng cách tính từ mép biên bên trái
RightKhoảng cách tính từ mép biên bên phải
- TopKhoảng cách tính từ mép biên bên trên
BottomKhoảng cách tính từ mép biên bên dưới
* Lưu ý: Bạn chỉ được sử dụng 1 thuộc tính theo chiều ngang và 1 thuộc tính theo chiều dọc để xác định phần tử. Ví dụ: left: 10px; top 50px

3. Thuộc tính position

Static: Phần tử html sẽ hiển thị giống như một văn bản (mặc định)
Absolute: Phần tử html sẽ hiển thị theo mô hình không gian 3 chiều. Tọa độ left, right, top, bottom sẽ được kế thừa theo phần tử html cha.
Fixed: Phần tử html sẽ được cố định vào màn hình, nghĩa là bạn cuộn chuột hoặc kéo thanh trượt thì người xem sẽ thấy phần tử html không dịch chuyển.
Relative: Phần tử html sẽ hiển thị theo mô hình không gian 3 chiều, tọa độ left, right, top, bottom do bạn đặt. Tọa độ điểm gốc (0:0) sẽ là tọa độ tương đối, tính theo vị trí của phần tử html trong file html


Ví dụ thực hành

1. Tạo ra 3 hình chữ nhật giống với ví dụ ở đầu bài viết

Mình sẽ tạo 1 file html và 1 file css, đặt trong cùng một thư mục. Mỗi hình chữ nhật mình đặt trong một cặp thẻ <div></div>. Tên id của 3 định dạng CSS mình tạm đặt là hinhvang, hinhxanh, hinhdo. Chỉ số z-index của hình vàng là 5, hình xanh là 10, hình đỏ là 15. 
Đây chỉ là ví dụ nên không cần quá quan trọng cách đặt tên, chỉ cần các bạn hiểu về mô hình không gian 3 chiều.

File html
<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <title> ví dụ </title>
    <link type="text/css" rel="stylesheet" href="./background.css" />
  </head>

  <body>
   
    <p><b>Ví dụ về không gian 3 chiều</b></p>

    <p>
      Trong ví dụ này mình sẽ tạo ra 3 hình chữ nhật có độ rộng bằng nhau. 
      Hình màu xanh, màu vàng và màu đỏ. 
      Mỗi hình nằm ở 1 vị trí khác nhau trong không gian. Hình màu đỏ có chiều cao nhỏ nhất. 
      Hình màu vàng và màu xanh có chiều cao bằng nhau
    </p> 

    <div id="hinhvang" note="hình chữ nhật màu vàng"></div>
    <div id="hinhxanh" note="hình chữ nhật màu xanh"></div>  
    <div id="hinhdo" note="hình chữ nhật màu đỏ"></div>

  </body>
</html>
File CSS
@charset "utf-8";

#hinhvang{
    width: 200px;
    height: 500px;
    background-color: yellow;
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: 5;
}

#hinhxanh{
    width: 200px;
    height: 500px;
    background-color: blue;
    position: absolute;
    left: 500px;
    top: 100px;
    z-index: 10;
}

#hinhdo{
    width: 200px;
    height: 150px;
    background-color: red;
    position: absolute;
    left: 100px;
    top: 100px;
    z-index: 15;
}
Kết quả ta được như sau: 

2. Thay đổi thuộc tính position cho hình màu vàng, từ absolute thành relative

Bạn sẽ thấy hình vàng bị lệch xuống dưới và sang phải so với ví dụ ban đầu. Lý do vì trong ví dụ ban đầu, mình để cả 3 hình đều có thuộc tính position là absolute nên tọa độ gốc sẽ tính ở góc trên cùng bên trái của trang web (tọa độ sẽ được kế thừa từ phần tử html cha). Nhưng khi mình đặt lại cho hình vàng thành relative thì tọa độ sẽ được tính theo vị trí của nó trong file html. (hết đoạn văn đầu tiên thì đến vị trí của hình chữ nhật)

3. Đặt phần tử html hình đỏ nằm bên trong hình vàng

<div id="hinhvang" note="hình chữ nhật màu vàng">
        <div id="hinhdo" note="hình chữ nhật màu đỏ"></div>
</div>

Kết quả: Hình đỏ sẽ bị lệch, lý do vì phần tử html hình đỏ nằm bên trong hình vàng, thuộc tính positionabsolute nên tọa độ hình đỏ sẽ kế thừa từ hình vàng. Vì vậy nên tọa độ điểm gốc sẽ là góc trên bên trái của hình vàng.


Trên đây là 3 ví dụ cơ bản nhất, bạn hãy thử nghiệm với các thuộc tính khác, thay đổi kích thước, chỉ số z-index để cảm nhận rõ hơn về hiệu ứng của nó nhé. 


SHARE THIS

Blogger Nguyễn Dương

Có một câu nói mà mình rất thích đó là "Thật sai lầm khi nghĩ rằng một khi rời khỏi trường học, bạn không cần học thêm điều mới nữa". Chính vì thế mà hãy luôn luôn học hỏi, con người chỉ ngừng phát triển khi ngừng học hỏi. Nếu như bạn chưa hiểu nội dung bài viết hoặc đang khúc mắc khi thao tác thì hãy bình luận phía dưới bài viết để mọi người cùng thảo luận nhé!