D浩DzD的博客

在项目中，有个需求就是用户可以选择其中的几个字段进行显示隐藏，也就是说tr中的td个数是不确定的，但是整个table确是固定宽度的，这就需要不管有几个td都要自适应去占满整个表格。如下图其实table本身是支持这种自适应的，但是有时候表格稍微复杂了，然后自己也不懂其中的一些特性就容易特别作死的自己去根据显示隐藏的个数手动去算每个表格所占的colspan属性，算到薅头发。例如下表格就是因为用户自定义选择几个字段不显示时而造成的页面乱了正常应该是下图注意红框中的字段是用户可以选择显示或隐藏的字段，而

在项目中遇到一个bug就是当点击某项出现下拉框时，点击除下拉框的任意处关闭下拉框，实现逻辑是出现下拉框的时候出现一个全屏的透明蒙层，这个蒙层的使用固定定位，z-index也设置到了999但是却发现右边的操作按钮的层级却要比这个全屏蒙层还要高，而这个操作按钮仅仅设置了一个相对定位而且也没有设置z-index。然后尝试着去掉操作按钮的相对定位发现是解决了操作按钮层级比蒙层还要高的问题，但是却一直不知道其原因。直到在网上找了一通发现，z-index还有一个规则从父（祖先）规则如果 A, B 节点都定义了

在项目中遇到一个问题，明明使用的定位是fixed定位，应该按照元素相对于屏幕视口（viewport）的位置来指定元素位置，但是却发现而是以他的祖先盒子为参照的上图中的list-box下拉框虽然是固定定位但是以他的祖先盒子类名为content的弹窗为参照的，所以导致下拉框错位了，正常应该是如下图那是什么原因影响到他的呢，之前一直以为固定定位就一直是以可视区域为参照进行偏移的，其实不然，它还会受一些其他因素的影响fixed ：元素会被移出正常文档流，并不为元素预留空间，而是通过指定元素相对于屏幕视口

在做一个打印功能时，当一个表格数据过多而不能显示时，浏览器会自动进行分页处理，但是当一页显示不下一个表格时，自动分页会把一行数据暴力的切割显示在两页纸上。问题如下图：可以使用page-break-inside 属性用于设置是否在指定元素中插入分页符。有三个参数值描述auto默认。如果必要则在元素内部插入分页符。avoid避免在元素内部插入分页符。inherit规定应该从父元素继承 page-break-inside 属性的设置。注意： 您不能对绝对定位的元

伪元素是一个附加至css选择器末的关键词，允许你对被选择元素的特定部分修改样式。例如：使用伪元素after在类选择器box内容后面添加一些内容页面显示：在 CSS 中，可替换元素（replaced element）的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。某些可替换元素，例如 < iframe > 元素，可能具有自