Layout Skill
使用vw定制rem自适应布局
/* 基于UI width=750px DPR=2的页面 */
html {
font-size: calc(100vw / 7.5);
}
使用:not()去除无用属性
- 要点：通过
:not()排除指定元素不使用设置样式 - 场景：符号分割文字、边界元素排版(首元素、尾元素、左右两边元素)
- 兼容：:not()
<div class="bruce flex-ct-x" data-title="使用:not()去除无用属性">
<ul class="cleared-attr">
<li class="first-line">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
</li>
<li class="second-line">
<span>A</span>
<span>B</span>
<span>C</span>
<span>D</span>
<span>E</span>
</li>
</ul>
</div>
关键CSS
.first-line span:not(:last-child)::after {
content: ",";
}
.second-line span:not(:nth-child(-n+3)) {
display: none;
}
图片.png
使用writing-mode排版竖文
- 要点：通过
writing-mode调整文本排版方向 - 场景：竖行文字、文言文、诗词
- 兼容：writing-mode
<div class="bruce flex-ct-x" data-title="使用writing-mode排版竖向文本">
<div class="vertical-text">
<h3>情</h3>
<p>我见犹怜，<br>爱不释手。<br>雅俗共赏，<br>君子好逑。</p>
</div>
</div>
.vertical-text {
writing-mode: vertical-rl;
h3 {
padding-left: 20px;
font-weight: bold;
font-size: 18px;
color: #f66;
}
p {
line-height: 30px;
color: #66f;
}
}
图片.png
使用object-fit规定图像尺寸
- 要点：通过
object-fit使图像脱离background-size的约束，使用<img>来标记图像背景尺寸 - 场景：图片尺寸自适应
- 兼容：object-fit
object-fit: fill|contain|cover|scale-down|none|initial|inherit;
<li>
<h3>ScaleDown</h3>
<img class="scale-down" src="https://static.yangzw.vip/codepen/ab-2.jpg">
</li>
img {
width: 100%;
height: 260px;
background-color: #3c9;
&.cover {
object-fit: cover; // 保持原有尺寸比例。但部分内容可能被剪切
}
&.contain {
object-fit: contain; // 保持原有尺寸比例。内容被缩放。
}
&.fill {
object-fit: fill; // 默认，不保证保持原有的比例，内容拉伸填充整个内容容器。
}
&.scale-down {
object-fit: scale-down; // 保持原有尺寸比例。内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。
}
}
图片.png
使用overflow-x排版横向列表
- 要点：通过
flexbox或inline-block的形式横向排列元素，对父元素设置overflow-x:auto横向滚动查看 - 场景：横向滚动列表、元素过多但位置有限的导航栏
- 兼容：overflow-x
<div class="bruce flex-ct-y" data-title="使用overflow-x排版横向列表">
<div class="horizontal-list flex">
<ul>
<li>Alibaba</li>
<li>Tencent</li>
<li>Baidu</li>
<li>Jingdong</li>
<li>Ant</li>
<li>Netease</li>
<li>Meituan</li>
<li>ByteDance</li>
<li>360</li>
<li>Sina</li>
</ul>
</div>
<div class="horizontal-list inline">
<ul>
<li>Alibaba</li>
<li>Tencent</li>
<li>Baidu</li>
<li>Jingdong</li>
<li>Ant</li>
<li>Netease</li>
<li>Meituan</li>
<li>ByteDance</li>
<li>360</li>
<li>Sina</li>
</ul>
</div>
</div>
.horizontal-list {
overflow: hidden;
width: 300px;
height: 100px;
& + .horizontal-list {
margin-top: 10px;
}
ul {
overflow-x: auto;
cursor: pointer;
&::-webkit-scrollbar {
height: 10px;
}
&::-webkit-scrollbar-track {
background-color: #f0f0f0;
}
&::-webkit-scrollbar-thumb {
border-radius: 5px;
background-color: #f66;
}
}
li {
overflow: hidden;
height: 90px;
background-color: #66f;
line-height: 90px;
text-align: center;
font-size: 16px;
color: #fff;
& + li {
margin-left: 10px;
}
}
&.flex {
ul {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
}
li {
flex-shrink: 0;
flex-basis: 90px;
}
}
&.inline {
height: 102px;
ul {
overflow-y: hidden;
white-space: nowrap;
}
li {
display: inline-block;
width: 90px;
}
}
}
使用text-align-last对齐两端文本
- 要点：通过
text-align-last:justify设置文本两端对齐 - 场景：未知字数中文对齐
- 兼容：text-align-last
<div class="bruce flex-ct-x" data-title="使用text-align-last对齐两端文本">
<ul class="justify-text">
<li>账号</li>
<li>密码</li>
<li>电子邮件</li>
<li>通讯地址</li>
</ul>
</div>
.justify-text {
li {
padding: 0 20px;
width: 100px;
height: 40px;
background-color: #f66;
line-height: 40px;
text-align-last: justify;
color: #fff;
& + li {
margin-top: 5px;
}
}
}
网友评论