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

谢谢大家观看,小弟第一次写文章,有啥错漏的,希望大家不吝指出,共同进步呀~!
21 声望
0 粉丝
0 条评论
推荐阅读
原生js实现类jq框架
前言 今天来实现一个简单的js框架,类似jq的功能,实现了增减class,增减属性,链式调用,合并对象等功能, 更加深入理解下js原型prototype的应用,是之前承诺的原型模式应用的文章,欢迎评论交流 初始化方法 {代...

yuanfa247阅读 1.4k

还在用 JS 做节流吗?CSS 也可以防止按钮重复点击
举个例子:一个保存按钮,为了避免重复提交或者服务器考虑,往往需要对点击行为做一定的限制,比如只允许每300ms提交一次,这时候我想大部分同学都会到网上直接拷贝一段throttle函数,或者直接引用lodash工具库

XboxYan35阅读 2.6k评论 2

封面图
【关于Javascript】--- 正则表达式篇
基础知识一、元字符 {代码...} 二、量词 {代码...} 三、集合 字符类 {代码...} 四、分支 {代码...} 五、边界 开始结束 {代码...} 六、修饰符 {代码...} 七、贪婪模式和非贪婪模式js默认贪婪模式即最大可能的匹配...

Jerry35阅读 3k

CSS transition 小技巧!如何保留 hover 的状态?
欢迎关注我的公众号:前端侦探通常情况下,hover 是无法保存状态的。鼠标移入触发额外样式,一旦移出就还原了 {代码...} 这就意味着,如果需要保留hover的状态,可能就不得不借助JS了,比如下面是某某书院的首页...

XboxYan30阅读 3.8k评论 2

封面图
CSS 如何设置自动滚动定位的“安全”间距?
欢迎关注我的公众号:前端侦探介绍两个和滚动定位相关的 CSS 属性:scroll-padding和 scroll-margin在平时开发中,经常会碰到需要快速定位的问题,比如常见的锚点定位 {代码...} 这样,在点击a标签时会自动定位到...

XboxYan31阅读 2.5k评论 2

封面图
【已结束】SegmentFault 思否写作挑战赛!
SegmentFault 思否写作挑战赛 是思否社区新上线的系列社区活动在 2 月 8 日 正式面向社区所有用户开启;挑战赛中包含多个可供作者选择的热门技术方向,根据挑战难度分为多个等级,快来参与挑战,向更好的自己前进!

SegmentFault思否20阅读 5k评论 10

封面图
由小见大!不规则造型按钮解决方案
今天,有个群友在群里提问,使用 CSS 能否实现下述这个图形:emmm,中间这个酷似三次贝塞尔曲线的造型,使用 CSS 不太好实现。我的建议是切图实现,然而群友要求一定要用 CSS 实现。虽然麻烦,但是这个图形勉强也...

chokcoco17阅读 1.2k

封面图
21 声望
0 粉丝
宣传栏