怀旧网，博客详情：CSS 布局介绍

1、css 选择器介绍

2、CSS 布局介绍

原创

CSS 布局介绍

display介绍

CSS的display属性是一个非常重要的属性，它决定了元素应该如何显示在页面上。display属性可以控制元素的布局方式，例如是块级元素、内联元素，或者是其他类型的布局方式，如Flexbox、Grid等。以下是对display属性的详细介绍：

  1. 块级元素（Block-level Elements）：
    • 使用display: block;元素会表现为块级元素，这意味着它会开始于新的一行，并尽可能占据全部可用的水平空间。例如，<div>和<p>元素默认就是块级元素。
  2. 内联元素（Inline Elements）：
    • 使用display: inline;元素会表现为内联元素，它不会开始新的一行，元素的宽度由内容决定。例如，<span>和<a>元素默认就是内联元素。
  3. 行内块元素（Inline-block Elements）：
    • 使用display: inline-block;元素会结合内联元素和块级元素的特点。它既不会开始新的一行，也可以设置宽度和高度。这对于需要固定尺寸但又想与其他元素并排排列的情况非常有用。
  4. 列表项（List-item）：
    • 使用display: list-item;元素会表现得像列表项一样，通常会显示列表项前的标记（如项目符号或数字）。
  5. 表格类型（Table types）：
    • 使用如display: table;元素会表现得像块级表格元素，display: table-row;会使元素表现得像表格行，而display: table-cell;会使元素表现得像表格单元格。
  6. Flexbox和Grid布局：
    • 使用display: flex;或display: grid;元素会创建一个弹性容器（Flexbox）或网格容器（Grid），其子元素会成为弹性项目（Flex items）或网格项目（Grid items）。
  7. 隐藏元素（Hidden）：
    • 使用display: none;元素及其子元素将不会显示在页面上，它们占据的空间也会从文档流中移除。
  8. 内容显示（Contents）：
    • 使用display: contents;元素自身不会生成框，但其子元素会表现得如同它们是兄弟元素的子元素一样。
  9. 其他值：
    • display: flow-root;会创建一个新的块级格式化上下文，类似于display: block;，但会阻止内部的float清除外部的float。
    • display: run-in;是一个旧的CSS属性，它的行为取决于上下文，现在已经不推荐使用。

display属性的使用非常灵活，可以根据不同的布局需求选择合适的值。在实际开发中，合理运用display属性可以有效地控制元素的布局，实现各种复杂的页面设计。

浮动

float是CSS中的一个属性，用于将元素从常规文档流中脱离出来，并向左或向右移动，直到它的外边缘接触到包含块或另一个浮动元素的边缘。float属性主要用于创建文本环绕图片的效果，或者将一系列的元素排列在一行内。

以下是float属性的详细介绍：

  1. float的值：
    • left：元素向左浮动，文本和其他元素将围绕在其右侧。
    • right：元素向右浮动，文本和其他元素将围绕在其左侧。
    • none：元素不浮动，而是根据正常的文档流进行显示。
    • inherit：元素继承其父元素的float属性值。
  2. 浮动元素的特点：
    • 浮动元素仍然保留其原有的块级元素特性，例如可以设置宽度、高度、边距等。
    • 浮动元素会脱离正常的文档流，但如果不设置清除（clear）属性，可能会与其他元素重叠。
    • 浮动元素的文本内容会环绕在其周围，形成文本环绕效果。
  3. 清除浮动（Clearing Floats）：
    • 当浮动元素可能导致布局问题时，需要使用clear属性来清除浮动。clear属性可以设置在同一个元素上，或者在浮动元素之后的元素上。
    • clear的值有none（不清除浮动）、left（清除向左浮动的元素）、right（清除向右浮动的元素）和both（清除两侧的浮动）。
  4. 浮动与Flexbox、Grid：
    • 随着CSS的发展，Flexbox和Grid布局模式提供了更为强大和灵活的布局方式，可以在很多情况下替代float属性。
    • Flexbox和Grid提供了更好的控制方式，可以避免float属性带来的一些问题，如父元素高度坍塌等。
  5. 使用场景：
    • float属性适用于需要文本环绕的图片、导航菜单、图像画廊等场景。
    • 由于float属性可能导致布局上的复杂性，建议在简单的布局需求时使用，或者在了解了其工作原理和可能的问题后使用。
  6. 注意事项：
    • 浮动元素可能会导致父元素高度坍塌，即父元素无法包含浮动的子元素，导致布局上的问题。
    • 在使用float属性时，需要注意清除浮动，避免布局上的问题。
    • 由于float属性的一些局限性，现在更推荐使用Flexbox和Grid布局模式来实现复杂的布局需求。

