web行盒的盒模型学习笔记05

最新推荐文章于 2024-04-21 11:48:20 发布

EIHH

最新推荐文章于 2024-04-21 11:48:20 发布

阅读量103

点赞数

文章标签：前端学习

本文链接：https://blog.csdn.net/weixin_47281509/article/details/127103216

版权

行盒的盒模型

常见的行盒：包含具体的元素
span strong em i img video audio

显著特点

盒子沿着内容沿伸
行盒不能设置宽高

要调整行盒的宽高，应该使用字体大小、行高、字体类型、间接调整。

内边距

水平方向有效，垂直方向仅会影响背景，不会实际占据空间。

边框

水平方向有效，垂直方向仅会影响背景，不会实际占据空间。

外边距

水平方向有效，垂直方向无效，不会实际占据空间。

行块盒

display：inline-block的盒子

不独占一行
盒模型所有尺寸都有效

空白折叠

空白折叠发生在行盒内部或行盒之间

可替换元素和非可替换元素

大部分元素，页面上显示的结果，取决于元素内容，取决于元素内容，称为非可替换元素
少部分元素，页面上显示的结果，取决于元素属性，称为可替换元素

可替换元素:img 、video、audio

绝大部分可替换元素为行盒
可替换元素类似于行块盒，盒模型中所有尺寸都有效

//测试代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
           p,span{
            background: lightblue;
            border: 2px solid;
            line-height: 3;
          } 
         a{
            background: red;
            color: #fff; 
            width: 100px; 
             padding: 0px 20px;
          } 
          a{
            background: red;
            color: aliceblue;
            display: inline-block;
            width: 100px;
            text-align: center;
            height: 40px;
            line-height: 40px;
          } 
          .pager a{
          border:1px solid #e1e2e3;
          text-decoration: none;
          color: #38f;
          width: 34px;
          height: 34px;
          display: inline-block;
          text-align: center;
          line-height: 34px;
          }
          .pager a:hover{
          border-color: #38f;
          background: #f2f8ff;
          }
          .pager a.selected{
            border: none;
            color: #000;
            background: initial;
          } 
    </style>
</head>
<body>
    <p>
        Lorem ipsum, dolor sit amet consectetur adipisicing elit. Reprehenderit, dicta?
    </p>
    <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Explicabo, officiis? Ratione voluptatibus perspiciatis esse voluptate! Nulla dignissimos iure ad minus maiores recusandae totam ab placeat, perspiciatis cum possimus vero illo.
    </p>
    <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Minima, voluptatibus.
    </span>
    <span>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Aut soluta harum asperiores temporibus, ipsa doloribus corrupti praesentium debitis dolor culpa expedita reiciendis ut autem sunt consequatur laboriosam facere hic ducimus.
    </span> >
   <a href="">
        百度
    </a> 
    <span>Lorem ipsum dolor sit.</span>
    <a href="">
        百度
    </a>
    <span>
        Lorem, ipsum dolor.
    </span> 
    <div class="pager">
        <a href="" class="selected">1</a>
        <a href="">2</a>
        <a href="">3</a>
        <a href="">4</a>
        <a href="">5</a>
        <a href="">6</a>
        <a href="">7</a>
        <a href="">8</a>
        <a href="">9</a>
        <a href="">10</a>
    </div> 

    <img src="https://img2.baidu.com/it/u=3914682781,2673652813&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1657472400&t=b0fbd1c98ea23ad99c100396590979f0" alt="">
    <span>Lorem ipsum dolor </span>
</body>
</html>