display

block （块元素）:

  • 块元素会在页面中独占行(自上向下垂直排列)
  • 默认宽度是父元素的全部(会把父元素撑满)
  • 默认高度是被内容撑开(子元素)

一般用于其他标签的容器,常用的块级元素包括 div p h1-h6 hr ul ol li dl dd dt form

inline （行内元素）:

  • 行内元素不会独占页面的一行， 只占自身的大小
  • 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元则元素 会换到第二行继续自左向右排列 (书写习惯一致)
  • 行内元素的默认宽度和高度都是被内容撑开。

常用的行内元素包括span a

行内元素的盒模型

  • 行内元素不支持设置宽度和高度
  • 行内元素可以设置padding,但是垂直方向padding不会影响页面的布局 ;
  • 行内元素可以设置border.垂直方向的border不会影响页面的布局;
  • 行内元素可以设置margin,垂直方向的margin不会影响布局

inline-block （行内元素）:支持宽高，自左向右排列,不独占一行
,常用的行内块元素包括img textarea input

none :
一些特殊元素的默认 display 值是none，例如script, display:none被 JavaScript 用来在不删除元素的情况下隐藏或显示元素。
它和visibility属性不一样。把display设置成 none元素不会占据它本来应该显示的空间，但是设置成 visibility: hidden;还会占据空间。

position

static : 静态,默认值,文档流

relative :
相对定位不脱离文档流,对周围元素的位置没有任何影响
如果相对定位不写偏移属性或者偏移量为0,效果与没写定位一样
相对自已原来位置做偏移原来的位子不会被占着(不脱离文档流)
使用场合
①类似于margin(margin挤开,相对定位覆盖其他元素),做自身位置的微调
②作为绝对定位的祖先级已定位属性(子绝父相,此处多不写偏移属性)
偏移属性的特点: 上下冲突,以top为准 ; 左右冲突,以left为准

fixed :
将元素固定在页面上某个位置,不会随着滚动条滚动,变化位置

一直固定在可视区域 , 一个固定定位（position属性的值为fixed）元素会相对于视窗来定位，这意味着即便页面滚动，它还是会停留在相同的位置。和relative一样，top、right、bottom和left属性都可用。一个固定定位元素不会保留它原本在页面应有的空隙，即之后添加的元素会占用他之前的位置。

absolute :
绝对定位脱离文档流
1.没有已定位的祖先级元素,相对body左上角偏移

2.相对于,离自己最近的,已定位的,祖先级元素的左上角做偏移

注意:最适合把祖先级变成已定位元素的样式,relative

float

通过浮动可以使一个元素 向其父元素的左侧或右侧移动 使用float 属性来设置于元素的浮动
可选值: none 默认值，元素不浮动
left 元素向左浮动
right 元素向右浮动
注意，元素设置浮动以后，水平布局的等式便不需要强制成立
元素设置浮动以后，会完全从文档流中脱离，不再占用文档流的位置， 所以元素 下边的还在文档流中的元素会自动向上移动

浮动的特点:

  1. 浮动元素会完全脱离文档流，不再占据文档流中的位置
  2. 设置浮动以后元素会向父元素的左侧或右侧移动，
  3. 浮动元素默认不会从父元素中移出
  4. 浮动元素向左或向右移动时，不会超过它前边的其他浮动元素
  5. 如果浮动元素的上边是一个没有浮动的块元素，则浮动元素无法上移
  6. 浮动元素不会超过它上边的浮动的兄弟元素，最多最多就是和它一样高

浮动目前来讲它的主要作用就是让页面中的元素可以水平排列，
通过浮动可以制作一些水平方向的布局
浮动元素不会盖住文字，文字会自动环绕在浮动元素的周围，
所以我们可以利用浮动来设置文字环绕图片的效果
元素设置浮动以后，将会从文档流中脱离，从文档流中脱离后，元素的一些特点也会发变化
脱离文档流的特点:

块元素:

  • 块元素不在独占页面的一行
  • 脱离文档流以后，块元素的宽度和高度默认都被内容撑开

行内元素:

  • 行内元素脱离文档流以后会变成块元素（可设置宽高），特点和块元素一样
  • 脱离文档流以后，不需要再区分块和行内了

clear :
float属性被用于控制浮动。即元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用clear属性，clear属性指定元素两侧不能出现浮动元素。

清除浮动
在一个div中放一张图片，有时候图片会超出div的范围，这个时候我们需要这样做，给div加上此属性

.clearfix { overflow: auto; }

flex

容器的属性

  • flex-direction（主轴方向）
  • flex-wrap（是否换行）
  • flex-flow（主轴方向与是否换行的简写形式）
  • justify-content（在长度上的排列方式）
  • align-items（在宽度上的排列方式）
  • align-content（行间距）

flex-direction :
属性决定主轴的方向（即项目的排列方向）
, 可以理解为元素排列的起点在哪里，沿哪个方向排列。把显示屏比喻为一张纸的话，该属性决定了第一个字在哪个角开始写以及第一行字写的方向

row（默认值）：主轴为水平方向，起点在左端。

row-reverse：主轴为水平方向，起点在右端。

column：主轴为垂直方向，起点在上沿。

column-reverse：主轴为垂直方向，起点在下沿。

flex-wrap :
默认情况下，项目都排在一条线（又称”轴线”）上。flex-wrap属性定义，如果一条轴线排不下，如何换行, 把显示屏比喻为一张纸的话，该属性决定了一行字写完以后换行不换行（假设是字可以一直缩小，不换行且继续新增的话，字会背挤的越来越小）

nowrap（默认）：不换行。

wrap：换行，第一行在上方。

wrap-reverse：换行，第一行在下方。

flex-flow

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

justify-content :
justify-content属性定义了项目在主轴上的对齐方式，可以理解为在显示屏的长度这个方向上元素的排列方式 , 把显示屏比喻为一张纸的话，该属性决定了在这一行的字的排列方式

flex-start（默认值）：左对齐

flex-end：右对齐

center： 居中

space-between：两端对齐，项目之间的间隔都相等。

space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。

align-items :
align-items属性定义项目在交叉轴上如何对齐
可以理解为在显示屏的宽度上元素的排列方式，把显示屏比喻为一张纸的话，该属性决定第一行字距离纸的边距距离

flex-start：交叉轴的起点对齐。

flex-end：交叉轴的终点对齐。

center：交叉轴的中点对齐。

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

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

align-content :
align-content属性定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用, 可以理解为行与行之间的间隔距离，把显示屏比喻为一张纸的话，该属性决定第行间距

flex-start：与交叉轴的起点对齐。

flex-end：与交叉轴的终点对齐。

center：与交叉轴的中点对齐。

space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

stretch（默认值）：轴线占满整个交叉轴。（平均铺满显示器）