前端布局问题汇总

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

《我的博客地图》

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

    前端开发遇到的问题：

    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>

<a href="tel://13161854871"></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');

持续更新中...