CSS负边距margin的应用

原文

博客原文

相关文章

CSS负margin的影响

大纲

1、实战：利用负边距在文档流中的作用——实现选项卡上边框消失
2、实战：利用负边距改变自身高度——实现下边框消失的效果
3、实战：利用负边距影响自身高度——实现多列等高布局
4、实战：利用负边距增加自身宽度——实现多列等宽布局

1、实战：利用负边距在文档流中的作用——实现选项卡上边框消失

 


    

        

            
前端
            
实战
            
交互
            
优化
        
        

            
这是第一个选项卡的内容。
            
这是第二个选项卡的内容。
            
这是第三个选项卡的内容。
            
这是第四个选项卡的内容。
        
    

实战：利用负边距在文档流中的作用——实现选项卡上边框消失

2、实战：利用负边距改变自身高度——实现下边框消失的效果

 
        
I am li
        
I am li
        
I am li
        
I am li
        
I am li
    

image.png

image.png

3、实战：利用负边距影响自身高度——实现多列等高布局

    
 height:50px
    
height:100px
    
height:30px

image.png

4、实战：利用负边距增加自身宽度——实现多列等宽布局

    

        
子元素1
        
子元素2
        
子元素3
        
子元素4
        
子元素5
        
子元素6
        
子元素7
        
子元素8
    

image.png