总的来说，float属性是一个强大的CSS工具，可以用来创建各种视觉效果，但在使用时需要注意其可能带来的问题，并适时地使用清除浮动来维护布局的正确性。随着CSS布局技术的发展，float属性在某些情况下可以被更现代的布局方式所替代。

4种高度塌陷解决方案

1、解决方案一

将父元素的高度写死，最简单的避免塌陷问题的出现，但是一旦高度写死，父元素的高度将不能自动适应子元素的高度，所以这种方案是不推荐使用的。

2、解决方案二

开启BFC属性

页面元素中的隐含属性：Block Formatting Context 即块格式化上下文，简称BFC，当开启元素的BFC以后，元素会变成一个独立的布局区域，不会在布局上影响到外面的元素，BFC 理解为一个封闭的大箱子，箱子内部的元素不会影响到外部。

开启BFC后，元素将会具有如下的特性：

  1. 父元素的垂直外边距不会和子元素重叠

  2. 开启BFC的元素不会被浮动元素所覆盖

  3. 开启BFC的元素可以包含浮动的子元素（可解决高度塌陷）

如何开启元素的BFC

  1. 设置元素浮动（不推荐）---- 使用这种方式开启，虽然可以撑开父元素，但是会导致父元素的宽度丢失，而且使用这种方式也会导致下边的元素上移，不能解决问题

  2. 设置元素为inline-block（不推荐） ---- 可以解决问题，但是会导致宽度丢失，不推荐使用这种方式

  3. 将元素的overflow设置为一个非visible的值

  4. 设置元素绝对定位

推荐方式：将overflow设置为hidden是副作用最小的开启BFC的方式。

3、解决方案三

利用clear属性

clear可以用来清除其他浮动元素对当前元素的影响

可选值：

  • none，默认值，不清除浮动

  • left，清除左侧浮动元素对当前元素的影响

  • right，清除右侧浮动元素对当前元素的影响

  • both，清除两侧浮动元素对当前元素的影响，清除对他影响最大的那个元素的浮动

    了解完clear属性后，我们可以直接在高度塌陷的父元素的最后，添加一个空白的div，由于这个div并没有浮动，所以他是可以撑开父元素的高度的，然后在对其进行清除浮动，这样可以通过这个空白的div来撑开父元素的高度，基本没有副作用

4、解决方案四

通过after伪类向元素的最后添加一个空白的块元素，然后对其清除浮动，这样做和添加一个div的原理一样，可以达到一个相同的效果，而且不会在页面中添加多余的div，这是我们最推荐使用的方式，几乎没有副作用：

.box1:after{
    /*添加一个内容*/
    content: "";
    /*转换为一个块元素*/
    display: block;
    /*清除两侧的浮动*/
    clear: both;
}

<style type="text/css">		
    .box1{
        border: 1px solid red;
        background-color: palegreen;
    }
    .box2{
        width: 100px;
        height: 100px;
        background-color: blue;	
        /* margin-top:100px ; */
        /* float: left; */
    }
    .box1:after{
        /*添加一个内容*/
        content: "";
        /*转换为一个块元素*/
        display: block;
        /*清除两侧的浮动*/
        clear: both;
    }
</style>
<body>
    <div class="box1">
        <div class="box2"></div>
    </div>
</body>

定位

1、静态定位

  • 介绍：静态定位是默认值，就是之前认识的标准流。
  • 代码： position:static;
  • 注意点：
    • 静态定位就是之前标准流，不能通过方位属性进行移动
    • 之后说的定位不包括静态定位，一般特指后几种：相对、绝对、固定

2、相对定位

  • 介绍：自恋型定位，相对于自己之前的位置进行移动
  • 代码： position:relative;
  • 特点：
    • 需要配合方位属性实现移动
    • 相对于自己原来位置进行移动
    • 在页面中占位置 → 没有脱标
  • 应用场景：
    • 配合绝对定位组CP（子绝父相）
    • 用于小范围的移动

