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> </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:0; padding:0; }
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布局中的每一个元素，在浏览器的解释中，都被当作一个盒状物。
对我们来说，只需要理解元素在页面中所占据的位置。
元素最终所占宽度：
左边框宽 + 左内边距 + 内容宽度 + 右内边距 + 右边框宽
