Làm chủ thuộc tính Width trong CSS

Width là một trong các thuộc tính quan trọng nhất trong CSS, nó chỉ đến chiều rộng của phần tử. Bất cứ thiết kế nào hiện nay cho web, đều đặc biệt quan tâm đến responsive, khả năng thích ứng với nhiều kích thước thiết bị của người dùng cuối, và cái này về bản chất là điều chỉnh width chung của giao diện và các phần tử liên quan sao cho phù hợp.

Có ba thuộc tính mà ta sẽ thường dùng, đó là:

  • auto: chiều rộng của thẻ được thiết lập tự động;
  • giá trị cố định: chiều rộng được chỉ định một giá trị cụ thể, ví dụ width:250px;
  • tương đối, dùng %: chiều rộng được tính toán dựa vào chiều rộng của thẻ gần nhất bao bên ngoài nó (thẻ cha, parent);

Ví dụ:

<!DOCTYPE html>
<html>
    <head>
        <title>With trong CSS</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
                div {margin-top:20px; }
                div.auto {
                  width:auto;
                  height:200px;
                  border: 1px solid black; }

                div.fix {
                  width:250px;
                  height:200px;
                  border: 1px solid black; }

                div.relative {
                  width:50%;
                  height:200px;
                  border:1px solid black; }
        </style>    
    </head>
    <body>
        <div class="auto">
            <p>Chiều rộng của div này được thiết lập tự động</p>
        </div>
        
        <div class="fix">
            <p>Chiều rộng của div này là cố định</p>
        </div>
        
        <div class="relative">
            <p>Chiều rộng của div này là tương đối, phụ thuộc vào thẻ bao bên ngoài</p>
        </div>
    </body>
</html>

Chúng ta sẽ đi sâu vào từng cái một.


Chỉ định chiều rộng cụ thể

Khi mới học, có lẽ đây là cách dùng width phổ biến nhất, vì nó quen thuộc với cách tư duy của chúng ta, khi các vật thể có một chiều rộng nhất định quy được ra số cụ thể.

CSS cho phép chúng ta quy định chiều rộng bằng các đơn vị như px, pt, in, cm, mm, vân vân. Thường, chúng ta hay dùng px nhất, nó là đơn vị chỉ một điểm ảnh trên màn hình, trên thiết bị có độ phân giải cao, 1px sẽ bao gồm nhiều điểm ảnh.

Ví dụ về việc sử dụng các đơn vị khác nhau:

<!DOCTYPE html>
<html>
    <head>
        <title>With trong CSS</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
                div {margin-top:20px; }
                div.px {
                  width:250px;
                  height:200px;
                  border: 1px solid black; }

                div.cm {
                  width:20cm;
                  height:200px;
                  border: 1px solid black; }

                div.pt {
                  width:350pt;
                  height:200px;
                  border:1px solid black; }
        </style>    
    </head>
    <body>
        <div class="px">
            <p>Chiều rộng của div này sử dụng đơn vị px. width:250px;</p>
        </div>
        
        <div class="cm">
            <p>Chiều rộng của div này sử dụng đơn vị cm. width:20cm;</p>
        </div>
        
        <div class="pt">
            <p>Chiều rộng của div sử dụng đơn vị pt (1pt = 1/72 của một in). width:350pt;</p>
        </div>
    </body>
</html>

Chỉ định chiều rộng tương đối

Với việc phát triển của thiết kế reponsive, chúng ta dùng ngày càng nhiều các chỉ thị chiều rộng tương đối, nó làm mã gọn hơn. Ví dụ một box ta cần có độ rộng 95% màn hình trên thiết bị di động từ 320px đến 460px chiều rộng thì thay vì phải liên tục điều chỉnh độ rộng bằng chỉ thị số đo tuyệt đối, chúng ta để chỉ thị 95% áp dụng chung cho khoảng thiết bị này, và nó sẽ tự động co giãn theo.

Dù ngày càng phổ biến nhưng cũng cần để ý là các chỉ thị tuyệt đối, đặc biệt với đơn vị px chúng ta vẫn dùng rất nhiều, vì không phải lúc nào tương đối cũng ổn. Ví dụ, trên màn hình nhỏ chúng ta đều cần tiêu đề của website chiếm khoảng 20% chiều ngang. Nhưng trên màn hình lớn 10% cũng là quá nhiều, và ta sẽ muốn chỉ thị một chiều rộng cố định vừa mắt mà thôi. Cái này khi kinh nghiệm nhiều hơn bạn sẽ thấy dễ hiểu.

CSS ngày càng phát triển với các chỉ thị tương đối phong phú hơn, và giúp chúng ta nhanh chóng tạo ra được thiết kế như ý muốn.

Dưới đây là danh sách:

Đơn vịMô tả
emTương quan với kích thước font-size của phần tử, 2em tương đương với 2 lần kích cỡ của font hiện tại
exTương quan với x-height của font hiện tại (thực tế hiếm khi dùng)
chTương quan với độ rộng của số 0 (zero)
remTương quan với font-size của phần tử gốc
vwTương quan với 1% độ rộng của viewport
vhTương quan với 1% chiều cao của viewport
vminTương quan với 1% chiều nhỏ hơn của viewport
vmaxTương quan với 1% chiều lớn hơn của viewport
%Tương quan với phần tử cha

Tip: em và rem là đơn vị rất thiết thực trong việc tạo ra các layout có khả năng co giãn.

Viewport là kích cỡ của cửa sổ trình duyệt. Nếu viewport là 50cm chiều rộng, thì 1vw có kích cỡ 0,5cm.


Trình duyệt hỗ trợ

Website phụ thuộc vào trình duyệt để hiển thị thông tin. Do vậy các thuộc tính mới hiện đại, cũng cần kiểm tra kỹ xem nó đã được những trình duyệt nào hỗ trợ rồi. Thông thường các trình duyệt lớn làm điều này rất tốt (điều này không chỉ đúng với CSS mà cả JS cũng cần check lại để đảm bảo đủ phủ cao nhất có thể).

Thông tin về phiên bản đầu tiên hỗ trợ các đơn vị đo:

Đơn vịChromeEdgeFireFoxSafariOpera
em, ex, %, px, cm, mm, in, pt, pc1.03.01.01.03.5
ch27.09.01.07.0
20.0
rem4.09.03.64.111.6
vh, vw20.09.019.06.020.0
vmin20.012.019.06.020.0
vmax26.016.019.07.020.0

Bài viết tham khảo từ W3Schools, và sẽ tiếp tục được cập nhật sau.

Leave a Comment