Web实现：CSS盒模型实例代码

盒模型给矩形设置边框线：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>案例</title><style>.box{/*设置矩形的宽*/width:300px;/*设置矩形的高*/height:150px;/*设置矩形的背景颜色*/

jasmyn518

5818人浏览 · 2022-01-16 10:23:03

jasmyn518 · 2022-01-16 10:23:03 发布

盒模型给矩形设置边框线：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
<style>
  .box{
    /*设置矩形的宽*/
    width:300px;
    /*设置矩形的高*/
    height:150px;
    /*设置矩形的背景颜色*/
    background-color:white;
    /*设置矩形的边框*/
    border-width:2px;
    border-color:black;
    border-style:dashed;/*dashed表示虚线，solid表示实线*/
  }
</style>
</head>

<body>
  <!-- 定义一个div标签 -->
  <div class="box"></div>
</body>

</html>

盒模型给矩形分别设置边框线：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
<style>
  .box{
    /*设置矩形的宽*/
    width:300px;
    /*设置矩形的高*/
    height:300px;
    /*设置矩形的背景颜色*/
    background-color:white;
    /*设置矩形的边框*/
    /*设置顶部边框*/
    border-top:2px solid black;
    /*设置右侧边框*/
    border-right:5px solid orange;
    /*设置底部边框*/
    border-bottom:10px dashed pink;
    /*设置左侧边框*/
    border-left:8px dashed red;
  }
</style>
</head>

<body>
  <!-- 定义一个div标签 -->
  <div class="box"></div>
</body>

</html>

盒模型利用层叠性给矩形设置边框线：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
<style>
  .box{
    /*设置矩形的宽*/
    width:300px;
    /*设置矩形的高*/
    height:300px;
    /*设置矩形的背景颜色*/
    background-color:white;
    /*设置矩形的边框*/
    /*统一设置矩形的所有边框样式*/
    border:2px solid black;
    /*重新设置一个下边框的样式来层叠掉统一设置的边框的样式*/
    border-bottom:5px solid orange;
    /*下边框不显示，设置下边框的属性为none*/
    /*
    border-bottom:none;*/
  }
</style>
</head>

<body>
  <!-- 定义一个div标签 -->
  <div class="box"></div>
</body>

</html>

盒模型给矩形设置圆角：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
<style>
  div {
    width: 200px;
    height: 200px;
    border-radius: 18px;
    border: 8px black solid ;
    background-color: violet;
  }
  /*
  圆角分开设置*/
  .box{
    width: 200px;
    height: 200px;
    background-color: violet;
    border-top-left-radius: 5px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 15px;
}
</style>
</head>

<body>
  <!-- 定义一个div标签 -->
  <div class="box"></div>
</body>

</html>

盒模型给矩形设置阴影：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
<style>
  .box{
    width: 200px;
    height: 200px;
    border:1px solid #c4c4c4;
    /* x偏移量 | y偏移量 | 阴影模糊半径 | 阴影扩散半径 | 阴影颜色 */
    box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);
    border-radius: 15px;
    /*
    x偏移量:在x轴上移动，向右为正
    y偏移量:在y轴上移动，向下为正
    阴影模糊半径:就是边线的清晰度
    阴影扩散半径:就是向外伸展
    阴影颜色:就是矩形下面那个矩形的背景色。
    */
}

</style>
</head>

<body>
  <!-- 定义一个div标签 -->
  <div class="box"></div>
</body>

</html>

盒模型无序列表行内块元素：

//html部分：
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <ul>
        <li class="current">首页</li>
        <li>优课达学院</li>
        <li>App下载</li>
    </ul>
</body>

</html>

//css部分：
ul {
  list-style: none;
  padding: 0px;
  margin: 0px;
  color: #333333;
  font-size: 16px;
  border: 1px solid #a4a4a4;
  display: inline-block;
}

ul li {
  /* 
        display:inline-block可以让一个块元素和行内元素在同一行显示
        具有想同属性的块元素也可以并排显示
    */
  display: inline-block;
  padding-left: 15px;
  padding-right: 15px;
  line-height: 60px;
}

ul li.current {
  color: #ffffff;
  background-color: #0091ff;
}

盒模型阴影圆角元素：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>练习</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="box">
        <h3 class="title">教学目标</h3>
        <p>统地学习数据体系：MySQL、Redis、Mongodb 并深入全栈能力包括 Vue 框架和 SSM
            框架（Spring、SpringMVC、MyBatis），掌握处理大数据的能力，可以独立完成复杂而真实的项目，比如美团外卖。</p>
    </div>
</body>

</html>

h3,
p {
  margin: 0;
  padding: 0;
}/*p、h、ul、li等标签有自己默认的margin和padding，将默认值设为0后再布局，div不需要*/

