#test 选择一个id=test的对象
.test选择类名为test的标签
p.test选择所有p标签下面的test类标签
class and id不要用数字开头，firefox不支持
样式的层叠优先级别：由低到高
- 浏览器缺省设置
- 外部样式表
- 内部样式表（位于 <head> 标签内部）
- 内联样式（在 HTML 元素内部）
body
{
background-image:url('img_tree.png');
background-repeat:no-repeat;
background-position:right top;
background-attachment:fixed;
}
可以简写为
body {background:#ffffff url('img_tree.png') no-repeat right top fixed;}
text-align: justify 每一行被展开为宽度相等，左，右外边距是对齐,
h1 {text-align:center;}
p.date {text-align:right;}
p.main {text-align:justify; margin:30px; }
text-decoration: 去除或者增加文本修饰，比如下划线等
a {text-decoration:none;}
分组选择器 - ul, li {...} 表示将所有的ul和li都设置成如下属性
后代选择器 - ul li {...} 表示将所有ul当中的li都设置成如下属性，不仅仅是一级children，而是各级的children
子代选择器 - ul > li 只选取一级children
相邻选择器 - ul+p 只选择和ul紧挨着的p，两者是平行的共有一个父亲，并且ul和p之间没有任何其他元素
普通相邻选择器 - ul~p 选择和ul平行的所有p元素，中间可以有别的元素。
属性选择器 - [title] 选择所有属性name＝title的元素
- [title="hello"] title=hello的所有元素
- [title~="hello"] title当中包含hello这个单词的所有元素。 "hi helloworld " 不符合规则， “hi hello world”符合。
- [title|="hello"] title当中以hello开头的。 “helloworld”符合。 “worldhello”不符合
- input[type="button"] 所有type＝“button”的input元素集合
CSS 框模型(Box Model)
框模型包括：
margin- 元素针对父元素或相邻元素的坐标；border：元素边框；padding：content针对本元素的坐标；content：内容
当您指定一个CSS元素的宽度和高度属性时，你只是设置内容区域的宽度和高度。要知道，完全大小的元素，你还必须添加填充，边框和边距。
下面设置的元素真实宽度是300px
width:250px;
padding:10px;
border:5px solid gray;
margin:10px;
margin 简写的顺序是 top right bottom left
html body的height百分比设置
<!DOCTYPE html>
<html>
<head>
<style>
html {
height:100%;
background-color: red;
}
body {
height:100%;
background-color:green;
border: 5px solid black;
}
img.normal {height:auto;}
img.big {height:50%;}
img.small {height:10%;}
</style>
</head>
<body>
<img class="normal" src="logocss.gif" /><br>
<img class="big" src="logocss.gif" /><br>
<img class="small" src="logocss.gif" />
</body>
</html>
一个元素的height百分比生生效的前提是，向上追溯它的父节点直到找到一个高度可以确定的，如果中途遇到了auto或者没有这个属性设置，那么height百分比无效。
body的高度默认是不确定的，等于内部元素的布局计算后的高度，他的父元素是html，如果html不设置高度100%，那么body设置的高度百分比是无效的。
块和内联元素
display 和visibility的区别。display:none 元素消失，不占用布局。visibility:none元素隐藏，但是占用布局
块元素占用全部宽度，前后都是换行符。div, p, h1, ul li etc
内联元素只占据必要宽度，不强制换行。 a, span etc
可以讲块元素设置为内联属性 p {display: inline}，反之亦然 span {display: block}
display:inline-block，元素相对于它周围的内容以内联形式呈现，但与内联不同的是，这种情况下我们可以设置宽度和高度
Positioning
static:默认方式，没有定位，元素出现在正常的流中。top，left，bottom，right设置无效
fixed：元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会移动。Fixed定位使元素的位置与文档流无关，因此不占据空间。{position:fixed; top:20px}
relative：相对定位元素的定位是相对其正常位置，可以理解为先在没有position属性的情况下布局完成并形成元素的空间，然后处理position的位置设置-移动元素，占据的空间大小是不会改变的，变化的只是相对位置。{position:relative; top:-20px;}
absolute:绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>。和fixed的区别就是当滚动的时候，他会html一起滚动.
z-index属性指定了一个元素的堆叠顺序,具有更高堆叠顺序的元素总是在较低的堆叠顺序元素的前面。
溢出overfolow
div.scroll
{
background-color:#00FFFF;
width:100px;
height:100px;
overflow:scroll;
}
div.hidden
{
background-color:#00FF00;
width:100px;
height:100px;
overflow:hidden;
}
如果包含的元素宽高超过了父元素，那么默认会溢出，也就是会超出父元素的显示区域，撑出去显示。
scroll：表示不管是否有超出内容，父元素一定会显示横竖两个滚动条区域，超出部分可以滚动显示
hidden:表示超出部分不会显示。
auto: 如果不超出不显示滚动条，超出部分会自动显示滚动条
float
元素只能左右移动而不能上下移动。
一个浮动元素会尽量向左或向右移动，直到它的外边缘碰到包含框或另一个浮动框的边框为止。
浮动元素之后的元素将围绕它。
浮动元素之前的元素将不会受到影响。
img
{
float:right;
}
如果你把几个浮动的元素放到一起，如果有空间的话，它们将彼此相邻
.thumbnail
{
float:left;
width:110px;
height:90px;
margin:5px;
}
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性，这个之后就没有环绕效果了，除非有新的环绕设定
.text_line
{
clear:both;
}
headerline有一个特殊的地方，就是默认是有margin的，在这个时候，他的容器如果设置背景色，这些margin区域是无法填充的，要在容器css当中设置padding:xpx/xem 才会生效。
块元素默认是占据整行宽度，两边换行的。我目前已知的将块元素放到一行的方法有：
- float做环绕
- position:absolute
块元素的水平对齐方法：
- margin-left， margin-right设置为auto，居中对齐
- float， posiition：aboslute左右对齐
634
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
