CSS中的display属性

最新推荐文章于 2024-06-10 21:15:10 发布

一斤草莓吃光光

最新推荐文章于 2024-06-10 21:15:10 发布

阅读量1.5k

点赞数 2

分类专栏： HTML与CSS 文章标签： css

本文链接：https://blog.csdn.net/sinat_36713319/article/details/53698468

版权

HTML与CSS 专栏收录该内容

19 篇文章 0 订阅

订阅专栏

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---1</span>inline
<span class="inline">inline---2</span>inline
<span class="inline">inline---3</span>inline
<span class="block">
block
</span> block
<span class="inline-block">
inline-block
</span>inline-block
</body>
</html>

这里写图片描述

一斤草莓吃光光

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
CSS中的display属性

CSS中的display 属性规定元素应该生成的框的类型，几乎所有的主流浏览器都支持这个属性。可能的值包括（摘自W3S）简要说明几个常用的属性 1、none属性将元素设置为none属性后，元素将不予显示.none属性通常被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。 1、inline属性：元素生成行内框，对于该行内框设置属性height和width是没有
复制链接

扫一扫