.box {
  box-sizing: border-box;
  width: 280px;
  box-shadow: 0 1px 17px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  border-radius: 7px;
}

.box .title {
  font-size: 14px;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
}

.box p {
  font-size: 12px;
  color: #2c2c2c;
  padding-top: 15px;
}

盒模型外边距：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        div {
            width: 300px;
            height: 100px;
            background-color: #D5E8D4;
            border: 1px solid #82B366;
        }
        .box{
          background-color: #F5F5F5;
          border: 1px solid #FF0818;
          margin-top: 20px;
          margin-bottom: 20px;/*两个盒子水平距离等于左边盒子的margin-right加上右边盒子的margin-left*/
        }           /*两个盒子垂直距离等于上边盒子的margin-bottom和下边盒子的margin-top两者的较大值，因此我们通常设置上边盒子的margin-bottom*/
    </style>
</head>

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

</html>

盒模型盒子左右居中：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        .father{
          width:400px;
          height:200px;
          border: 1px solid #ccc;
        }

        .son{
          width:200px;
          height:100px;
          margin:0 auto;
          border: 1px solid #ccc;
        }
    </style>
</head>

<body>
    <div class="father"> 
      <div class="son"></div>
    </div>
</body>

</html>

盒模型外边距实例：

<!DOCTYPE html>
<html lang="en">

<head>
<!--系统内置 start-->
<script type="text/javascript" src="//qgt-style.oss-cn-hangzhou.aliyuncs.com/commonJSCSS/console.js"></script>
<!--系统内置 end-->
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <!-- 图片链接地址为：https://gw.alicdn.com/bao/uploaded/i1/749716436/O1CN01OSPWqa1xPjeErSSzf_!!749716436-0-pixelsss.jpg -->
    
    
    <div class="first">
      <div class="second">
        <img src="https://gw.alicdn.com/bao/uploaded/i1/749716436/O1CN01OSPWqa1xPjeErSSzf_!!749716436-0-pixelsss.jpg">

      </div>
      <div class="third">
        人本春季红色帆布鞋男网红休闲布鞋潮鞋百搭运动小白鞋子男运动鞋
      </div>
      <div class="fourth">¥78.3</div>
    </div>
</body>

</html>

.first{
  width: 232px;
  border: 1px solid #c4c4c4;
  
}
.second{
  width:185px;
  height:185px;  
  text-align: center;
  margin:0 auto;
  margin-top: 20px;
  margin-bottom: 8px;

}
.third{
  font-size: 14px;
  color:#333333;
  line-height: 20px;
  text-align: center;
  overflow: hidden;
  height: 40px;
  width:135px;
  margin: 0 auto;

}
.fourth{
  width: 100%;
  font-size: 18px;
  color: #ff0036;
  line-height: 18px;
  text-align: center;
  margin: 0 auto;
  margin-top: 10px;
  margin-bottom: 20px;
  
}
img{
  width:185px;
  height:185px;
}

盒模型外边距实例2：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <div class="box">
        <img src="https://gw.alicdn.com/bao/uploaded/i1/749716436/O1CN01OSPWqa1xPjeErSSzf_!!749716436-0-pixelsss.jpg">
        <div class="introduce">人本春季红色帆布鞋男网红休闲布鞋潮鞋百搭运动小白鞋子男运动鞋</div>
        <div class="price">¥78.3</div>
    </div>
</body>

</html>

.box {
    width: 234px;
    border: 1px solid #c4c4c4;
    box-sizing: border-box;
    text-align: center;
    padding: 20px 0px;
}

img {
    width: 185px;
    height: 185px;
}

.introduce {
    width: 135px;
    height: 40px;
    font-size: 14px;
    color: #333;
    line-height: 20px;
    overflow: hidden;
    margin: 8px auto;
}

.price {
    font-size: 18px;
    color: #FF0036;
    line-height: 18px;
    margin: 10px auto 0px;
}

盒模型行内元素块元素设置背景色：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
    .demo{
      width:300px;
      height:100px;
      background-color:#FFF2CC;
    }
    </style>
</head>

<body>
    <span class="demo">    
      这是一个span标签
    </span>
    <br><br>
    <div class="demo">
      这是一个div标签
    </div>
</body>

</html>

盒模型行内元素转块元素：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
    .demo{
      /*将span标签转换成块*/
      display: block;
      width:300px;
      height:100px;
      background-color:#FFF2CC;
    }
    </style>
</head>

<body>
    <span class="demo">
      这是一个span标签
    </span>
</body>

</html>

