CSS知识总结（四）

CSS常用样式

2.元素样式

　　1）宽度

　　　　width:auto|length

　　　　单位：设置以像素计的宽度值（px）

　　　　　　　设置以百分比计的宽度值（%）

　　　　例：p {width:200px;}

　　　　　　div {width:50%;}

　　1）高度

　　　　height:auto|length

　　　　单位：设置以像素计的宽度值（px）

　　　　　　　设置以百分比计的宽度值（%）

　　　　例：p {height:200px;}

　　　　　　div {height:50%;}

　　3）外边距

　　　　margin:auto|length

　　　　设置外边距会在元素外创建额外的“空白”。

　　　　margin属性接受任何长度单位、百分数值以及负值。

　　　　margin-top　　　　设置上边的外边距

　　　　margin-bottom　　设置下边的外边距

　　　　margin-left　　　　设置左边的外边距

　　　　margin-right　　　设置右边的外边距

　　　　若要设置四边的外边距，有四种缩写形式：

　　　　1.margin：上边距右边距下边距左边距

　　　　　　例：margin:5px 10px 15px 20px;

　　　　2.margin：上边距左右边距下边距

　　　　　　例：margin:5px 10px 15px;

　　　　3.margin：上下边距左右边距

　　　　　　例：margin:5px 10px;

　　　　4.margin：上下左右边距

　　　　　　例：margin:10px;

　　　　**如果：margin:auto，那么该元素水平居中。

　　　　　　例子：

/* CSS代码 */

div{

    width:100px;

    height:100px;

    background:#000;

}

div p{

    width:50px;

    height:50px;

    background:#ccc;

    margin:auto;

}

<!-- HTML代码 -->

<body>

    <div>

        <p>&nbsp;</p>

    </div>

</body>

　　　　效果：

　　4）内边距

　　　　padding:length

　　　　设置元素边框与元素内容之间的空白区域。

　　　　padding 属性接受长度值或百分比值，但不允许使用负值。　　　

　　　　padding-top　　　　设置上边的内边距

　　　　padding-bottom　　设置下边的内边距

　　　　padding-left　　　　设置左边的内边距

　　　　padding-right　　　设置右边的内边距

　　　　若要设置四边的内边距，有四种缩写形式：

　　　　1.padding：上边距右边距下边距左边距

　　　　　　例：padding:5px 10px 15px 20px;

　　　　2.margin：上边距左右边距下边距

　　　　　　例：padding:5px 10px 15px;

　　　　3.margin：上下边距左右边距

　　　　　　例：padding:5px 10px;

　　　　4.margin：上下左右边距

　　　　　　例：padding:10px;

　　*总结外边距和内边距：在项目中，为了得到更好的效果，一般先把浏览器的默认样式干掉。

　　　　代码如下：

*{

    margin:;

    padding:;

}

　　5）透明度

　　　　opacity:<number>

　　　　number值为0-1之间的数值。（小数点之前的0可以省略）

　　　　例子：

/* CSS代码 */

.opacity{

    width:100px;

    height:100px;

    background:#000;

}

.opacity:hover{

    opacity:0.5;      /* 鼠标经过 透明度为50% */

}

<!-- HTML代码 -->

<body>

    <div class="opacity"></div>

</body>

　　效果：（鼠标经过时，透明度变成50%）

　　6）盒子模型

　　　　盒子模型就是指CSS布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。

　　　　对我们来说，只需要理解元素在页面中所占据的位置。

　　　　元素最终所占宽度：

　　　　左边框宽 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