创建布局

问题导向清单

问题导向清单
问题解决方案
改变元素在容器块中的定位方式?使用 CSS position 属性。
设置定位元素(具有 position 属性)相对于容器边界的偏移量?使用 top、bottom、left、right 属性。
定位元素发生相互覆盖,设置元素的层叠顺序?使用 z-index 属性。
创建跟报纸页面类似的布局?使用多列布局。
将空间流式分配给容器中的元素?使用弹性盒布局。
为元素创建表格样式布局?弃用 table 元素,改用 CSS 表布局。

利用 CSS position 属性定位内容

控制内容最简单的方式就是通过 CSS 定位属性,令浏览器改变元素的布局方式。

position 属性指定了元素的放置/定位方式:静态(static)、相对(relative)、绝对(absolute)和固定(fixed)。

position 属性
默认值static
继承no
JavaScript 语法object.style.position="relative"
定位属性
属性说明
postion设置定位方式。static(静态的,缺省值/默认值)
relative(相对)
absolute(绝对)
fixed(固定)
left
right
top
bottom
为已定位元素设置偏移量。长度
百分数
auto
z-index设置定位元素的层叠顺序数字

position 属性设置了元素的定位方式,position 属性值具体说明了浏览器应该对元素采取哪种定位方式。

position 属性值
属性值说明
static静态放置,缺省/默认值。元素出现在正常的文本摆放顺序(标签出现的先后顺序)中,忽略 top、bottom、left、right 和 z-index 声明。
relative相对放置,即相对于其正常位置放置,即在 static 静态放置的基础上做偏移。通过指定 left、top、right 和 bottom 属性,在静态放置的基础上进行偏移。因此,left: 20px; 就是在元素静态放置的基础上向左偏移 20px。
absolute绝对放置,不受任何限制的放置在容纳它的容器中,不受正常的文本摆放顺序的限制,想放哪放哪,那么就只剩下一个限制——容器限制,即相对于 position 属性值不为 缺省/static 的第一个祖先元素(通常为父元素)来放置。通过指定 left、top、right 和 bottom 属性。
fixed固定放置,位置是死的,元素位置相对于浏览器窗口来放置。通过指定 left、top、right 和 bottom 属性。
sticky

说明:

  • 静态放置:块级元素独占 100% 浏览器窗口宽度,其表现为在垂直方向上和周围元素有所区别,与在元素前后放置换行符效果类似。行内元素与周围内容共享浏览器窗口宽度,即没有换行效果。

创建弹性盒子布局

弹性盒子由 弹性容器(flex container) 和 弹性子元素(flex item) 组成。

浏览器支持

浏览器支持
浏览器GoogleeFirefoxSafariOpera
需加前缀-webkit--moz--webkit--webkit-

弹性容器(flex container)属性

flex container 属性
弹性容器属性说明
display 元素通过设置 display 属性将其定义为弹性容器。flex/-webkit-flex/-moz-flex
inline-flex/-webkit-inline-flex/-moz-inline-flex
flex-direction弹性容器的弹性方向(主轴方向)。row(横向从左到右屈伸,缺省/默认值)
row-reverse(横向从右到左屈伸)
column(纵向从上到下屈伸)
column-reverse(纵向从下到上屈伸)
flex-wrap弹性容器允许换行或换列。nowrap
wrap
wrap-reverse
initial
inherit
justify-content内容排满全行或全列(主轴的对齐方式)。flex-start(缺省/默认值)
flex-end
center
space-between(两边对齐)
space-around(等间隔排列)
align-items校直/对齐所有弹性子元素(交叉轴的对齐方式)。stretch(缺省/默认值)
flex-start
flex-end
center
baseline
align-contentflex-start
flex-end
center
space-between
space-around
stretch

说明:

  • 弹性容器外 及 弹性子元素内 是正常布局。弹性盒子只定义了 弹性子元素 如何在 弹性容器内 布局。
  • 当一个元素设置为弹性容器时,它的 子元素 默认成为 弹性子元素。
  • 弹性盒子只是 弹性容器 和 弹性子元素 之间的布局方式,与其祖先元素和后代元素无关。

弹性容器坐标系

固定 width、height 的弹性子元素在弹性容器内布局的实际意义并不大。

