工作了许久也积累了不少经验,现在从零开始记录下,自己的经验和总结,
这是一篇总结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、手动清除空格