CSS心得

1.input的属性 autocomplete默认为on

其含义是否让浏览器自动记录之前输入的值，

很多时候，需要对客户的资料进行保护

可以在input中加入autocomplete="off"来关闭记录



<input style="ime-mode:disabled">
1.{
     ime-mode版本：IE5+专有属性　继承性：无
     语法：
 
     ime-mode : auto | active | inactive | disabled
 
    参数：
 
    auto : 不影响IME的状态。与不指定ime-mode属性时相同
    active : 指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME
    inactive : 指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME
    disabled : 完全禁用IME。对于有焦点的控件（如输入框），用户不可以激活IME
 
   2.
   我们给输入项添加属性style并将其值置为'ime-mode:disabled'，这样当在输入
   该项数据时就不能进行输入法转换了。如果当前是中文输入法输入的仍是英文字母。
 

 
  3.
   当某个文本域不需要中文输入的时候，我们可以通过设置 ime-mode 属性值为 inactive 或者 disabled，减少错误的     可能性。同样的我们可以设置那些需要中文输入的文本域的 ime-mode 属性值为 active。
}




   用margin-left 和直接用left有什么区别

 （   margin-left是左外边距，left在position为绝对定位的时候使用，相对于父元素0 0 坐标left的大小。）


  tableindex

{
  定义和用法
  tabindex 属性规定元素的 tab 键控制次序（当 tab 键用于导航时）。
  提示和注释
  注释：以下元素支持 tabindex 属性：<a>, <area>, <button>, <input>, <object>, <select> 以及 <textarea>。
}


cursor（ 鼠标的形状）



transparent

transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。
在CSS1中，transparent被用来作为background-color的一个参数值，用于表示背景透明。
在CSS2中，border-color也开始接受transparent作为参数值，《Open eBook(tm) Publication Structure 1.0.1》[OEB101]延伸到color也接受transparent作为参数值。
在CSS3中，transparent被延伸到任何一个有color值的属性上。

            
          

       border-image 设置所有 border-image-* 属性的简写属性。
       border-radius 设置所有四个 border-*-radius 属性的简写属性。
       box-shadow 向方框添加一个或多个阴影。

            -moz-border-radius: 10px;  /* 老的 Firefox */

            -webkit-border-radius: 10px; /* Safari 和 Chrome */

           -o-border-image:url(border.png) 30 30 round; /* Opera */

            border-radius: 10px;
   // 阴影
            -moz-box-shadow: 0 0 8px #000;
            -webkit-box-shadow: 0 0 8px #000;
            box-shadow: 0 0 8px #000;



    zoom:1

    属性是IE浏览器的专有属性，Firefox等其它浏览器不支持。它可以设置或检索对象的缩放比例。
    除此之外，它还有其他一些小作用，比如触发ie的hasLayout属性，清除浮动、清除margin的重叠等。


   image

   设置图像的替换文字 alt
   设置图像的提示文字 title  


  fixed\absolute

  在对元素设置固定定位时  如果希望本元素包含在父包含块中  不需要对其设置偏移量



<textarea wrap="soft|hard">


soft 当在表单中提交时，textarea 中的文本不换行。默认值。

hard 当在表单中提交时，textarea 中的文本换行（包含换行符）。
当使用 "hard" 时，必须规定 cols 属性。


{{{{{{{{{{{{{{{{{{{{
框架  <frameset>

1.文档类型声明  Frameset
2.html元素
3.head元素
4.frameset元素

<frameset cols="30%,* ">
  <frame src="frame1.html/image.jpg/...." frameborder=0/1 无分割线/有分割线 .... marginwidth=(控制左右间距) marginheight=（控制上下间距）scrolling=auto/yes/no  默认值在必要的时候提供滚动条/始终提供滚动条/始终无滚动条>
 <frameset rows="40%,*">
     <frame src=.....name="frame2" noresize 不能拖动改变各框架视窗的大小>  
     <frame src=.....>


 定义链接使用target属性 <a href="mypage.html" target="frame2">
 链接到name为frame2的框架中并显示mypage.html的内容
<frameset/>

可以用base 链接同一框架

嵌入式框架<iframe></iframe> 可以使用frame元素的所有属性  大小是固定的
}}}}}}}}}}}}}}}}}}}}



{
object.offsetLeft代表是当前object和父元素已经定义好的左边距。

     offsetHeight = clientHeight + 滚动条 + 边框。

 
object.style.left代表是object和父元素需要定义的左边距
}
1. style.left 返回的是字符串，如28px，offsetLeft返回的是数值28，如果需要对取得的值进行计算，还用offsetLeft比较方便。

2. style.left是读写的，offsetLeft是只读的，所以要改变div的位置，只能修改style.left。

3. style.left的值需要事先定义，否则取到的值为空。而且必须要定义在html里，我做过试验，如果定义在css里，style.left的值仍然 为空，这就是我刚开始碰到的问题，总是取不到style.left的值。



float 浮动布局

设置float属性 会影响紧邻后面的元素(主要是兄弟元素）

清除浮动： 哪一个元素受影响 就为其清除浮动 clear：both/width:100% overflow:hidden
（注意 受影响的元素如果是内联元素/内联块状元素则无效 可以这样设置
<div style="clear:both"></div>
 必须是块状元素）
还有注意的（子元素设置浮动会影响父元素，如果没设置高度则无法自适应，高度为0）


  上下相邻的普通元素（浮动元素则相加），上下边距，并非普通的相加，而是取其中较大的边距值
这种现象叫做 margin 重叠



  为什么相邻图片之间会有间距

是因为出现换行   
<img src=...></img>
<img src=...></img>
<img src=...></img>

解决办法 float：left 或者 <img src=...></img><img src=...></img><img src=...></img>




后代选择器有没空格的区别

1 div.contain .blue{color:blue;}
2 div.contain.blue{color:blue;}
以上两种规则分别应用的元素如下：
1 <div class="contain">contain<span class="blue">blue</span><!--后代-->
2 <div class="contain blue">contain and blue</div><!--多类-->