Thông tin liên hệ

Bài 21: Tìm hiểu về overflow trong CSS

Thứ ba - 14/05/2019 04:57

1. Các giá trị của overflow

visible

Khi thuộc tính overflow có giá trị  là visible thì phần nội dung bị tràn không bị cắt đi và nội dung bị tràn ra sẽ ghi đè lên các phần tử khác.

Chạy thử chương trình để xem kết quả nhé. :)

Ví dụ
 
div.overflow {
    background-color: gray;
    width: 300px;
    height: 50px;
    border: 1px solid black;
    overflow: visible;
}

 

hidden

Khi thuộc tính overflow có giá trị là hidden thì phần nội dung bị tràn ra bị cắt đi và phần nội dung đó sẽ bị ẩn đi.

Ví dụ
 
div.overflow {
    background-color: gray;
    width: 300px;
    height: 50px;
    border: 1px solid black;
    overflow: hidden;
}
 

 

scroll

Khi thuộc tính overflow có giá trị là scroll thì phần nội dung bị tràn ra vẫn bị cắt đi, tuy nhiên trình duyệt sẽ có thêm thanh scroll, mình có thể kéo xem phần nội dung bị ẩn đi. Thanh scroll này được thêm vào cho cả chiều dọc và chiều ngang của phần tử.

Ví dụ
 
div.overflow {
    background-color: gray;
    width: 300px;
    height: 50px;
    border: 1px solid black;
    overflow: scroll;
}
 

 

auto

Khi thuộc tính overflow có giá trị là auto thì cũng giống như giá trị scroll, tuy nhiên thanh scroll sẽ được thêm vào khi cần thiết.

Ví dụ
 
div.overflow {
     background-color: gray;
     width: 300px;
     height: 50px;
     border: 1px solid black;
}
 

 

Như vậy là mình đã tìm hiểu xong các giá trị chính của thuộc tính overflow đó là visiblehiddenscrollauto. Trong CSS có thêm 2 thuộc tính overflow-x và overflow-y cho phép điều khiển nội dung bị tràn theo chiều dọc hoặc theo chiều ngang. Chúng ta cùng xem tiếp nội dung tiếp theo nhé.

2. overflow-x

overflow-x là thuộc tính cho phép điều khiển nội dung bị tràn theo chiều ngang (nghĩa là bên trái (left) và bên phải (right) của phần tử). Tương tự thuộc tính overflow, thuộc tính overflow-x cũng có giá trị như visiblehiddenautoscroll.

Mình sẽ lấy ví dụ cho thuộc tính overflow-x sau khi tìm hiểu thuộc tính overflow-y luôn nhé.

3. overflow-y

overflow-y là thuộc tính cho phép điều khiển nội dung bị tràn theo chiều dọc (nghĩa là bên trên (top) và bên dưới (bottom) của phần tử). Tương tự thuộc tính overflow, thuộc tính overflow-y cũng có giá trị như visiblehiddenautoscroll.

Mình sẽ lấy ví dụ cho 2 thuộc tính overflow-x và overflow-y như sau:

Ví dụ
div {
    background-color: yellow;
    width: 200px;
    height: 50px;
    border: 1px solid black;
    overflow-x: hidden;
    overflow-y: scroll;
}
 

Chạy thử chương trình để xem kết quả.

4. Lời kết

Như vậy là mình đã trình bày xong 4 giá trị chính của thuộc tính overflow đó là visiblehiddenscrollauto. Ngoài ra còn có 2 thuộc tính overflow-x và overflow-y cho phép điều khiển nội dung bị tràn theo chiều ngang hoặc chiều dọc. Các giá trị visiblehiddenscrollauto của thuộc tính overflowoverflow-xoverflow-y  khi nào nên sử dụng thì còn tùy thuộc vào mục đích sử dụng của các bạn. :)

Cuối cùng, trong quá trình viết không tránh khỏi sai sót, nếu có điều gì không hợp lý rất mong nhận được sự góp ý chân thành của các bạn để cho bài viết của mình ngày một tốt hơn. 

Cám ơn các bạn đã đọc bài viết. Chúc các bạn vận dụng tốt.

Tác giả bài viết: vansieunhan

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

Click để đánh giá bài viết

  Ý kiến bạn đọc

Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây