web前端之css7（web速成）

最新推荐文章于 2024-05-14 11:19:40 发布

AAA阿魏

最新推荐文章于 2024-05-14 11:19:40 发布

阅读量71

点赞数 1

分类专栏： web前端 html css 文章标签：前端 html javascript

本文链接：https://blog.csdn.net/weixin_74384251/article/details/130229089

版权

web前端同时被 3 个专栏收录

18 篇文章 0 订阅

订阅专栏

html

17 篇文章 0 订阅

订阅专栏

css

16 篇文章 0 订阅

订阅专栏

Homework7

html


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

<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>

<body>
<div>1</div>
<div>2</div>
</body>

</html>

要求

所有div标签满足：

宽度和高度均为300px；
内边距与外边距均为10px；
背景颜色为lightblue；
边框样式为solid 10px gray；

第一个div为内容盒子模型;
第二个div为边框盒子模型;

实现：

css:

<style>
    div {
      width: 300px;
      height: 300px;
      padding: 10px;
      margin: 10px;
      background-color: lightblue;
    }

    #content-box {
      box-sizing: content-box;
    }

    #border-box {
      box-sizing: border-box;
      border: solid 10px gray;
    }
  </style>

html+css;

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div {
      width: 300px;
      height: 300px;
      padding: 10px;
      margin: 10px;
      background-color: lightblue;
    }

    #content-box {
      box-sizing: content-box;
    }

    #border-box {
      box-sizing: border-box;
      border: solid 10px gray;
    }
  </style>
</head>

<body>
  <div id="content-box">1</div>
  <div id="border-box">2</div>
</body>

</html>

实现界面；