CSS布局

左右布局

把两个span标签的class分别设置为left和right,就能实现左右布局,width可以自己确定;

内联元素从左往右,遇到阻碍重启一行, 实际上 line-height 的值是多少像素，那么 span 所占的高度就是多少,内联元素左右padding有用,上下padding没用 块级元素从上往下,每个块占一行,高度由内部文档流高度决定

由于两个span标签都在div(块级元素)元素内,所以设定200px是有效的,如果把div改为span,内容多少,高度就是多少

左中右布局

注意:content必须在left,right后面,否则content与right面积会部分重合

垂直居中

   1.只要将其“line-height”设置成和“height”值一样就可以了,仅适用于单行文本

 

  2.Flex 布局：

不考虑兼容老式浏览器的话，用Flex布局简单直观一劳永逸：

3.绝对定位

内容块的父容器设置为position:relative，使用上述绝对居中方式，可以使内容居中显示于父容器。

水平居中

1.利用 text-align: center 可以实现在块级元素内部的内联元素水平居中。此方法对内联元素(inline), 内联块(inline-block), 内联表(inline-table), inline-flex元素水平居中都有效。

2.通过把固定宽度块级元素的margin-left和margin-right设成auto，就可以使块级元素水平居中。

3.有两个或两个以上的块级元素，通过设置块级元素的显示类型为inline-block和父容器的text-align属性从而使多块级元素水平居中。  

4.利用弹性布局(flex)，实现水平居中，其中justify-content 用于设置弹性盒子元素在主轴（横轴）方向上的对齐方式，本例中设置子元素水平居中显示。