常见居中布局方式

一、垂直/和平行居中方式总结(5个)

1. 垂直居中：绝对定位（确定子元素宽度）

1. 必须使用定位属性

2. 必须给元素设置高度

3. t/b = 0

4. margin：auto

2、垂直居中：flex布局align-items

弊端：

1. flex容器中的所有元素都会被垂直居中
2. 行对来说兼容性会差一点，(基本可以忽略)

3、绝对定位百分比加(位移百分比/margin-left负值)（不确定子元素宽度）

1. 兼容性会好一点ie9
2. 推荐定位百分比的方式 3. 定位：让元素向下位移父元素的50%
3. translate：让元素向上位移自身的50%(这个属性只能在块级元素上面使用)
4. 不过目前flex布局已经非常普及，直接使用flex布局即可；

     position: absolute;
      transform: translateX(-50%);
      top: 10%;

注意：这里如果不使用translate，使用margin的时候不要轻易设置百分比要给固定的值，因为margin/padding的百分比是相对于父级元素的width

4、相对定位/百分比和位移百分比

• relatice的百分比也是相对于父容器的
• 省去用绝对行为，子绝父相的写法

虽然和绝对定位的使用方法相同，但还是有使用场景的。

5、行内元素垂直居中line-heigt

1. 默认base-line对其
2. 一般用于文字居中

二、平行居中（5个）

1、margin：auto

• 块级元素居中

2、text-algin

• 文字居中

3、绝对定位固定宽度（确定子元素宽度）

position:absoule;
wdth:100px; /*必须要有宽度*/
left: 0;
fight: 0;

4、flex

5、绝对定位百分比和(translate百分比/margin固定负值)不确定子元素宽度场景

6、相对定位/百分比和位移百分比

• relatice的百分比也是相对于父容器的
• 省去用绝对行为，子绝父相的写法

虽然和绝对定位的使用方法相同，但还是有使用场景的。

使用场景：banner图 要进行居中的时候

三、vertical-align

作用：

vertical-align 会影响 行内块级元素 在一个 行盒 中垂直方向的位置

内容撑起来高度的本质

内容有行高（line-height），撑起来了div的高度

line-boxes

行高为什么可以撑起div的高度？

• 这是因为line boxes的存在，并且line-boxes有一个特性，包裹每行的inline level
• line-boxes中的文字是有行高的，必须将整个行高包裹进去，才算包裹这个line-level

重点

1. 如果这个div中有图片，文字，inline-block，甚至他们设置了margin 。line boxes也会包裹在内

2. 有图片、文字、inline-block（比图片要大，而且设置了margin-bottom并且有文字）

   • 当行内块级元素里面有文字的时候 baseline就不在底部了，而是在最后一行文本的x下方

3. vertical-align：默认之是baseline对其，由于特殊单词的原因基线会在x的下方,其他行内元素也不例外baseline对齐的话底部都会有line-box底部到x底部的3px的距离

4. vertical-align是设置当前元素，不能设置到父元素，所以想要保证元素占满父元素的话，除了设置vertical-align的对齐方式外，还要注意 同一个line-box中是否有元素在撑大line-box

5. line-height会撑大line box

vertical-align的其他值

• middle：行内级盒子的中心点与父盒基线加上x-height一半的线对齐
  • 所以vertical-aligin：middle 不会嫁给你行内块级元素居中，会有文字下沉的效果
  • 可以利用line-height
• <percentage>：把行内级盒子提升或者下降一段距离（距离相对于line-height计算\元素高度）， 0%意味着同baseline一样 <length>：把行内级盒子提升或者下降一段距离，0cm意味着同baseline一样
• 解决图片下边缘的间隙方法: 方法一: 设置成top/middle/bottom 方法二: 将图片设置为block元素

四、前端书写规范

https://guide.aotu.io/docs/name/classname.html

五、css编写顺序

1. 先确定盒子本身是如何布局

   position: absolute

   float: left/right

   display: flex

2. 盒子的特性和可见性

   display: block/inline-block/inline/none

   visibility/opacity

3. 盒子模型

   width/height

   box-sizing

   margin/border/padding/content

   box-shadow/text-shadow

4. 内部的文本文字

   font/text

5. background background-image/size/position/color

6. 其他 transform/transition/overflow/white-space

H5新增语义化元素

1. 根据页面结构，由div派生的标签

   header- 头标签

   footer - 尾标签 nav - 导航 hgroup - 标题组合（一个标题和一个子标题） section - 划分页面的不同区域 article - 页面上一套结构完整且独立的内容部分 aside - 和主题相关的附属信息

2. 媒体元素 组合< figure>和< fitcaption>

3. < time>标签 - 专门用来表示时间

4. < datalist>标签 - 定义选项列表

5. < details>标签 - 用来描述文档或文档某个部分的细节

6. < address>标签 - 定义文章作者/拥有者的联系信息

7. < mark>标签 - 定义带有记号的文本

8. < keygen>标签 - 用于给表单添加公钥

9. < process>标签 - 定义进度条