内外边距定位与浮动-0705 - 作业

Home > List of blog posts > 内外边距定位与浮动-0705

Blogger Information

Blog 18

fans 0

comment 0

visits 12071

Special Recommendation

More>

Related recommendations

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/xxxx2.css">
    <title>内边距padding</title>
</head>
<body>
<div class="box1">
    <img src="static/images/girl.jpg" alt="小女孩" width="200px">
</div>
<hr>
<div class="wrap">
    <div class="box2">
        <img src="static/images/girl.jpg" alt="小女孩" width="200px">
    </div>
</div>

<!--<hr> 子盒作用父盒子的内容-->
<hr>
<div class="box3">
    <img src="static/images/girl.jpg" alt="小女孩" width="200px">
</div>
</div>
</body>
</html>

.box1 {
    width: 300px;
    height: 300px;
    background-color: yellowgreen;
    border: 1px solid black;
    padding-left: 50px;
}
.box1 {
    padding: 50px;
}

.box1 {
    width: 200px;
    height: 200px;
}


/*嵌套盒子之间，只有宽度可以继承。*/
.wrap{
    width:300px;
}
.box2{
    height: 300px;
    background-color: blueviolet;
    border: 1px solid black;
    padding: 50px;
}

.box3 {
    width: 300px;
    box-sizing: border-box;
    /*将父盒子的宽度作用于边框上而不是内容上。*/
    background-color: blueviolet;
    border: 2px solid black;
    padding: 50px;
    /*作用到边框上，盒子不会撑开*/
}

运行实例 »

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

2.外边距：（1）同级塌陷（2）嵌套传递（3）自动挤压同级塌陷只是上下塌陷，左右是重叠

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/xxxx3.css">
    <title>margin外边距</title>
</head>
<body>
<!--1.同级塌陷-->
<!--2嵌套传递-->
<!--3.自动挤压-->


<!--1.同级塌陷-->
<div class="box1"></div>
<div class="box2"></div>

<hr>
<!--2嵌套传递-->
<div class="box3">
    <div class="box4"></div>
</div>
<hr>
<!--3.自动挤压-->
<div class="box5"></div>
</body>
</html>


.box1 {
     width: 100px;
     height: 100px;
     background-color: blueviolet;
 }
.box2 {
    width: 100px;
    height: 100px;
    background-color: red;
}
.box1{
    margin-bottom: 30px;
}
.box2{
    margin-bottom: 30px;
}
.box2{
    margin-top: 50px;
}
/*小的会塌陷到大的里面，已大的为准。左右叠加，上下塌陷*/

.box3 {
    width: 200px;
    height: 200px;
    background-color: yellowgreen;
}

.box4 {
    width: 100px;
    height: 100px;
    background-color: yellow;
}
.box4 {
    margin-top: 0px;
}
.box3 {
    padding-top: 30px;
    height: 170px;
}


.box5 {
    width: 100px;
    height: 100px;
    background-color: royalblue;
    margin-left: auto;
    margin-right: auto;
    margin: 50px auto;
}

运行实例 »

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

3.浮动：（1）文档流 html元素默认按照书写的顺序在浏览器中，遵循先从左到右、在从上到下的顺序。（2）布局前提：通常先将元素从文档流中脱离出来，这样才能按照自己的要求布局（3）布局手段：浮动和绝对定位。

清除浮动：clean：both；

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/xxxx4.css">
    <title>浮动</title>
</head>
<body>
<!--1.文档流 html元素默认按照书写的顺序在浏览器中，遵循先从左到右、在从上到下的顺序。-->
<!--2.布局前提：通常先将元素从文档流中脱离出来，这样才能按照自己的要求布局-->
<!--3.布局手段：浮动和绝对定位。-->


<!--浮动的基本原理-->
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<div class="box4"></div>
</body>
</html>

box1 {
    width: 100px;
    height: 100px;
    background-color: royalblue;
}
.box2 {
    width: 150px;
    height: 150px;
    background-color: rosybrown;
}
/*元素浮动之后就脱离了文档流*/
.box1 {
    float: left;
}
.box2 {
    float: left;
}
.box3 {
    width:200px;
    height: 300px;
    background-color: tomato;
}
.box3 {
    float: right;
}

