css常见布局

css的常见布局经常结合普通流,浮动,定位,flex实现。下面看一下几种常见布局:

等分布局:把宽度三等分

 

等高布局:父元素高度不知道,所有子元素高度和最高的子元素保持一致

此方法利用padding把每个子元素的高度撑的超出父元素,再利用margin的负值把父元素下面的块向上移和padding相同的距离,将加上的padding盖掉,不理解的可以尝试把下面的注释去掉,并自己调节margin的值看看效果。当然,此方法要记得把父元素设置为超出部分不可见,要不然,试试出滚动条的效果,就很尴尬了~




  
  
  
  Document
  


  
别打英文和数字别打英文和数字
别打英文和数字别打英文和数字别打英文和数字别打英文和数字别打英文和数字别打英文和数字
别打英文和数字别打英文和数字别打英文和数字别打英文和数字别打英文和数字

两列自适应布局:以左边固定,右边宽度自适应为例




  
  
  
  Document
  


  
左边布局
右边布局右边布局右边布局右边布局右边布局右边布局右边布局右边布局右边布局右边布局右边布局右边布局右边布局右边布局右边布局右边布局右边布局

你可能感兴趣的:(css,前端)