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