百度面试题之CSS定位

Danta
258 阅读5分钟

今日介绍CSS的定位

在网页开发中，理解和掌握CSS布局与定位是非常重要的技能。它不仅涉及到页面的基本结构设计，还直接关系到用户体验和视觉效果的呈现。本文深度剖析CSS psition中absolute和relative的概念 ，结合实际代码示例，来探讨CSS布局与定位的基础知识。

网页的结构与页面绘制的本质

网页的基本结构是由HTML标记语言构建的，这些标记定义了网页上的各种元素，如文本、图片、视频等。页面绘制的本质是将这些元素转换成屏幕上的像素，以实现视觉上的展示。每个HTML元素在页面上都会占据一定的空间，这个空间由其自身的尺寸（宽度和高度）、内边距（padding）、边框（border）以及外边距（margin）共同决定。

虽然这些知识点很基础，但是也非常的重要。

文档流的概念

文档流是指页面上元素按照HTML文档的书写顺序从上至下、从左至右，从内到外排列的方式。每个元素在文档流中都有一个默认的位置。

实践案例：

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div style="border:1px solid black">div1
    </div>
    <div style="border:1px solid red;">div2</div>
    <span>这是一张图片</span>
    <img src="https://img.36krcdn.com/hsossms/20241118/v2_204d64f8279043d89c8254d031bcdf09@6100851_oswg96384oswg1053oswg495_img_jpg?x-oss-process=image/resize,m_mfit,w_600,h_400,limit_0/crop,w_600,h_400,g_center/format,webp">
</body>
</html>

image.png

通过这个案例，我们可以看出<div></div>这个标签为块级元素， <span></span> <img>为行内元素

块级元素（Block-level Elements）
  1. 独占一行：块级元素总是在新行开始，并且其后的元素也会另起一行。这意味着每个块级元素都会占据页面上的一整行或更多行，直到它包含的内容结束。
  2. 宽度和高度：默认情况下，块级元素的宽度会自动扩展到其父容器的100%宽度，而高度则取决于其内部的内容。
  3. 可以设置宽度和高度：块级元素可以设置width和height样式属性来控制其尺寸。
  4. 内外边距：块级元素可以设置margin和padding来控制元素之间的间距和内部内容与边框之间的距离。

常见的块级元素包括 <div>, <p>, <h1> 到 <h6>, <ul>, <li>, <form>, <table> 等。

行内元素（Inline Elements）
  1. 不独占一行：行内元素不会开始新的一行，而是与其他行内元素在同一行内显示，除非受到外部因素的影响（如宽度超过容器宽度）。
  2. 宽度和高度：行内元素的宽度由其内容决定，通常不能直接通过CSS设置固定的宽度和高度。不过，使用CSS3的display: inline-block;可以让行内元素拥有设置宽度和高度的能力。
  3. 内外边距：虽然可以为行内元素设置margin和padding，但是垂直方向上的margin（即margin-top和margin-bottom）可能不会按预期工作，因为行内元素不控制自己的行高。

常见的行内元素包括 <span>, <a>, <img>, <strong>, <em>, <code> 等。

经过上面的介绍我们已经能明白文档流的概念了，下面将说明什么是盒子？

盒模型的概念

盒模型描述了元素在页面上的布局方式，具体来说：
精确计算盒子的大小 = 内容的大小（width+height） + 内边距(padding) + 边框(border)

CSS定位（position）

CSS中的position属性用于指定一个元素如何相对于其正常位置或包含块进行定位。主要的定位类型包括静态定位（static）、相对定位（relative）、绝对定位（absolute）和固定定位（fixed）。下面重点介绍相对定位和绝对定位。

  • 相对定位（relative） ：
    • 相对于默认的位置 移动 left top...
    • 盒子原来的占位（文档流中的位置和大小）不受影响
    • 不影响其他元素的位置
  • 绝对定位（absolute） ：

    • 定位是脱离文档流

    • 对定位是相对于父级的定位

    • 父级没有定位(父级也得是absolute)，就相对于body定位

实践案例：

考虑以下HTML和CSS代码示例，我们将创建三个盒子，并使用不同的定位方法来观察它们的行为：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>
   
    *{
        margin: 0;
        padding: 0;
    } /*
       初始化一下不同的浏览器的默认样式
     */
    #box1{
        margin: 20px; 
        width: 200px;
        height: 200px;
        padding: 5px;
        border: 10px solid red; 
        background-color: green;
        position: relative;
        top: 30px;
        left: 20px;
    }
    #box2{
        margin: 10px;
        width: 300px;
        height: 300px;
        background-color: blue;
    }
    /* #box3{
        width: 50px;
        height: 50px;
        background-color: yellow;
        position: absolute;
        top: 10px;
        left: 10px;
    } */
</style>
<body>
     <!-- /* 
        页面绘制出来
        box1 在box2上面,正常的文档流中
        html 文档流和 css 结合 样式生效 盒模型
     */ -->
    <div id="box1"><div id="box3">box3</div></div> 
    <div id="box2">box3 </div>
</body>
</html>

image.png

结果就是两个盒子进入文档流中，上下排列好，此时上面盒子的position属性为relative,该盒子没有被嵌套也就是不存在父级元素，相对于body去定位所得出的结果。

下面当我们把上面注释去掉，并把id为box1中的position属性改为absolute

image.png

我们就能发现三个盒子叠在了一起，首先将position属性改为absolute后，也就意味着这个标签内的元素都脱离了文档流，也就不会影响其他的元素排列了，绿色盒子相对于body去定位，而绿色盒子内部嵌套了一个黄色盒子，它相对于绿色盒子去定位。而蓝色盒子的定位不受非文档流的元素影响，所有也在最上面。

avatar
文章
阅读
粉丝