Layout

<!– wp:paragraph –> 在实际应用中，我们经常会遇到 Layui 表格详情打开与唯一键不一致问题。这种问题可能会导致数据错误或性能下降，因此需要及时解决。本文将深入分析这个问题的根源，并提供实际应用中的解决方案和优化建议。 <!– /wp:paragraph –><!– wp:heading –> <h2 class=“wp-block-heading”>深入分析 Layui 表格详情打开与唯一键不一致问题的根源</h2> <!– /wp:heading –><!– wp:paragraph –> Layui 表格详情打开与唯一键不一致问题的根源在于数据的不一致性。在 Layui 表格中，我们通常为表格数据设置唯一键，以便在查询和更新数据时能够确定唯一的记录。当在打开表格详情时，如果数据中的唯一键与实际的唯一键不一致，会导致数据错误或无法找到对应的记录。以下是解决这个问题的一些可能的原因： <!– /wp:paragraph –><!– wp:list {“ordered”:true} –> <!– wp:list-item –>1. 数据库中的唯一键与 Layui 表格中的唯一键不一致。 <!– /wp:list-item –><!– wp:list-item –>2. 在数据查询时，传递的唯一键值与实际的唯一键值不一致。 <!– /wp:list-item –><!– wp:list-item –>3. 表格中的数据更新时，由于数据更新后的唯一键值与之前的不一致，导致查询出现错误。 <!– /wp:list-item –> <!– /wp:list –><!– wp:heading –> <h2 class=“wp-block-heading”>ulent ：实际应用中的解决方案与优化建议</h2> <!– /wp:heading –><!– wp:paragraph –> 为了解决 Layui 表格详情打开与唯一键不一致问题，我们可以采取以下几种方法： <!– /wp:paragraph –><!– wp:list {“ordered”:true} –> ...

layout 布局（layout）是有五个区域（北区 north、南区 south、东区 east、西区 west 和中区 center）的容器。两头的区域面板是必须的，边缘区域面板是可选的。每个边缘区域面板可通过拖拽边框调整尺寸，也能够通过点击折叠触发器来折叠面板。布局（layout）能够嵌套，因而用户可建设简单的布局。 代码解析： <!--给div指定class属性指定easy的easyui-layout款式，这样就能够通过div创立easyui的layout --><div id="cc" class="easyui-layout" style="width:600px;height:400px;"> <!--布局中如果不须要north这个面板，那么能够删掉这个div--> <div data-options="region:'north',title:'North Title',split:true" style="height:100px;"></div> <!-- 布局中如果不须要south这个面板，那么能够删掉这个div --> <div data-options="region:'south',title:'South Title',split:true" style="height:100px;"></div> <!-- 布局中如果不须要east这个面板，那么能够删掉这个div --> <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div> <!-- 布局中如果不须要west这个面板，那么能够删掉这个div --> <div data-options="region:'west',title:'West',split:true" style="width:100px;"></div> <!--north，south， east，west这几个面板都能够删掉，唯有这个center面板肯定不能删掉，否则应用easyui-layout就会出错 --> <div data-options="region:'center',title:'center title'" style="padding:5px;background:#eee;"></div></div>树形构造 <div data-options="region:'west',title:'菜单',split:true" style="width:10%;"> <ul class="easyui-tree"> <li> <span>商品治理</span> <ul> <li>商品新增</li> <li>商品批改</li> <li> <span>商品删除</span> <ul> <li>删除1</li> <li>删除2</li> </ul> </li> </ul> </li> <li> <span>商品题目</span> </li> </ul> </div>能够借助一些插件

