精华内容
下载资源
问答
  • flex布局怎么实现宽度自适应

    千次阅读 2020-09-07 12:28:49
    页面分为两个部分,左右两格,当页面进行伸缩时,其宽度随着页面宽度自适应。 左右两格排列 给父元素div进行设置 display: flex; flex-flow: row wrap; // 以行排列 并且允许换行 align-content: flex-start; ...

    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");
    		}
    

    在这里插入图片描述

    展开全文
  • 利用padding-top 设置为100% 转载于:https://www.cnblogs.com/blowfish/p/5607230.html

    利用padding-top 设置为100%

    转载于:https://www.cnblogs.com/blowfish/p/5607230.html

    展开全文
  • 在前端页面开发中,我们会希望页面可以根据...宽度自适应 元素宽度设置为100%。(块元素宽度默认为100%),或者不设置宽度(width);(宽度是父元素的宽度) 高度自适应 1)自适应元素高度:height:auto;或者不设置;

    在前端页面开发中,我们会希望页面可以根据不同用户的显示比例自动缩放页面,确保用户体验,这就是PC自适应,下面小千就来给大家介绍一下应该怎么做和集中常见的问题解决方案,记得收藏起来遇到问题来看一看。

    自适应的优点:

    元素自适应在网页布局中非常重要,它能够使网页显示更灵活,可以适应在不同设备、不同窗口和不同分辨率下显示。

    宽度自适应

    元素宽度设置为100%。(块元素宽度默认为100%),或者不设置宽度(width);(宽度是父元素的宽度)

    高度自适应

      1)自适应元素高度:height:auto;或者不设置;(是子元素撑开父元素的高度)
    
      2)元素高度自适应窗口高度,设置方法:html,body{height:100%;}
    
      注:如果设置子元素的高度跟随父元素的高度变化而变化,那么父元素必须有高度。
    

    最小高度的自适应

      min-height属性:最小高度;(IE6浏览器不识别该属性)
    
      hack1:min-height:value;_height:value;
    
      hack2:min-height:value; height:auto!important;height:value;
    
      浮动元素父元素高度自适应(高度塌陷)
    
      当子元素有浮动并且父元素没有高度的情况下父元素会出现高度塌陷
    

    高度塌陷的解决方法

      hack1:给父元素添加声明overflow:hidden;(触发一个BFC)
    
      hack2: 在浮动元素下方添加空div,并给该元素添加
    
      声明:div{clear:both; height:0; overflow:hidden;}
    
      hack3:万能清除浮动法
    

    在这里插入图片描述

      visibility:hidden/隐藏
    
      visibility:hidden;和display:none;的区别:
    
      visibility:hidden;属性会使对象不可见,但该对象在网页所占的空间没有改变,等于留出了一块空白区域,而 display:none属性会使这个对象彻底消失不显示,也不再占用位置。
    

    标题伪对象选择符

      1)、::after : 与content属性一起使用,定义在对象后的内容。
    
      语法:选择符::after{content:”文字”;}
    
      选择符::after{content:url(图片路径);}
    
      如:div::after{content:url(logo.jpg);}
    
      div::after{content:"文本内容";}
    
      2)、::before: 与content属性一起使用,定义在对象前的内容。
    
      div::before{content:"在其前放内容";}
    
      3)、::first-letter 定义对象内第一个字符的样式。
    
      说明:*(该伪元素只能用于块级元素)
    
      4)、::first-line:定义对象内第一行的样式。
    
      *(该伪元素只能用于块级元素。)
    

    本文来自千锋教育,转载请注明出处

    展开全文
  • 上面的图是最左边收缩后的样子,下面是不收缩,滚动轴出现不了,导致后面的信息显示不全,各位亲谁知道该怎么设置呢 下面是页面布局,overflow-x:auto属性已经设置,但是不起作用。只有把,fit:true" style="overflow...
  • 自动换行搞定了。高度自适应,宽度自适应都没有效果 .net-aspx页面后台代码做的导出
  • 通过调用registerWriteHandler来设置表格样式,我这里设置只是设置表头的自适应宽度,创建一个类来继承AbstractColumnWidthStyleStrategy抽象类 packagecn.xxxx.xxxx.xxx.utils;importcom.alibaba.excel.metadata....

    1、效果如图

    2、Controller

    @GetMapping("/exportExcel")public void exportExcel(@RequestParam(value = "menu") String menu,

    @RequestParam(value= "dwflglId") intdwflglId,

    @RequestParam(value= "qjCode") String qjCode,

    HttpServletResponse response)throwsIOException {//内容集合

    List jthz =getJthz(dwflglId, qjCode);//表头集合

    List header =getHeaderOfHz(dwflglId, qjCode);

    response.setHeader("Content-Disposition", "attachment; filename=Zjlryshz.xlsx");//响应类型,编码

    response.setContentType("application/vnd.openxmlformats-officedocument.spreadsheetml.sheet");

    String bigTitle= "资金流入预算表";

    EasyExcel.write(response.getOutputStream()).head(getExcelHeader(header, bigTitle)).registerWriteHandler(new Custemhandler()).sheet("资金流入预算导出模板").doWrite(getExportData(jthz));

    }

    通过getExcelHeader(header, bigTitle)得到表头集合

    private List> getExcelHeader(Listheader, String bigTitle) {

    List> head = new ArrayList<>();

    List head0 = new ArrayList<>();

    head0.add(bigTitle);

    head0.add("资金项目");

    head.add(head0);

    head0= new ArrayList<>();

    head0.add(bigTitle);

    head0.add("行次");

    head.add(head0);for(var h : header) {

    head0= new ArrayList<>();

    head0.add(bigTitle);

    head0.add(h.getName());

    head.add(head0);

    }returnhead;

    }

    如果想通过实体类来设置二级表头,可以通过@ExcelProperty(value={"一级表头","二级表头"}),多级表头以此类推

    EasyExcel.write(response.getOutputStream(), Download.class).sheet("导出模板").doWrite(data(byZtId));

    通过调用registerWriteHandler来设置表格样式,我这里设置只是设置表头的自适应宽度,创建一个类来继承AbstractColumnWidthStyleStrategy抽象类

    packagecn.xxxx.xxxx.xxx.utils;importcom.alibaba.excel.metadata.CellData;importcom.alibaba.excel.metadata.Head;importcom.alibaba.excel.write.metadata.holder.WriteSheetHolder;importcom.alibaba.excel.write.style.column.AbstractColumnWidthStyleStrategy;importorg.apache.poi.ss.usermodel.Cell;importorg.slf4j.Logger;importorg.slf4j.LoggerFactory;importjava.util.List;public class Custemhandler extendsAbstractColumnWidthStyleStrategy {private static final int MAX_COLUMN_WIDTH = 255;//the maximum column width in Excel is 255 characters

    publicCustemhandler() {

    }

    @Overrideprotected void setColumnWidth(WriteSheetHolder writeSheetHolder, ListcellDataList, Cell cell, Head head, Integer relativeRowIndex, Boolean isHead) {if (isHead && cell.getRowIndex() != 0) {int columnWidth =cell.getStringCellValue().getBytes().length;if (columnWidth >MAX_COLUMN_WIDTH) {

    columnWidth=MAX_COLUMN_WIDTH;

    }else{

    columnWidth= columnWidth + 3;

    }

    writeSheetHolder.getSheet().setColumnWidth(cell.getColumnIndex(), columnWidth* 256);

    }

    }private final static Logger logger = LoggerFactory.getLogger(Custemhandler.class);

    }

    最后在doWrite()里面放要导出的数据即可

    private List> getExportData(Listjthz) {

    List> sumList = new ArrayList<>();for(var row : jthz) {

    List list = new ArrayList<>();

    list.add(row.getZjxm());

    list.add(String.valueOf(row.getZbY()));for(var xm : row.getZjlrysXms()) {if (xm.getId() == null) {

    list.add("");

    }else{if (xm.getZjlrysb().getXsValue() == null || xm.getZjlrysb().getXsValue().compareTo(new BigDecimal("0")) == 0) {

    list.add("");

    }else{

    list.add(xm.getZjlrysb().getXsValue().toString());

    }

    }

    }

    sumList.add(list);

    }returnsumList;

    }

    无论表头还是内容,传给easyexcel的都是List>这种形式的集合,可以说是二维的吧,外面的List相当于row,里面的List相当于col

    参考链接:

    展开全文
  • 最近有统计分析的需求,用的echarts,随便找了一个柱状图的例子试了试需求要求图表随着浏览器的大小而动态改变解决:网上有说rem或者vw(相对于视口的宽度,视口被均分为100单位的vw),这种给宽度的方式只能第一次...
  • 满意答案添加全局注册事件,用来监听滚动事件window.Vue.directive('loadmore', { bind(el, binding) { const selectWrap = el.querySelector('.el-table__body-wrapper') selectWrap.addEventListener('scroll', ...
  • 给iframe写了个高度和宽度自适应的方法(也是从网上搜索的),是在iframe的onload时间处理,我想问这个时候iframe还需要设置width="100%" height="100%" scrolling="auto"等这些属性吗?设置了后会不会有冲突、影响...
  • 在导出时注册registerWriteHandler(new CustomCellWriteHandler())/*** @author jamin* @date 2020/7/29 11:28* 设置自适应列宽*/public class CustomCellWriteHandler extends AbstractColumnWidthStyleStrategy {...
  • table表格组建,列宽度自适应文本   嘿嘿,官方文档 不知道怎么用,我反正用了没有生效(2018.11.26)在官网测试的(找了一个最简单的例子,利用官方的在线运行测试,gg,没效果,顿时不知道这个属性是做什么...
  • 前面我们讲了怎么做一个自适应宽高1:1的正方形 https://www.jb51.net/css/753385.html 现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置...
  • CSS实现宽度自适应宽高16:9的矩形

    千次阅读 2018-07-24 18:47:12
    前面我们讲了怎么做一个自适应宽高1:1的正方形 https://blog.csdn.net/weixin_39357177/article/details/81183743 现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=...
  • 这次给大家带来微信小程序内轮播图怎样设置自适应高度,微信小程序内轮播图怎设置自适应高度的注意事项有哪些,下面就是实战案例,一起来看一下。我的思路是:获取屏幕宽度,获取图片的宽高,然后等比设置当前...
  • 第一种方法:做一个网页解决问题(长了点)如果只是因为浏览者改变了浏览器的设置,或者因为浏览器不兼容,使自己精心制作的网页变得"面目全非",那多令人沮丧!下面我们以网页爱好者的常用工具Dreamweaver(以下简称DW...
  • 现在我们来讲讲做自适应16:9的矩形要怎么做 第一步先计算高度,假设宽100%,那么高为h=9/16=56.25% 第二步利用之前所说设置padding-bottom方法实现矩形 代码 HTML <div class="box"> <div class=...
  • 我们在wordpress文章页面经常会用到表格,有些是从其他网页或者文档复制粘贴过来的,在电脑设备网页上都能很好的展示,但是在移动设备上或者低分辨率...正确的(自适应宽度)代码如下: <div>周杰伦ja...
  • 我们在wordpress文章页面经常会用到...以下面这个表格为例:表格范例-周杰伦jay专辑《范特西》专辑曲目正确的(自适应宽度)代码如下:周杰伦jay专辑《范特西》专辑曲目序号曲名作词作曲编曲……可以看到上面代码中关...
  • 比如div宽为100%,p宽为25%,怎样p能在一行里显示? <!DOCTYPE html> *{ list-style: none; text-decoration: none; margin: 0; padding: 0; } div{ width: 100%; background: #008000;...
  • 我的表格只有3列,但是bootstrap table默认撑满了整个页面,请问怎么设置 表格宽度自适应 内容宽度?
  • echarts宽度可以设置百分比,高度貌似一定要有具体高度,否则显示不出来,但设置了具体高度后就无法自适应
  • viewport是网页默认的宽度和高度,上面这行代码的意思是,网页宽度默认等于屏幕宽度(width=device-width),原始缩放比例(initial-scale=1)为1.0,即网页初始大小占屏幕面积的100%。 所有主流浏览器都支持这个...
  • 比如UIlabel 使用adjustsFontSizeToFitWidth设置为YES来让文字自适应,UITextField也是通过adjustsFontSizeToFitWidth来设置文字自适应,不过要想让这个属性生效,还需要设置 [surePwdTextView.myTextField ...
  • 手机或平板设备屏幕大小差距大,因此打开网页时宽度也不同,新做的手机网站如何能够自适应网页宽度,就有了一些难度,还好程序猿们想到了这一点,在代码里面做了如此设置,下面简单讲解一下。 工具/原料   ...
  • table的宽度自适应的,而且部分TD是固定宽度。原则上应该讲table的宽度设置成一个固定的值,而不应该设置成一个根据屏幕变化的值。现在来看下如何设置表格td单元格的宽度。例1:Table的宽度为600px,Table的td所有...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 173
精华内容 69
关键字:

怎么设置宽度自适应