day2

一、背景

1、背景颜色

代码：

CSS
div {
 background-color: red; /* red */
}
HTML
<div>This will have a red background</div>
实现：这段话会是红色This will have a red background

2、背景大小

代码：
<head>
    <meta charset="utf-8"> 
   <style>
    .withbackground{
        width: 200px;
        height: 200px;
        padding: 30px;
        background-size: 100% 66%;
        background-image:url("D:/私人/图片/光遇/blackmoon.jpg");
    }
   </style>
</head>

<body>
    <div class="withbackground">
        <p>出来一个东西</p>
    </div>
</body>

实现：

 注意：CSS中对于“\”“/”有着严格的定义。直接复制照片地址然后默认是"\"，百度半天，找不到问题。哭了

二、The Box Model——盒子模型

1、什么是盒子模型

浏览器将为HTML文档中的每个元素创建一个矩形。方框模型描述了如何将填充、边框和边距添加到内容中以创建此矩形。

例子：

div {
 border: 5px solid red;
 margin: 50px;
 padding: 20px;
}

实现：

 三、Margins——边距

1、Margin Collapsing——边缘崩溃

代码：

<head>
    <meta charset="utf-8">
    <style>
        div {
            margin: 20px;
        }
    </style>
</head>

<body>
    <div>
        some content
    </div>
    <div>
        some more content
    </div>
</body>

实现：

俩个之间的行距差了20px。

 

如果如下代码，增加多个对div边缘的控制。就会出现边缘崩溃的情况。

<head>
    <meta charset="utf-8">
    <style>
        .outer-top {
            margin: 10px;
        }

        .inner-top {
            margin: 15px;
        }

        .outer-bottom {
            margin: 20px;
        }

        .inner-bottom {
            margin: 25px;
        }
    </style>
</head>

<body>
    <div class="outer-top">
        <div class="inner-top">
            some content
        </div>
    </div>
    <div class="outer-bottom">
        <div class="inner-bottom">
            some more content
        </div>
    </div>
</body>

此处的实现结果，有多处边距改动的，最终的距离，由更接近段落的标签决定。

所以，some content 就是15px,some more content 就是25px。

实现：

代码：

<head>
    <meta charset="utf-8">
    <style>
      h1{
        margin: 0;
        background: #cff;
      }
      div{
        margin: 50px 0 0 0;
        background:#cfc;
      }
      p{
        margin: 25px 0 0 0;
        background: #cf9;
      }
    </style>
</head>

<body>
    <h1>Title</h1>
    <div>
        <p>Paragraph</p>
    </div>
</body>

实现：

 

2、Apply Margin on a Given Side——在给定的一侧应用边距

代码：

<head>
    <meta charset="utf-8">
    <style>
      #myDiv{
        margin-left: 30px;
        height: 40px;
        width: 40px;
        background-color: red;
      }
    </style>
</head>

<body>
   <div id="myDiv">我敬爱我毛主席！！！</div>
</body>

实现：

3、边缘属性简化

 代码：

在用到margin时，这写了一个距离时，通常会被默认为是顶部和底部、右边、左边都是这个距离。

_ _ _ _

分别对应，顶部 底部 右部 左部

margin:10px 15px; /* 10px 表示是顶部和底部，15px表示的是右部和左部*/
 
 /*等同于*/
 margin:10px 15px 10px 15px;
 
 /*等同于*/
 margin:10px 15px 10px;

4、使用边距在页面上的水平中心元素

代码：

#myDiv {
width:80%;
margin:0 auto;
}

在上面的示例中，我们使用速记略距声明首先将0设置为顶部和底部的边距值（尽管这可以是任何值），然后我们使用自动让浏览器将空间自动分配给左右边距值。在上面的示例中，#myDiv元素设置为80%宽度，使用20%剩余。浏览器将此值分配到其余部分，因此：（100% - 80%）/ 2 = 10%

posted @ 2023-01-30 13:48  末叶da  阅读(79)  评论(0)    收藏  举报