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的宽度不同。如图:
CSS布局_第1张图片
标准的盒子模型: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布局的基本概念
CSS布局_第2张图片
容器默认存在两根轴,一根主轴(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三栏布局

    

你可能感兴趣的:(CSS布局)