3、绝对定位

  • 介绍：拼爹型定位，相对于非静态定位的父元素进行定位移动

  • 代码： position:absolute;

  • 特点：

    • 需要配合方位属性实现移动
    • 默认相对于浏览器可视区域进行移动
    • 在页面中不占位置 → 已经脱标

  • 应用场景：

    • 配合绝对定位组CP（子绝父相）
    • 绝对定位相对于谁移动？

祖先元素中没有定位 → 默认相对于浏览器进行移动 祖先元素中有定位 → 相对于 最近的 有定位 的祖先元素进行移动

4、固定定位

  • 介绍：相对于浏览器进行定位移动
  • 代码： position:fixed;
  • 特点：
    • 需要配合方位属性实现移动
    • 相对于浏览器可视区域进行移动
    • 在页面中不占位置 → 已经脱标
  • 应用场景： 让盒子固定在屏幕中的某个位置

不同定位方式特点总结：

定位方式属性值相对于谁移动是否占位置
静态定位static不能通过方位属性移动占位置
相对定位relative相对于自己原来的位置占位置
绝对定位absolute相对于最近的且有定位的祖父元素移动不占位置（脱标）
固定定位fixed相对于浏览器可视区域不占位置（脱标）

5、z-index

z-index 是 CSS 定位中的一个重要属性，它决定了元素在页面上的堆叠顺序。当你在页面上有多个子元素需要层叠显示时，z-index 属性可以帮助你控制哪些元素显示在前面，哪些显示在后面。

理解 z-index

z-index 只在定位元素（即设置了 position 属性为非 static 值的元素）上起作用。position 属性可以设置为 relative、absolute、fixed 或 sticky。一旦元素被定位，它们就会创建一个新的局部堆叠上下文（local stacking context），在这个上下文中，z-index 属性将决定元素的堆叠顺序。

如何使用 z-index

z-index 属性接受整数作为值，数值越大的元素会显示在数值较小的元素之上。如果两个元素具有相同的 z-index 值，则根据它们在 HTML 文档中的顺序来决定堆叠顺序，后面的元素会覆盖前面的元素。

例如：

.element-one {
  position: relative;
  z-index: 1;
}

.element-two {
  position: absolute;
  z-index: 2;
}

在这个例子中，.element-two 会覆盖在 .element-one 上方，因为它有一个更高的 z-index 值。

堆叠上下文（Stacking Context）

堆叠上下文是 z-index 属性起作用的区域。一个元素的 z-index 值只在其所在的堆叠上下文中有效。创建堆叠上下文的规则如下：

  1. 根元素（HTML 文档的 <html> 元素）始终创建堆叠上下文。
  2. 任何 position 值为 relative、absolute、fixed 或 sticky，且 z-index 值除 "auto" 之外的元素。
  3. position 值为 fixed，且 z-index 值为 "auto" 的元素，创建一个局部的堆叠上下文，但其子元素不在这个上下文中。
  4. position 值为 absolute，且 z-index 值为 "auto" 的元素，创建一个局部的堆叠上下文，但其子元素不在这个上下文中。
  5. 元素的 opacity 值小于 1。
  6. 元素的 transform 属性除了 "none" 之外的其他值。
  7. 元素的 perspective 属性值不为 "none"。
  8. 元素的 filter 属性值不为 "none"。
  9. 元素的 perspective-origin 属性值不为 "0px 0px"。
  10. 元素的 transform-style 属性值为 "flat" 或 "preserve-3d"。
  11. 元素的 backface-visibility 属性值为 "hidden"。
  12. 元素的 isolation 属性值为 "isolate"，且 position 属性值不是 "static"。
  13. 元素的 speak 属性值为 "spell-out"。

注意事项

  • z-index 只对定位元素有效。
  • 只有当元素形成了新的堆叠上下文时，z-index 值才会影响其内部元素的堆叠顺序。
  • 尽量避免滥用 z-index，因为它会使布局的逻辑变得复杂，尤其是在大型项目中。
  • 在使用 z-index 时，要注意维护代码的可读性和可维护性。

通过合理使用 z-index 属性，你可以创建出具有层次感的布局，提升用户体验。记住，良好的设计不仅仅是视觉上的，还包括代码的结构和可维护性。

  • 平台作者：怀旧（联系作者）
  • QQ：444915368
  • 邮箱：444915368@qq.com
  • 电话：17623747368
    •

    评论

    登录后才可以进行评论哦！

    回到顶部 留言