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

PVS

Cộng Sự Đặc Biệt
Thành viên BQT
Tham gia
28/02/2015
Bài viết
12,256
Reaction score
7,708
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

Thượng Đế
Tham gia
03/08/2020
Bài viết
1
Reaction score
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

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