flex布局怎么实现宽度自适应?
发布日期:2021-05-20 10:06:46 浏览次数:6 分类:技术文章

本文共 1893 字,大约阅读时间需要 6 分钟。

1、UI界面

  • 页面分为两个部分,左右两格,当页面进行伸缩时,其宽度随着页面宽度自适应。
    在这里插入图片描述
  • 左右两格排列
给父元素div进行设置
display: flex;
flex-flow: row wrap; // 以行排列 并且允许换行
align-content: flex-start;
  • flex-flow 设置轴向与换行组合

是 flex-direction 和 flex-wrap 的简写。
所以只要掌握,flex-direction 和 flex-wrap即可。

  • 两个盒子的宽度随着页面宽度自适应。
  • 为了实现这一功能,这里就要引入CSS3的calc()属性。
  • calc是英文单词calculate(计算)的缩写,是css3的一个新增的功能,可以使用calc()给元素的border、margin、pading、font-size和width等属性设置动态值。
  • 这个函数使我们能够计算CSS值,而不是指定确切的值。通常用于计算元素的大小或位置。它支持加法、减法、乘法和除法。

需要特别注意重要一点是+和-运算符必须用空格隔开,不然无法正常工作。*和/运算符不有这限制,但出于一致性的考虑,建议添加空格。

另外,很棒的是,我们可以混合CSS单位,例如,我们可以减去百分比和像素。

  • 代码如下 给子元素设置
// 给奇数元素设置了右边距的情况下test:nth-child(odd) {
   
margin-right: 20px;}test: {    
width: calc(50% - 10px);}
  • 对于下面这个布局,主要是实现三角形,并且给三角形加边框颜色。
    在这里插入图片描述
  • 三角形
  • 三条边框透明,一条边框有颜色。
  • 向左的三角形
border-right: 26px solid #FFFFFF;
border-top: 11px solid transparent;
border-bottom: 11px solid transparent;
border-left: 8px solid transparent;

另一种写法

  • 向上的三角形
border-width: 0 5px 8px;
border-style: solid;
/* 四个颜色值 上右下左 */
/*  三个颜色值 上透明 左右透明 下颜色 */
border-color: transparent transparent #ffffff;
  • 给三角形边框设置颜色、设置阴影。
  • 做法其实就是设置两个三角形出来,位置不一样,即可实现边框、阴影的效果
  • 使用到伪类元素::before :after
  • 知道了原理其实代码也就很简单
  • 边框颜色就是给两个三角形设置不同的颜色边框,阴影同样,给两个三角形设置不同的颜色即可。
test:before {
   
...}test:after {    ...}

对于哪个方向的三角形,设置的时候只要给与方向相反的边颜色即可。

例如:

左三角

#triangle-left {

 width: 0;  height: 0;  border-top: 50px solid transparent;  border-right: 100px solid red;  border-bottom: 50px solid transparent;}

在这里插入图片描述

右三角

#triangle-right {

 width: 0;  height: 0;  border-top: 50px solid transparent;  border-left: 100px solid red;  border-bottom: 50px solid transparent;}

在这里插入图片描述

1、对于以上提示框的好的,我知道了,这一功能的实现。
2、解决方案是使用LocalStorage进行本地存储

  • 关闭提示的时候进行存储
dom.find(".tip span").on("click ", function () {
   
dom.find(".tip").addClass("none");
window.localStorage.setItem("prompt", true);
})
  • 在页面初始化的时候进行判断
// 控制提示是否显示
if (!window.localStorage.getItem("prompt")) {    
dom.find(".tip").removeClass("none");
} else {    
dom.find(".tip").addClass("none");
}

在这里插入图片描述

转载地址:https://blog.csdn.net/weixin_45416217/article/details/108444844 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!

上一篇:box-shadow实现轻拟物风格按钮
下一篇:react中巧妙使用动态解构属性

发表评论

最新留言

表示我来过!
[***.191.171.16]2022年08月11日 08时50分56秒

关于作者

    喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!

最新文章