笔记 - CSS布局

布局分类

1. 固定宽度布局
   960px, 1000px, 1024px，电脑页面
2. 不固定宽度布局。
   主要靠文档流，原本就是自适应，不需要额外样式。
   多半是手机页面布局。
3. 响应式布局

怎样选择布局

截屏2021-02-09 16.36.15.png

Float布局 - 为IE准备

1. 子元素加float: left和width
2. 父元素加.clearfix
   e.g.

  

  
LOGO
  
Navigation

• 一般来说float布局里，一行的最后一个元素不写width，由其自身决定。
• float布局不需要做响应式（由于float基本适配IE，而手机上没有IE，自然不需要为了手机屏幕做的响应式）
• IE6-7存在双倍margin bug
  1. 可以减半margin
     e.g. 假设原margin-left: 10px
     则在该行下增加
     _margin-left: 5px;
     IE可识别并计算出需要的margin
  2. 可以加display: inline-block对抗bug

** tips: 怎样去除图片下方多余的背景色条**
给需要去掉的img加一行：
vertical-align: top;或者vertical-aligin: middle
原理: line-height


一个简单的nav示例

  
  
  


  

    
  

  

    
首页
    
商品
    
优惠
    
关于
  

tips: 用outline替代border进行调试
使用border进行调试时其宽度可能会干扰显示，此时使用outline属性替代border
outline: 1px solid red;

tips: 如何让元素自动居中
margin: 0 auto;
指定auto为第二个参数基本上会告诉浏览器自动确定左右边距本身，方法是将它们均等设置。它保证左右边距将设置为相同的大小。第一个参数0表示顶部和底部边距都将设置为0。
其效果等同于

margin-top:0;
margin-bottom:0;
margin-left:auto;
margin-right:auto;

最好使用margin-left:auto; margin-right:auto;，以防覆盖margin-top, margin-bottom.

负margin（平均布局）

做float平均布局时，一个元素里包裹数个子元素，每个子元素都有自己的margi-right，则最后一个元素会因为其右侧margin溢出而转到下一行
此时可在所有子元素外再套一层父元素 ，并使其margin-right为负数

截屏2021-02-10 17.15.06.png

Flex布局(flex flow) 弹性盒模型

.container {
  display: flex; /* 或者 display: inline-flex */
}

flex-direction 弹性盒模型方向

flex-direction: row;  /* default, left->right */
flex-direction: row-reverse; /* right->left */
flex-direction: column; /* top->down */
flex-direction: colunm-reverse; /* down->top */