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;}

　　　　效果：

 

 

 　　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% */}

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

 

 

 　　6）盒子模型

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

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

　　　　

　　　　元素最终所占宽度：

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