css样式表基本属性2

最新推荐文章于 2024-06-25 11:57:05 发布

我心驰往

最新推荐文章于 2024-06-25 11:57:05 发布

阅读量300

点赞数 1

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/qq_25266743/article/details/71261190

版权

css 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

外边距与内边距属性

1盒子简介

盒子模型如图所示：
![盒子模型](https://img-blog.csdn.net/20170506143357536?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvcXFfMjUyNjY3NDM=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)

2外边距

  1. 上边距margin-top:边距值
  2. 下边距margin-bottom:边距值
  3. 左边距margin-left:边距值
  4. 右边距margin-right:边距值
  5. 外边距复合属性margin
  语法：`margin:长度值|百分比|auto`
  取值说明：
  - 长度值为绝对边距值，包括数字和单位；
  - 百分比相对于上级元素宽度，允许负值；
  - auto自动取边距值，即元素默认值。
  margin:10px; 所有外边距都为10px；
  margin:10px 20px; 上下边距为10px，左右边距为20px；
  margin:50px 10px 20px; 上边距50px，左右边距10px，下边距20px；
  margin:50px 10px 20px 30px; 上边距50px，右边距10px，下边距20px，左边距30px；
  示例：

<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
     .h1{
        margin-top:10pt;
        margin-right:30pt;
        margin-bottom:10pt;
        margin-left:20pt;
      }
      .h2{
        margin:10pt 30pt 10pt 20pt;
      }
    -->
  </style>
 </head>
 <body>
   <span class="h1">授人以鱼不如授人以渔</span>
   <span class="h2">授人以鱼不如授人以渔</span>
 </body>
 </html>

3内边距

  1. 顶端内边距padding-top:间隔值
  2. 底端内边距padding-bottom:间隔值
  3. 左端内边距padding-left:间隔值
  4. 右端内边距padding-right:间隔值
  5. 内边距复合属性padding
  语法：`padding:长度值|百分比`
  取值说明：
  - 长度值为绝对边距值，包括数字和单位；
  - 百分比相对于上级元素宽度，不允许负值。
  示例：

<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
     body{
        padding-top:10pt;
        padding-right:30pt;
        padding-bottom:10pt;
        padding-left:20pt;
      }
     /*或body{
        padding:10pt 30pt 10pt 20pt;
      }*/
    -->
  </style>
 </head>
 <body>
   <p>授人以鱼不如授人以渔</p>
 </body>
 </html>

4边框属性

边框有三个属性：边框宽度属性、边框颜色属性、边框样式。
  1. 边框样式border-style
     语法：border-style:样式值
          border-top-style:样式值
          border-right-style:样式值
          border-bottom-style:样式值
          border-left-style:样式值
     取值说明：none   默认，无边框
                     dotted 点线边框
                     dashed 虚线边框
                     solid 实线边框
                     double 双实线边框
                     groove 边框具有立体感的沟槽
                     ridge 边框成脊形
                     inset 边框凹陷，即边框内嵌入一个立体边框
                     outset 边框凸起，即边框外嵌入一个立体边框
     示例：

<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h{
        border-top-style:dashed;
        border-right-style:dashed;
        border-bottom-style:dotted;
        border-left-style:solid;
        line-height:20px;
      }
    -->
  </style>
 </head>
 <body>
   <span class="h">授人以鱼不如授人以渔</span>
 </body>
 </html>

  2. 边框宽度border-width
     语法：border-width:宽度值
          border-top-width:宽度值
          border-right-width:宽度值
          border-bottom-width:宽度值
          border-left-width:宽度值
     取值说明：medium  默认宽度
              thin 小于默认宽度
              thick 大于默认宽度

<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h{
        border-top-style:dashed;
        border-right-style:dashed;
        border-bottom-style:dotted;
        border-left-style:solid;
        line-height:20px;
        border-top-width:2px;
        border-right-width:2px;
        border-bottom-width:2px;
        border-left-width:2px;
      }
    -->
  </style>
 </head>
 <body>
   <span class="h">授人以鱼不如授人以渔</span>
 </body>
 </html>

  3. 边框颜色border-color
     语法：border-color:颜色值
          border-top-color:颜色值
          border-right-color:颜色值
          border-bottom-color:颜色值
          border-left-color:颜色值
     示例：

<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h{
        border-top-style:dashed;
        border-right-style:dashed;
        border-bottom-style:dotted;
        border-left-style:solid;
        line-height:20px;
        border-top-width:2px;
        border-right-width:2px;
        border-bottom-width:2px;
        border-left-width:2px;
        border-top-color:#ff9900;
        border-right-color:#0099ff;
        border-bottom-color:#cc33ff;
        border-left-color:#ccfffff;
      }
    -->
  </style>
 </head>
 <body>
   <span class="h">授人以鱼不如授人以渔</span>
 </body>
 </html>

 4. 边框属性border
    语法：border: 边框宽度 样式 颜色值
         border-top: 上边框宽度 样式 颜色值
         border-right: 右边框宽度 样式 颜色值
         border-bottom: 下边框宽度 样式 颜色值
         border-left: 左边框宽度 样式 颜色值
    示例：

<!doctype html>
<html lang="en">
 <head>
  <meta http-equiv="content-type" content="text/html;charset=UTF-8">
  <title>使用css样式表</title>
  <style type="text/css">
    <!--
      .h{
        line-height:20px;
        font-family:"宋体";
        font-size:12px;
        border-top:2px dashed #00ccff;
        border-right:2px solid #3300ff;
        border-bottom:2px dotted #ff0000;
        border-left:2px solid #3300ff;
      }
    -->
  </style>
 </head>
 <body>
   <span class="h">授人以鱼不如授人以渔</span>
 </body>
 </html>