前端实战遇到问题

1、单行文本垂直居中的方法：将line-height设为和所在元素的高度一样。

例如，使文字在div中水平和垂直居中，假设你的DIV是高度100PX，宽度是1000PX，那你这样写，你的文字就会水平垂直居中：<div style="width:1000px; height:100px; text-align:center; line-height:100px; border:blue solid 1px;">水平垂直居中</div> 。  text-align:center意思就是说，让这个DIV里的文字水平居中，而line-height:100px;的意思是说，让DIV里面的每一行文字，占的高度为100PX（和那个DIV的高度一样），这样，文字就垂直居中了。

2、块级元素居中的方法：方法一：margin左右设为auto.（推荐）

方法二：给块级元素A外再加一层父级块级元素B并将其text-align设为center（这就意味着它里面包含的内联元素都是水平居中的，注意对块级元素没用，所以下一步需将A的display设为inline）；给A的CSS属性display设置为inline-block.这样使得块级元素A（如div）既有block又有inline的特性。（如果不需要block特性，不需要设置宽度高度，则可以只设为inline）???

注意：

（1）display常用的几种属性值：inline、block、inline-block、none.

（2）块级元素和内联元素的区别：内联元素由它的内容撑开，不可设它的宽度，它的宽度就是由它的内容来决定的；块级元素可以设宽度和高度，并且占满了一行（即这一行不可再有其他元素）

（3）text-align:center 在块元素中用text-align来设置其中的文本对齐样式，这里设置为居中。其实text-align属性会影响到一个元素中所有内联内容的对齐样式，不仅仅是文本。还要记住，text-aligh属性只能用于块元素，如果直接用于内联元素（如<img>）就没有作用了。text-aligh属性值也可继承。例如<div>元素中的所有文本都在其他块元素中，如<h2>、<p>.但现在他们的对齐样式都改变了。这是因为这些块元素继承了<div>的text-align属性。区别是，不是<div>直接影响标题和段落（这些都是块元素）中的文本对齐样式，而是标题和段落继承了text-align属性值"center"，使它们自己的内容居中了。但是谨记并非所有的属性都是可以默认继承的，所以这并不会对所有的属性都起作用。

3、CSS3圆角

 1 <div class="demo"></div>
 2 　　为了更好的看出效果，我们给这个demo添加一点样式：
 3 
 4 .demo {
 5   width: 150px;
 6   height: 80px;
 7   border: 2px solid #f36;
 8   background: #ccc;
 9 }
10 border-radius只有一个取值时，四个角具有相同的圆角设置，其效果是一致的：
11 
12 .demo {
13   border-radius: 10px;
14 }
15 其等价于：
16 .demo{
17  border-top-left-radius: 10px;
18  border-top-right-radius: 10px;
19  border-bottom-right-radius: 10px;
20  border-bottom-left-radius: 10px;
21 }

效果：

4、iframe的常用设置

scrolling="no"则没有滚动条； width="98%"表示宽度占父级元素的98%；height=100%表示高度占宽度的100%（？这个不确定）； frameborder="0"规定不显示框架周围的边框

eg： <iframe src="#" marginheight="0" marginwidth="0" frameborder="0" scrolling="no" width="765" height=100% id="iframepage" name="iframepage" onLoad="iFrameHeight()" ></iframe>

5、制作的button效果如果是用div实现的，想要鼠标移到上边时出现手形的话，就要设CSS属性cursor值为pointer（光标呈现为指示链接的指针（一只手）），还有很多种其他值来选用。

6、jquery  取父级元素iframe 的方法 ：  $("iframe",parent.document)        eg：$("iframe",parent.document).attr('src','keyColumn.html'); 取父级元素iframe将其src属性设为keyColumn.html.

7、对选中的一组元素进行操作可以用each（callback）   注意：$(this)指代遍历到的元素。

$("img").each(function(){
  $(this).toggleClass("example");
});

 8、设置按钮不可点（其中按钮是个div做成的效果，而不是button）

主要是（1）将背景色改为灰色；（如background-color:#B4BCBE;）（2）cursor:default;即鼠标停在上边时不再是手形，而是箭头 （3）不仅样式要满足，关键是点击时不再有对应的响应（这点要用js控制，比如说判断如果背景色是灰色，则不再处理响应等）

9、iframe

iframe内部的html要通过jquery操作外部父文档的元素的方法举例：

$("iframe",parent.document).attr('src','designTab.html'); //改变iframe的内容页

$("#tabs",parent.document).append('<li class="selected"><a href="javascript:void(0)" class="tabs-li">设计SQL</a></li>');

10、注意加载js(jquery)和加载文档的顺序及时机。为了防止加载js时文档还未加载完毕而导致js(jquery)中选择元素时选择不到而出错，可以将js写在$(document).ready(function() {});中。

11、（1）jquery ：eql(index)选择器选取带有指定index值的元素。例如，选择第二个<p>元素：$("p:eq(1)").

      （2）jquery中提供的方法： siblings（[expr]）选取符合条件的兄弟元素

             eg：$("div").siblings()找到每个div的所有同辈元素。    $("div").siblings(".selected")找到每个div的所有同辈元素中带有类名为selected的元素。

　　 （3）js的replace方法全部替换和只替换第一个：var r= "1\n2\n3\n";r.replace("\n",";")只替换了第一个\n；r.replace(/\n/g, ";")替换了全部\n。

　　　　　此外，注意jquery中的replaceAll、replaceWith与js中的replace方法意义不太一样。

12、JSON.parse()和JSON.stringify()：parse用于从一个字符串中解析出json对象；stringify()用于从一个对象解析出字符串

 

转载于:https://www.cnblogs.com/qingxinblog/p/4136180.html