zoukankan      html  css  js  c++  java
  • display属性常用属性值的理解

    1、display:none

      表示此元素不会被显示

    css;
    .first{
      display: none;
      200px;
      height:100px;
      background:yellow;
    }

      

    <div class="first">
             我有display:none属性,我不会显示
    </div>
    

      以上页面会显示空白,

    2、display:block

      该属性会把元素转换为块级元素,此元素前后会带有换行符,因此就可以设置元素的宽高和上下的margin和padding

    css:
    a{
    	display: block;
    	 100%;
    	height: 40px;
    	background: yellow;
    	}
    

      

    html:
    <a href="">我是行内元素,我不能直接设置宽高</a>
    

      页面显示:

    3、display:inline

      此元素会被显示为内联元素,元素前后没有换行符,即display:inline的作用即可以将一个块级元素转换成行内元素,那么这个块级元素将不能再设置宽和高以及上下方向的margin和padding。

    html:
    <div class="second">
    	我是块级元素,我有display:inline属性,所以我不能设置宽高
    </div>
    

      

    css:
    .second{
    		display: inline;
    		 400px;
    		height: 100px;
    		background: yellow;
    	}
    

      页面显示:

    4、display:inline-block

      设置了inline-block属性的元素既具有block元素可以设置width和height属性的特性,又保持了inline元素不换行的特性

    例如ul li a 标签组合float:left做成的横向导航用display:inline-block属性就可以完成:

    ul,li,a,*{
    		
    		list-style: none;
    		text-decoration:none;
    	}
    	li{
    		display: inline-block;
    		border: thin solid red;
    	}
    

      

    html:
    <div>
    	<ul>
    		<li><a href="">1</a></li>
    		<li><a href="">2</a></li>
    		<li><a href="">3</a></li>
    		<li><a href="">4</a></li>
    	</ul>
    </div>
    		
    

      页面显示:

    发现元素之间有空白,当给元素添加margin:0;padding:0;时,元素之间的空白还存在,

    这时可以将ul中的字符的大小设置位0,那么空白符也就不会存在了,但是这时a的字体大小也会继承ul的字体大小,就不见了,只需要将a中再设置一个字体不为0的大小覆盖,就会显示

    css:
    ul,li,a,*{
    		font-size:0;
    		list-style: none;
    		text-decoration:none;
    	}
    	li{
    		display: inline-block;
    		border: thin solid red;
    	}
        a{
                    font-size:15px;
           }
    

      

    html:
    <div>
    		<ul>
    			<li><a href="">1</a></li>
    			<li><a href="">2</a></li>
    			<li><a href="">3</a></li>
    			<li><a href="">4</a></li>
    		</ul>
    	</div>
    

      元素之间的空白就会消除

    5、display:inherit

      规定应该从父元素继承 display 属性的值

      例如:

            <div class="parent">
    		<div class="son1"></div>
    		<div class="son2"></div>
    	</div>
    

      

    css:
    .parent{
    		display: inline-block;
    		font-size: 0; 
    		background: #cadafa;
    		 400px;
    		height: 300px;
    	}
    	.son1{
    		display: inherit; 
    		background: #eaedac;
    		 200px;
    		height: 100px;
    	}
    	.son2{
    		display: inherit; 
    		background: #da5dd8;
    		 200px;
    		height: 100px;
    	}
    

      页面显示:

    这里的.parent元素中font-size:0px;是为了消除空白符

  • 相关阅读:
    DDD 领域驱动设计-谈谈 Repository、IUnitOfWork 和 IDbContext 的实践
    UVA10071 Back to High School Physics
    UVA10071 Back to High School Physics
    UVA10055 Hashmat the Brave Warrior
    UVA10055 Hashmat the Brave Warrior
    UVA458 The Decoder
    UVA458 The Decoder
    HDU2054 A == B ?
    HDU2054 A == B ?
    POJ3414 Pots
  • 原文地址:https://www.cnblogs.com/1500418882qqcom/p/9884268.html
Copyright © 2011-2022 走看看