Tìm hiểu cách thiết lập chiều rộng, chiều cao của box CSS

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,265
Reaction score
7,719
Tìm hiểu cách thiết lập chiều rộng, chiều cao của box CSS

Trong CSS có các thuộc tính như width, height cũng như min-width, min-height, những thuộc tính này sẽ giúp chúng ta thiết lập chiều rộng, chiều cao của box.

Để thiết lập chiều rộng và chiều cao phần nội dung phần tử dùng thuộc tính width height chỉ ra giá trị rộng, cao theo đơn vị px, em ...
Mã:
<style>
    div.exam1 {
        border: 5px solid green;
        width: 190px;
        height: 90px;
    }
</style>

<div class="exam1">
    Phần tử này có tổng chiều cao la
    100px và tổng chiều rộng là 200.
</div>
screenshot_1591244204.png

Xem lại phần về BOX CSS để biết xác định chiều cao, chiều rộng thực tế của box khi vẽ trong HTML.


Ở ví dụ trên, tổng chiều cao là 90px + 5px (viền) + 5px (viền) = 100px
Đơn vị phần trăm rộng, cao

Thuộc tính width height có thể được thiết lập bằng đơn vị phần trăm. Ví dụ sau, chiều rộng theo phần trăm, chiều cao lại theo px
Mã:
<style>
    div.measure {
        border: 5px solid green;
        width: 100%;
        height: 90px;
    }
</style>
<div class="measure">
    Tổng chiều rộng là <strong>100%</strong>
    và chiều cao là <strong>100px</strong> .
</div>
screenshot_1591244312.png

Khi thiết lập width là 100%, kích thước box sẽ tự thay đổi để vừa khít với phần tử chứa nó.

Chiều rộng, chiều cao lớn nhất nhỏ nhất

Thiết lập chiều rộng và cao lớn nhất và nhỏ nhất của phần tử (tức là phần tử tự co giãn theo nội dung trong kích thước lớn nhất và nhỏ nhất).
  • min-width - độ rộng nhỏ nhất
  • min-height - chiều cao nhỏ
  • max-width - độ rộng lớn nhất
  • max-height - chiều cao lớn nhất
Mã:
<style>
    p.first {
        border: 5px solid green;
        min-height: 100px;
    }
    p.second {
        border: 5px solid green;
        max-width: 100px;
    }
</style>

<p class="first">The <strong>minimum height </strong>
    of this paragraph is set to 100px.</p>
<p class="second">The<strong> maximum width </strong>
    of this paragraph is set to 100px.</p>

screenshot_1591244371.png

Chúc các bạn thành công.


Nguồn: Internet​
 

Hướng dẫn sử dụng

XenForo 1 XenForo 2
Translate by PVS

Hỗ trợ trực tuyến

Support Quảng cáo
Mr. San (PVS)

Skype chat, instant message

Mr. Bình (THB)

Skype chat, instant message

Mr. Tuấn
0988 488 096

Skype chat, instant message

Mr. Bình
0981 06 08 08
kinhdoanh@vnxf.vn

Top Bottom