html盒子里怎么放两个盒子

好的，大家那么说完这个盒子模型的组成部分以后呢，给大家说这么个事啊，叫做浏览器的默认样式，叫浏览器的默认样式，嗯 嗯，比如说呀，我们呢现在搞一个盒子先，对吧？先搞个盒子，搞个盒子，然后呢我们给他设置点样式，比如说 啊，点 box 一，我们给他来个宽，宽呢两百，高呢也来个两百，也来个两百，然后呢白格让卡乐呢，我们给他设这个绿豆沙色，好吧？ ok， 那么此时直行 执行了以后呢，大家仔仔细看一下，发现我这个盒子啊，跟浏览器这个边缘之间是不是有一定的空隙啊？哎，他有一定的空隙，说这空隙是怎么回事呢？我们可以按对吧， f 十二对吧，或者是右 路见的这个检查，看一下这个开发者工具，开发者工具呢？他其实呢把我们这个盒子，我们点击这个盒子， 我们点击一下，对吧？点击这个 body 浏览器，浏览器呢？它在这里，这是不是有我们所说的盒子模型啊？盒子模型，盒子模型，大家注意看啊，这是我们的内容区，外边有个叫拍顶，这叫做内编剧，然后是边框，对吧？哎，这都没有设置，然后注意看马警，马警是不是叫外编剧啊？ 外编剧，他给我来了个八项数，那明显我们并没有设置外编剧啊，我们没设置外编剧，发现他这个外编剧却有八项数， 那是不是说那妈，这如果我们不设置，难道他的默认值是八？我们过来看一看，对吧？嗯，去找一下这个叫做盒子模型， 这呢外编剧，对吧？我们找个外编剧，外编剧看看。妈，金属性，妈，金属性呢啊，随便来个吧妈金套吧，看看他有没有默认值，发现默认值是零，那这八是哪来的呀？ 那实际上是不是就是浏览器提供的默认的样式啊？哎，这是浏览器提供的啊，我们看看别的浏览器有没有，我们也看看火狐的浏览器是不是也有这个默认样式啊？那有的时候我们在布局的时候呢，我就不希望有这个默认样式， 听懂吧？哎，我们希望这些，不希望他有空隙，然后呢这些布局我们自己来，不想用这个浏览器的默认样子，那习习惯上呢？我们通常啊把它去除， 那怎么去除呢？说白了就是我们要把所有的标签，他的这个默认的外面剧都去除，那怎么搞？那我们习惯上所有的标签那是不是就腥小 所有啊？然后呢我们来个叫做啊，喜欢上来个 majin， majin 呢？零，再来一个叫做 pading 啊，也是零这个操作呢，以后啊我们在布局的时候习惯上就先来个这个东西，把浏览器默认给我们提供的这个样式啊，把它清除，清除了以后我们回过来再刷新 是不就顶到头了呀？哎，所以说这个操作呢大家一定要稍微的注意一下对吧？哎，这叫清除， 叫清除。呃，清除，清除浏览器的默认样式我们习惯上啊，先来个这么个东西，剩下的我们自己去给他们布局相应的位置， 好吧，星代表所有标签，然后呢外边剧内边剧都给他设置成默认之为零，好吧，不用浏览器给我们设置的默认样式。