盒模型块元素转行内元素：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
    .demo{
      /*将div标签转换成行内元素*/
      display: inline;
      width:300px;
      height:100px;
      background-color:#FFF2CC;
    }
    </style>
</head>

<body>
    <div class="demo">
      这是一个div标签
    </div>
</body>

</html>

盒模型控制元素显示和隐藏：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        div {
            width: 300px;
            height: 100px;
            /* 使用margin属性让文字左右居中 */
            text-align: center;
            margin-bottom: 10px;
            background-color: #D5E8D4;
            /* 使用行高让文字上下居中 */
            line-height: 100px;
        }
        .box2{
          display: none;
        }
    </style>
</head>

<body>
    <div>盒子1</div>
    <div class="box2">盒子2</div>
    <div>盒子3</div>
</body>

</html>

盒模型行内元素设置内边距：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
      a{
        background-color: #FFF2CC;
        padding: 20px;
      }
    </style>
</head>

<body>
    <a href="#">超链接</a>
</body>

</html>

盒模型行内元素设置内边距实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        a {
            background-color: #FFF2CC;
            padding: 20px;
        }
        div{
          width: 300px;
          height: 50px;
          background-color: #B0E3E6;
        }
    </style>
</head>

<body>
    <a href="#">超链接</a>
    <div></div>
</body>

</html>

盒模型行内元素设置外边距：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        div {
            width: 300px;
            height: 50px;
            background-color: #B0E3E6;
        }
        a{
          margin-left: 40px;
          margin-right: 30px;
          margin-top: 400px;
          margin-bottom: 400px;
        }
        span{
          margin-left: 20px;
        }
    </style>
</head>

<body>
    <a href="#">点击跳转到</a>
    <span>优课达</span>
    <div></div>
</body>

</html>

盒模型空白折叠：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <style>
        .box1 {
            width: 200px;
            height: 50px;
            display: inline-block;
            background-color: #FFF2CC;      /*两个行内块状元素即使不设置margin两个盒子之间也有空白，叫作空白折叠*/
        }                                   /*解决方法一：由于两个div标签写的时候有回车，去掉回车即可*/

        .box2 {
            width: 200px;
            height: 50px;
            display: inline-block;
            background-color: #B0E3E6;
        }
        .father{
          word-spacing: -50px;          /*方法二：给父元素添加word-spacing属性，表示单词和单词之间的距离，设为负数，一般小于-20px*/
            /*方法三：由于回车可以当作一个文字，就将文字大小设为0px，空隙可以消失*/        
          font-size: 0px; 
        }
    </style>
</head>

<body>
    <div class="father">
        <div class="box1"></div>
        <div class="box2"></div>
    </div>
</body>

</html>

盒模型行内块元素：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <ul>
        <li>手机</li>
        <li>电视</li>
        <li>电脑</li>
        <li>路由器</li>
    </ul>
</body>

</html>

li {
    list-style: none;
    width: 70px;
    line-height: 30px;
    color: #ffffff;
    font-size: 12px;
    display: inline-block;
    background-color: #783a3e;
    text-align: center;
}

ul {
    font-size: 0px;
    margin: 0px;
    padding: 0px;
}

盒模型行内块元素实例：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>案例</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>
    <ul class="head">
        <li class="head-first">商品分类</li>
        <li class="head-second">天猫双十一</li>
    </ul>
    <ul class="list">
        <li><a href="#">大牌女装</a></li>
        <li><a href="#">运动户外</a></li>
        <li><a href="#">潮流男装</a></li>
        <li><a href="#">美妆洗护</a></li>
        <li><a href="#">母婴好货</a></li>
        <li><a href="#">数码家电</a></li>
        <li><a href="#">家具建材</a></li>
        <li><a href="#">全球尖货</a></li>
        <li><a href="#">苏宁易购</a></li>
        <li><a href="#">汽车用品</a></li>
    </ul>
</body>

</html>

ul,
li {
    list-style: none;
    padding: 0px;
    margin: 0px;
}

.head {
    width: 200px;
    color: #ffffff;
    font-size: 0px;
}

.head li {
    display: inline-block;
    font-size: 12px;
    line-height: 36px;
    width: 100px;
    text-align: center;
}

.head .head-first {
    background-color: #C60A0A;
}

.head .head-second {
    background-color: #464444;
}

.list {
    width: 200px;
    box-sizing: border-box;
    padding-top: 29px;
    padding-bottom: 14px;
    background-color: #413F3F;
}

.list li {
    margin-bottom: 14px;
    padding-left: 24px;
    padding-right: 24px;
}

.list li a {
    display: block;
    border: 1px solid #cb0c10;
    border-radius: 10px;
    text-align: center;
    line-height: 29px;
    color: #ffffff;
    text-decoration: none;
}