1、css常用属性设置
1.1、背景（background，定义HTML元素背景效果）
1.1.1、background-color标签
定义背景颜色
<!DOCTYPE html><html><head><meta charset="utf-8" /><title></title><style>#div1{width: 100%;height: 30px;background-color: beige;}</style></head><body><div id="div1">背景</div></body></html>
1.1.2、background-img
设置背景图片默认重复，以百度图标为例,x轴与y轴都重复。
background-image:url(img/f6199e0da88307b925083d38e6baecdd.jpg);
1.1.3、background-repead
选择重复方式或者不重复
background-repeat: repeat-x;
或者选择不重复
background-repead：no-repead;
1.2、文本（color，text-align，text-decoration，text-indent）
文本颜色color，对齐方式align，修饰decoration（下划线underline，中划线line-through，上划线overline等），对其方式indent。超链接下往往有下划线，用text-decoration：none；即可消除下划线
#div2{color: aqua;text-align: left;text-decoration: overline;text-indent: 2em;}
em为相对值（相对页面文字大小，如果文本大小20px，2em即为40px）
1.3、对齐方式（div，p等都可以，默认是左对齐）
属性值，左left，右right，中center，两端对齐justify（当内部有英文时，因为英文长度与中文往往有差距，在一行的右端可能会有留白）
#passage{text-align: justify;}
1.4、display属性
display规定元素生成框的属性。元素不显示none，将元素显示为块级元素block，内联元素inline（默认，没有换行符）等。我们经常见的菜单，鼠标放上去显示，鼠标不放上去隐藏就可以利用display属性）
#div4{display: none;}#div3:hover #div4{display:block;}hover为鼠标悬停时
<div id="div3" style="display: inline-block;">yg<div id="div4"><ul style="list-style-type: none;"><li>1</li><li>2</li><li>3</li><li>4</li></ul></div></div>当鼠标移动到yg时下方的1，2，3，4出现
1.5、浮动（float）
float属性有：none，left，right。按理说两个div不会自动到一行，用浮动即可让两个div在一行。
#d1{width: 101px;height: 101px;background-color: #00FFFF;float: left;}#d2{width: 101px;height: 101px;background-color: #fdff52;float: left;}<div id="d1"></div><div id="d2"></div>
1.6、盒子模型（内边距padding，边框border，外边距margin）
内边距：内容与边框之间的距离。
外边距：边框与外面元素的距离。
1.6.1、border（宽度border-width，样式，颜色）（可一起设置，也可分开，分开要用-）
一起设置 border：red solid 1px（顺序没有要求）
分开设置 border-coler：red
border样式（style）：点线dotted，虚线dashed，实线solid
合并边框border-collapse
<div id="d3">盒子</div>
#d3{border: #00FFFF solid 1px;}
1.6.2、padding（用的少，可能会使你内容变形压缩）
设置一个值：四方向都一致
设置两个值：上下一致，左右一致
设置三个值：上右下，左与右一致
#d3{width: 30%;height: 100px;background-color: #FDFF52;border: #00FFFF solid 1px;text-align: center;padding: 20px;}
1.6.3、margin（也可单独设置或一起设置）
用法与padding类似。
#div1{margin-left: 100px;width: 100px;height: 100px;background-color: #00FFFF;}
边框距离左边100px。
95
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
