盒子模型制作问题及解决方法

此次笔记内容主要为盒子模型制作中遇到的问题及解决方法。

一、一行内显示多个div元素

解析

首先区分一下块级元素和行内元素的区别

因为块级元素是占领一整行，所以我们可以用两种方法解决：float或display：inline-block

块级元素特点：

• 总是以一个块的形式表现出来，占领一整行。若干同级块元素会从上之下依次排列（使用float属性除外）。
• 可以设置高度、宽度、各个方向内外边距。
• 当宽度（width）缺省时，它的宽度是其容器的100%，除非我们给它设定了固定的宽度。
• 块级元素中可以容纳其他块级元素或行内元素。
• 常见的块级元素有<p><div><h1><li>等等。
• 块级元素的display属性值默认为block。

行内元素特点：

• 它不会单独占据一整行，而是只占领自身的宽度和高度所在的空间。若干同级行内元素会从左到右（即某个行内元素可以和其他行内元素共处一行），从上到下依次排列。
• 行内元素不可以设置高度、宽度，其高度一般由其字体的大小来决定，其宽度由内容的长度控制。
• 行内元素只能设置左右内外边距，而不能设置上下的内外边距。因此我们可以通过设置左右的padding值来改变行内元素的宽度。
• 常见的行内元素由<a><em><img>等等。
• 行内元素一般不可以包含块级元素。
• 块级元素的display属性值默认为inline。

float标签

浮动可以理解为让某个div元素脱离标准流，漂浮在标准流之上，和标准流不是一个层次。

设置浮动后，假如某个div元素A是浮动的，如果A元素上一个元素也是浮动的，那么A元素会跟随在上一个元素的后边(如果一行放不下这两个元素，那么A元素会被挤到下一行）；如果A元素上一个元素是标准流中的元素，那么A的相对垂直位置不会改变，也就是说A的顶部总是和上一个元素的底部对齐。（靠近页面边缘的一端是前，远离页面边缘的一端是后。）