搜索
首页web前端css教程关于CSS知识点的集锦
关于CSS知识点的集锦Mar 09, 2017 pm 06:47 PM
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.禁止换行的两种方式
  方式一:
    通常在浏览器上显示的文档会在到达浏览器的横幅底端时自动换行,但是如果文字被包含在标签里的话,则不会换行
    使用标签
  方式二:
    使用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知识点的集锦的详细内容。更多信息请关注PHP中文网其他相关文章!

声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
利用CSS怎么创建渐变色边框?5种方法分享利用CSS怎么创建渐变色边框?5种方法分享Oct 13, 2021 am 10:19 AM

利用CSS怎么创建渐变色边框?下面本篇文章给大家分享CSS实现渐变色边框的5种方法,希望对大家有所帮助!

css ul标签怎么去掉圆点css ul标签怎么去掉圆点Apr 25, 2022 pm 05:55 PM

在css中,可用list-style-type属性来去掉ul的圆点标记,语法为“ul{list-style-type:none}”;list-style-type属性可设置列表项标记的类型,当值为“none”可不定义标记,也可去除已有标记。

css与xml的区别是什么css与xml的区别是什么Apr 24, 2022 am 11:21 AM

区别是:css是层叠样式表单,是将样式信息与网页内容分离的一种标记语言,主要用来设计网页的样式,还可以对网页各元素进行格式化;xml是可扩展标记语言,是一种数据存储语言,用于使用简单的标记描述数据,将文档分成许多部件并对这些部件加以标识。

css3怎么实现鼠标隐藏效果css3怎么实现鼠标隐藏效果Apr 27, 2022 pm 05:20 PM

在css中,可以利用cursor属性实现鼠标隐藏效果,该属性用于定义鼠标指针放在一个元素边界范围内时所用的光标形状,当属性值设置为none时,就可以实现鼠标隐藏效果,语法为“元素{cursor:none}”。

css怎么实现英文小写转为大写css怎么实现英文小写转为大写Apr 25, 2022 pm 06:35 PM

转换方法:1、给英文元素添加“text-transform: uppercase;”样式,可将所有的英文字母都变成大写;2、给英文元素添加“text-transform:capitalize;”样式,可将英文文本中每个单词的首字母变为大写。

rtl在css是什么意思rtl在css是什么意思Apr 24, 2022 am 11:07 AM

在css中,rtl是“right-to-left”的缩写,是从右往左的意思,指的是内联内容从右往左依次排布,是direction属性的一个属性值;该属性规定了文本的方向和书写方向,语法为“元素{direction:rtl}”。

css怎么设置i不是斜体css怎么设置i不是斜体Apr 20, 2022 am 10:36 AM

在css中,可以利用“font-style”属性设置i元素不是斜体样式,该属性用于指定文本的字体样式,当属性值设置为“normal”时,会显示元素的标准字体样式,语法为“i元素{font-style:normal}”。

怎么设置rotate在css3的旋转中心点怎么设置rotate在css3的旋转中心点Apr 24, 2022 am 10:50 AM

在css3中,可以用“transform-origin”属性设置rotate的旋转中心点,该属性可更改转换元素的位置,第一个参数设置x轴的旋转位置,第二个参数设置y轴旋转位置,语法为“transform-origin:x轴位置 y轴位置”。

See all articles

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

热门文章

R.E.P.O.能量晶体解释及其做什么(黄色晶体)
2 周前By尊渡假赌尊渡假赌尊渡假赌
仓库:如何复兴队友
4 周前By尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island冒险:如何获得巨型种子
4 周前By尊渡假赌尊渡假赌尊渡假赌

热工具

安全考试浏览器

安全考试浏览器

Safe Exam Browser是一个安全的浏览器环境,用于安全地进行在线考试。该软件将任何计算机变成一个安全的工作站。它控制对任何实用工具的访问,并防止学生使用未经授权的资源。

DVWA

DVWA

Damn Vulnerable Web App (DVWA) 是一个PHP/MySQL的Web应用程序,非常容易受到攻击。它的主要目标是成为安全专业人员在合法环境中测试自己的技能和工具的辅助工具,帮助Web开发人员更好地理解保护Web应用程序的过程,并帮助教师/学生在课堂环境中教授/学习Web应用程序安全。DVWA的目标是通过简单直接的界面练习一些最常见的Web漏洞,难度各不相同。请注意,该软件中

SublimeText3 英文版

SublimeText3 英文版

推荐:为Win版本,支持代码提示!

EditPlus 中文破解版

EditPlus 中文破解版

体积小,语法高亮,不支持代码提示功能

SublimeText3 Linux新版

SublimeText3 Linux新版

SublimeText3 Linux最新版