工作了许久也积累了不少经验，现在从零开始记录下，自己的经验和总结，
这是一篇总结html+css常见的布局和坑的
pc常见布局方式
pc布局有很多种，圣杯布局，双飞翼等等，但是开发中基本上没用过，常见用的就两种
1、margrn+浮动布局
margin: 0 auto; 配合上 float:left/right;
效果如图
然后有了布局也要有对齐
text-align: center; // 水平居中对齐
line-height: 100px; // 行高，一般用它实现垂直居中 , 实现容器中行内元素的对齐这里面有一些坑，就是新手可能会用 vertical-align: middle;
这个是针对行内元素的，先要设置父元素为行内，才有效果，然后也不是很好用，我个人平时用的比较少。
line-height: 100%; 行高也有坑，这样百分比也是无效的，行高百分比单位的时候
基于当前字体尺寸的百分比行间距。
这是w3c的一句话，什么意思呢？就是这个是基于父元素font-size字体尺寸的，特定情况有用，平时用不到100%；
新手注意开始用px为单位即可
2、响应式布局
这也是开发pc网站常用的布局
主要应用技术@media媒体查询和 width宽度%单位
响应式布局核心就是打断点，下面附上我常用断点
/*mobile first 移动先行*/
/* xs超小屏 直接作为默认样式 */
body{}
/* sm小屏 */
@media screen and (min-width:576px){
}
/* md 中屏 */
@media screen and (min-width:768px){
}
/* lg 大屏 */
@media screen and (min-width:992px){
}
/* xl 超大屏 */
@media screen and (min-width: 1200px){
}可以看得出来我采用的是移动先行的策略，sm超小屏作为默认样式，说下含义了
xs一般是375px 手机大小，sm是大屏手机，md中屏平板，lg是小屏幕电脑，xl就是我们正常电脑了。
适配怎么做呢？
首先1200px电脑上还可以用margin: 0 auto;和浮动布局，也可以百分比，看你们设计师的图了
然后关键点就是手机上，要用百分比布局，只要 用了百分比，就要用 怪异盒子模型，不然没法写
*{
/* 怪异盒模型 */
box-sizing: border-box;
}怪异盒模型，就是把padding也计算到了宽度里面，这里就不细讲了。
然后响应式布局的适用范围，就是一些展示型的企业站，一些大的网站都会自己开发相应的移动站点、
因为响应式的缺点就是，不同终端会多出很多无用代码，这在重视网站体验的网站是无法忍受的。
对齐方式一般也选用 text-align和line-height
3、其他pc布局方式
然后就是一些非常规布局
position定位属性，固定定位用的比较多，也有人用固定相对定位配合，代替margin和float布局的，不过页面多的会有层级问题，一般不采用。
顺带一嘴，如果你float布局盒子想要调试层级的话 position: relative;先设置相对定位，就能加层级的，正常文档流z-index是无效的。
曾经流行过得布局，双飞翼，圣杯布局，我都试过，原理就是margin: -100%负的边距上去，但是现在不咋讲究布局，好用就行，pc的话，就我之前上面两个足够了，
然后工作中更多是关注业务相关逻辑
移动端布局方式
移动端兼容性比较好，我们就可以用w3c专门用来布局的属性，弹性盒子布局
/* 父容器 */
.parent{
/* 重点就这四个属性了，关于主轴交叉轴概念就不细说了，有兴趣可以自行去了解， */
/* 弹性盒子 */
display: flex;
/* 方向水平 不换行 */
flex-flow: row nowrap;
/* 主轴居中对齐 */
justify-content: center;
/* 交叉轴居中对齐 */
align-items: center;
}
/* 子容器 */
.children{
/* 宽度百分比单位 */
width: 33.333%;
/* 是否平分剩余空间 默认为 0 不平分 */
flex-grow: 1;
}关于弹性盒子布局还有挺多可以说的的，有空我可以专门出个弹性盒子布局的文章，这篇文章就不详细讲了。
弹性盒子是w3c专门为布局设置的属性，还是听好用的，最简单用法，就我上面那么写就行了。
移动端布局适配
移动端一般采用rem为单位，根据html字体大小来适配
公式 1rem = html标签的字体大小，html默认字体16px，就是说，你没有设置1rem = 16px;
下面是css动态设置
html{
/* 这是以iphone6 的10分之一屏幕为基准 即为 10px 换算时候 1rem = 10px即可*/
font-size: calc(100vw / 37.5);
}当然我用的是js动态设置的，vw兼容性还是有点问题；
然后手动转还是太麻烦了，我用的 postcss-px2rem-exclude 插件
"postcss-px2rem-exclude": { // 添加的代码
remUnit: 20, // 设置rem转换规则 20px 转rem
exclude: /node_modules|folder_name/i // 忽略node_modules目录下的文件
}这个rem转化，规则设置好了就行，然后就能开心用px开发了，然后因为iphone6 dpr是2，所以转rem时候调大了两倍。
至此移动端和pc布局都讲完了
接下来列举下，html两三个小问题吧，大家可以看下自己有没有遇到过，是我之前工作遇到问题中网上翻找，然后自己总结的，出处不可考了，所以直接复制给大家看看。
一、两个div标签/a标签和div盒子中有空隙
因为浏览器把元素当成了字，空隙是给一些对齐字母后仍然长出一截的预留的.解决方法:
把body的font-size设置成0；
这样做的时候要记得下面写div的时候给元素指定字号。
二、img下方空白问题
a 标签是 inline non-replaced 元素
img 标签是 inline replaced 元素 行内元素，inline-block元素的默认对齐是基于baseline的，
对于没有行内元素的box，baseline为底部边缘。如果有inline元素，对齐baseline为inline元素的baseline。
容器中，虽然没有其他字符，但是默认有一个类似长度为0的空白字符，此时就会使底部高度被撑高。
多高呢？
是行高的底部到baseline的距离。
解决方法:
`` 设置 display: inline-block;（改变 a 标签高度计算方式）
`![]()
` 设置 vertical-align: bottom;（消除 img 底下额外的高度）
三、input搜索框空隙
内联块换行写会有空隙，空隙大小一般为默认字体的一半，1、浮动转为块级元素可解决 2、手动清除空格