CSS布局/定位

1.盒子模型

1.四部分组成

• Margin(外边距) - 清除边框外的区域，外边距是透明的。

• Border(边框) - 围绕在内边距和内容外的边框。

• Padding(内边距) - 清除内容周围的区域，内边距是透明的。

• Content(内容) - 盒子的内容，显示文本和图像。

  指定一个盒子大小
  div {
  width: 300px;
  border: 25px solid green;
  padding: 25px;
  margin: 25px;
  }

2.传统布局模式

1.标准流

标签按照规定好的默认方式排列

块级独占一行，从上到下排列

行内元素按照顺序，从左到右顺序排列，碰到父元素边缘换行

2.浮动

浮动可以改变元素标签默认的排列方式，最典型的就是让多个块级元素在同一行显示

网页布局第一准则 多个块级元素纵向排列找标准流，横向排列找浮动

	在样式中增加一个属性 float: 属性值； left/right 向左向右浮动

浮动的特性

	1.脱离标准流

	2.盒子不再保留原先的位置，后面的标准流元素补上

	3.浮动元素具有行内块元素的特性

	4.浮动只会影响后面的标准流，前面的与浮动元素无关

	

	可以用父元素管上下（标准流），子元素管左右（浮动）

清除浮动 clear ==>left/right/both

	因为父盒子很多情况下不方便给高度，盒子浮动又不占用位置，最后父盒子高度为0，影响下面标准流的元素（把下面的元素挡住了）

	清除浮动就是为了清除浮动元素造成的影响，浮动清除后，父盒子会自动计算浮动元素的高度，这样就不会影响下面的标准流了，如果父盒子本身有高度则不需要清除浮动

	几乎只用both

清除浮动的方法

1.额外标签法 闭合浮动

	在最后一个浮动的子元素末尾增加一个空标签 < br / > 或者 style为 clear：both的div等 

2.父级添加overflow

	设置值 hidden 缺点是溢出部分没办法显示

3.布局思路

第一步：确定版心，可视区

第二步：分析模块，每个行模块中的列模块

第三步：先确定列的大小，再确定列的位置

第四步：制作HTML结构，最后再调整样式

3.定位

1.为什么要用定位

要一个元素在盒子内自由移动并固定在某个位置，标准流和浮动不能实现

2.定位的四种分类和特点

	定位 = 定位模式 + 边偏移

	定位模式通过position来设置

		1.static 静态定位

			元素默认值，意思为无定位，标准流，无边偏移



		2.relative 相对定位

			相对于它原来的位置偏移，原来的标准流仍占有位置，别的元素不能来

span {
	position:relative;
	top: 100px; //相对原来的顶部100px
	left: 100px; //相对原来的左边100px
}



			

		3.absolute 绝对定位

			以最近一级有定位的父元素为参考点移动，父元素全部没有定位以浏览器页面为准

			原来位置不保留，脱离标准流

		4.fixed 固定定位 

			定在屏幕上，滚动页面也不动	

			以可视窗口为参照点移动		

3.子绝父相

子级绝对定位，父级相对定位

子级不占有位置，可以放到父级的任何一个地方，不影响其他兄弟盒子

父盒子加定位限制子盒子在父盒子内显示

父盒子布局需要占有位置，所以用相对定位

4.粘性定位

sticky 

以可视窗口为参照点移动（固定定位）

占有原先位置（相对定位）

5.定位叠放

z-index: 1  == 数值越大越靠上

6.定位制作小技巧

1. 固定定位到版心右侧
   先设置固定定位fixed，left: 50%;
   在右移版心宽度的一半 margin-left

2.居中

加了绝对定位后不能通过margin：0 auto实现水平居中

直接left：50% ，然后往回走自己的一半

3.margin负值

例如浮动之后两个盒子边框贴在一起，中间的边框加粗了，用负值让边框变细

4.文字围绕浮动元素

浮动不会压住文字

直接在盒子内输入文字

增加浮动元素，文字会自动被挤开，围绕浮动元素

5.行内块元素 inline-block

行内块元素在一行有缝隙，可以少调margin值

4.Flex布局

任何一个容器都可以指定为Flex布局，设置为Flex布局后，子元素的float，clear和vertical-align属性将消失

用Flex布局的元素称为Flex容器，子元素为Flex项目

1.基本：

1.有水平主轴和垂直的交叉轴

2.项目默认沿主轴排列

2.盒子属性

1.flex-direction属性决定主轴的方向（即项目的排列方向）

.box {
  flex-direction: row | row-reverse | column | column-reverse;
}

row 默认 水平

column 垂直

row-reverse 水平反向

column-reverse 垂直反向

2.flex-wrap属性定义，如果一条轴线排不下，如何换行

.box{
  flex-wrap: nowrap | wrap | wrap-reverse;
}

wrap 换行

nowrap 不换行(默认)

wrap-reverse 行序反向(第一行在最底部)

3.flex-flow ==> flex-direction 和 flex-wrap 属性的简写

.box {
  flex-flow: <flex-direction> || <flex-wrap>;
}

默认 row nowrap 一行排列，不换行

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

.box {
  justify-content: flex-start | flex-end | center | space-between | space-around;
}

flex-start 默认 主轴左对齐

flex-end 右对齐

center 居中

space-between 贴边等距

space-around 两边等距

space-evenly 全部距离相等

5.align-items属性定义项目在交叉轴上如何对齐

.box {
  align-items: flex-start | flex-end | center | baseline | stretch;
}

flex-start：顶起点对齐

flex-end：底对齐

center：交叉轴中点对齐，上下对称

baseline: 项目的第一行文字的基线对齐

stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度

3.项目属性

1.order定义项目的排列顺序，数值越小越靠前，默认值为0

.item {
  order: <integer>;
}

2.flex-grow定义项目的放大比例，默认为0

.item {
  flex-grow: <number>; /* default 0 */
}

3.flex-shrink 定义缩小比例默认为1，空间不足就自动缩小

.item {
  flex-shrink: <number>; /* default 1 */
}

项目的 flex-shrink 属性为0，其他项目都为1，则空间不足时，前者不缩小

4.flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间

可以设置像素，也可设置比例

默认为auto，项目原本的大小

.item {
  flex-basis: <length> | auto; /* default auto */
}

5.flex 上面三个的简写

分配剩余的空间用来表示自己占多少份

.item {
  flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
}

默认 ： flex: 0 1 auto ;

6.align-self 设置项目单独和其他项目不同的对齐方式

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

.item {
  align-self: auto | flex-start | flex-end | center | baseline | stretch;
}