html+css常见布局和问题

yuanfa247

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

这是一篇总结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-alignline-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盒子中有空隙

因为浏览器把元素当成了字,空隙是给一些对齐字母后仍然长出一截的预留的.

解决方法:

​ 把bodyfont-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、手动清除空格

谢谢大家观看,小弟第一次写文章,有啥错漏的,希望大家不吝指出,共同进步呀~!
阅读 978
21 声望
0 粉丝
0 条评论
21 声望
0 粉丝
文章目录
宣传栏