CSS布局

CSS布局

css布局是css中重要的部分，有下列几种方式：table表格布局，float浮动布局，flex布局

• table表格布局
• float浮动布局(css+div)
  1.两栏布局
  2.三栏布局
• flex布局
  1.盒子模型
  2.定位position
  3.flexbox布局

table表格布局

最初网页比较简单的时候，最常用的就是表格布局，因为表格布局可以展现出多个块的排列。

    
        
            
       
 
左边
         
              
右边
        
       
        
   
 

局限性：table页面元素比较多，占用的字节比其他的HTML多（造成下载时间延迟,占用服务器更多流量资源，用户等待页面加载时间久）；可以使用更加灵活的div

float浮动布局(css+div)

两栏布局
实现方式：float + margin：

    
        
  
左-定宽度
      
  
右-适应宽度
    
 
 

三栏布局
实现方式：两边定宽，然后中间的width是auto的，可以自适应内容，再加上margin边距，来进行设定

//方法一：用float

   
 
        
      
左
       
      
右
       
      
中
    //html的结构要将middle放在最后，放在中间的话假设中间有块级元素会把right挤到下面；因为浮动元素会把块级元素的位置空出来，所以right放在最后的话右边的浮动元素把上面的位置空了下来，造成right右边下移
 

flex布局

盒子模型
盒子模型：每个元素，都会形成一个矩形块，主要包括四部分：margin(外边距)+border(边框)+padding(内边距)+content(内容)

css中存在两种不同的盒子模型，可以通过box-sizing设置不同的模型。两种盒子模型，主要是width的宽度不同。如图：

标准的盒子模型：width的长度等于content的宽度
当将box-sizing的属性（CSS3属性）值设置成border-box时，盒子模型的width=border+padding+content的总和

定位position
定位的概念就是它允许你定义一个元素相对于其他正常元素的位置，它应该出现在哪里，这里的其他元素可以是父元素，另一个元素甚至是浏览器窗口本身。
关于position的六个属性：

• static（默认情况，存在文档流当中）
• relative（根据元素本身原来所应该处的位置偏移，不会改变布局的计算）
• absolute（绝对定位，脱离文档流，不会对别的元素造成影响，相对的是父级最近的 relative 或者 absolute 定位元素）
• fixed（绝对定位，脱离文档流，相对于的是屏幕，就是那些浮动的广告那样，怎么拉都固定在同一个位置，而 absolute 元素离开屏幕就看不见了）
• sticky：(这是css3新增的属性值)粘性定位，官方的介绍比较简单，或许你不能理解。其实，它就相当于relative和fixed混合。最初会被当作是relative，相对于原来的位置进行偏移；一旦超过一定阈值之后，会被当成fixed定位，相对于视口进行定位
• inherit 规定应该从父元素继承 position 属性的值。

flexbox布局
flexbox 布局即弹性盒子布局，它的特点是盒子本来就是并列的，只需要指定宽度；
1.任何容器都可以指定为flex布局：

.box{
  display: flex;
}

行内元素也可以设置为flex布局

.box{
  display: inline-flex;
}

设为 flex 布局以后，子元素的float、clear和vertical-align属性将失效
2.flex布局的基本概念

容器默认存在两根轴，一根主轴（main axis）和垂直的交叉轴（cross axis）。主轴的开始位置（与边框的交叉点）叫做main start，结束位置叫做main end；交叉轴的开始位置叫做cross start，结束位置叫做cross end。
项目默认沿主轴排列。单个项目（即容器中的子元素）占据的主轴空间叫做main size，占据的交叉轴空间叫做cross size

3.flex容器的属性

• flex-direction 决定主轴的方向，即项目的排列方向

存在下面四个值
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。

• flex-wrap 默认情况下，项目都排在一条线（又称"轴线"）上。flex-wrap属性定义，如果一条轴线排不下，如何换行

存在的值
nowrap (默认值)：不换行
wrap ： 换行，第一行在上面
wrap-reverse ： 换行，第一行在下面

• flex-flow 是flex-direction属性和flex-wrap属性的简写形式，默认值为row nowrap

• justify-content 定义了项目在主轴上的对齐方式

可能取5个值，具体对齐方式与轴的方向有关。
下面假设主轴为从左到右
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

• align-items 定义项目在交叉轴上如何对齐

它可能取5个值。具体的对齐方式与交叉轴的方向有关，
下面假设交叉轴从上到下。
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。

• align-content 定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用

flex-start：与交叉轴的起点对齐。
flex-end：与交叉轴的终点对齐。
center：与交叉轴的中点对齐。
space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。
space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。
stretch（默认值）：轴线占满整个交叉轴。

4.容器中项目的属性

• order 定义项目的排列顺序。数值越小，排列越靠前，默认为0
• flex-grow 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大

如果所有项目的flex-grow属性都为1，则它们将等分剩余空间（如果有的话）。如果一个项目的flex-grow属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。

• flex-shrink 定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小（负值对该属性无效。）
• flex-basis 定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小

可以设为跟width或height属性一样的值（比如350px），则项目将占据固定空间

• flex
  是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。

该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
flex 属性可以指定1个，2个或3个值

• 单值语法: 值必须为以下其中之一:
  一个无单位数(number): 它会被当作flex-grow的值。
  一个有效的宽度(width)值: 它会被当作 flex-basis的值。
  关键字none，auto或initial.
  （
  initial：元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器 。相当于将属性设置为"flex: 0 1 auto"。
  auto：元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 “flex: 1 1 auto”.
  none：元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。
  ）
  -双值语法: 第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。第二个值必须为以下之一：
  一个无单位数：它会被当作 flex-shrink的值。
  一个有效的宽度值: 它会被当作 flex-basis的值。
• 三值语法:
  第一个值必须为一个无单位数，并且它会被当作 flex-grow 的值。
  第二个值必须为一个无单位数，并且它会被当作 flex-shrink 的值。
  第三个值必须为一个有效的宽度值， 并且它会被当作 flex-basis 的值。

• align-self 允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

.content{   
 width: 700px;    
 height: 100px;    
 display: flex; //设置为使用flex布局
 }
 .left{    
 width: 200px;    //固定左右的宽度
 height: 100px;    
 background-color: red;   
 }
 .right{    
 width: 200px;     
 height: 100px;    
 background-color: yellow; 
 }
 .middle{    
 height: 100px;    
 flex: 1;     让flex-grow为1，即说明多余的空间都给middle
 background-color:green;   
  }
  
      
    
        
        
左
        
        
中
        
        
右
    
   
  

///比较经典的flex三栏布局

    
        
       
左
        
       
中
        
       
右