首页 > 代码库 > CSS样式汇总
CSS样式汇总
1. Overflow:
是否隐藏超出容器范围之外的内容，主要参数包括Hidden(隐藏),Auto（根据容器内容自动显示滚动条）,scroll（显示滚动条，即使内容不超出容器范围，也会显示一个边框，效果非常不好）；
2. Relative & Absulote
Relative:将元素从文档流中部分不完全脱离出来，因为它先前的位置无法被其他元素所占据；
Absolute:一个元素的Position被设定为Absolute后，而该元素的父级元素没有设置Position属性，则会一直往上找，如何可以找到，则以该父元素做参考进行定位，否则会将<body>做为参考，即：该元素会以屏幕左上角为原点进行定位；
将元素从文档流中完全脱离出来，先前位置会被后续元素所占据；
3. 几种选择器
A. 元素选择器(类型选择器)
html{color:red;}
p{color:gray;}
h2{color:silver;}
B. 通配符选择器(*)
C. 类选择器
用法1：
<p class=‘important‘>This paragraph is very important</p>
.important{color:red;}
用法2(结合元素选择器)：
p.important{color:red;}/*带有important样式的元素p*/
D. ID选择器
E. 属性选择器
img[alt] {border: 5px solid red;}
F. 子选择器
G. 后代选择器
H. 兄弟选择器
<li>L1</li><li>L2</li><li>L3</li>
li+li{font-weight:bold;} /*L2/L3 会变粗*/
4. display 属性
inline:将块级元素内容显示为行级元素;
inline-block:将行级元素内容显示为块级元素；
Example:
<html><head> <title>Inline Testing</title></head><body> <div title="The width and height is no effect on inline element!" style="background-color:blue;width:200px;height:200px;display:inline;">Div is block element!</div> <div title="Elements with inline property will be in one line with the line-level elements!"> <div style="background-color:red;display:inline">RED CUBE</div><a href="www.google.com.sg">Google.SG</a> </div> <div> <a title="Adding width and height to the line-level element!" href="www.google.com.sg" style="background-color:purple;display:inline-block;width:200px;height:200px;">Google.SG</a> </div></body></html>
CSS样式汇总