css布局顺序和学习笔记

书写顺序

1.位置属性(position, top, right, z-index, display, float等)
2.大小(width, height, padding, margin)
3.文字系列(font, line-height, letter-spacing, color- text-align等)
4.背景(background, border等)
5.其他(animation, transition等)

body{
padding-top:100px;
background-color: #CDE6FF ;
background-image:url(images/bg_body.png);
background-repeat: repeat-x;

background-position:center top;如果背景图片没有居中。可以对背景进行定位。

。backgroun不出来要加background-image，独立背景用background-image;是否重复也是。检查图片的路径是否正确。
}

h2{
color:#B1967C;
background:url(images/bullet_flower.png) no-repeat;

border-bottom: 1px solid white;
padding:0px 0px 2px 80px;
font-size:36px;
border-bottom: 2px solid white;
font-weight: normal;
font-family: "Palatino Linotype", Baskerville, serif;
/*内容是用字体撑开的*/
vertical-align: middle;
}

小图片用用背景。padding调整字体的内边距。调整字体与图片对齐。设置vertical-align: middle;字体与图片对齐。

.p-style{
border: 2px dashed #BD8110;
background: #FBF8A9;
margin-top:25px;
margin-bottom: 35px;
padding:20px;
}

padding和margin是对元素本身设置的，padding的4个值要记清楚，margin也是，border的常用属性要熟记。背景的属性一样。