盒模型和flex布局

最新推荐文章于 2024-08-11 18:00:00 发布

JH居合

最新推荐文章于 2024-08-11 18:00:00 发布

阅读量727

点赞数

分类专栏：面试题文章标签： flex html

本文链接：https://blog.csdn.net/zxlong020/article/details/108228112

版权

本文介绍了盒模型的两种类型——标准盒模型和IE盒模型，详细解析了它们的宽度计算方式，并展示了如何通过`box-sizing`属性进行切换。接着，文章深入探讨了Flex布局，解释了Flex容器和Flex项目的概念，并列举了关键的容器属性，如`flex-direction`、`justify-content`等，帮助理解如何实现灵活的页面布局。

摘要由CSDN通过智能技术生成

盒模型

1.什么是盒模型？
盒模型就是一个盒子，封装HTML元素，所有的html元素都可以说是一个盒模型，它包括边框，边距填充和内容
2.盒模型有两种
标准盒模型
在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右)
在这里插入图片描述

怪异盒模型（IE盒模型）
在这里插入图片描述
在怪异模式下，一个块的总宽度=内容的width（包含了padding[左右]和border[左右]的值）+margin（左右）
3、两种盒模型的切换
box-sizing可以切换盒模型(默认属性是content-box)
box-sizing: content-box 是W3C(标准)盒子模型
box-sizing: border-box 是IE(怪异)盒子模型