search

博客列表 >内外边距定位与浮动7月5号作业

内外边距定位与浮动7月5号作业

珍珠宝宝的博客
珍珠宝宝的博客原创
2019年07月16日 12:25:04646浏览

一，理解并写出外边距的三个特征: 同级塌陷,嵌套传递,自动挤压的案例;

当两个盒子上下排列时,外边距会出现塌陷现象,小的会陷到大的里面去,简称:"同级塌陷"

当二个盒子相互潜逃,为父子关系时,给子盒子添加的外边距跑到了父盒子上面去了,这就是外边距的"嵌套传递"

给外边距左侧添加auto,会尽可能将左侧空间分配给盒子左外边距,盒子被挤到最右边，让右边距也自动分配,居然自动居中了，这就是“自动挤压”

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style751.css">
    <title>外边距规则</title>
</head>
<body>

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

<hr>

<div class="box3">
    <div class="box4"></div>
</div>

<hr>

<div class="box5"></div>

style751.css

/************同级塌陷************/
.box1 {
    width: 200px;
    height: 200px;
    background-color: red;
}

.box2 {
    width: 200px;
    height: 200px;
    background-color: blueviolet;
}

.box1 {
    margin-bottom: 50px;
}

.box2 {
    margin-top: 50px;
}
/* 按正常思维,现在二个盒子上下应该有100px外边距,但是页面却未发生变化 */
/* 说明二个盒子之间的外边距仍是50px,肯定有一个外边距没有生效,究竟是哪一个呢? */
/* 现在将box1的margin-bottom改为80px */
.box1 {
    margin-bottom: 80px;
}
/* 发现变宽了, 看样子是box1生效了, box2无效 */
/* 再把box2的margin改为100px */
.box2 {
    margin-top: 100px;
}
/* 发现上下间距又变宽了,再次检查发现box2的margin生效了,box1的margin失效了 */


/************嵌套传递************/
.box3 {
    width: 200px;
    height: 200px;
    background-color: red;
}

.box4 {
    width: 100px;
    height: 100px;
    background-color: blueviolet;
}

/* 我们的任务是:使box4离box3顶部之间有50px的间距,通过margin-top来实现 */
.box4 {
    margin-top: 50px;
}
/* 结果发现不对, 外边距跑到了外部盒子box3上面去了,这就是外边距的"嵌套传递"现象 */
/* 当给一个子盒子添加margin时,这个margin会自动传递到父级盒子上 */
/* 所以,正确的做法是,给父级盒子添加内边距来实现 */
.box4 {
    margin-top: 0;
}

.box3 {
    padding-top: 50px;
    /* 修改盒子高度,将撑开的50px的高度去掉 */
    height: 150px;
}

/************自动挤压************/
.box5 {
    width: 200px;
    height: 200px;
    background-color: red;
}


.box5 {
    /*margin默认值为: auto*/
    /*左侧添加auto,会尽可能将左侧空间分配给盒子左外边距,盒子被挤到最右边*/
    /*margin-left: auto;*/

    /*让右边距也自动分配, 会出现什么呢, 会自相矛盾吗?不会的*/
    /*margin-right: auto;*/
    /*居然自动居中了, 这就是互不相让的结果, 达到了平衡,*/

    /*因为左右边距的值完全相同,所以可以简写, 因为左右值必须写到第二个参数位置上, 所以这里假定上下为0*/
    /*margin: 0 auto;*/
    /*或者全部交给浏览器去处理 */
    margin: auto;}

二，内边距对盒中内容的影响,以及解决的三种方案是什么

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style752.css">
    <title>调皮捣蛋的内边距(padding)</title>
</head>
<body>
    <!-- 将图片在容器中居中显示 -->
<!--    方法1: 重新设置原盒子的宽度-->
 <div class="box1">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4151170903,256805738&fm=26&gp=0.jpg" alt="哆啦A梦" width="200">
    </div>

    <hr>
    <!--    方法2: 宽度分离-->

 <div class="warp">
        <div class="box2">
            <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4151170903,256805738&fm=26&gp=0.jpg" alt="哆啦A梦" width="200">
        </div>
    </div>

    <hr>

    <!--    方法3: box-sizing-->
 <div class="box3">
        <img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=4151170903,256805738&fm=26&gp=0.jpgg" alt="哆啦A梦" width="200">
    </div>
</body>
</html>

style752.css

/*实现图片居中显示*/

/*********************** 方案1 *********************/


.box1 {
    /*默认情况下,width是直接使用到盒子中的内容级content*/
    width: 300px;
    background-color: lightblue;
    border: 1px solid black;
}

/*使用padding让图片居中显示*/
/* 容器300*300,图片200*200,最直观的想法是添加50px的内边距 */
.box1 {
    padding: 50px;

/* 会发现,内边距会增加盒子填充厚度,将盒子撑大 */
/*如果想保持原来盒子大小,只能手工修改box1的宽高*/

    width: 200px;
}

/*********************** 方案2: 宽度分离 *********************/

/* 给box2认一个干爹,添加一个父级盒子wrap, 这时box2就是儿子了, width就有效了*/
/*这是利用于嵌套盒子之间,只有宽度可以继承的特征*/
.warp {
    width: 300px;
}

/*.box现在就是wrap的内容*/
.box2 {
    padding: 50px;
    background-color: lavender;
    border: 1px solid black;
}

