只用学会这4个技巧便可实现更快更好的布局

所属专栏:前端只因变凤凰之路
作者简介:rchjr——五带信管菜只因一枚
前言:该系列将持续更新前端的相关学习笔记,欢迎和我一样的小白订阅,一起学习共同进步~

文章简介:本文介绍常见4个布局技巧。知识学习内容来自b站的@黑马程序员的视频

1.margin负值的运用

应用

情急1.实现两个块元素布局在一起且边框不会重叠的问题

可以为右边的块设置margin-left为-1,这样就实现''1+1=1''的效果





    
    
    
    Document
    



    
  • 2
  • 2
  • 2
  • 2
  • 2

只用学会这4个技巧便可实现更快更好的布局_第1张图片

 情急2.实现选中一个块元素改变边框的颜色

只要让块元素选中时提高层级即可(如果盒子没有定位,则鼠标经过添加相对定位即可;都有定位则用z-index提高层级)





    
    
    
    Document
    



    
  • 2
  • 2
  • 2
  • 2
  • 2

只用学会这4个技巧便可实现更快更好的布局_第2张图片 

2.文字围绕浮动元素
只用学会这4个技巧便可实现更快更好的布局_第3张图片

 如何实现上述效果呢?我们只需要给图片添加一个浮动效果,文字就会自动围绕它浮动





    
    
    
    Document
    



    

【介绍】左边的是诗人李白

只用学会这4个技巧便可实现更快更好的布局_第4张图片

右边的文字是不需要添加浮动什么的 

3.行内块的巧妙运用





    
    
    
    Document
    



    
1 2 3 4 到第

4.css三角强化





    
    
    
    Document
    



    
¥1650 ¥5660

只用学会这4个技巧便可实现更快更好的布局_第5张图片

 

你可能感兴趣的:(前端只因变凤凰之路,css,前端,布局技巧)