LV1 之------DAY2html 浮动&图文基线问题&盒子模型

最新推荐文章于 2022-08-24 11:30:45 发布

水兮泱泱

最新推荐文章于 2022-08-24 11:30:45 发布

阅读量298

点赞数

分类专栏：学习笔记前端LV1

本文链接：https://blog.csdn.net/DU123_/article/details/89006984

版权

学习笔记同时被 2 个专栏收录

36 篇文章 1 订阅

订阅专栏

前端LV1

12 篇文章 0 订阅

订阅专栏

LV1 之------DAY2html 浮动&图文基线问题&盒子模型

一、浮动

作用：使得div可以并排显示
（因：div为块级元素占一整行，行间元素占由其内容撑大的一个小框）
补充：①块级元素：
默认空间宽度是一整行高度是内容大小
可以设置宽高
设置之后后面的空间还是这个元素的
②行内元素：
默认不可以设置宽高
大小是内容的大小
浮动会脱离文档流（盒子），但不完全脱离（盒子中的内容）
图文基线问题：一开始是为了解决 文字的基线是从图片底部开始算起的，所以图片底部与文字底部会有空隙，如果想要文字与图片顶部对齐，如下图应该怎么办？

网页效果如下

解释文字旁边搭配图片时，发现图片比文字靠上的原因，上述效果的图例如下：

解决图文基线问的办法：
给图片加上 vertical-align 属性，就可调整图片相对于文字如何对齐。
基线问题的详细解释
 解决图文基线

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        img{
            float: left;
        }
    </style>
</head>
<body>
    <div>
        <img src="images/1.png" alt="">我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字我是一大段文字
    </div>
</body>
</html>

图文环绕问题
二、浮动原理

浮动
1. 浮动的作用：浮动主要是为了多个块级元素可以并排排列，浮动会脱离正常文档流，产生浮动层，释放原本的空间及后面水平方向的空间
2. 注意点：不完全脱离（其内容还会占其浮动前的位置）
3. 浮动的规则：n个元素要并排（浮动）外层一定要有父元素
4.若外侧div 未设高宽，浮动之后宽高会变为内容的实际大小/width，
则父元素高度塌陷从而影响父元素兄弟元素

 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      
        .bigBox{
            width: 300px;
            /* height: 150px; */
            /* overflow:hidden; */
            background: gray;
        }
        .box1{
            width: 100px;
            height: 100px;
            float: left;
            background: deeppink;
        }
        .box2{
            width: 150px;
            height: 150px;
            float: right;
            background: deepskyblue;
        }
        /* 浮动
        浮动会脱离正常文档流  释放原本的空间  及后面的空间  
        不完全脱离
        子元素 第一个浮动 第二个 及后面的 也要浮动
        两个元素要并排（浮动 ） 外层一定要有 父元素
        浮动之后 宽高  会变为内容的实际大小/width
        父元素高度塌陷  从而影响父元素兄弟元素


        解决父元素高度塌陷：
        1、给父元素设置 height
        2、给父元素设置 overflow:hidden;    ====> BFC 
        3、父元素结束标签之前加空div
        4、伪元素选择器
         */
         p{
             background: #f00;
             border: 5px solid #000;
         }
         .clear{
             clear: both;
         }
         .clearfix::after{
             content: "";
             height: 0;
             display: block;
             clear: both;
         }
    </style>
</head>
<body>
    <div class="bigBox clearfix">
        <div class="small box1">box1</div>
        <div class="small box2">box2</div>
        <div class="small box2">box2</div>
        <div class="small box2">box2</div>
        <div class="small box2">box2</div>
        <div class="small box2">box2</div>
        <div class="small box2">box2</div>
        <div class="small box2">box2</div>
        <div class="small box2">box2</div>
        <!-- <div class="clear"></div> -->
    </div>
    <p>我是第二行</p>
</body>
</html>
         }

浮动导致父元素高度的塌陷问题&解决
解决父元素高度塌陷的方法：
1、给父元素设置 height
2、给父元素设置 overflow:hidden; ----------即 BFC的运用
深入理解overflow:hidden——溢出,坍塌,清除浮动；
3、父元素结束标签之前加空div
4、伪元素选择器（也用于父级元素）
补充： 伪元素选择器 （首先要知道伪元素选择器是什么）代码解释如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .box span{
            color: red;
        }
        .box::after{
            content: "很乖";
            color: chartreuse;
        }
    </style>
</head>
<body>
    <!-- <div class="box">女朋友 <span>很漂亮</span></div> -->
    <div class="box">女朋友</div>
</body>
</html>

二、盒子模型 ( 即div )
就是计算盒子大小，占据空间.
margin 边框到其他边框的距离
padding 内容到边框的距离

            /* margin-left: 10px;
            margin-right: 10px;
            margin-top: 10px;
            margin-bottom: 10px; */
            /* margin: 10px 20px; */

            /* 上 左右 下 */
            /* margin: 10px 20px 15px; */

            /* 上 右 下 左 */
            /* margin: 10px 5px  20px 15px;
            margin: auto; */

