盒子模型中外边距的3个特征，内边距与内容之间的设定技巧，以及浮动和定位 2019年7月5日PHP学习第五课 - PHP第七期

Home > List of blog posts > 盒子模型中外边距的3个特征，内边距与内容之间的设定技巧，以及浮动和定位 2019年7月5日PHP学习第五课

Blogger Information

Blog 10

fans 0

comment 0

visits 5117

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>外边距的三个特征</title>
    <style>
        .div1 {
            width: 200px;
            height: 200px;
            background-color: lightgreen;
            border: 1px solid blue;
            margin-bottom: 50px;
        }
        .div2 {
            width: 200px;
            height: 200px;
            background-color: lightcoral;
            border: 1px solid blue;
            margin-top: 100px;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>

</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

第一个是嵌套传递，即内外两个盒子，子盒子设置了外边距时，外边距属性自动传递到父盒子（其中当父盒子有边框属性时，则不会传递）案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>嵌套传递</title>
<style>
.div1 {
width: 200px;
height: 200px;
background-color: lightgreen;
/*border: 1px solid blue;*/
}
.div2 {
width: 100px;
height: 100px;
background-color: lightcoral;
/*border: 1px solid blue;*/
margin-top: 50px;
}
</style>
</head>
<body>
<div class="div1">
<div class="div2">

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

第三个是自动挤压，margin的属性中可以设置一个auto宽度，即margin-left: auto时，盒子靠最右边，margin-right: auto时盒子靠最左边，而margin:auto时，盒子居中

---------------------------------------------------------------------------------------------------------------

关于内边距和内容之间的设置技巧：

首先，设置盒子的设定宽度和高度值不含内边距的高度，比如当我们设置好盒子高度为100px，然后在设置一个padding-top: 50px，这时盒子的高度变为150px，所以内容布局时要考虑到增加padding属性时盒子宽度和高度的变化

所以除了更改盒子宽高属性外，有另外两个方法解决，第一为在外面再增加一个盒子来限制内部盒子的宽高，第二是给盒子增加一个属性box-sizing : border-box, 使盒子的宽高直接作用于边框而不是内容

————————————————————————————————————————————

浮动：

正常html页面元素均为文档流，一个元素一行，而当给一个元素给予个浮动属性（float）后，该元素即进入浮动流，元素水平排列，在文档流上层，会挡住文档流的元素。如果希望文档流的元素不被浮动流的元素遮挡，可以给予文档流元素一个属性clear: left 或者 clear: right，同时使用时有个简写为clear:both

————————————————————————————————————————————————

定位：

相对定位属于文档流的定位，而绝对定位是浮动流的定位

以下为相对定位的案例：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
       .div1 {
           width: 100px;
           height: 100px;
           background-color: aqua;
       }
       .div2 {
           width: 100px;
           height: 100px;
           background-color: bisque;
       }
       .div3 {
           width: 100px;
           height: 100px;
           background-color: lightcoral;
       }
       .div4 {
           width: 100px;
           height: 100px;
           background-color: lightgreen;
       }
       .div5 {
           width: 100px;
           height: 100px;
           background-color: lightseagreen;
       }
        .div1 {
            position: relative;
            left: 100px;
        }
        .div3 {
            position: relative;
            left: 100px;
            bottom: 100px;
        }
        .div4 {
            position: relative;
            left: 100px;
            bottom: 100px;
        }
        .div5 {
            position: relative;
            left: 200px;
            bottom: 300px;
        }
    </style>
</head>
<body>
<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>
<div class="div4"></div>
<div class="div5"></div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实

绝对定位需要为定位的元素设置一个定位父集，如果不设置，默认为body

案例如下：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
    <style>
        .parent {
            width: 300px;
            height: 300px;
            border: 1px solid brown;
            position: relative;
        }
        .div1 {
            width: 100px;
            height: 100px;
            background-color: aqua;
        }
        .div2 {
            width: 100px;
            height: 100px;
            background-color: bisque;
        }
        .div3 {
            width: 100px;
            height: 100px;
            background-color: lightcoral;
        }
        .div4 {
            width: 100px;
            height: 100px;
            background-color: lightgreen;
        }
        .div5 {
            width: 100px;
            height: 100px;
            background-color: lightseagreen;
        }
        .div1 {
            position: absolute;
            left: 100px;
        }
        .div2 {
            position: absolute;
            top: 100px;
        }
        .div3 {
            position: absolute;
            top: 100px;
            left: 100px;
        }
        .div4 {
            position: absolute;
            left: 200px;
            top: 100px;
        }
        .div5 {
            position: absolute;
            left: 100px;
            top: 200px;
        }
    </style>
</head>
<body>
<div class="parent">
    <div class="div1"></div>
    <div class="div2"></div>
    <div class="div3"></div>
    <div class="div4"></div>
    <div class="div5"></div>
</div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

模拟php中文网登陆实例如下：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>案例模拟</title>
    <style>
        body {
            background-image: url("static/images/php.jpg");
            background-size: cover;
            margin: 0;
            background-repeat: no-repeat;
        }
        .shawd {
            width: 100%;
            height: 100%;
            background-color: black;
            opacity: 0.7;
            position: absolute;
        }
        .log img{
            width: 380px;
            height: 460px;

        }
        .log {
            position: absolute;
            left: 50%;
            top: 50%;
            margin-top: -230px;
            margin-left: -190px;
        }
        .ads{
            width: 250px;
            height: 350px;

            border: 1px solid black;
            background-color: white;
            position: fixed;
            right: 0;
            bottom: 0;

        }
        h3 {
            padding: 10px 20px;
        }
    </style>
</head>
<body >
    <div class="shawd"></div>
    <div class="log" >
        <img src="static/images/login.jpg" alt="">
    </div>
    <div class="ads">
        <button>X</button>
        <h2 style="text-align: center">我是一个广告</h2>
        <h3 style="width: 200px; height: 200px">广告内容是啥？广告内容是啥？广告内容是啥？广告内容是啥？广告内容是啥？广告内容是啥？</h3>
    </div>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

Correction status：qualified

Teacher's comments：赶紧跟上进度

Statement of this Website

The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!

All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement

0 comments

Author's latest blog post

HTML中无序列表，表格，表单的应用 2019年7月2日

2019-07-14 14:16:00

Php8, I'm coming too

Learn website layout in 30 minutes

Shangguan Oracle Beginner to Proficient Video Tutorial

Your first line of UNI-APP code

Flutter from scratch to app launch

Brother Lian New Linux Video Tutorial

AXURE 9 Video Tutorial (Suitable for Product Manager Interactive Product Design UI)

Zero Basic Proficiency PS Video Tutorial

16 day UI video tutorial to get you started

PS Techniques and Slicing Techniques Video Tutorial

Alibaba Cloud Environment Construction and Project Launch Video Tutorial

Overview of Computer Networks - Basic Knowledge that Programmers Must Master

Essential Tutorial for Programmers - HTTP Protocol Explanation

Websocket Video Tutorial

实例

实例

实例

实例