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:0;margin:0;} /* 背景图片大于容器或小于容器，使用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:0;} /* 使用panding改变内边距时，会将div的宽度或高度撑大，因此当调整容器内边距时，且定义了容器的宽度或高度时，需要修改对应的宽度和高度 */ .chatbox .c_message {width:97%;height:300px;border:1px solid gray;padding-left:20px;} .chatbox .c_send {margin-top:10px;} /* end chatbox */
- 还没有人评论，欢迎说说您的想法！
客服
