负值之美:负margin在页面布局中的应用 2019-06-12 19:40

        

        

        
        

        负值之美:负页边距在版面编排击中要害适用
看台议论网站:

        本文转载自,有修正。
正数常常给人留在后面负面影象、不承认、回绝感,但间或运用负吸引可以买到晴朗的的胜利,今日,本人在浏览规划中运用负值。。在这里提到的负值次要是指负不安定。。
下去负不安定根本的,我提议你看一下这应收信誉信誉。:
本文不议论根本的,次要陈列品几种适用。
一、摆布组织集中:稳定地集中或指向:,两头柱自适应安顿
此示例符合的摆布列的宽度,两头棒宽度的自适应规划。由于网页的次要分得的财产通常在两头,大量浏览销路在两头列中占先的附加费,这规划不差毫发安抚这销路。
HTML:

        
        
        Main
        Left
        Right

        CSS:

         body{ 边距:0 使充满:0 min-width:600px; } 
.main{ 漂:左 width:100%; } 
.main_body{ 边距:0 210px; background:#888; height:200px; } 
.left,.right{ 漂:左 width:200px; height:200px; background:#F60; } 
.left{ margin-left:-100%; } 
.right{ margin-left:-200px; }

        胜利:


        
        

        二、剪下列表右方的框。
漂列表通常用于在伸出中显示通信。,为了悦目的,每个列表私下通常有必然的间隔(边距ri,父元素的集中:稳定地集中或指向:宽度,每共同的的最左边的li元素的右方的距就富余了,移除的办法通常是在左边向li添加类,设置*右方的距:0 *这种办法销路静态断定为哪一些li元素添加class,故障!!!使用负margin就可以发生上面这种胜利:
HTML:

        
        
  • 子元素1
  • 子元素2
  • 子元素3
  • 子元素4
  • 子元素5
  • 子元素6

        CSS:

        body,ul,li{ 使充满:0 边距:0} ul,li{ list-style:none;} 
#test{ width:320px; height:210px; 上下文:CCC } 
#test ul{ margin-right:-10px; zoom:1; } 
#test ul li{ width:100px; height:100px; background:#F60; margin-right:10px; margin-bottom:10px; 漂:左 }

        胜利:


        
        

        三、负吸引 状态:程度铅直使成一线方法
运用相对状态将DIV状态到车身要点,因此运用压缩新垦地的(愿意的宽度的半场),将DIV的要点移回身体的要点,已抵达程度铅直使成一线方法的胜利。
HTML:

        
        

        CSS:

         body{边距:0使充满:0} 
#test{ width:200px; height:200px; background:#F60; 投资:相对 left:50%; top:50%; margin-left:-100px; margin-top:-100px; }

        胜利:


        
        

        四、剪下列表期末考试一点钟li元素的边框英尺
本人常常在列表中添加边框底端值,李的期末考试一点钟新垦地的英尺常常与外框重叠。,视觉不雅观,常常被移除。
HTML:

        
  • Test
  • Test
  • Test
  • Test
  • Test

        CSS:

         body,ul,li{边距:0使充满:0} ul,li{list-style:none;} 
#test{ margin:20px; width:390px; background:#F4F8FC; border-radius:3px; border:2px solid #D7E2EC; } 
#test li{ height:25px; line-height:25px; padding:5px; border-bottom:1px dotted #D5D5D5; margin-bottom:-1px; }

        胜利:


        
        

        五、多行等高
这种情况的中心是为每个框设置较大的下头距,因此用数字上相似的负锋利剪下这高的。。这会使遭受每个列径流压紧元素,倘若外包压紧的径流属性设置为hidde,在最远点剥离柱。
HTML:

        
        
        

        style="height:50px"

        

        style="height:100px"

        CSS:

         body,p{ 边距:0 使充满:0 }
 #wrap{ 径流:覆盖 width:580px; 边距:0 auto; }
 #left,#center,#right{ margin-bottom:-200px; padding-bottom:200px; }
 #left { 漂:左 width:140px; background:#777; } 
#center { 漂:左 width:300px; background:#888; } 
#right { 漂:右 width:140px; background:#999; } 
p 色:fff;版本使成一线:居中

        胜利:


        
        


返回
有心意 更有新意
欢迎拨打
  
Copyright © bwin_bwin娱乐_bwin官网 版权所有 无