第2页 - 油条一大碗

Flex 布局的基本概念一、什么是 Flex 布局1.1 基本定义Flex 是 Flexible Box 的缩写，意为"弹性盒子"Flex 布局是一种一维的布局模型，它给 flexbox 的子元素之间提供了强大的空间分布和对齐能力Flexbox 是一种一维的布局，因为一个 flexbox 一次只能处理一个维度上的元素布局，一行或者一列1.2 为什么使用 Flex 布局传统布局的问题：浮动+定...

2026年02月23日

清除浮动的最佳实践1. 概念清除浮动: 浮动一定要封闭到一个盒子中,否则就会对页面后续元素产生影响。当子元素浮动后,父元素如果不设置高度,就会出现高度塌陷的问题,影响后续布局。2. 清除浮动方法 1: 使用 BFC2.1 原理让内部有浮动的父盒子形成 BFC,它就能关闭住内部的浮动。此时,最好的方法就是 overflow: hidden; 属性。2.2 示例* { margin: 0; ...

2026年02月23日

BFC 规范1. 概念BFC (Block Formatting Context,块级格式上下文) 是页面上的一个隔离的独立容器。容器里的子元素不会影响到外面的元素反之亦然示例一个盒子不设置 height,当内容子元素都浮动时,无法撑起自身。原因: 这个盒子没有形成 BFC。2. 创建 BFC2.1 创建 BFC 的方法方法说明备注float 的值不是 nonefloat: left 或 r...

2026年02月23日

浮动布局基础1. 概念网页布局的本质是:用 CSS 来摆放盒子,把盒子摆放到页面对应的位置。在 CSS 中提供了以下几种不同的布局策略来实现页面的布局:正常布局流浮动布局定位布局表格布局 (display: table)响应式设计弹性布局网格布局多列布局以上每种布局方式,都有自己的用途,也有各自的优缺点,相互辅助。2. 正常布局流(Normal Flow)2.1 概念正常布局流(normal...

2026年02月23日

CSS 函数详解一、calc() 函数calc() 函数用于动态计算长度值。基本语法/* 最终计算得到 width:300px */ width: calc(100px + 200px); /* 先算乘法,再算减法 得到 width:150px */ width: calc(100px - 50px * -1); /* 先算除法,再算减法 得到 width:75px */ width: ...

2026年02月23日