CSS中的display属性

作者：手机用户2502869943 | 来源：互联网 | 2023-01-09 19:16

CSS中的display属性规定元素应该生成的框的类型，几乎所有的主流浏览器都支持这个属性。可能的值包括（摘自W3S）简要说明几个常用的属性1、none属性将元素设置为none属性后，

CSS中的display 属性规定元素应该生成的框的类型，几乎所有的主流浏览器都支持这个属性。
可能的值包括（摘自W3S）
这里写图片描述
简要说明几个常用的属性
1、none属性
将元素设置为none属性后，元素将不予显示.none属性通常被 Javascript 用来在不删除元素的情况下隐藏或显示元素。
1、inline属性：
元素生成行内框，对于该行内框设置属性height和width是没有用的，致使它变宽变大的原因是内部元素的填充属性padding。并且inline不单独占一行常用的行内元素是span和a（超链接）。
这里写图片描述
2、block
元素生成块级框，单独占一行。常用元素：div 是一个标准的块级元素。一个块级元素会新开始一行并且延展到其容器的宽度。其他常用的块级元素包括 p 、 form 和HTML5中的新元素： header 、 footer 、 section 等等。

<html>
<style type="text/css">
.inline{
 display:inline; 
 width:200px; 
 height:200px; 
 padding:15px; 
 background-color:#F00;
}
.block{
 display:block; 
 width:100px; 
 height:100px; 
 padding:5px;
 background-color:#0f0;
}
.inline-block{
 display:inline-block;
 width:100px;
 height:100px; 
 padding:5px;
 background-color:#00f;
}
.table-cell{
 display:table-cell;
 border: 1px solid #00f;
 width:100px;
 height:100px; 
 padding:5px;
 background-color:#00f;
 }
p.inline
 {
 display:inline;
 }
style>
<body>
<span class="inline">inline---1span>inline
<span class="inline">inline---2span>inline
<span class="inline">inline---3span>inline
<span class="block">
block
span> block
<span class="inline-block">
inline-block
span>inline-block
body>
html>