前端布局问题汇总

客官°小女子只卖身不卖艺 2022-07-13 09:14 82阅读 0赞

*最近更新时间：2017年7月13日22:38:59*

[《我的博客地图》][Link 1]

在实际项目的开发过程中，经常会遇到很多庞杂的问题需要实时处理，加上项目时间节点的控制，处理问题的效率和最优方案的选取是程序员需要不断提升的技能。因此，每一位程序员都需要建立自己的学习记录文档或知识点汇总文档，方便自我能力提升的循序渐进。

前端开发遇到的问题：

HTML篇：

1、常见复选框的设计方案，HTML结构如下：  
<input id="report" style="margin:0;vertical-align:middle;" type="checkbox" name="isMergeRow" checked/>  
<label for="report">合并</label>

2、a元素下载资源与跳转

下载资源：<a href="https://github.com/wanshaobo/commonFile/learn.rar" download="learn"></a>

页面跳转：<a href="https://github.com/wanshaobo" target="\_blank"></a>

手机端拨打电话：<a href="tel:13161854871"></a>

CSS篇：

1、input元素和textarea元素在移动端显示，出现上阴影：

input\[type="text"\] \{

\-webkit-appearance: none;  
\}

textarea\{  
\-webkit-appearance: none;  
\}

2、元素背景透明文字（子元素）不透明

background: rgba(255,255,1,0.55);//前三位参数为16进制色值，末尾参数为透明度

3、z-index设置元素层叠顺序的前提：元素的position样式为relative || absolute || fixed三者之一

4、页面插入img元素，图片下方有空白

由于img元素的默认垂直对其方式vertical-align: baseline;该元素放置在父元素的基线上；

解决方案：img\{display: block;\} || img\{vertical-align: middle;\} || img父元素\{line-height: 0;\} || img父元素\{font-size: 0;\}

CSS2规范，对于inline-block元素，如果没有设置overflow: visible || 子元素没有inline元素则该inline-block元素的基线就是margin-bottom上边缘；否则，该元素基线是子元素最后一行内联元素的基线。

5、元素背景图片的位置区域

background-clip: border-box | padding-box | content-box;//背景的绘制区域设定

6、单选按钮绑定的label标签文字内容下沉

label\{vertical-align: top;\}

7、内层div设margin-top失效

当两个容器嵌套时，如果外层容器和内层容器之间没有别的元素，有些浏览器会把内层元素的margin-top作用于父元素；

解决方案：父元素\{overflow: hidden;\} || 子元素\{padding-top: \*\*px;\}

子元素是父元素的第一个非空元素，margin-top出错，引发问题“外边距合并”（collapsing margins）；“垂直外边距合并”的条件，父元素没有border和padding，且与第一个子元素之间没有任何间隔；

8、margin合并场景

右边元素 margin-left 和 左边元素 margin-right 相遇，两个元素实际 水平 margin 间距 取两者最大值；

上边元素 margin-bottom 和 下边元素 margin-top 相遇，两个元素实际 垂直 margin 间距 取两者之和；

9、但行文本溢出显示省略号

text\{width: \*\*px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;\}

JavaScript篇：

1、禁止手机页面垂直滚动：

$('body).css("overflow","hidden");

$(document).on('touchmove',function(e)\{ e.preventDefault(); \});  
body\{ position: fixed;\}//根据需求添加top,left...  
body\{ overflow: hidden;  
    /\*height: 100%;\*/  
\}  
html,html\{ overflow: hidden; height: 100%; \}

4、判断复选框是否选中的jQuery代码如下：

if ( elem.checked )\{\}else\{\}  
if ( $(elem).prop("checked") )\{\}else\{\}  
if ( $(elem).is(":checked") )\{\}else\{\}

5、选取第一个子元素的两种方案：  
$('\#table-report-htmltext-div > div').first().css('display','none');  
$('\#table-report-htmltext-div').children('div:first-child').css('display','none');

6、选取第一个子元素的两种方案：  
$('\#table-report-htmltext-div > div').first().css('display','none');  
$('\#table-report-htmltext-div').children('div:first-child').css('display','none');

持续更新中...

[Link 1]: https://blog.csdn.net/wanshaobo888/article/details/79179440