你的位置:首页 > 网页设计

[网页设计]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: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布局中的每一个元素,在浏览器的解释中,都被当作一个盒状物。

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

    

    元素最终所占宽度:

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