任务2-3(怪异盒模型&弹性布局)

最新推荐文章于 2024-09-11 10:10:41 发布
最新推荐文章于 2024-09-11 10:10:41 发布
阅读量49 收藏
点赞数
文章标签： box html5 css
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_46137837/article/details/119391409
版权

目录:


1. 怪异盒模型

	正常盒模型:box-sizing:content-box
	怪异盒模型:box-sizing:border-box
  1. 怪异盒模型设置border和padding时会向内扩展,不增加盒模型的面积
  2. 如果内部空间不够,会向外扩展

2. 弹性布局

在这里插入图片描述

weixin_46137837
关注
怪异盒模型和flexbox弹性盒布局
m0_45229352的博客
03-02 282
前端笔记，怪异盒模型
怪异盒模型&弹性盒
weixin_44222157的博客
04-14 414
怪异盒模型 怪异盒模型又叫IE盒模型，它可以使padding和border都在元素宽高的内部，不会把盒子撑大一般在移动端开发时使用。 触发条件：box-sizing:border-box; 例： 我们设置了一个宽400px高300px的盒子，给它添加了10px的border和50px的padding，标准盒模型中，padding会把盒子撑大且border会在盒子的外部，而添加**box-sizi...
标准盒子模型和怪异盒子模型（详解）
wwwjjjjj666的博客
11-24 8428
标准盒子模型和怪异盒子模型（详解）
CSS3学习笔记三---怪异盒模型 | 弹性盒*
Flora_hsx的博客
10-23 1463
CSS3学习笔记三---怪异盒模型 | 弹性盒*，怪异盒内容比较重要，常用，需要多练习。
怪异盒模型&flex布局
Fray_Zyt的博客
06-22 238
怪异盒模型=CSS3盒模型： css盒模型：加上padding值后，若想width不变，则需要减去padding值； 怪异盒模型：加上padding值后，width：
css3盒模型、弹性盒模型、怪异盒模型
热门推荐
冰雪为融的博客
03-27 1万+
一、CSS 盒子模型(Box Model)所有HTML元素可以看作盒子，在CSS中，"box model"这一术语是用来设计和布局时使用。CSS盒模型本质上是一个盒子，它包括：边距，边框，填充，和实际内容。盒模型允许我们在其它元素和周围元素边框之间的空间放置元素。下面的图片说明了盒子模型(Box Model)：不同部分的说明：Margin(外边距) - 清除边框外的区域，外边距是透明的。（marg...
day08:怪异盒模型+弹性布局
weixin_44248980的博客
08-10 108
一、怪异盒模型 1.怪异盒模型的border和padding是内嵌的不增加盒模型面积 2.如果内部空间不够会向外扩展 #second{ box-sizing:border-box; } 二、弹性布局 1.排列方式 flex-direction:row-reverse; flex-direction:column; flex-direction:column-reverse; 2.是否换行 flex-wrap:wrap...
Html-标准盒子模型和怪异盒子模型
可可的博客
11-16 1622
Html-盒子模型 一、概念篇 标准盒子模型css盒子模型 又称框模型 (Box Model)，是CSS中一个重要概念，文档中的每个元素被描绘为矩形盒子，所有文档元素都生成一个矩形框，这称为元素框(element box)，它描述了一个元素在文档布局中所占的空间大小，而且，每个框影响着其他元素框的位置和大小。 盒子模型包含了 元素内容（content）、内边距（padding）、边框（border）、外边距（margin） 几个要素。 标准盒子模型： 标准 W3C 盒子模型的范围包括 margin、bo
14-怪异盒模型与flex布局
qq_43998496的博客
07-22 133
怪异盒模型 box-sizing content-box 这是由 CSS2.1 规定的宽度高度行为。宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框。 border-box 为元素设定的宽度和高度决定了元素的边框盒。就是说，为元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。 FLEX布局 Flex容器：采用 Flex 布局的元素的父元素； Flex项目：采用 Flex 布局的元素的父
CSS-1-样式优先级 position 居中 display 弹性布局 盒模型 省略号 坍塌
sharryling
03-26 728
参考链接：https://blog.csdn.net/sinat_36521655/article/details/80140221 不知道你有没有遇到这样一种情况，语法正确、单词正确，但是样式就是无法应用，而是使用的不知道在哪写过的一个样式，然后你就偷懒使用!important让样式生效。哈哈哈，反正我遇到过，而且这么做了。 其实这个问题的出现，是因为样式存在优先级规则。如果了解了样式的优先级，...
弹性盒和怪异盒模型、多栏布局
weixin_43668201的博客
08-05 229
1、怪异盒模型 浏览器对盒模型的解析一共有两种模式，一种是标准模式，另一种就是怪异模式。 一般在页面头部声明了DOCTYPE，都会触发标准模式，而如果DOCTYPE缺失则在ie6，ie7，ie8下将会触发怪异模式（quirks 模式）。 标准盒模型和怪异盒模型的区别： 在标准模式下，一个块的总宽度= width + margin(左右) + padding(左右) + border(左右) 在怪异...
CSS-弹性盒子
weixin_52142992的博客
08-22 2088
弹性盒子的使用、弹性盒子遇到的问题解决
css+h5进阶：浏览器兼容、盒模型-怪异、多列布局、响应式布局、鼠标形状--第十四天
qdcxy_lj的博客
03-09 216
css+h5进阶：浏览器兼容、盒模型-怪异、多列布局、响应式布局、鼠标形状--第十四天
HTML5下＜hr＞标签的CSS样式定制
软考鸭
09-10 988
hr>标签在HTML页面中创建一条水平线，这条水平线通常用于分隔段落、章节或者主题变化。在HTML中，是一个空元素，没有结束标签，直接使用即可。然而，在XHTML中，为了符合XML的严格语法，必须被正确地关闭，比如。
HTML5中`＜span＞`标签深入解析
软考鸭
09-10 541
span>标签是一个无语义的行内容器，用于包裹文档中的一部分内容，而不改变文档的结构。它通常与CSS和JavaScript结合使用，以实现对特定内容的样式化或动态操作。
中秋之美——html5+css+js制作中秋网页
Timi2019的博客
09-02 2356
八月十五，秋已过半，是为中秋。“但愿人长久，千里共婵娟”，中秋时节，气温已凉未寒，天高气爽，月朗中天，正是观赏月亮的最佳时令。古人把圆月视为团圆的象征，因此，又称八月十五为“团圆节”。
HTML5中元素的拖放详解
最新发布
业精于勤荒于嬉，行成于思毁于随
09-11 1045
只要为元素添加draggable属性，就可实现元素的拖放。
HTML5全面知识点
A_cot的博客
09-10 873
HTML（HyperText Markup Language）是构建网页的基础语言。版本历史：从 HTML 的早期版本发展到现在的 HTML5，功能不断增强，支持更多的多媒体和交互特性。定义：HTML 是一种用于描述网页结构的标记语言，通过各种标签来定义网页的内容和布局。
CSS3弹性盒子详解：适应多屏布局的利器
弹性盒布局的核心价值在于简化复杂布局任务，特别是在需要响应式设计和高效空间管理的应用场景中。通过理解并灵活运用这些属性，开发者可以轻松创建适应不同设备和屏幕大小的美观、易用的用户界面。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值