html+css常见布局和问题

工作了许久也积累了不少经验，现在从零开始记录下，自己的经验和总结，

这是一篇总结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的距离。

解决方法:

`<a>` 设置 display: inline-block;（改变 a 标签高度计算方式）
`<img>` 设置 vertical-align: bottom;（消除 img 底下额外的高度）

三、input搜索框空隙

内联块换行写会有空隙，空隙大小一般为默认字体的一半，1、浮动转为块级元素可解决 2、手动清除空格

谢谢大家观看，小弟第一次写文章，有啥错漏的，希望大家不吝指出，共同进步呀~！