- 盒子模型：标准盒模型
计算盒子的大小或者占据的空间
空间 = content(width/height) + 内填充padding +边框border + 外边距margin

     代码示例如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
      
        .bigBox{
            width: 300px;
            height: 300px;
            background: gray;
        }
        .box1{
            width: 108px;
            height: 150px;
            float: left;
            background: deeppink;
            border: 1px solid #000;
            padding: 10px;
            margin: 10px;
            /* margin-left: 10px;
            margin-right: 10px;
            margin-top: 10px;
            margin-bottom: 10px; */
            /* margin: 10px 20px; */

            /* 上 左右 下 */
            /* margin: 10px 20px 15px; */

            /* 上 右 下 左 */
            /* margin: 10px 5px  20px 15px;
            margin: auto; */
            
        }
        .box2{
            width: 150px;
            height: 150px;
            float: left;
            background: deepskyblue;
        }
        /* 盒子模型： 标准盒模型
            计算盒子的大小或者占据的空间
            空间 === content(width) + 内填充padding  +边框border + 外边距margin

         */
    </style>
</head>
<body>
    <div class="bigBox clearfix">
        <div class="small box1">box1</div>
        <div class="small box2">box2</div>
    </div>
</body>
</html>

在这里插入图片描述

- 外边距合并（即margin 上下取最大）
当两个垂直的盒子的上下 margin 或上下margin相抵碰时，相抵部分的margin值取两者之间最大的值。
注意：只有普通文档流中块框的垂直外边距才会发生外边距合并。行内框、浮动框或绝对定位之间的外边距不会合并。
详细参见外边距合并问题&及解决
在这里插入图片描述
测试示例代码如下

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    .box1{
        width: 100px;
        height: 100px;
        border: 1px solid #000;
    }
    .box2{
        width: 100px;
        height: 100px;
        margin-top: 10px;
        margin-bottom: 20px;
        border: 1px solid #f00;
    }
    .box3{
        width: 100px;
        height: 100px;
        margin-top: 10px;
        border: 1px solid #0f0;
    }
    
    /* margin  上下取最大 */
    </style>
</head>
<body>
    <div class="small box1">box1</div>
    <div class="small box2">box2</div>
    <div class="small box3">box3</div>
</body>
</html>

在这里插入图片描述

解决外边距合并的方法：

            /* 1 父元素设置pading-top 而不给子元素设置margin-top */
            /* padding-top: 10px; */

            /* 2 父元素设置overflow 利用BFC解决外边距合并 */
            /* overflow: hidden; */

            /* 3 父元素设置 border  */
            /* border: 1px solid #000; */

            /* 4 父元素如果有浮动 可以解决外边距合并 */

示例测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .bigBox{
            width: 300px;
            height: 290px;
            /* 1 父元素设置pading-top 而不给子元素设置margin-top */
            /* padding-top: 10px; */

            /* 2 父元素设置overflow 利用BFC解决外边距合并 */
            /* overflow: hidden; */

            /* 3 父元素设置 border  */
            /* border: 1px solid #000; */

            /* 4 父元素如果有浮动 可以解决外边距合并 */
            float: left;
            background: #dedede;
        }
        .box1{
            width: 100px;
            height: 100px;
            margin-top: 10px;
            border: 1px solid #000;
        }
        .box2{
            width: 100px;
            height: 100px;
            border: 1px solid #f00;
        }
    
    </style>
</head>
<body>
    <div class="bigBox">
        <div class="small box1">box1</div>
        <div class="small box2">box2</div>
    </div>
</body>
</html>

三、关于html ，body，高度的问题

body的高度
是内容的高度，无内容时为0；
当用于实现全屏100%时，由于body的高度会与屏幕边框有一个默认的margin=8px；
示例测试代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        html{
            height: 100%;
            border: 1px solid #000;
            background: green;
        }
       body{
           margin: 0;
           padding: 0;
            height: 100%;
           background: #f00;
       }
       .box{
           width: 300px;
            height: 100%;
           background: yellow;
       }
    </style>
</head>
<body>
    <div class="box">box</div>
</body>
</html>

----------------------------------------------------DAY2简概笔记----------------------------------------
在这里插入图片描述

水兮泱泱

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
LV1 之------DAY2html 浮动&图文基线问题&盒子模型

LV1 之------DAY2htm 浮动与盒子模型一、浮动作用：使得div可以并排显示（因：div为块级元素占一整行，行间元素占由其内容撑大的一个小框）补充：①块级元素：默认空间宽度是一整行高度是内容大小可以设置宽高设置之后后面的空间还是这个元素的②行内元素：默认不可以设置宽高大小是内容的大小浮动会脱离文档流（盒子），但不完全脱离（盒子中的内容）为了...
复制链接

扫一扫

专栏目录