Thứ Bảy, Tháng Tư 10, 2021
    • Login
    Mister-map.com | Tổng hợp game mobile, PC, Game online, Offline, tin tổng hợp
    • Game online
    • Game offline
    • Hỏi đáp
    • Tiếng anh
    • Tin tổng hợp
    No Result
    View All Result
    • Game online
    • Game offline
    • Hỏi đáp
    • Tiếng anh
    • Tin tổng hợp
    No Result
    View All Result
    Mister-map.com | Tổng hợp game mobile, PC, Game online, Offline, tin tổng hợp
    No Result
    View All Result

    Nghĩa Của Từ Overflow Là Gì, Nghĩa Của Từ Overflow, Từ Overflow Là Gì

    admin by admin
    26/03/2021
    in Hỏi đáp
    0

    Chắc hẳn ai học lập trình web cũng đã từng gặp một khó khăn đó là khi nội dung của một phần tử nào đóquá lớn so với kích cỡ của phần tử thìphần nội dung đó sẽbị tràn ra khỏi khu vực được chỉ định cho phần tử đó. Vậy đểkhắc phục khó khăn đó như thế nào?

    Trong CSS có thuộc tính overflowcho phép mình khắc phục khó khăn trên bằng cáchcắt đi phần nội dung bị trànhoặcthêm thanh cuộn cho phần tử đó.

    Đang xem: Overflow là gì

    Thuộc tính overflow có nhiều giá trị, tuy nhiên trong bài học này mình sẽ tìm hiểu 4 giá trị chính của thuộc tínhoverflow đó làvisible, hidden, scroll, auto.

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

    visible

    Khi thuộc tính overflow cógiá trị là visible thì phần nộidung 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.

    Bấm vào RUN để xem kết quả nhé. 🙂

    Ví dụ RUN

    div.overflow {background-color: gray;width: 300px;height: 50px;border: 1px solid black;overflow: visible;}
    Và kết quả của ví dụ trên:

    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ụ RUN

    div.overflow {background-color: gray;width: 300px;height: 50px;border: 1px solid black;overflow: hidden;}
    Và kết quả của ví dụ trên:

    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éoxem 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ụ RUN

    div.overflow {background-color: gray;width: 300px;height: 50px;border: 1px solid black;overflow: scroll;}
    Và kết quả của ví dụ trên:

    auto

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

    Ví dụ RUN

    div.overflow { background-color: gray; width: 300px; height: 50px; border: 1px solid black;}
    Và kết quả của ví dụ trên:

    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à visible, hidden, scroll, auto. 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ínhoverflow-x cũng có giá trị như visible, hidden, auto, scroll.

    Xem thêm: ” Tam Sinh Tam Thế Thập Lý Đào Hoa Nghĩa Là Gì ? Tam Sinh Tam Thế: Thập Lý Đào Hoa Còn Nhiều Sạn

    Mình sẽ lấy ví dụ cho thuộc tính overflow-xsau 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-ycũng có giá trị như visible, hidden, auto, scroll.

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

    Ví dụ RUN

    div {background-color: yellow;width: 200px;height: 50px;border: 1px solid black;overflow-x: hidden; overflow-y: scroll;}
    Và kết quả của ví dụ trên:

    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à visible, hidden, scroll, auto. 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ềudọc. Các giá trị visible, hidden, scroll, auto của thuộc tính overflow, overflow-x, overflow-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.

    Tham khảo: w3school.com

    Bài sau Bài tiếp
    Chuyên đề học lập trình web: Học phần HTML / CSS

    Đây là chương thứ nhất trong chuyên đề tự học lập trình web với PHP. Trong chương này chúng ta sẽ học HTML và CSS trước.

    Các bạn hãy sub kênh để ủng hộ mình nhé. Link chuyên đêtại đây.

    Xem thêm: Nghĩa Của Từ Law Of Conservation Là Gì, Conservation Là Gì

    Tải Thêm Comment

    DANH SÁCH BÀI HỌC

    Căn bản Nâng cao Tham khảo
    Danh sách chủ đề

    MÃ GIẢM GIÁ
    Unica 50% Lấy Mã
    TinoHost 30% Lấy Mã
    INET 30% Lấy Mã

    Liên hệ

    Mã giảm giá

    Khóa học

    Giới thiệu

    Admin Cường, quản lý chính của website.

    2020 – mister-map.com. All Right Reserved Theme GoodNews, nền tảng Codeigniter, VPS mua tại Tinohost

    *

    BÀI VIẾT

    Nếu bạn phát hiện lỗi sai link, nội dung sai, hay một lỗi bất kì nào đó trên trang này thì hãy cho mình biết nhé. Cám ơn bạn!

    Previous Post

    “Live In The Moment Là Gì ? Moments Nghĩa Là Gì Trong Tiếng Anh

    Next Post

    What Is The Difference Between “A Pile Là Gì Trong Tiếng Việt?

    Next Post

    What Is The Difference Between "A Pile Là Gì Trong Tiếng Việt?

    Trả lời Hủy

    Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *

    No Result
    View All Result

    Bài viết mới

    • Trải nghiệm game xóc đĩa online có hot gril người Việt chính thống chia bài
    • Báo giá thiết kế nội thất căn hộ chung cư đẹp nhất 2021 và những lưu ý
    • Tips cá cược bóng đá – Ý nghĩa và kinh nghiệm không phải ai cũng biết
    • Cách Chơi Annie Tốc Chiến – Annie Mùa 11: Bảng Ngọc Bổ Trợ, Cách Lên Đồ
    • Waite Meaning – Waite Definition And Meaning

    Phản hồi gần đây

      Lưu trữ

      • Tháng Tư 2021
      • Tháng Ba 2021
      • Tháng Hai 2021
      • Tháng Một 2021

      Chuyên mục

      • Game online
      • Tin tổng hợp

        © 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

        No Result
        View All Result
        • Game online
        • Game offline
        • Hỏi đáp
        • Tiếng anh
        • Tin tổng hợp

        © 2021 JNews - Premium WordPress news & magazine theme by Jegtheme.

        Welcome Back!

        Login to your account below

        Forgotten Password?

        Create New Account!

        Fill the forms bellow to register

        All fields are required. Log In

        Retrieve your password

        Please enter your username or email address to reset your password.

        Log In