CSS知识点集锦

CreateTime--2016年9月29日09:43:10
Author:Marydon

UpdateTime--2017年3月21日08:03:13

2.CSS样式优先级问题

  正常情况下,外部样式 < 行内样式 < 内部样式(由低到高),

"!important"可以打破这种优先级顺序,如果CSS样式,被"!important"修饰,则被其修饰的样式具有最高优先级,即:

外部样式 < 行内样式 < 内部样式 < 被"!important"修饰的样式(由低到高)。

  举例1:

/*外部样式*/
div{background-color: yellow !important;}
/*内部样式*/
div{background-color: green;}
/*行内样式*/
<div style="background-color: blue;">测试CSS样式优先级</div>

  结果:div背景色为黄色

  注意:如果行内样式同样被"!important"修饰,则优先级遵循正常情况!

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.设置div最小高度及高度自动伸展

#divHeight{height:auto;min-height:5px;width:800px; background:#bbeeeb;margin:0 auto;}   
<div id="divHeight">
   此div具有最小高度且高度可以随着内容的增高而自动伸展 <br/>
   此div具有最小高度且高度可以随着内容的增高而自动伸展
</div>

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

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;" />

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

  word-wrap:break-word;

8.实现div,li里的内容超出容器宽度时,超出部分以".."形式显示
  前提:必须先确定div,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"/> 

UpdateTime--2017年3月21日20:16:33

10.设置边框圆角

border-radius可以同时设置1到4个值(顺时针:上、右、下、左)

border-radius: 5px;

支持:IE9及以上

UpdateTime--2017年11月2日10:12:08

/* chatbox start */
/* 设置页面的内外边距 */
*{padding:;margin:;}
/* 背景图片大于容器或小于容器,使用cover值,可以是背景图片填充容器 */
body {background:url("images/bg.jpg") no-repeat;background-size:cover;color:#37B11B;}
/* 经常出现的问题:给div定义宽和高后,如果div里面没有内容的话,该div虽然已经存在,但是在页面上是显示不出来的,
解决方案:给div添加边框或背景色
*/
/* 设置div的外边距
margin属性,只有一个值,表示距离上下左右4个方向的外边距均为设定的值;
只有两个值,第一个值表示距离上下的外边距,第二个值表示距离左右的外边距;
有三个值,不常用,这里不介绍;
有4个值,依次表示上、右、下、左外边距的距离(记忆:顺时针方向);
以,只有一个值为例,如果上面有内容,左右和下面没有内容的话,起作用的只有上面,即:即使定义了指定方向的外边距,如果对应方向上没有内容,该样式不会起作用
*/
/* 不定义高度:容器的高度会随着里面内容高度的变化而变化 */
.chatbox {width:700px;margin:100px auto;}
/* 设置文本内容在容器中居中 */
h1 {font-size:30px;color:#26D053;text-align:center;}
/* 设置文本框的边框颜色,聚焦时消除边框变色,调整光标距离边框的间距 */
.chatbox .inputText {height:30px;border:1px solid #3DAC37;outline:none;text-indent:14px;font-size:14px;font-family:"微软雅黑";}
.chatbox .btn {width:80px;color:#fff;font-size:14px;background:green;cursor:pointer;text-indent:;}
/* 使用panding改变内边距时,会将div的宽度或高度撑大,因此当调整容器内边距时,且定义了容器的宽度或高度时,需要修改对应的宽度和高度 */
.chatbox .c_message {width:%;height:300px;border:1px solid gray;padding-left:20px;}
.chatbox .c_send {margin-top:10px;}
/* end chatbox */
 

CSS知识点集锦的更多相关文章

  1. html/css/javascript知识点集锦;完全小白开搞web编程

    知识点集锦 1.在html模板的代码中会有下面一类: {% block title %} Blog entries {% endblock %}这里的 block 和 endblock 是神马? {% ...

  2. 这些HTML、CSS知识点,面试和平时开发都需要 No1-No4

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  3. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  4. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  5. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

  6. css知识点

    css知识点 一.盒模型知识 border: 边框 border-width:边框的宽度 border-color:边框的颜色 border-style:边框的线型 border-top:上边框 bo ...

  7. jsp&html页面知识点集锦

      CreateTime--2016年12月16日16:08:03Author:Marydonjsp&html页面知识点集锦1.标签的class属性 标签同时拥有多个class时,要写在同一个 ...

  8. 这些HTML、CSS知识点,面试和平时开发都需要 No8-No9(知识点:媒体操作、构建表单)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

  9. 这些HTML、CSS知识点,面试和平时开发都需要 No10-No11(知识点:表格操作、代码编写规则)

    系列知识点汇总 1.基础篇 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5- ...

随机推荐

  1. 自定义的开关按钮——SwitchButton

    本文转自:http://blog.csdn.net/swust_chenpeng/article/details/19967501 我将原文的控件进行了一些修改,去掉了原来控件的外边框,只留下重要的遮 ...

  2. [转]11个在线编码大赛,与全球程序员PK

    From : http://news.cnblogs.com/n/187196/ 英文原文:10 Online Coding Contests For Programmers! 如果你拥有出色的编码技 ...

  3. 理解 Linux 的处理器负载均值

    原文链接: http://blog.scoutapp.com/articles/2009/07/31/understanding-load-averages 你可能对于 Linux 的负载均值(loa ...

  4. sharepoint list 文档上传和删除

    最近项目需要对sharepoint 文件操作,于是自己写了一个简单的工具类分享出来: namespace Microsoft.SharePoint { using System; using Syst ...

  5. android 桌面小工具(Widget)开发教程

    刚学做了哥Widget,感觉不错哦,先来秀下效果(用朋友手机截的图) 这个Widget会每隔5秒钟自动切换内容和图片,图片最好使用小图,大图会导致你手机桌面(UI)线程卡顿 教程开始: 1.首先创建一 ...

  6. Eclipse Maven项目报错3之找不到配置文件spring-servlet-context.xml

    一.具体错误如下图所示 根据文字提示可以看出是这个文件找不到,但是我去项目的这个目录找了,这个文件确实存在,那么是什么问题呢 二.解决问题 原因分析(来自网上) 代码编译的过程,是一个自动生成相应编译 ...

  7. MySQL数据库localhost的root用户登陆遭遇失败

    问题:Access denied for user 'root'@'localhost' (using password: YES)打开MySQL目录下的my.ini文件(Linux的话是/etc/m ...

  8. unity中使用自定义shader进行光照贴图烘培无法出现透明度的坑爹问题

    最近开发中在对场景进行光照贴图烘焙时发现一个坑爹问题,在使用自定义shader的时候,shader命名中必须包含Transparent路径,否则烘焙的时候不对alpha通道进行计算,烘焙出来都是狗皮膏 ...

  9. vSCode打开文件老覆盖原窗口

    https://segmentfault.com/q/1010000006131199?_ea=1023522 设置中搜preview,改为false

  10. Managed C++ dll: #define _AFXDLL or do not use /MD[ d]?

    [问题] Hello all     I'm writing a managed C++ dll with will be acting as an intermediate between a lo ...