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

[PVS]

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

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

​

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ử.

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

​

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

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]

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