/*********************** 方案3: box-sizing 盒尺寸 *********************/

/*经过前面学习, 知道了在默认情况下, 宽度是作用到盒中的内容上的*/
/*而一个盒子有content,padding,border,margin四部分组成,所以改变宽度会造成盒子大小不确定*/
/*方案2: 是将width宽度直接作用到了外部盒子上, 而box2此时就自动变成了warp的内容,所以会应用到width*/

.box3 {
    width: 300px;
    /*让宽度width作用到边框级,作用到内容级仍会撑开盒子的*/
    /*box-sizing: content-box;*/
    box-sizing: border-box;
    background-color: lavenderblush;
    border: 1px solid black;

    /*内边距不会撑开盒子, 因为宽度作用到了边框级, 与内容无关*/
    padding: 50px;
}


/* 总结:
 * 第一种方案DOM结构简单,但是要修改原盒子大小
 * 第二种方案不需要修改原盒子大小,但需要增加一个容器盒子
 * 第三种无疑是首选, 但是不同级别的盒元素,理解起来有困难

 * 所以, 各有利弊, 在开发中,根据实际情况进行斟酌
 */

三，浮动的实现原理与清除的技巧

实现原理：浮动元素脱离文档流，不占据空间。浮动元素碰到包含它的边框或者浮动元素的边框停留。

清除的技巧：添加额外的标签<div style="clear:both;"></div>

四，相对定位: 元素并未脱离文档流,是以元素在文档流中的原始位置为参照物进行定位的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

    <title>定位与相对定位(position:relative)</title>
</head>
<body>
    <!-- 相对定位小案例: 在页面中创建一个彩色十字架-->
 <div class="box1" style="width: 150px; height: 150px;background-color: lightblue;position: relative; left: 150px;"></div>
    <div class="box2" style="width: 150px; height: 150px;background-color: lightgray;position: relative;"></div>
    <div class="box3" style="width: 150px; height: 150px;background-color: lightgreen;position: relative; left: 300px;top: -150px;"></div>
    <div class="box4" style="width: 150px; height: 150px;background-color: lightcoral;position: relative; left: 150px; top: -300px;"></div>
    <div class="box5" style="width: 150px; height: 150px;background-color: lightpink;position: relative; left: 150px; top: -300px"></div>
</body>
</html>

绝对定位: 元素脱离文档流重新排列,所有必须要有一个定位父级做为参照物，不论元素之前是什么类型,全部转为块元素,支持宽高

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>绝对定位</title>
</head>
<body>

     <!-- 相对定位小案例: 在页面中创建一个彩色十字架-->
 <div class="parent" style="position: relative;
    border: 1px dashed gray;
    width: 450px;
    height: 450px;">
        <div class="box1" style="width: 150px;
    height: 150px;
    background-color: lightblue;
    position: absolute;
    /* 第一个区块只需要右移150px,即可 */
 left: 150px;"></div>
        <div class="box2" style=" width: 150px;
    height: 150px;
    background-color: lightgray;
    position: absolute;
    /* 第二个区块, left不用设置,只需要top=150px,将它从左上角顶下来即可 */
 top: 150px;"></div>
        <div class="box3" style="width: 150px;
             height: 150px;
             background-color: lightgreen;
    position: absolute;
    /* 第三个区块向右跨二个区块位置,并向下移一个区块位置 */
 left: 300px;
    top: 150px;"></div>
        <div class="box4" style="width: 150px;
    height: 150px;
    background-color: lightcoral;
    position: absolute;
    /* 第四个区块,向右向下各移动一个区块位置 */
 left: 150px;
    top: 150px;"></div>
        <div class="box5" style=" width: 150px;
    height: 150px;
    background-color: lightseagreen;
    position: absolute;
    /* 第五个区块,向右移动一个区块位置,向下移动二个区块位置  */
 left: 150px;
    top: 300px;"></div>
    </div>

</body>
</html>

五，模仿完成课堂上的二个定位案例:模拟php中文网登陆(遮罩+绝对定位)和固定定位广告的展示方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>遮罩+绝对定位</title>
</head>
<body style=" margin: 0;
    background-image:url(https://img.php.cn//upload/image/574/382/346/1535509625681731.jpg);
    background-size: cover;
    height: 2000px;">

<!-- 模拟php中文网的登录页面 -->
<div class="shade" style="
 position: absolute;
    left: 0;top: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: 0.7;">

</div>
<div class="login" style="
 background-color: white;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -190px;
    margin-top: -230px;
">
    <img src="https://img.php.cn//upload/image/574/382/346/1535509625681731.jpg" alt="" style="
 width: 380px;
    height: 460px;">
</div>

<h1>实现广告位</h1>
<div class="ads" style="
 width: 350px;
    height: 250px;
    background-color: lightblue;
    position: fixed;
    right: 0;
    bottom: 0;">
    <button onclick="this.parentNode.style.display = 'none'"
 style="float: right;
            margin-top: 10px;
            margin-right: 20px;
            border: none;
            background: none;
            color: red;
            font-size: 2em;">X</button>
    <h2>人生的意义是什么？</h2>
    <h1>怎么实现人生的价值？</h1>
</div>
</body>
</html>


上一条：phpstudy使用下一条：javascript基础-2019年07月09日011时27分
七月五号作业
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议

相关文章

查看更多