关于CSS知识点的集锦

关于CSS知识点的集锦

这篇文章介绍关于CSS知识点的集锦

CreateTime–2016年9月29日09:43:10
Author:Marydon
1.背景色线性渐变

background-color:linear-gradient(100deg,#FFF,#111);/*由黑色向白色渐变 deg表示度数*/

UpdateTime–2016年10月25日11:37:53
UpdateTime–2016年11月23日09:53:46
2.设置表格的边框被合并为一个单一的边框

border-collapse: collapse;/*前提:table的border=1或border="1"或border="1px"*/

UpdateTime–2016年10月29日09:04:07
3.设置p最小高度及高度自动伸展

#pHeight{height:auto;min-height:5px;width:800px; background:#bbeeeb;margin:0 auto;}   

<p id="pHeight">    
此p具有最小高度且高度可以随着内容的增高而自动伸展 
<br/>  此p具有最小高度且高度可以随着内容的增高而自动伸展 
</p>

  设置最小宽度及宽度自动伸展

width:auto;min-width:5px;height:800px;

4.禁止换行的两种方式
  方式一:
    通常在浏览器上显示的文档会在到达浏览器的横幅底端时自动换行,但是如果文字被包含在<nobr>~</nobr>标签里的话,则不会换行
    使用<nobr></nobr>标签
  方式二:
    使用CSS样式

style="white-space:nowrap;"

UpdateTime–2016年11月25日08:57:49
  设置td禁止换行

<td nowrap="nowrap"></td>

UpdateTime–2016年10月31日09:44:17
5.display样式
  inline 行内元素(与其它元素共占一行,不换行,不能设置宽和高)
  block 块级元素(单独占一行,可以设置宽和高)
  inline-block 行内块级元素(与其它元素共占一行,但是可以设置宽和高)(兼有了行内元素和块级元素的特征)
  none 将该元素隐藏

document.getElementById("aa").style.display="";//表示的是:清除display样式,display将使用默认值(块元素会变成block,内联元素会变成inline)

UpdateTime–2016年11月24日11:44:31
6.ime-mode语法和text-transform语法
  UpdateTime–2016年12月15日19:52:16

/*屏蔽输入法,可以用来禁止录入中文*/
  ime-mode:disabled; //IE兼容,chrome不兼容
  <input type="text" name="mobile" style="ime-mode:disabled;" />
/*将输入的英文字母转全部换成大写字母*/
  text-transform:uppercase;
  <input type="text" name="mobile" style="text-transform:uppercase;" />
UpdateTime--2017年1月9日10:23:23
/*将输入的英文字母转全部换成小写字母*/
  text-transform:lowercase;
  <input type="text" style="text-transform:lowercase;"/>

  详细介绍
    ime-mode语法:(该语法在google浏览器上无效,需要用js进行控制,见”input文本框输入内容控制”文件)
      ime-mode : auto | active | inactive | disabled
      取值:
      auto :  默认值。不影响IME的状态。与不指定 ime-mode 属性时相同
      active :  指定所有使用IME输入的字符。即激活本地语言输入法。用户仍可以撤销激活IME
      inactive :  指定所有不使用IME输入的字符。即激活非本地语言。用户仍可以撤销激活IME
      disabled :  完全禁用IME。对于有焦点的控件(如输入框),用户不可以激活IME
      text-transform语法:
      text-transform : none | capitalize | uppercase | lowercase
      取值:
      none :  默认值。无转换发生
      capitalize :  将每个单词的第一个字母转换成大写,其余无转换发生
      uppercase :  转换成大写
      lowercase :  转换成小写
7.设置p里的内容自动换行
  当p框固定高度宽度后,显示的内容超过p的宽度,超出内容不换行的问题
  设置css样式

  word-wrap:break-word;

8.实现p,li里的内容超出容器宽度时,超出部分以”..”形式显示
  前提:必须先确定p,li的宽度
  添加属性

  text-overflow:ellipsis;
  white-space:nowrap;
  overflow:hidden;

9.文本框和密码框在IE浏览器显示样式控制

/*去除IE浏览器文本框右侧出现叉号*/
  #aa::-ms-clear {
    display:none;
  }
  /*去除IE浏览器密码框右侧出现眼睛*/
  #bb::-ms-reveal {
    display:none;
  }

<input id="aa" type="text"/><input id="bb" type="password"/> 

以上就是关于CSS知识点的集锦的详细内容,更多请关注其它相关文章!

关于CSS知识点的集锦

相关文章:

你感兴趣的文章:

标签云: