Css常用属性（背景，字体，div盒子等）

Css常用属性（背景，字体，div盒子等）

1.背景

1.背景颜色：background-color
2.将图像设置为背景:background-image:url();
3.设置图像是否平铺：background-repeat：no-repeat 或 repeat-x 或repeat-y
4.设置背景图片是否随滚动条一起移动：background-attachment:fixed;固定住。
inherit：规定应该从父元素继承 background-attachment 属性的设置。默认属性scroll
5.background：背景色 背景图片 平铺方式

background-color:red;
background-image:url(../img/logo.gif);
background-repeat:no-repeat;
background-attachment:fixed;
background:#c9c9dd url(../img/logo.gif) no-repeat;

2.字体

1.字体是否倾斜：font-style：normal(默认值)；italic或oblique显示倾斜字体；inherit规定应该从父元素继承字体样式。
2. 加粗：font-weight:normal(默认值);bold 定义粗体字符；bolder 定义更粗的字符；lighter定义更细的字符。
3. 字号：font-size
4. 行高:line-height
5. 字体:font-family

font-style:italic;
font-weight:bold;
font-size:16px;
line-height:26px;
font-family:sans-serif;

3.盒子模型

1. 宽度 width: 长度 | 百分比 | auto;
2. 高度 height: 长度 | 百分比 | auto;
3. 清除 clear: none | left | right | both;
4. 边界 margin: 上 右 下 左 ;
5. 填充 padding: 上 右 下 左 ;
6. 定位 position: absolute(绝对定位) | relative（相对定位） | static（默认值）;
7. 透明度 visibility: inherit （应该从父元素继承 visibility 属性的值）| visible （默认值）| hidden（元素不可见）;
8. 溢出 overflow: visible （默认值）| hidden（内容会被修剪） | scrol（内容会被修剪）l auto（如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。）;
9. 裁切 clip: rect(12px,auto,12px,auto)。

4.position

1. fixed:一般用来写网页顶端的固定导航条，或者两侧的菜单。

<!--对于块级标签来说加上position:fixed之后，该div就不会占一整行，一般需要手动定义宽度，如width:100%-->
 
<div style="position:fixed;height:10%;background-color:lightskyblue;color:white;width:100%;top:0px;">我是导航</div>
<div style="">
    <div style="position:fixed;bottom: 0px;top:10%;float: left;width: 20%;background-color:indianred">我是菜单</div>
    <div style="float: right;width:80%;"><p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
        <p>我是内容</p>
    </div>
</div>

2. absolute与relative这两者一般配合使用，用于调整div之间的相对位置

<div style="position:relative;width: 300px;height: 150px;">
    <div style="position:absolute;float: left;width: 20%;background-color:indianred;bottom: 0px;right: 0px;">我是菜单</div>
</div>

5.css边框

1. border-radius 创建圆角边框
2. box-shadow 向矩形添加阴影
3. border-image 使用图片来绘制边框

以下是 向div元素添加圆角边框

div
{
border:2px solid;
border-radius:25px;
-moz-border-radius:25px; /* Old Firefox */
}

以下是向 div 元素添加方框阴影：

div
{
box-shadow: 10px 10px 5px #888888;
}