css基础知识盘点

1、css书写顺序：
显示属性：display,list-style,position,float,clear
自身属性：width,height,margin,padding,border,background
文本属性：color,font,text-decorator,text-align,vertical-align,white-space,other-text,content;
2、定位属性的应用
定位属性有三种：position,边偏移属性top left，z-index。一般是三种混合使用，用position定义模式，用偏移属性定义位置，用z-index确定前后关系。
position有三种值：fixed relative absolute
positon:fixed是元素固定地显示于屏幕的某一个位置，这个设置可以使元素不随文本内容移动。
positon:relative；相对于原来位置的基础上做出偏移，但是原来的位置还在，不会随元素的偏移而消失。使用边偏移left,top属性去定义。
img{
position:relative;
left:0.5em;
top:100px;
}
position:absolute;从文档中独立出来，使用边偏移定义。
.content{
position:absolute;
top:200px;
left:100px;
}
边偏移是相对于父元素而言的。
3、可继承属性
text-index、line-height、letter-spacing、word-spacing、text-transform、font-family、用伪类定义的链接属性（:link,:visited,:hover,:active）
4、text-align和vertical-align都可以使文字居中,不同的是vertical-align只作用于内联元素，且是垂直居中；text-align是水平居中、
5、font-size实用百分比为值时，参照地是父元素的字体大小。
font1{font-size:120%;font-size:14px;}同时定义百分比和长度值，最后使用的是长度值。
如果某个子元素没有定义font-size，最后使用父元素的font-size值。
css中规定的，所有属性可以自由交换位置，但在使用中文字体时，交换属性的位置会对显示造成影响，最好把字体属性放在最后。
在font中加入行高属性的方法：.content{font:24px/40px "宋体";}在字体大小后面表示。
6、text-decoration具有继承和非继承的特性。
.content{
text-decoration:underline;
}
<div class="content">
我是父元素，我可以调遣子元素。
<p class="decoration">我是子元素，我既听父元素调遣，又不全听它调遣。</p>
</div>
此时，p标签中的字体样式同父元素一致。
当加上
.decoration{
txt-decoration:none;
}
子元素并没有消去文本修饰样式。但是在使用伪类定义链接属性时，这种现象不会出现。
7、修饰链接的5个属性：:link,:visited,:hover,:active,a。前4个要按照前述顺序使用，否则可能有些效果无法显示。
8、如果要更改一个元素的链接样式，最好用“子选择符”的形式，因为不这样做的话，样式定义可能会无效。
.content a:link{
font-size:20px;
color:#cccccc;
text-decoration:underline;
}
.link{
color:#333333;
}
<div class="content">
<p> class="link"<a href="">我是自愿更改的</a></p>
</div>
此时，.link样式并不能更改到样式。
如果改.link样式为如下：
.link a:link{
color:#33333;
}
效果就出来了。
9、同样的图片，当处于a元素中时，会被默认加上一个边框。可以通过img{border:none:}取消默认样式；
一旦定义了图片的宽高，不论图片原来的大小，图片会显示为定义的宽高，这就导致图片可能放大而失真，缩小而丧失细节。所以图片的宽高定义要注意；
如果只是定义图片的宽度或高度，则图片的另一个属性会按照原来图片的比例自动设置属性。
10、有时会在div元素中定义font-size：1px;这是因为不这样定义的时候div元素会使用页面中文本的高度（即默认的最小高度），而不使用定义的height属性。
<div class="content">
<div class="round_top"></div>
<div class="round_content">单线圆角框</div>
<div class="round_bottom"></div>
</div>
.content{width:347px;}
.round_top{
height:8px;
background:url(img/bottom_top.jpg) no-repeat left top;
font-size:1px;
}
.round_bottom{
height:8px;
background:url(img/bottom_left) no-repeat left top;
font-size:1px;
}
.round_content{
border-left:1px #333333 solid;
border-right:1px #333333 solid;
padding:20px;
}
11、在 FF浏览器中元素不能自动增加高度来适应内容，但是在表格中这种自定适应内容的效果得以体现。
12、分割线<hr>其实是2px 的线，由两条1px 的线组成。线条上下两侧会有padding，是元素自带的属性，无法通过css设置取消。