【大白话】说HTML和CSS的一些知识点（上）之前学习记录的，比较杂乱无章，将就看下吧。工作后在看之前写的这些笔记，感觉

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第11天，点击查看活动详情

之前学习记录的，比较杂乱无章，将就看下吧。

工作后在看之前写的这些笔记，感觉真是一种成长。

啥是盒模型，茄盒🍆？不是！！盒模型就是一个 div 里面的布局内容,看例子：

#box {
      width: 200px;
      border: 1px solid #666;
      padding: 10px;
      margin: 10px;
    }

<div id="box">
    盒模型
</div>

效果出来是这样，咱们使用 document.getElementById('box').offsetWidth 打印宽度显示的222（200+20+2），其实很好理解，控制台下滑到样式盒子可以看到浏览器将padding，border纳入了盒子宽度的计算之中。

在这里插入图片描述

如果只想显示给定的200px宽度呢，怎么设置？很简单，在样式表中设置 box-sizing: border-box即可，box-sizing默认值：content-box，大小为上述222px。

在这里插入图片描述

说完盒模型，再说说margin吧，这个在设计上有个坑，就是我们常说的边距塌陷问题，具体看下边

其实就是一个独立的渲染区域，简单来说就是内部的渲染不会影响外界，相当于大房子里的小屋子，小屋子随便装修不会影响大房子的格局。

举个栗子：当我们渲染父元素里的一个给定宽高的图片时，希望旁边的文字也具有同样的高度，这时就需要给父元素设定BFC。（一般用于需要独立的样式，不影响整体布局，常见于广告）

设置方法：

就是定位嘛（BOSS：你要搞清楚自己的定位😁），在CSS里面属于是非常常见的，经典的有：子绝父相 + margin ，可以搞定大部分布局，但在实际开发项目中比较少用绝对定位。

常见的有：

红黄蓝方块敲起来！！

以前网页大部分采用的布局方式，可以说是非常经典了。

圣杯布局，让中间栏优先加载渲染，两侧宽带固定，中间自适应。利用float+margin实现，margin用到负值的知识点。遇到底部栏和三栏挨在一起，可以用 clear:both 清除浮动，移动时可设置距离中间栏的-100%，在根据两边调解再移动的大小。
双飞翼布局，大致和圣杯一样，只不过实现方式不同。

这里一般有个问题：怎么实现三列布局，左右200，中间自适应且优先加载中间区域 ?。

我是这么想的：使用相对定位，左右绝对，设置左或右上边距为0，中间设置padding 0 200px；双飞翼，圣杯

一般用于解决浮动塌陷问题，啥是浮动塌陷? 浮动塌陷就是给元素设定浮动后，元素脱离文档流，如果没有高度，样式会失效 => 浮动塌陷。

解决方法有：

都是引入，也都可以引入css，但使用场景不一样。