工作了很久，积累了很多经验。现将自己的经验和总结从头记录下来。这是html+css常用布局和pc常用布局的总结pc布局，圣杯布局，双飞翼等方式有很多种，但是在开发中基本没用过，常用的有两个1，margrn+浮动布局边距：0auto；浮动：左/右；效果如下然后是图片的布局，必须要对齐text-align:center;//水平居中对齐line-height:100px;//行高，一般用来实现垂直居中，实现容器内行内元素的对齐有一些坑，就是新手可能会用vertical-align:middle;这是针对内联元素的。必须先把父元素设置成内联才有效果，然后就不太好用了。就个人而言，我通常较少使用它。行高：100%；行高也有坑，所以百分比也是无效的。当行高百分比单位是基于当前字体大小的百分比行间距。这是w3c的一句话，什么意思？这是基于父元素的字体大小。在特定情况下有用，通常小于100%；初学者要注意开始使用px为单位。2.响应式布局这也是开发PC网站常用的主要布局应用技术@媒体查询和width%单位响应式布局的核心就是断点，下面附上我常用的断点/*mobilefirstmobilefirst*//*xs超小屏直接作为默认样式*/body{}/*sm小屏*/@mediascreenand(min-width:576px){}/*mdmediumscreen*/@mediascreenand(min-width:768px){}/*lg大屏*/@mediascreenand(min-width:992px){}/*xl超大屏*/@mediascreenand(min-width:1200px){}可以看出我采用的是mobile-first的策略，sm超小屏是默认的样式。意思就是xs一般是375px手机的大小，sm是大屏手机，md是中屏平板，lg是小屏电脑，xl是我们普通的电脑。如何适应？首先，margin:0auto;并且在1200px的电脑上也可以使用浮动布局，也可以使用百分比。查看您的设计师的图片。关键是在手机上，你需要使用百分比布局。只要用百分比，就一定要用weirdboxmodels，否则写不出*{/*Weirdboxmodel*/box-sizing:border-box;}weirdboxmodel，即padding也要计算进宽度，这里就不细说了。那么响应式布局的适用范围就是一些展示型企业网站，一些大型网站会自己开发相应的移动端网站，因为响应式布局的缺点就是在不同的终端会有很多无用的代码，就是对网站体验很重要。该网站是无法忍受的。对齐一般也用text-align和line-height3，其他pc布局方式，然后是一些非常规的layoutposition定位属性。fixed定位用的比较多，有些人用固定的相对定位代替margin和float布局。如果页面太多，会出现层次问题，一般不会用到。对了，如果要调试float布局框的水平position:relative;先设置相对定位，可以加上level，正常的文档流z-index是无效的。流行的布局，双飞翼，圣杯布局我都试过了。原理是margin:-100%negativemargin，不过现在不太注重布局，只要好用就好。对于PC，只有上面两个。适可而止，接下来更多的关注工作中的业务相关逻辑。该移动端布局方法对移动端具有更好的兼容性。我们可以使用w3c的特殊属性进行布局，灵活的盒子布局/*parentcontainer*/.parent{/*重点是这四个属性。主轴和横轴的概念我就不多说了。有兴趣的可以自己去了解一下。*//*弹性盒子*/display:flex;/*方向不水平换行*/flex-flow:rownowrap;/*主轴对齐中心*/justify-content:center;/*横轴居中对齐*/align-items:center;}/*子容器*/.children{/*宽度百分比单位*/width:33.333%;/*剩余空间是否平分，默认0，不平分*/flex-grow:1;}flexbox布局有很多话要说，我可以专门写一篇文章介绍flexboxlayout有空的时候，这篇文章就不细说了。Flexbox是w3c专门为布局设置的属性，听上去好用。最简单的用法就是我上面写的。移动端布局适配移动端一般采用rem为单位，根据html字体大小适配公式1rem=html标签的字体大小，默认html字体为16px，也就是说你没有设置1rem=16px；下面是css动态设置html{/*这个是基于iphone6屏幕的十分之一，也就是10px。转换时，1rem=10px*/font-size:calc(100vw/37.5);}当然我是用js动态设置，vw兼容性还是有点问题；然后手动转换还是比较麻烦，我用的是postcss-px2rem-exclude插件"postcss-px2rem-exclude":{//添加代码remUnit:20,//设置rem转换规则20px为remexclude:/node_modules|folder_name/i//忽略node_modules目录下的文件}这个rem转换，规则设置好了，然后就可以愉快的用px开发了，而且因为iphone6的dpr是2，所以转换成的时候调大雷姆双。至此，移动端和PC端的布局就完成了。下面列举两三个html中的小问题。你可以看看你是否遇到过他们。自己在网上搜索了自己之前工作中的问题，然后自己总结。源码不能再测试了，所以直接复制出来给大家看看。1、两个div标签/a标签和div框之间有空隙是因为浏览器把元素当成了一个词，空隙是为一些对齐的字母保留的，这些字母还长着。解决方法：把body-size的字体设置为0；这样做时，请记住在下面写div时指定元素的字体大小。2.imga标签下面的空白问题是inline非替换元素img标签是inlinereplacedelement内联元素，inline-block元素默认以基线对齐，对于没有inline元素的boxes，基线是底部边缘。如果有内联元素，则对齐基线为内联元素的基线。虽然容器中没有其他字符，但默认有一个长度为0的空白字符，会增加底部高度。有多高？是行高底部到基线的距离。解决方案：``setdisplay:inline-block;（更改标签高度的计算方法）``setvertical-align:bottom;（去掉img下多余的高度）3.在输入搜索框的空隙中写块和换行的时候会有空隙。间隙的大小一般是默认字体的一半。1.可以将float转化为块级元素来解决问题。2.手动清除空格。不吝指点，共同进步~！
