Tìm hiểu thêm về thuộc tính display trong CSS

PVS

Super Moderator
Thành viên BQT
Tham gia
28/02/2015
Bài viết
16,728
Được Like
12,680
Tìm hiểu thêm về thuộc tính display trong CSS

Thuộc tính display quy định ứng xử của box trên trang, và như các bạn cũng đã biết thì mọi phần tử trên trang đều có dạng hộp chữ nhật . Một phần tử dạng khối block nó chiếm toàn bộ độ rộng, với ngắt dòng trước và sau phần tử. Ví dụ sau sẽ chuyển phần tử <span> thành dạng block

Mã:
<style>
    .spantoblock span {
        display: block;
        border: 1px dotted gray;
    }
</style>

<p class="spantoblock">
    <span>Đoạn văn 1.</span>
    <span>Đoạn văn 2.</span>
    <span>Đoạn văn 3.</span>
</p>

screenshot_1591408967.png

Thiết lập display: inline

Phần tử có thuộc tính display: inline; sẽ chỉ có độ rộng phù hợp với nội dung phần tử và không có ngắt dòng trước và sau phần tử.
Mã:
<style>
    .ptoinline p {
        display: inline;
        border-bottom: 1px dotted gray;
    }
</style>

<div class="ptoinline">
    <p>Đoạn văn 1.</p>
    <p>Đoạn văn 2.</p>
    <p>Đoạn văn 3.</p>
</div>

screenshot_1591409024.png

Thiết lập thuộc tính display cho phần tử chỉ thay đổi cách phần tử đó hiển thị, bạn vẫn cần tuân thủ quy tắc HTML. Một phần tử gốc inline dù có thuộc tính display: block; vẫn không được phép chứa phần tử dạng gốc block

display:none

display:none sẽ ẩn phần tử, nó không còn chiếm không gian nào trên trang. Ví dụ:

Mã:
h1 {
   display: none;
}

Ngoài các giá trị block, inline, none ... thuộc tính display còn nhiều giá trị khác:

display: inline-block; bản thân phần tử hiển thị như inline nhưng bên trong phần tử lại ứng xử như block

display: list-item phần tử giống như <li>

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


Nguồn: Internet​
 

khacdaumoc

Private
Tham gia
03/08/2020
Bài viết
1
Được Like
1
display:none !important sử dụng khá phổ biến luôn, rất tiện cho css. mình làm biếng nên rất ít khi vào sửa css trực tiếp file :)
 

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

XenForo 1 XenForo 2
Translate by PVS

Dịch vụ XenForo của VNXF

Mr. Tuấn

Mobile/Zalo: 0988 488 096

Telegram: bluekpro

Email: [email protected]

Nhà Tài Trợ

Mút Xốp Không Gian
pallet Thịnh Phát
Top Bottom