CSS实用技巧第二讲:布局处理

前言

在日常项目开发中,在布局方面有遇到哪些问题了?今天来一起看看css布局有哪些小技巧,后续开发更轻松。本文主要通过简单的示例,讲述开发中遇到的布局等问题,但不仅限于布局相关,会有其他相关知识点。CSS实用技巧第二讲:布局处理

CSS实用技巧第二讲:布局处理

rem自适应布局

移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size,结合vw单位和calc()可脱离JS的控制,代码如下:

rem 页面布局, 不兼容低版本移动端,使用需谨慎。

overflow-x排版横向列表

通过flexbox或inline-block的形式横向排列元素,对父元素设置overflow-x:auto横向滚动查看。注意场景: 横向滚动列表、元素过多但位置有限的导航栏。CSS实用技巧第二讲:布局处理

CSS实用技巧第二讲:布局处理

scss样式

知识点解析:

1、display: flex布局:又名“弹性布局”,任何一个容器都可以指定为Flex布局。详细内容请点击

《CSS3中Flex弹性布局该如何灵活运用?》

2、滚动条样式美化。

如何自定义滚动条样式了? 掌握这3个选择器即可。

(1)、::-webkit-scrollbar 定义了滚动条整体的样式;

(2)、::-webkit-scrollbar-thumb 滑块部分;

(3)、::-webkit-scrollbar-track 轨道部分;

所以上面scss代码中,我们书写了这3个选择器的样式,改变了滚动条的样式。

3、linear-gradient线性渐变。语法如下:

direction用角度值指定渐变的方向(或角度), color-stop1, color-stop2,…用于指定渐变的起止颜色。

to right的意思就是从左到右,从一个颜色过渡到另外一个颜色。

请看示例:CSS实用技巧第二讲:布局处理

CSS实用技巧第二讲:布局处理

更多详细内容请点击:

《CSS3线性渐变、阴影、缩放实现动画下雨效果》

《CSS3线性径向渐变、旋转、缩放动画实现王者荣耀匹配人员加载页面》

《CSS3径向渐变实现优惠券波浪造型》

移动端1px边框解决方案

在retina屏中,像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus),1px的边框看起来比真的1px更宽。

我们可以通过伪类加transform的方式解决。CSS实用技巧第二讲:布局处理

CSS实用技巧第二讲:布局处理

transform:用于元素进行旋转、缩放、移动或倾斜,和设置样式的动画并没有什么关系,就相当于color一样用来设置元素的“外表”。

详细transform了解,请点击:

《CSS3最容易混淆属性transition transform animation translate》

左重右轻导航栏布局

非常简单的方式,flexbox横向布局时,最后一个元素通过margin-left:auto实现向右对齐。

请看示例:

css样式

CSS实用技巧第二讲:布局处理

CSS实用技巧第二讲:布局处理

纯CSS折叠面板

scss样式

CSS实用技巧第二讲:布局处理

CSS实用技巧第二讲:布局处理

纯CSS Tabbar切换效果

scss样式

CSS实用技巧第二讲:布局处理
未经允许不得转载:一点博客-青梅煮码-共享博客 » CSS实用技巧第二讲:布局处理
分享到:
赞(0) 打赏

评论抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