.box4 {
    width:100%;
    height: 50px;
    background-color: black;
}
.box4 {
    clear: left;
    clear: right;
}
.box4 {
    clear: both;
}

运行实例 »

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

4.定位：（1）静态定位: 浏览器默认方式, 即文档流中的位置（2）相对定位：元素并未脱离文档流,只是相对于它原来的位置,做相对移动（3）绝对定位: 元素脱离文档流重新排列,不论元素之前是什么类型,全部转为块元素,支持宽高（4）固定定位: 始终相对于浏览器的窗口做为定位父级,进行定位。相对定位是相对该元素自己原来的位置

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/xxxx7.css">
    <title>php中文网登录页面</title>
</head>
<body>
<div class="shade"></div>
<div class="login" ><img src="static/images/login.jpg" alt=""></div>

</body>
</html>
body {
    margin: 0;
    background-image: url("../images/php.jpg");
    background-size: cover;
    background-repeat: no-repeat;
}
.shade {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.7;
}
.login img{
    width: 380px;
    height: 460px;
    background-color: white;
    position: absolute;
    left: 50%;
    top:50%;
    margin-left: -190px;
    margin-top: -230px;

}

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/xxxx8.css">
    <title>固定定位</title>
    <!--相对于body-->
</head>
<!--相对定位是相对该元素自己原来的位置-->
<body>
<div class="ads">
    <button >x</button>
    <h2>php中文网开课啦</h2>
    <h3>招生进行中。。。</h3>
</div>

</body>
</html>

body {
    height: 2000px;
}
.ads {
    width: 300px;
    height: 300px;
    background-color: bisque;
    position: fixed;
    right: 0;
    bottom: 0;
}
.ads button {
    background-color: red;
}

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/xxxx5.css">
    <title>定位</title>
</head>
<body >
<!--relative相对，未脱离文档流，相对于body-->
<!--<div style="width: 100px;height: 100px;background-color: yellow;position: relative;top: 50px;left: 30px"></div>-->
<div class="box1">1</div>
<div class="box2">2</div>
<div class="box3">3</div>
<div class="box4">4</div>
<div class="box5">5</div>
</body>
</html>


.box1 {
    width: 100px;
    height: 100px;
    background-color: yellow;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: red;
}
.box3 {
    width: 100px;
    height: 100px;
    background-color: darkviolet;
}
.box4 {
    width: 100px;
    height: 100px;
    background-color: green;
}
.box5 {
    width: 100px;
    height: 100px;
    background-color: palevioletred;
}
.box1 {
    position: relative;
    left: 100px;
}
.box3 {
    position: relative;
    left: 100px;
    top: -100px;
}
.box4 {
    position: relative;
    left: 200px;
    top: -200px;
}
.box5 {
    position: relative;
    left: 100px;
    top: -200px;
}

运行实例 »

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="static/css/xxxx6.css">
    <title>定位</title>
</head>
<body  >
<!--relative相对，未脱离文档流，相对于body-->
<!--<div style="width: 100px;height: 100px;background-color: yellow;position: relative;top: 50px;left: 30px"></div>-->

<div class="parent">
    <div class="box1">1</div>
    <div class="box2">2</div>
    <div class="box3">3</div>
    <div class="box4">4</div>
    <div class="box5">5</div>
</div>




</body>
</html>

.parent {
    border: 1px dotted black;
    width: 300px;
    height: 300px;
}
.parent {
    position: relative;
}




.box1 {
    width: 100px;
    height: 100px;
    background-color: yellow;
}
.box2{
    width: 100px;
    height: 100px;
    background-color: red;
}
.box3 {
    width: 100px;
    height: 100px;
    background-color: darkviolet;
}
.box4 {
    width: 100px;
    height: 100px;
    background-color: green;
}
.box5 {
    width: 100px;
    height: 100px;
    background-color: palevioletred;
}
.box1 {
    position: absolute;
    left: 100px;
}
.box2 {
    position: absolute;
    top: 100px;
}
.box3 {
    position: absolute;
    left: 100px;
    top: 100px;
}
.box4 {
    position: absolute;
    left: 200px;
    top: 100px;
}
.box5 {
    position: absolute;
    top: 200px;
    left: 100px;
}

运行实例 »

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

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文档结构与常用标签-702

2019-07-06 23:05:21