如何修改標簽顯示的類型

本章摘要 :

  • CSS中提供了一個display屬性,它能夠修改標簽的顯示類型
  • 1, none : 隱藏標簽
  • 2, block : 讓標簽變為塊級標簽(主要針對的是標簽選擇器)
  • 3, inline : 讓便簽變為行內標簽
  • 4, inline-block : 讓標簽變為行內-塊級(內聯-塊級)標簽
<html>

<head>

<meta charset="UTF-8">

<title>看我如何修改標簽顯示的類型</title>

<style>

/* 塊級標簽:獨占一行,可以設置寬度和高度*/

div{

color: red;

background-color: yellowgreen;

width: 150;

height: 150;

/*讓標簽變為行內標簽*/

/*display: inline;*/

display: inline-block;

}

/*行內標簽 : 多個行內標簽可以顯示在同一行,寬度和高度是由內容所決定的*/

span{

color: darkslategrey;

background-color: brown;

width: 100;

height: 150;

/*display: block;*/

display: inline-block;

}

/*行內-塊級標簽 : 多個行內標簽能顯示在同一行,并且可以設置高度和寬度*/

input{

width: 150;

height: 35;

/*display: inline;*/

display: block;

}

</style>

</head>

<body>

<div>孫悟空當年大鬧天空</div><br>

<span>眾神拿之毫無辦法,那是因為,他媽的沒有遇到現在的城管</span>

<p></p>

<input>

<input>

</body>

</html>
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 問答題47 /72 常見瀏覽器兼容性問題與解決方案? 參考答案 (1)瀏覽器兼容問題一:不同瀏覽器的標簽默認的外補...
    _Yfling閱讀 13,809評論 1 92
  • ?前端面試題匯總 一、HTML和CSS 21 你做的頁面在哪些流覽器測試過?這些瀏覽器的內核分別是什么? ...
    Simon_s閱讀 2,228評論 0 8
  • 轉載請聲明 原文鏈接地址 關注公眾號獲取更多資訊 第一部分 HTML 第一章 職業規劃和前景 職業方向規劃定位...
    前端進階之旅閱讀 16,621評論 32 459
  • 簡介網絡瀏覽器很可能是使用最廣的軟件。在這篇入門文章中,我將會介紹它們的幕后工作原理。我們會了解到,從您在地址欄輸...
    wengjq閱讀 2,072評論 2 15
  • 在線閱讀 http://interview.poetries.top[http://interview.poetr...
    前端進階之旅閱讀 114,833評論 24 450