不要使用@import引入css文件,会导致文件不是多线程下载
长度 px 像素 推荐使用, Em 以目前字体高度为单位(绝对值反正现在有rem，这个看看就好) rem（css3）根据根元素缩放
Color rgb(0,0,0) （一般做效果使用rgba，也是css3的），一般有设计稿会使用 #000000 ;至于red yellow aliceblue 这些，自己看着办
单纯使用 font 加粗会出现显示不了,一般要配合font :12px bold;复合标签
最好还是使用font-weight:bold进行加粗;
text-indent 首行缩进 可以用于 文段之前的空格(中文习惯格式
line-height: 100px 对应100px的容器里进行垂直居中
vertical-align:middle
第一种用法，先看后面一句“在表单元格中，这个属性会设置单元格框中的单元格内容的对齐方式。”这很容易理解，如果给一个表格的td加一个 vertical-align:middle的样式，表格里面的内容会垂直居中，同样的如果给一个vertical-align:bottom就会底部对齐，如果给一个vertical-align:top就会顶部对齐。
第二种用法，看前页一句“该属性定义行内元素的基线相对于该元素所在行的基线的垂直对齐。”专业的语言我不会说的，可以打个比喻：假设有两个行内元素a和 b，a和b都是img，当a加了一个vertical-align:middle样式之后，b的底部（基线）就会对齐a的中间位置，如下图：
如果a和b都加了一个vertical-align:middle样式，那么就互相对齐了对方的中间位置，也就是它们在垂直方向上的中线对齐了，如下图：
说到这里，思路就清晰了。
同样的原理对文字等也适用。
Css背景
背景
body{background:#fff url("bg.jpg") no-repeat fixed center top;}
li{
list-style:none ;
}
提倡简写写法 background:颜色 背景图片 repeat attachment position
几乎不用list-style:url;图片 因为图片不能根据高度来调整,一般使用背景background就可以了
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
简单px.this is css
边框与边界
边框与边界
div{
overflow:auto;
}
img{
border:5px dashed ;
/*
border-color:red black yellow green
对应的边框颜色要上右下左 设置,需要每个分开出来
建议是简化 border 像素 形态 颜色;/规范
*/
margin:10px;
padding:10px;
}
.box_a{width:50px; height:50px; background:#f00; margin:10px 0;}
.box_b{width:50px; height:50px; background:#f0f; margin:20px 0;display:inline-block;*display:inline; zoom:1;}
/*margin合并 第一个元素与父亲元素临近元素的margin合并(出现在块装元素标准浏览器出现问题,ie表现正常)
解决办法:
1)在父层div加上：overflow:hidden；
2)把margin-top外边距改成padding-top内边距;
3)父元素产生边距重叠的边有不为 0 的 padding 或宽度不为 0 且 style 不为 none 的 border
父层div加： padding-top: 1px,或者 border-top:1px ;
4)设置父元素或子元素浮动（left/right）
5)设置父元素dispaly:inline-block或者display:table-cell;
6)给父元素加上绝对定位
以上6种办法都能解决第一个子元素的父元素的间距问题
相邻元素两个相邻元素之间的间隔，只有20px；如果我要实现两元素间的间隔是我理想的间隔，即30px,该如果实现呢？方法有以下两个：
1）给最后面的元素加上浮动（left/right）
2)给最后一个元素加上display:inline-block;但是IE6和IE7下不完全支持display:inline-block，所以要加上*display:inline;zoom:1即可解决IE6、7的bug;
1. 水平margin不会合并。
2. 两个上下渲染相邻（不一定是兄弟节点）的块状元素在正常页面流情况下会发生 margin 合并。
3. 浮动元素不会和任何元素（包括子孙节点）发生 margin 合并。
4. overflow！=visible的元素不和任何元素发生margin合并。
5. 绝对定位的元素不和任何元素发生margin合并。
6. inline-block 的元素不和任何元素发生margin合并。
7. 设置 clear 属性的元素不和任何元素发生margin合并。
8. 根元素不和任何元素发生margin合并。
9. 父节点和第一个子节点发生margin-top合并。
10. 如果最后一个子节点没有border以及padding，则和其父节点发生margin-bottom合并。
注意IE！特别是hasLayout对于margin合并也有影响，从而也造成了包含的绝对定位元素的位置差异。
*/
查看更多关于XHTML基础（含部分css）_html/css_WEB-ITnose的详细内容...