row: (s, s)

					
.flex-container-row-ss {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row: (s, e)

					
.flex-container-row-se {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-end;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row: (e, s)

					
.flex-container-row-es {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-start;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row: (e, e)

					
.flex-container-row-ee {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;
  justify-content: flex-end;
  align-items: flex-end;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row-reverse: (s, s)

					
.flex-container-row-reverse-ss {
  display: flex;
  display: -webkit-flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-items: flex-start;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row-reverse: (s, e)

					
.flex-container-row-reverse-ss {
  display: flex;
  display: -webkit-flex;
  flex-direction: row-reverse;
  justify-content: flex-start;
  align-content: flex-end;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row-reverse: (e, s)

					
.flex-container-row-reverse-es {
  display: flex;
  display: -webkit-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-content: flex-start;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

row-reverse: (e, e)

					
.flex-container-row-reverse-ee {
  display: flex;
  display: -webkit-flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
  align-content: flex-end;
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px; 
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item-fixed-wh_1
flex-item-fixed-wh_2
flex-item-fixed-wh_3

让弹性子元素弹起来

不设置弹性子元素的 width 或/和 height 的弹性盒子运用比较广泛。

row: (s, stretch)

					
.flex-container-default {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;             //缺省值
  justify-content: flex-start;     //缺省值
  align-items: stretch;            //缺省值
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item {
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3

row: (s, s)

					
.flex-container-row-ss {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;            
  justify-content: flex-start;    
  align-items: flex-start;          
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item {
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2
flex-item_3

row: (s, e)

					
.flex-container-row-se {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;             
  justify-content: flex-start;     
  align-items: flex-end;          
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item {
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2
flex-item_3

row: (e, s)

					
.flex-container-row-es {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;             
  justify-content: flex-end;       
  align-items: flex-start;          
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item {
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2
flex-item_3

row: (e, e)

					
.flex-container-row-ee {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;             
  justify-content: flex-end;       
  align-items: flex-end;          
  width: 500px;
  height: 400px;
  background-color: white;
}

.flex-item {
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2
flex-item_3

flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1flex-item_1
flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2flex-item_2
flex-item_3

flex-container flex-wrap 属性

flex-container 默认排满一行或一列。flex-container flex-wrap 属性允许排满多行或多列。

默认排满一行:

					
.flex-container {
  display: flex;
  display: -webkit-flex;
  width: 500px;
  height: 400px;
  flex-direction: row;            
  background-color: white;
}

.flex-item-fixed-wh {
  width: 100px;
  height: 100px;
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3
flex-item_4
flex-item_5
flex-item_6
flex-item_7
flex-item_8
flex-item_9

允许多行或多列:

					
.flex-container {
  display: flex;
  display: -webkit-flex;
  flex-direction: row;                //缺省值
  flex-wrap: wrap;
  justify-content: flex-start;        //缺省值
  align-items: flex-start;            //缺省值
  background-color: white;
}

.flex-item {
  border: 1px solid red;
  color: white;
  background-color: black;
}
					
				
flex-item_1
flex-item_2
flex-item_3
flex-item_4
flex-item_5
flex-item_6
flex-item_7
flex-item_8
flex-item_9

flex-container display 属性

					
<!DOCTYPE html>
<html>
  <head>
    <style type="text/javascript">
      .flex-container {
        display: -webkit-flex;
        display: flex;
        width: 400px;
        height: 300px;
        background-color: white;
      }
      .flex-item {
        width: 100px;
        height: 100px;
        margin: 10px;
        color: white;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="flex-container">
      <div class="flex-item">flex item 1</div>
      <div class="flex-item">flex item 2</div>
      <div class="flex-item">flex item 3</div>
      <div class="flex-item">flex item 4</div>
      <div class="flex-item">flex item 5</div>
    </div>
  </body>
</html>
					
				

效果如下:

flex item 1
flex item 2
flex item 3
flex item 4
flex item 5

说明:

  • 弹性子元素通常在弹性盒子内 一行 显示。默认情况每个弹性容器只有一行。
					
<div class="flex-container">
  <div class="flex-item">flex item 1</div>
  <div class="flex-item">flex item 2</div>
  <div class="flex-item">flex item 3</div>
</div>
					
				

效果如下:

flex item 1
flex item 2
flex item 3

弹性子元素 设置不当可能会溢出 弹性容器:

flex item 1
flex item 2
flex item 3

溢出部分对弹性盒子外内容的影响。

flex-container flex-direction 属性

缺省/默认值 或者 flex-direction: row;

用一条刚性(无弯曲)水平线 按照弹性子元素出现的先后顺序 将弹性子元素 从左到右 串起,无换行。如果水平宽度不够,那么将按照弹性子元素的初始宽度比压缩弹性子元素内容的宽度,边框和边距保持不变。

注意:先从第一个子元素串起,到最后一个子元素结束。

flex item 1
flex item 2
flex item 3

注意 边框 和 边距 对弹性盒子的影响。

flex-direction: row-reverse;

row 反转:用一条刚性(无弯曲)水平线 按照弹性子元素出现的先后顺序 将弹性子元素 从右到左 串起,无换行。如果水平宽度不够,那么将按照弹性子元素的初始宽度比压缩弹性子元素内容的宽度,边框和边距保持不变。

注意:先从第一个子元素串起,到最后一个子元素结束。

flex item 1
flex item 2
flex item 3

注意 边框 和 边距 对弹性盒子的影响。

flex-direction: column;

用一条刚性(无弯曲)垂直线 按照弹性子元素出现的先后顺序 将弹性子元素 从上到下 串起,无换行。如果垂直高度不够,那么将按照弹性子元素的初始高度比压缩弹性子元素内容的高度,边框和边距保持不变。

注意:先从第一个子元素串起,到最后一个子元素结束。

flex item 1
flex item 2
flex item 3

注意 边框 和 边距 对弹性盒子的影响。

flex-direction: column-reverse;

用一条刚性(无弯曲)垂直线 按照弹性子元素出现的先后顺序 将弹性子元素 从下到上 串起,无换行。如果垂直高度不够,那么将按照弹性子元素的初始高度比压缩弹性子元素内容的高度,边框和边距保持不变。

注意:先从第一个子元素串起,到最后一个子元素结束。

flex item 1
flex item 2
flex item 3

注意 边框 和 边距 对弹性盒子的影响。

flex-container justify-content 属性

往串线开始(第一个弹性子元素)的方向靠:

					
.flex-container {
  justify-content: flex-start;
}
					
				

flex-direction: row; //或者缺省

flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3

往串线结束(最后一个弹性子元素)的方向靠:

					
.flex-container {
  justify-content: flex-end;
}
					
				

flex-direction: row; //或者缺省

flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3

往串线中间对齐:

					
.flex-container {
  justify-content: center;
}
					
				

flex-direction: row; //或者缺省

flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3

往串线两边对齐:

					
.flex-container {
  justify-content: space-between;
}
					
				

flex-direction: row; //或者缺省

flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3

弹性子元素等间隔排列:

注意串线两头的弹性子元素与弹性容器壁之间的间隔,这两个间隔宽度的加和是一个完整的弹性子元素之间的等间隔宽度。

					
.flex-container {
  justify-content: space-around;
}
					
				

flex-direction: row; //或者缺省

flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3

flex-container align-items 属性

					
.flex-container {
  align-items: flex-start;
}

.flex-item {

}
					
				

flex-direction: row; //或者缺省

flex item1flex item1flex item1flex item1flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3
					
.flex-container {
  align-items: flex-end;
}
					
				

flex-direction: row; //或者缺省

flex item1
flex item2
flex item3

flex-direction: row-reverse;

flex item1
flex item2
flex item3

flex-direction: column;

flex item1
flex item2
flex item3

flex-direction: column-reverse;

flex item1
flex item2
flex item3

我对弹性盒子的理解——烧烤炉子

我有一个烧烤炉子,默认只有一根签子,我把要烧烤的元素用签子串起来,我总是先串第一个元素,然后串第二个元素,这样按照顺序依次串起所有元素。因为我只有这一根签子,又必须一次性把所有烧烤元素都串起来,炉子长的话签子就长,这些烧烤元素就不会拥挤;炉子短的话签子就短,这些烧烤元素就要被压扁,变形,挤一挤了。

前、后、左、右四个方向都能摆放签子:

注意签子总是先从第一个烧烤元素开始串起,直到最后一个。横着串(row)只会影响烧烤元素内容的宽度,因为烧烤元素不能落在烧烤炉子外面。此时烧烤炉子的宽度对我的烧烤元素有所影响。

站在左边烧烤:

					
.flex-container {
  flex-direction: row;   //或者缺省
}
					
				

站在右边烧烤:

注意签子总是先从第一个烧烤元素开始串起,直到最后一个。横着串(row)只会影响烧烤元素内容的宽度,因为烧烤元素不能落在烧烤炉子外面。此时烧烤炉子的宽度对我的烧烤元素有所影响。

					
.flex-container {
  flex-direction: row-reverse;   
}
					
				

站在前边烧烤:

注意签子总是先从第一个烧烤元素开始串起,直到最后一个。竖着串(column)只会影响烧烤元素内容的高度(长度),因为烧烤元素不能落在烧烤炉子外面。此时烧烤炉子的高度(长度)对我的烧烤元素有所影响。

					
.flex-container {
  flex-direction: column;   
}
					
				

站在后边烧烤:

注意签子总是先从第一个烧烤元素开始串起,直到最后一个。竖着串(column)只会影响烧烤元素内容的高度(长度),因为烧烤元素不能落在烧烤炉子外面。此时烧烤炉子的高度(长度)对我的烧烤元素有所影响。

					
.flex-container {
  flex-direction: column-reverse;   
}