viewport是什么移动端中，分为两个视口：layout viewport 布局视口: 视口的分辨率接近于PC显示器,也就是html的宽度接近于pc端的宽度。visual viewport 视觉视口: 手机的物理可视窗口,不借助滚动条所看到的内容。移动设备的viewport默认是layout viewport可以这两理解，有一个图片(layout viewport)，宽度是：1090 1090，有一个画框(visual viewport)，宽度是：320 460，用户通过画框来看画。当layout viewport与visual viewport完全一致时，用户通过画框看到的就是整个画。如果layout viewport较大，用户需要通过移动画框来查看画面内容。meta中的viewportviewport是meta中的一个值，通过设置viewport，可以控制浏览器如何规范的渲染Web页面<meta name=“viewport” content=“width=device-width, initial-scale=1, maximum-scale=1”>要把当前的viewport宽度设为ideal viewport的宽度，既可以设置 width=device-width，也可以设置 initial-scale=1，如果initial-scale和viewport有冲突，浏览器会取比较大的值。viewport值:namevalueDescriptionwidth正整数或device-width定义视口(layout viewport)的宽度，单位为像素,height正整数或device-height定义视口的高度，单位为像素initial-scale[0.0-10.0]定义初始缩放值minimum-scale[0.0-10.0]定义缩小最小比例，它必须小于或等于maximum-scale设置maximum-scale[0.0-10.0]定义放大最大比例，它必须大于或等于minimum-scale设置user-scalableyes/no允许用户手动缩放页面，默认是yes分辨率&像素以上所说的宽度，其实是分辨率什么是分辨率像素：每张图片都是由色点组成的，每个色点称为一个像素。屏幕分辨率：是指一块屏幕中画面水平方向的像素值 * 画面垂直方向的像素值。图像分辨率: 是指每英寸图像内的像素点数。图像分辨率是有单位的，叫 像素每英寸。设备像素：device pixel屏幕上的像素。是物理像素。 设备像素可能不相同物理像素不会改变，单位是pt。1pt = 1/72(inch),inch及英寸，而1英寸等于2.54厘米 举个???? ： iphone5的像素：6401136px， 表示：屏幕由640行，1136列像素组成。CSS像素：(css pixel)CSS像素是Web编程的概念，指的是CSS样式代码中使用的像素。举个???? ：iphone5的像素：320px。 设置：zoom 100%的情况下,1个CSS像素才会等于1个设备像素如何计算css像素对于低分辨率设备（绝大部分显示器，手机屏幕），1个css像素相当于最接近参考像素的整数个设备像素。对于高分辨率设备(打印机)来说，1个css像素就是96分之一英寸。设备像素比：DPRDPR = 设备像素/CSS像素。理解：1px由多少个设备像素组成；如何获取：在移动端浏览器中以及某些桌面浏览器中，window对象有一个devicePixelRatio属性(有兼容问题)，它的官方的定义为：设备物理像素和设备独立像素的比例，也就是 devicePixelRatio = 物理像素 / 独立像素。CSS像素就可以看做是设备的独立像素，所以通过devicePixelRatio，我们可以知道该设备上一个css像素代表多少个物理像素。设备独立像素：DIPCSS像素 =设备独立像素 = 逻辑像素每英寸像素密度：PPI一英寸中，像素个数计算：var 斜边尺寸 = V(1920^2+1080^2) V代表开根号 var ppi = 斜边尺寸/5.5 ppi = 401ppi单位px定义：css中的单位，是一个抽象概念(抽象概念一定要清楚上下问)。浏览器中都是按照px来设置尺寸。为视频显示的基本单位(来源：wiki)ps: px是一个相对单位，相对设备像素的。（css的像素是根据设备的分辨率计算出来的）。如何感受这个相对值呢？当我们缩放网页大小的时候，并没有改变css像素，但是页面中内容变大了，这是因为css像素是相对的，其他因素的改变，影响了css像素的大小。计算： 为了让相同的1px在不同的设备上，视觉上看起来差不多，css像素是根据设备像素大小换算出来的。css中，根据参考像素进行换算em计算：使用em单位的元素的字体大小乘以em值，父元素大小会影响em，是因为继承的原因,如果出现层级em嵌套，会影响比较大。rem计算：取决于页面根元素大小，根据根元素字体大小乘以rem值。retina视网屏幕：Retina显示器指的是在人体正常使用距离下，无法看到屏幕的像素。1px问题为什么会有这种问题？设计师的px指的是物理像素，我们设置的是css像素，物理像素和css像素不是完全一致的。如何解决小数.border { border: 1px solid #999 } @media screen and (-webkit-min-device-pixel-ratio: 2) { .border { border: 0.5px solid #999 } } @media screen and (-webkit-min-device-pixel-ratio: 3) { .border { border: 0.333333px solid #999 } }问题：兼容性不是很好tranform加伪类标签<span class=“border-1px”>1像素边框问题</span>// less.border-1px{position: relative;&::before{ content: “”; position: absolute; left: 0; top: 0; width: 200%; border:1px solid red; color: red; height: 200%; -webkit-transform-origin: left top; transform-origin: left top; -webkit-transform: scale(0.5); transform: scale(0.5); pointer-events: none; / 防止点击触发 */ box-sizing: border-box; @media screen and (min-device-pixel-ratio:3),(-webkit-min-device-pixel-ratio:3){ width: 300%; height: 300%; -webkit-transform: scale(0.33); transform: scale(0.33); }}}优点: 其实不止是圆角, 其他的边框也可以这样做出来缺点: 代码量也很大, 占据了伪元素, 容易引起冲突阴影.border-1px{box-shadow: 0px 0px 1px 0px red inset;} ...

CSS的一些名词和概念用来帮你更明确地去描述HTML/CSS世界的事物。box在CSS中，一个元素就可以看作一个box。具体信息可以参考盒模型的解释，这里暂且不作展开。containing blocksBox的位置和大小时根据一个称为containing blocks的边界进行计算的。block-level elements 和 block boxesblock-level elements 一般指HTML中的特定类型的元素，比如div，p，ul等。block boxes 指形成一个block formatting contexts的boxes。可以确定的时正常的block-level（没有改变它的position，display等默认属性值）可以形成一个BFC。But，如果元素等display属性值为 ‘block’, ’list-item’, 或 ’table’中的一种，也可以对外表现出块级元素的行为。也会成为一个block box。BFC（Block formatting contexts）哪些情况会产生一个BFC：根元素float元素（float属性不是none）display： block，table-cell，table-captain，list-item， table、table-row、 table-row-group、table-header-group、table-footer-groupposition是absolute的元素（绝对定位）overflow不等于visibleflex 元素grid 元素在一个BFC中，形成一个独立的布局环境，里面元素等布局位置不会受外部元素影响。IFC （Inline formatting contexts）与BFC对应，一个行内元素默认也会形成一个IFC（行内格式化上下文）。IFC有个不同于一般的常识的特性：当inline-level box宽度大于父容器宽度时会被拆分成多个inline-level box;当属性direction为ltr时，margin/border/padding-left将作用于第一个的inline-level box，margin/border/padding-right将作用于最后一个的 inline-level box;若属性direction为rtl时，margin/border/padding-right将作用于第一个的inline-level box，margin/border/padding-left将作用于最后一个的inline-level box;<p style=“margin-left:100px;margin-right:20px;border:1px dashed #ccc;"> <span class=“before”> before </span> <span class=“cotent” style=“margin-left: 100px; margin-right: 20px;"> An inline box is one that is both inline-level and whose contents participate in its containing inline formatting context. A non-replaced element with a ‘display’ value of ‘inline’ generates an inline box. Inline-level boxes that are not inline boxes (such as replaced inline-level elements, inline-block elements, and inline-table elements) are called atomic inline-level boxes because they participate in their inline formatting context as a single opaque box. </span> <span class=“after”> after </span></p>注意示例中，content 元素这段话开头和结尾的外边距大小。在CSS2中， 一个盒子的定位模式通常是一下三种：Normal flow：正常的文档流是由 BFC、IFC和position是relative的 block boxes或inline boxes 组成。Floats float属性值不等于none的元素通常称之为浮动元素。absolute positioning （绝对定位元素） 绝对定位的元素完全从正常的文档流中移除，它的位置不会影响它后面元素的位置。positioned elementposition属性值不是static的元素称之positioned element。display，position和float的相对关系我们知道，display，position和float都会对元素的布局位置表现产生影响。那么它们三者之间是如何起作用的呢？如果display:none; position和float将不会再起任何作用；如果position属性是absolute或fixed，则float属性置为none（可以理解为不再存在float行为，即使手动设置了float不为none）， display行为依据下表的规则展示；元素的定位会依据top/right/bottom/left进行计算。如果float属性值不为none，则display属性依据下表的规则展示；如果元素是根元素，则display的展示依据下表规则表现。其它情况，依据display设定的值进行处理指定值最终表现值inline-tabletableinline, table-row-group, table-column, table-column-group, table-header-group, table-footer-group, table-row, table-cell, table-caption, inline-blockblockothers与指定值相同 ...

基本介绍上一篇文章我们介绍了 css3 flexbox，今天我们再来说说css3的另外一个强大的功能：Grid。Grid做前端的同学应该都很熟悉了，翻译成中文为“栅格”，用过bootstrap、semantic ui、ant design的同学肯定都了解grid layout（删格布局），以往css框架中的grid布局一般是通过float和百分比的宽度实现的，这种实现有几种缺点：html不够简洁；需要清除浮动以避免高度塌陷；列的个数是固定的，不能灵活定义。比如bootstrap是12列，semantic ui是16列，ant design 24列。当然grid也可以用flex实现，但是并不会比用float简单多少，而且flex擅长的是一维空间的布局，而对grid这种二维空间并不擅长。现在css3从规范和标准层面实现了grid，编程体验大大提升！兼容性用法Grid作为一个二维的栅格系统，由若干列（column）和行（row）构成。1. Column(1) 设置columnCSS3中的Grid可以划分为任意个数的列（column），而且每个column的宽度可以任意设置！我们先来看一个简单的例子：html:<div id=“content”> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div></div>css:body{ color: #fff; text-align: center;}#content{ display: grid; grid-template-columns: 33.3% 33.3% 33.3%; max-width: 960px; margin: 0 auto;}#content div{ background: lightgrey; padding: 30px;}#content div:nth-child(even){ background: skyblue;}效果：当我们设置了display: grid和grid-template-columns: 33.3% 33.3% 33.3%后#content就被划分成了三行三列的grid，此时#content被称为grid container，而#content的子元素称为grid item。我们也可以任意改变column的个数和宽度，比如：#content{ grid-template-columns: 10% 20% 30% 40%;}效果：(2) fr（fraction）css3中引入了一个新的单位fr（fraction），中文意思为“分数”，用于替代百分比，因为百分比（小数）存在除不尽的情况，用分数表示可以避免多位小数的写法。比如三列等宽的grid可以表示为：grid-template-columns: 1fr 1fr 1fr;(3) repeat我们也可以用repeat方法来简化column或者row的写法，repeat方法接受两个参数，第一个参数表示重复的次数，第二个参数表示重复的内容。所以，三列等宽的grid我们还可以表示为：grid-template-columns: repeat(3, 1fr);当我们要定义的列数很多时，repeat就会变得非常有用，比如我们要定义一个10列等宽的grid，可以写成repeat(10, 1fr)，而不用将1fr重复书写10遍。2. Row(1) 设置row当我们设置column之后，row会因为元素的换行而自动产生，但是我们依然可以设置row的个数和高度。css：#content{ display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 60px); max-width: 960px;}效果：可以看到，虽然第四行没有内容，但是row确实存在并占据了那部分空间。(2) minmax上面的例子中我们给了row一个固定高度，这导致一个问题：如果某个grid item中的内容特别多，受制于固定的高度，部分内容将无法显示，如下图：为解决这个问题，css提供了minmax函数，让我们可以设置row的最小高度和最大高度，最大高度取auto后便可以让row的高度自适应：css：grid-auto-rows: minmax(60px, auto);// 或者grid-template-rows: repeat(3, minmax(60px, auto));效果：(3) grid gap如果我们想给行和列之间加上间隔，也有现成的方法：css:grid-gap:{ 10px;}效果：3. Grid Line以上所有例子中，grid中的每个grid item都是按默认顺序排列的。如果我们想重新布局改变grid item的位置或大小呢？为此引入了grid lines的概念，所谓的grid lines就是将grid若干等分后的分割线，如下图中横向和纵向序号1～8的线即为grid lines：<img src=“http://lc-jOYHMCEn.cn-n1.lcfi…; alt=“drawing” width=“500”/>通过定义grid item的起始和结束的grid line我们就可以实现对grid item位置和覆盖面积的控制。一个简单的例子：html：<div id=“content”> <div class=“one”>1</div></div>css: #content { display: grid; grid-template-columns: repeat(8, 100px); grid-template-rows: repeat(8, 100px); grid-gap: 10px;}.one { grid-column-start: 3; grid-column-end: 6; grid-row-start: 3; grid-row-end: 6;}效果：通过设置grid-column-start/end grid-row-start/end 相当于给grid item设置起始坐标和结束坐标，上面的css也可以简写为：.one { grid-column: 3 / 6; grid-row: 3 / 6;}// 或者.one { grid-area: 3 / 3 / 6 / 6;}如果grid item的起始grid line为默认，我们可以只设置它的跨度（span）:.one{ grid-column: span 3; grid-row: span 3;}4. Grid Area Template除了通过grid lines进行布局，css3提供了一种更牛逼的布局方式：grid area template。与其用语言解释什么是grid area template，不如直接看代码：html：<div id=“content”> <header>Header</header> <main>Main</main> <section>Section</section> <aside>Aside</aside> <nav>Nav</nav> <footer>Footer</footer></div>css:body { color: #fff; text-align: center;}#content { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(100px, auto); max-width: 960px; margin: 0 auto; grid-gap: 10px; grid-template-areas: “header header header header” “aside . main main” “nav . main main” “section section section section” “section section section section” “footer footer footer footer”;}#content>* { background: #3bbced; padding: 30px;}header { grid-area: header; }main { grid-area: main; }section{ grid-area: section; }aside { grid-area: aside; }nav { grid-area: nav; }footer { grid-area: footer; }效果：看明白没有？重点在于grid container的 grid-template-areas 属性。我们给每个grid item设置一个grid area，然后在grid container中设置一个grid area模版（grid-template-areas），模版中每行字符串表示一个row，每个area名称表示一个column，完全将几何布局用文字模拟出来，空白的grid item用 . 表示。当然使用grid area要注意语法严谨，像 “header main header main” 这种写法css是无法解析的，用area名称模拟出的结构在二维空间上必须是一个整体，因为每个grid item也是无法分割的。 使用grid area template的有点在实现响应式布局时也是显而易见的，我们只需要针对不同的屏幕尺寸制定不同的grid area template就行了。5. Justify and Align与flex类似，grid也可以设置justify和align来调整grid item横向和纵向对齐方式。同样也同时支持对grid container或单个grid item进行设置。对grid container设置html:<div id=“content”> <div class=“one”>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div></div>css:#content { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, minmax(120px, auto)); grid-gap: 10px; max-width: 960px; align-items: start; justify-items: end;}效果：注意：flex里面用的是 justify-content 而grid里面是 justify-items ，flex里面的值是 flex-start/flex-end ，而grid里面是 start/end 。justify和align的默认值都是 stretch 。对grid item设置css：.one{ align-self: start; justify-self: end;}效果：实践掌握了上述知识，我们就能用CSS3 Grid快速做出各种layout效果了，附上几个简单的codepen示例：12列grid布局花瓣式布局响应式布局 ...