介绍一下 CSS 的盒子模型
2022-11-23
255 字约 1 分钟
...1. 盒模型： 内容(content)、填充(padding)、边界(margin)、 边框(border)
2. 类型： IE 盒子模型、标准 W3C 盒子模型；
3. 两种盒模型的主要区别是:标准盒模型的宽高是值内容宽高(content)
4. 而IE盒模型的宽高是指content+padding+border。
5.设置盒模型的方式是：设置box-sizing
box-sizing:content-box 标准盒模型
box-sizing:border-box IE盒模型（css3盒子模型）
如果您觉得这篇文章有帮助，请点个赞吧～
相关文章
更多文章 →css2025-03-04
CSS 实现文本省略显示【单行，2行，多行】
在 中，长文本内容可能会超出其容器的范围。为了保持良好的用户体验，我们通常会将超出的文本部分以省略号显示。本文将详细介绍如何在CSS中限制文本显示一行、两行或多行，超过部分显示省略号。 1\. 前言 限制文本显示长度并以省略号表示超出部分是常见的需求。通过CSS，可以简单地实现这一效果。我们将分别介绍单行文本、省略两行文本和多行文本的实现方法。 2\. 单行文本省略 要实现单行文本省略，主要使用以下CSS属性： : 禁止文本换行。 :...
学习面试
css2025-03-04
css中，有哪些方式可以隐藏页面元素？区别?
一、前言 在平常的样式排版中，我们经常遇到将某个模块隐藏的场景 通过 隐藏元素的方法有很多种，它们看起来实现的效果是一致的 但实际上每一种方法都有一丝轻微的不同，这些不同决定了在一些特定场合下使用哪一种方法 二、实现方式 通过 实现隐藏元素方法有如下： display:none visibility:hidden opacity:0 设置height、width模型属性为0 position:absolute clip path dis...
学习面试
css2025-03-04
css实现正方形的几种方案及优缺点
前言 在电商、个人博客等网站我们或多或少都可以看到css正方形的应用场景，自适应正方形布局是必须要掌握的；接下来采黎带大家揭开css自适应正方形神秘的面纱 正方形 这很简单，设置盒子宽高都为200px就可以了 自适应正方形 青铜 提起自适应，想必都会想到 rem 、 vw 等相对单位，我们分别用这些单位来实现一下。 rem 屏幕宽度大于1200px时，字体为16px，rem的盒子的大小为 160px \ 160px； 屏幕宽度小于120...
学习面试
css2025-03-04
Flexbox 弹性布局
一、是什么 简称 box，意为”弹性布局”，是一种一维的布局模型。一次只能处理一个维度上的元素布局，一行或者一列。 采用Flex布局的元素，称为 容器（ ），简称”容器“；它的所有子元素自动成为容器成员，称为 项目（ ），简称”项目“。 容器中默认存在两条轴， 主轴 和 交叉轴 。项目默认沿主轴排列，通过 来决定主轴的方向。 每根轴都有起始线和终止线，用来描述flexbox元素的方向。 任何一个容器都可以指定为 布局。设为 Flex 布...
学习面试
css2025-03-04
提升CSS渲染性能
1\. 提升CSS渲染性能: 2\. 合适使用css选择器: 3\. 提升css文件加载的性能: 4\. 精简css代码: 5\. 合理使用web fonts: 6\. css动画优化:
学习面试
css2024-08-29
CSS 终于在 2024 年增加了垂直居中功能
在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 进行垂直居中。 支持情况： | Chrome: 123 | Firefox: 125 | Safari: 17.4 | | | | | CSS 对齐一般会使用 或 布局，因为 在默认的流式布局中不起作用。在 2024 年，浏览器实现了 。 你不需要 flexbox 或 grid，只需要 1 个 CSS 属性就可以进行对齐。 因此内容不需要包裹在 div 中。 令人惊讶...
学习面试
评论
请登录后发表评论
去登录