一阶段复习整理加深

行内

块级

行内块级元素

是否设置高宽，是否占满一块

设置高宽？

块级元素或者行内块级元素

div  section header footer h1-h6 =display:block(变味块级元素)

img input button

=display：inline-block (变为行内块级)

float position  （变为行内块级）

float

1.脱离文档流，后面的元素会占据前面浮动的元素的空间（重叠,文本流不被遮盖）

2，变成行内块级元素，高度宽度变成内容的高宽

3.浮动的元素都在浮动层，浮动层只有一层

4.浮动层元素的排列，左浮动的往左边靠，右浮动的往右边靠，一边放不下就换行，被上面的元素遮挡过的空间都不可以再用。

5.**浮动塌陷,子元素脱离文档流，造成父元素的高度变小         **

解决方案

1.设置高宽

2.overflow:hidden（父元素上设置）

3.加一个假的小儿子（高度为 0,块级元素），加一个 clear：both

4.alter  添加伪类元素（相当于行内元素）加 display:block,clear:both

**    BFC**

BFC 全称是 Block Formatting Context，即块格式化上下文。它是 CSS2.1 规范定义的，关于 CSS 渲染定位的一个概念。

文本的对齐

水平 text-align:left right center

justify（两端对齐常用于英文）

垂直 单行文本：line-height:容器的高度

多行文本： (要居中的容器上设置)

{

display:table-cell;

vertical-align:middle

}

{

display:flex;

align-items:center

}

图片和文本

**   ** 默认底部对齐

顶部对齐 修改 img 的基线对齐， vertical-algin:top

中部对齐 修改 img 的基线对齐，vertical-algin:middle

盒模型

盒子的组成

外边距，边框，内边框，内容

盒子尺寸的计算

标准 box-sizing:content-box 设置的高宽是内容的高宽，把边框以及 margin 和 padding 往外面挤

怪异 box-sizing:border-box **设置的高宽是，以边框(margin)的宽高  ****把内容以及 margin 和 padding 往中间面挤**

margin

** **   margin 的合并,垂直方向相遇，取较大值

margin 的 bug，首尾的子元素的垂直方向的 margin 回应用到父元素上。

解决方案

1.给父级加 border

2.overflow(做菜单的时候不能使用)

3.把子元素的 margin 改成父元素的 padding

border

padding

一块内容的对齐

水平居中

margin:auto

width:比容器小的值

定位的元素垂直水平居中

margin:auto

width:比容器宽度小的值

height:比容器高度小的值

top:0

bottom:0

left:0

right:0

position:父相子绝

position，有元素重叠的情况才使用

static  不定位（清除定位）

relative  相对定位，不脱离文档流，相对自己原来的位置定位。

**    absolute**

绝对定位，脱离文档流，变成行内块级元素。

以最近一级已定位的祖先进行定位。

如果祖先都没有定位，以窗口定位。

fixed  固定定位

原则父相子绝。

相对的元素不脱离文档流，不会影响外部的布局。

绝对定位脱离文档流，

span,图片中间的小白缝隙   （因为回车导致的）

图片在 div 内，下面有小白空隙。