学习HTML与CSS的第七天————盒子模型

最新推荐文章于 2024-10-12 09:53:06 发布

不爱学习的大头

最新推荐文章于 2024-10-12 09:53:06 发布

阅读量146

点赞数

文章标签： css css3

本文链接：https://blog.csdn.net/weixin_44055237/article/details/104930468

版权

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title>盒子模型</title>
      <style type="text/css"> 
      /* 
      盒子模型也叫框模型   （BOX）
      CSS处理网页时，他认为每一个元素都包含在一个不可见的盒子里。
      一个盒子分成几个部分：
                        内容区（content）
                        内边距（padding）
                        边框（border）
                        外边距（margin）
       */
       .box1{
         /* 
            使用width来设置盒子内容区的宽度
            使用height来设置盒子内容区的宽度
          */
         width: 100px;
         height: 100px;
         /* 设置背景颜色 */
         background-color:yellow;

         /*
          为元素设置边框
         要为一个元素设置边框必须指定三个样式
              border-width : 边框的宽度
              border-color : 边框的颜色
              border-style : 边框的样式
          */
          /* 
          设置边框的宽度、颜色、样式
           */
           /* 
              使用border-width可以分别制定四个边框的宽度
              如果在border-width制定了四个值
                  则四个值会分别设置给上 右 下 左，按照顺时针的方向设置的


                  如果指定三个值：
                    则三个值会分别设置给 上 左右 下

                  如果指定两个值：
                    则两个值分别设置给 上下 左右
                   
                  如果指定一个值：
                    则四个边都是这个值


                除了border-width ,css中还提供了四个：
                    border-xxx-width;xxx 值bottom top left right
            */
          border-width: 10px 20px 30px 40px;
          /* 
          和宽度一样，颜色与边框亚视也提供了四个方向的样式，可以分别指定颜色和边框样式
          border-xxx-color
           */

           /* 
               设置边框的样式
               可选值：
                     none 默认值，没有边框
                     solid 实线
                     dotted 点状边框
                     dashed  虚线
                     double 双线
            */
         /*   border-width: 10px; */
           border-color: red;
           border-style: solid;/* 实线边框 */
       }
      </style>
    </head>
    <body>
      <div class="box1">

      </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
      <meta charset="utf-8"/>
      <title></title>
      <style type="text/css"> 
      .box{
        width: 200px;
        height: 200px;
        background-color: green;

        /* 设置边框
            
            大部分的浏览器中边框的宽度和颜色都有默认值，而边框样式的默认值是none
        
         */
        /* border-width: 10px;
        border-color: red;
        border-style: solid;
       */
       /* 
         border 
             - 边框的简写模式，通过它可以同时设置四个边框的样式、宽度、颜色
             - 而且没有任何的顺序要求
             - border一指定就是同时指定四个边不能分别指定

         border-top
         border-right
         border-left
         border-bottom
         可以分别指定各个边框，用法与border一样
        */
       border:10px solid red ;
      }

      </style>
    </head>
    <body>
      <div class="box">

      </div>
    </body>
</html>