CSS基础学习8-CSS设置盒装模式

最新推荐文章于 2021-12-07 21:00:00 发布

豪莲

最新推荐文章于 2021-12-07 21:00:00 发布

阅读量264

点赞数

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

本文链接：https://blog.csdn.net/rongrong_love_lc/article/details/52909777

版权

CSS 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

所有CSS基础学习文档下载地址：http://download.csdn.net/detail/rongrong_love_lc/9663463

八、CSS设置盒装模型
    CSS中的盒装模型（box model）用于描述一个为html元素形成的矩形盒子。
    涉及为各个元素调成外边距（margin）、内边距（padding）、边框（border）和内容的具体操作。
    1.外边距和内边距：(margin、padding)
        value:top、bottom、left、right。
        外边距（margin）:表示一个元素的边到相邻元素（或者文档边界）之间的距离。
        内边距（padding）:定义元素的内容与元素边框之间的距离.
        注意：缩写形式为顺时针，从top开始。（缩写形式已空格分开）
        html文件如下:
          <html>
             <head>
                 <title>Color例子</title>
                 <link rel="stylesheet" type="text/css" href="color.css"/>
             </head>
             <body>
             <p>study测试文本信息study</p>
             <h1 >study<span class="green">测试文本信息1</span>study</h1>
             <h2 >study<span class="black">测试文本信息2</span>study</h2>
             <h3 >study<span class="yellow">测试文本信息3</span>study</h3>
             <h4 >study<span class="yellow">测试文本信息4</span>study</h4>
             </body>
           </html>
        CSS文件如下:
           body {background:white url("image1.jpg") no-repeat fixed center;
            }
           p {background-color:red;}
           h1 {background-color:blue;
               margin:50px 90px 80px 50px;}
           h2 {background-color:green;
               margin-top:50px;
               margin-right: 90px;
               margin-bottom: 80px;
               margin-left: 50px;}
           h3 {background-color:yellow;
               padding:50px 90px 80px 50px;}
           h4 {background-color:gray;
               padding-top:50px;
               padding-right: 90px;
               padding-bottom: 80px;
               padding-left: 50px;}


    2.边框:(border)
        边框可以有很多用途，比如作为装饰元素或者划分两物的分界线等。
        value:border-width[变宽宽度](thin[薄入]、medium[普通]、thick[厚]等，也可以是像素)、
          border-color[边框颜色](与背景颜色值定义一样，可以是十六进制数，RGB值，和颜色单词值)、
          border-style[边框样式](none或者hidden[无任何边框]、dotted(点)、dashed（虚线）、 solid（实线）、
                 double（双线）、groove（压线或者槽线）、ridge（山脊线）、inset（内凹）、outset（外凸）)、
          border[缩写](border-width border-style border-color).
        html文件同上;
      css文件如下:
        body {background:white url("image1.jpg") no-repeat fixed center;
            }
          p {background-color:red;}
          h1 {background-color:blue;
              margin:50px 90px 80px 50px;
              border-width:20px;
              border-style:inset;
              border-color:#B2B5B2;}
          h2 {background-color:green;
              margin-top:50px;
          margin-right: 90px;
          margin-bottom: 80px;
          margin-left: 50px;
              border-width:thin;
              border-style:dotted;
              border-color:#741D5A;}
          h3 {background-color:yellow;
              padding:50px 90px 80px 50px;
              border-width:thick;
              border-style:dotted;
              border-color:#741D5A;}
          h4 {background-color:gray;
              padding-top:50px;
              padding-right: 90px;
          padding-bottom: 80px;
          padding-left: 50px;
              border:medium double #333FC7;}
    3.高度和宽度:(width和height)
        html文件同上；
      css文件如下：
        body {background:white url("image1.jpg") no-repeat fixed center;
            }
          p {background-color:red;
         border:medium outset #333FC7;
             width:30px;
             height:30px;}
          h1 {background-color:blue;
              margin:50px 90px 80px 50px;
              border-width:20px;
              border-style:inset;
              border-color:#B2B5B2;}
          h2 {background-color:green;
              margin-top:50px;
          margin-right: 90px;
          margin-bottom: 80px;
          margin-left: 50px;
              border-width:thin;
              border-style:dotted;
              border-color:#741D5A;}
          h3 {background-color:yellow;
              padding:50px 90px 80px 50px;
              border-width:thick;
              border-style:dotted;
              border-color:#741D5A;}
          h4 {background-color:gray;
              padding-top:50px;
              padding-right: 90px;
          padding-bottom: 80px;
          padding-left: 50px;
              border:medium double #333FC7;}