display的用法和作用小结

最新推荐文章于 2024-05-03 12:12:21 发布

yang114544

最新推荐文章于 2024-05-03 12:12:21 发布

阅读量2.1k

点赞数

文章标签： css

本文链接：https://blog.csdn.net/yang114544/article/details/117971508

版权

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>display的属性及作用</title>
       <style>
           .inline{
    display:inline;
    width:100px;
    height:100px;
    padding:10px;
    background-color:red;
}
.block{
    display:block;
    width:100px;
    height:100px;
    padding:10px;
    background-color:green;
}
.inline-block{
    display:inline-block;
    width:100px;
    height:100px;
    padding:10px;
    background-color:blue;
}
       </style>
   </head>
   <body>
       <p>display
           的属性值有：none|inline|block|inline-block|list-item|run-in|table|inline-table|table-row-group|table-header-group|table-footer-group|table-row|table-column-group|table-column|table-cell|table-caption|inherit

其中常用的的有none、inline、block、inline-block。分别的意思是：

1、none：元素不会显示，而且改元素现实的空间也不会保留。但有另外一个 visibility: hidden，是保留元素的空间的。

2、inline： display的默认属性。将元素显示为内联元素，元素前后没有换行符。我们知道内联元素是无法设置宽高的，所以一旦将元素的display 属性设为 inline，
设置属性height和width是没有用的。此时影响它的高度一般是内部元素的高度（font-size）和padding。

3、block：将元素将显示为块级元素，元素前后会带有换行符。设置为block后，元素可以设置width和height了。元素独占一行。

           4、inline-block：行内块元素。这个属性值融合了inline 和 block 的特性，即是它既是内联元素，又可以设置width和height。</p>
       <p>
           <div class="wrap">
               <div class="inline">
                   inline
               </div>inline
               <div class="block">
                   block
               </div> block
               <div class="inline-block">
                   inline-block
               </div>inline-block
           </div>
   </body>
   <script type="text/javascript">

</script>
</html>

yang114544

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
display的用法和作用小结

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>display的属性及作用</title> <style> .inline{ display:inline; width:100px; height:100px; padding:10px;...
复制链接

扫一扫