好，接着呢，我们来说这个盒子模型的分类，注意啊，在这个盒子模型的分类里边，哎，一会呢，我们就会把之前我们面临那个问题，大家注意啊，当我们把这个 padding 讲完之后，我们说过，最终我们是不是有这么一堆问题啊？ 这么个问题啊，这些问题是需要我们这个来考虑的，来，我把这些问题放到我们这个笔记里边啊，放到笔记里边， 好，这块啊，总结，这是一个问题，这些问题你看前两个问题，实际上我们都是可以怎么样，都是可以直接把它搞定的，只要我们算好那个，根据 ui 设计稿算好它的距离位置，我们都可以直接调的， 但这个包的没有办法，对不对？包的你怎么调啊？包的是浏览器的解析问题，所以说我们讲完这个盒子模型的这个两个分类之后，哎，我们就可以把刚才 这个边框问题给大家解决掉啊，边框问题解决掉好，大家看啊，根据 w 三 c 的规范，哎，元素内容占据的空间是由外的属性来设置的，就是宽度嘛， 而内容周围的拍顶和包子，它的值怎么样？是不是另外计算的呀？哎，你看不幸的是什么呢？在 i e 五点多和六在什么呢？怪异模式中使用自己的什么呢？非标准模型。 这些浏览器的这个 y 的属性不是内容的宽度，而是内容内编剧边框的宽度的总和。哎，这句话你需要再看一遍，这些浏览器的什么呀？ y 就是宽属性，不再是内容的宽度了， 而是什么呢？内容加上内边距，再加上谁，边框整体叫做谁啊？ wes， 对吧？好，所以说我们就有了谁啊，就有了盒子模型的分类啊，就有了盒子模型的分类。好这一块啊， ie 五 ie 六我们就不太多说，因为我们正常开发现在基本上也都不再去用这个 ie 五或者 ie 六了啊，这个说实话太那个啥了，太老了啊，这个软件太老了， 现在都是 i e 就是十级了，对不对？并且 i 转机现在用的都不多了。现在这个，呃，这个，这个微软是不是推出这个什么 id 机，对吧？现在都这个 id 浏览器啊， 那我们开发一般都是用谁的？用谷歌啊，用谷歌，谷歌火壶都可以用的。好，那么接着就来看吧，我们直接来说这个盒子模型到底分为， 嗯，拿两个类别啊，拿两个类别。那首先呢，盒子模型这两个两个啊，一个叫做标准盒模型，注意啊，标准盒模型就是我们所谓的什么呢？ w 三 c 啊， w 三 c 核桃模型。好，那么还有什么怪异核桃模型，这个怪异核桃模型就是 ie 核桃模型。嗨，注意啊，我告诉大家，现在呢，基本上啊，虽然说现在还是两个核桃模型了，但是呢，现在这两个核桃模型啊，在 w 三 c 的规范里边，实际上已经融合为 可以通过一个属性来进行控制了啊，那么这里面来看啊，再来见一个新页面，来，这边来一个就是合同模型的这个分类啊，这样吧，标准或者说呢，怪异，怪异，哎， 怪异，荷包型好点，开启填面这个啊，一，他把这 这个斜杠变成这个那个啥了，咦，刚才这个敲错斜杠了，没关系，一会再改吧，这个无所谓啊，来看一下我们现在来这个 div， 我们还来这个 div 啊，来 steel， 好，来这个 div 宽三百像素， 高三百像素。呃，来个这个边框吧，包子，好，这个啊，写完之后呢，亮起，运行好，这里边我们直接用这个火壶打开啊， 来，打开之后再看这个效果，现在这个 div 啊，是这样的，这个效果不错了，然后接着啊，然后接着我们里边呢，加这个 margee 十好，加一个这个拍定十好 啊，加完之后呢，这个效果肯定就是我们最常见的效果，对不对？你鼠标往上一放，它里边既有外侧的这个抹紧，又有内侧的，谁啊？这个拍顶对不对？都放进去了啊，那么这个就是我们什么呀，标准的盒子模型啊，标准的盒子模型，那么所谓的怪异盒子模型，注意啊，好， 来，这边我们写个注视啊，可以通过一个属性，谁呢？ box setting 啊， box setting 属性来干嘛呀？来控制，哎，就是，呃， 盒子是 w 三 c 还是什么样，好，怪异，盒子这个地方啊，通过这水可以控制，那么这一块我们来看啊，有一个 box id ig sitting， 挑两个值呀，我的妈呀，挑两个值啊，好，一个叫做 content box， 一叫做 bother box 啊， box 好，大家来看啊，现在现在我们这个属性，来，我们先来， 你看这边，同志们，看，好我们这个浏览器这边好，十零点六六，鼠标往上一放啊，是不是三百二十一点三三，对吧？这是我们是标准盒模型独立部分，然后我们加上我们这个属性 box sitting， 然后呢？还有个这个包灯 box 好看。好了， 到这里面啊，我们先刷新页面，然后呢，你看鼠标往上一放，注意，同志们，此时鼠标往上一放，谁啊？三百乘三百。哎，你发现此时的这个 是不是也有啊？马进也有，但是宽高底下三百乘三百，对不对？好，所以这一块啊，这个 body pops 就什么样。怪异 盒子，这个抗字的报告就是啥呢？就是 w 三 c 盒子啊， w 三 c 盒子，注意啊，我倒是认为这个怪异盒子在这个地方含有边框的布局上要比 w 三 c 盒子更好。 为啥？你看？同志们，你看啊，现在这个，我们把这个马紧去掉啊，我们马给去掉，现在三百宽，三百高，如果是，如果是那个标准的 w 三 c 盒子， 他所占据的宽度是不是三百加上什么呢？两个像素的三百零二，再加上这个十，就是三百二十二，对不对？三百二十二，但是呢，因为这个浏览器对边框的解析他不是一样，是不是？他是零 点六六六六七呀？那这样的话是不是就不太好了？同志们，这样不太好了，好，所以说我们在进行页面缩放的时候，注意啊，我们在进行页面缩放的时候可能会产生问题啊，页面缩放可能会产生问题，好，但是现在这个你来看啊，先，这个，你看 他这边是不是还是零点六六六七啊？对不对？注意看啦，来，我现在把它给放大缩小一下， 好，放大，放大，放大，你看啊，我把它放大完之后，同志们，你看这里是不是从零点六六七变成零点九了？同志们， 那就说不对呀，你这也没有什么变化，你这边这个什么宽高还是变了呀？边框的宽度是不是还是变了呀？但是这样，此时我让你看的不是这个边框了，是谁？是整个盒子的占地面，你看是不是还是三百乘三百？ 同志们啊，看好了，你看还是不是三，三百？三百，如果是标准盒子模型的话，只要边框大小改变了，那么这个整个盒子的占地位置是不是也会发生细微的改变？ 但是你看啊，当我们把它调这调这一块啊，调成这个怪异盒子的时候，你发现没有？哎，你再随便发大缩小，我整个盒子的占地大小就是谁就是宽高，对不对？就是宽高啊，所以这里面我们给大家切一下，你看啊， 标准盒子 marting petting boulder content 注意啊，四部分互相独立，互不干扰四部分互相独立，然后呢？互不干扰，但是对 外一盒子来讲，你发现了吗？哎，马金是一部分，但是呢，你看啊， padding 加 bother 加加什么呀？加里边这个内容他们共同等于谁？ 等于 ctrl， 那么此时这个 ctrl 是不是就是我们色列宽高啊，对不对？你看，你，此时你随便说放这个盒子，他的整体大小是不是始终就是三百乘三百啊， 对不对？他再怎么说放他是不是在整个盒子内部，哎，你想怎么分配？你的拍的也好，边框也好，这个占地，这个内容占地也好，你想怎么分？你给我怎么分去，对吧？我们怎么样不会影响外界的盒子 啊，所以说注意了啊，好使用啊，词属性怎么样呢？可以 解决什么呢？浏览器，对啊，浏览器，这样吧，不同浏览器对边框的解析啊，解析问题 啊，解析问题。好，这地方再看一下啊，使用这个属性就可以解决这个浏览器对不同边关的这个解决问题， 是不是这样一来的话你随便放到左脚，只要我的宽高设定好了。哎，你自己内部你想怎么变怎么变，我们不会影响到什么样外界内容。好，所以这点就这么跟大家说。什么呀？这两个盒子模型啊，两个盒子模型这个地方啊？好，停下。