前言
在日常项目开发中，在布局方面有遇到哪些问题了？今天来一起看看css布局有哪些小技巧，后续开发更轻松。本文主要通过简单的示例，讲述开发中遇到的布局等问题，但不仅限于布局相关，会有其他相关知识点。
CSS实用技巧第二讲：布局处理
rem自适应布局
移动端使用rem布局需要通过JS设置不同屏幕宽高比的font-size，结合vw单位和calc()可脱离JS的控制，代码如下：
|
1 |
/* 基于UI width=750px DPR=2的页面 */<br>html {<br> font-size: calc(100vw / 7.5);<br>} |
rem 页面布局, 不兼容低版本移动端，使用需谨慎。
overflow-x排版横向列表
通过flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看。注意场景： 横向滚动列表、元素过多但位置有限的导航栏。
CSS实用技巧第二讲：布局处理
|
1 |
<div class="horizontal-list flex"><br> <ul><br> <li>web秀</li><br> <li>阿里巴巴</li><br> <li>字节跳动</li><br> <li>腾讯</li><br> <li>百度</li><br> <li>美团</li><br> </ul><br></div><br><div class="horizontal-list inline"><br> <ul><br> <li>web秀</li><br> <li>阿里巴巴</li><br> <li>字节跳动</li><br> <li>腾讯</li><br> <li>百度</li><br> <li>美团</li><br> </ul><br></div> |
scss样式
|
1 |
.horizontal-list {<br> width: 300px;<br> height: 100px;<br> ul {<br> overflow-x: scroll;<br> cursor: pointer;<br> margin: 0;<br> padding: 0;<br> &::-webkit-scrollbar {<br> height: 6px;<br> }<br> &::-webkit-scrollbar-track {<br> background-color: #f0f0f0;<br> }<br> &::-webkit-scrollbar-thumb {<br> border-radius: 5px;<br> background: linear-gradient(to right, #32bbff, #008cf4);<br> }<br> }<br> li {<br> overflow: hidden;<br> margin-left: 10px;<br> height: 90px;<br> background-color: #00b7a3;<br> line-height: 90px;<br> text-align: center;<br> font-size: 16px;<br> color: #fff;<br> &:first-child {<br> margin-left: 0;<br> }<br> }<br>}<br>.flex {<br> ul {<br> display: flex;<br> flex-wrap: nowrap;<br> justify-content: space-between;<br> }<br> li {<br> flex-shrink: 0;<br> flex-basis: 90px;<br> }<br>}<br>.inline {<br> margin-top: 10px;<br> height: 102px;<br> ul {<br> overflow-y: hidden;<br> white-space: nowrap;<br> }<br> li {<br> display: inline-block;<br> width: 90px;<br> }<br>} |
知识点解析：
1、display: flex布局：又名“弹性布局”，任何一个容器都可以指定为Flex布局。详细内容请点击
2、滚动条样式美化。
如何自定义滚动条样式了？ 掌握这3个选择器即可。
（1）、::-webkit-scrollbar 定义了滚动条整体的样式；
（2）、::-webkit-scrollbar-thumb 滑块部分；
（3）、::-webkit-scrollbar-track 轨道部分；
所以上面scss代码中，我们书写了这3个选择器的样式，改变了滚动条的样式。
3、linear-gradient线性渐变。语法如下：
|
1 |
background-image: linear-gradient(direction, color-stop1, color-stop2, ...); |
direction用角度值指定渐变的方向（或角度）, color-stop1, color-stop2,…用于指定渐变的起止颜色。
to right的意思就是从左到右，从一个颜色过渡到另外一个颜色。
请看示例：
CSS实用技巧第二讲：布局处理
更多详细内容请点击：
《CSS3线性径向渐变、旋转、缩放动画实现王者荣耀匹配人员加载页面》
移动端1px边框解决方案
在retina屏中，像素比为2(iPhone6/7/8)或3(iPhone6Plus/7Plus/8Plus)，1px的边框看起来比真的1px更宽。
我们可以通过伪类加transform的方式解决。
CSS实用技巧第二讲：布局处理
transform：用于元素进行旋转、缩放、移动或倾斜，和设置样式的动画并没有什么关系，就相当于color一样用来设置元素的“外表”。
详细transform了解，请点击：
《CSS3最容易混淆属性transition transform animation translate》
左重右轻导航栏布局
非常简单的方式，flexbox横向布局时，最后一个元素通过margin-left:auto实现向右对齐。
请看示例：
|
1 |
<ul class="nav-list"><br> <li>HTML5</li><br> <li>CSS3</li><br> <li>JAVASCRIPT</li><br> <li>TYPESCRIPT</li><br> <li>THREE.JS</li><br> <li>NODE</li><br></ul> |
css样式
|
1 |
.nav-list {<br> display: flex;<br> align-items: center;<br> padding: 0 10px;<br> width: 700px;<br> height: 60px;<br> background-color: #00b7a3;<br>}<br>.nav-list li {<br> padding: 0 10px;<br> height: 40px;<br> line-height: 40px;<br> font-size: 16px;<br> color: #fff;<br> list-style: none;<br>}<br>.nav-list li + li {<br> margin-left: 10px;<br>}<br>.nav-list li:last-child {<br> margin-left: auto;<br>} |
CSS实用技巧第二讲：布局处理
纯CSS折叠面板
|
1 |
<div class="accordion"><br> <input type="checkbox" id="collapse1"><br> <input type="checkbox" id="collapse2"><br> <input type="checkbox" id="collapse3"><br> <article><br> <label for="collapse1">web秀</label><br> <p>html<br>javascript<br>css<br>uni app</p><br> </article><br> <article><br> <label for="collapse2">今日头条</label><br> <p>新闻<br>图片<br>视频<br>养生</p><br> </article><br> <article><br> <label for="collapse3">阿里巴巴</label><br> <p>淘宝<br>阿里云<br>闲鱼<br>天猫</p><br> </article><br></div> |
scss样式
|
1 |
.accordion {<br> width: 300px;<br> article {<br> margin-top: 5px;<br> cursor: pointer;<br> &:first-child {<br> margin-top: 0;<br> }<br> }<br> input {<br> display: none;<br> padding: 0;<br> margin: 0;<br> &:nth-child(1):checked ~ article:nth-of-type(1) p,<br> &:nth-child(2):checked ~ article:nth-of-type(2) p,<br> &:nth-child(3):checked ~ article:nth-of-type(3) p {<br> border-bottom-width: 1px;<br> max-height: 600px;<br> }<br> }<br> label {<br> display: block;<br> padding: 0 20px;<br> height: 40px;<br> background-color: #00b7a3;<br> cursor: pointer;<br> line-height: 40px;<br> font-size: 16px;<br> color: #fff;<br> }<br> p {<br> overflow: hidden;<br> padding: 0 20px;<br> margin: 0;<br> border: 1px solid #00b7a3;<br> border-top: none;<br> border-bottom-width: 0;<br> max-height: 0;<br> line-height: 30px;<br> transition: all 500ms;<br> }<br>} |
CSS实用技巧第二讲：布局处理
纯CSS Tabbar切换效果
|
1 |
<div class="tab-navbar"><br> <input type="radio" name="tab" id="tab1" checked><br> <input type="radio" name="tab" id="tab2"><br> <input type="radio" name="tab" id="tab3"><br> <input type="radio" name="tab" id="tab4"><br> <nav><br> <label for="tab1">首页</label><br> <label for="tab2">列表</label><br> <label for="tab3">其他</label><br> <label for="tab4">我的</label><br> </nav><br> <main><br> <ul><br> <li>首页</li><br> <li>列表</li><br> <li>其他</li><br> <li>我的</li><br> </ul><br> </main><br></div> |
scss样式
|
1 |
*{<br> padding: 0;<br> margin: 0;<br>}<br>.active {<br> background-color: #00b7a3;<br> color: #fff;<br>}<br>.tab-navbar {<br> display: flex;<br> overflow: hidden;<br> flex-direction: column-reverse;<br> border-radius: 10px;<br> width: 300px;<br> height: 400px;<br> margin: 100px auto;<br> input {<br> display: none;<br> &:nth-child(1):checked {<br> & ~ nav label:nth-child(1) {<br> @extend .active;<br> }<br> & ~ main ul {<br> background-color: #f13f84;<br> transform: translate3d(0, 0, 0);<br> }<br> }<br> &:nth-child(2):checked {<br> & ~ nav label:nth-child(2) {<br> @extend .active;<br> }<br> & ~ main ul {<br> background-color: #44bb44;<br> transform: translate3d(-25%, 0, 0);<br> }<br> }<br> &:nth-child(3):checked {<br> & ~ nav label:nth-child(3) {<br> @extend .active;<br> }<br> & ~ main ul {<br> background-color: #ff7632;<br> transform: translate3d(-50%, 0, 0);<br> }<br> }<br> &:nth-child(4):checked {<br> & ~ nav label:nth-child(4) {<br> @extend .active;<br> }<br> & ~ main ul {<br> background-color: #00bbdd;<br> transform: translate3d(-75%, 0, 0);<br> }<br> }<br> }<br> nav {<br> display: flex;<br> height: 40px;<br> background-color: #f0f0f0;<br> line-height: 40px;<br> text-align: center;<br> label {<br> flex: 1;<br> cursor: pointer;<br> transition: all 300ms;<br> }<br> }<br> main {<br> flex: 1;<br> ul {<br> display: flex;<br> flex-wrap: nowrap;<br> width: 400%;<br> height: 100%;<br> transition: all 300ms;<br> }<br> li {<br> display: flex;<br> justify-content: center;<br> align-items: center;<br> flex: 1;<br> font-weight: bold;<br> font-size: 20px;<br> color: #fff;<br> }<br> }<br>} |
未经允许不得转载：一点博客-青梅煮码-共享博客 » CSS实用技巧第二讲：布局处理
评论抢沙发