H5C3练习心得（小米商城）12.11

1.为什么要清除浮动？

浮动的定义：非IE浏览器下，容器不设高度且子元素浮动时，容器高度不能被内容撑开。此时，内容会溢出到容器外面影响布局。这种现象被称为浮动（溢出）。

为了防止溢出，所以要清除浮动。

固定格式如下：

.clearfix::after {
				/* 清除浮动 */
				content: "";
				display: block;
				clear: both;
			}

2.为什么要设置内边距和外边距为0？（其实还不太清楚）

默认情况下，相应的HTML块级元素存在外边距，所以最开始的时候要将块元素的margin属性设置为0，覆盖掉默认样式。

h3,
			h4,
			p,
			ul {
				margin: 0;
				padding: 0;
			}

3.在做多个盒子的页面布局时可以不使用很多个div，而是使用一个div里面放ul-li，避免太复杂。

4.消除img标签所产生的间隙（就是两个图片之间会有空白区）

首先为什么会产生间隙呢？

因为img属于行内元素，而行内元素的对齐方式是通过其父元素的基线对齐的，而撑开的行高确是元素整体的高度，以底线对齐的，而底线与基线之间是有距离的，所以产生了间隙。

.product-hot img {
				/* 变成块级元素，消除img标签所产生的空隙 */
				display: block;

而常用的消除间隙的方法有：

1）img { display:block};
将其改变为block元素，但是该方法太过粗暴，相当于从根本上改变了img。
2）img {vertical-align:top;}
改变其垂直对齐方式
3）div {font-size:0};
把父元素的文字大小设置为0
4）div {line-height: 0};
把父元素的行高设置为0
5）img {float: left};
使用float进行浮动
5.块元素，行内元素到底是什么啊？有什么区别？

块元素：是指在页面上以块的形式显示的元素，他们会独占一行，并且在默认情况下会占满其父元素的宽度。

常见的块元素有

,

,

~

,

,
• 等

  块元素的性质：

  1.独占一行，垂直排列

  2.默认占满父元素的宽度

  3.可以设置宽度高度内外边距等式样

  4.可以包含其他块级元素和行内元素

  行内元素：是指在页面上以行的方式显示的元素，它们不会独占一行，可以与其他行内元素在一行

  常见的行内元素：,,,,等

  行内元素的性质：

  1.不会独占一行，水平排列

  2.宽度默认由内容决定，不可设置宽度和高度

  3.对边距和内边距的处理有一些限制

  4.不能包含块级元素，但能包含其它行内元素

  自己的分析：块元素是可以设置宽高的，无论里面内容有多少，宽高是一定的，可能内容没有充满；但行内元素的是默认由内容撑开的，内容有多少，就有多少宽高，没有内容的地方就没有宽高。

  6.特别的元素被称为可替换元素

  是一个特殊的元素类型，被归类为可替换元素，可替换元素是指其显示的内容不是由其内容决定的，而是来自外部资源或通过其他方式动态生成的内容。

  特点：

  显示的内容来自外部资源（例如图片文件）。
  可以设置替代文本 (alt)，在图片无法加载时提供替代内容。
  可以设置宽度 (width) 和高度 (height) 属性，控制图片的显示大小。
  可以使用 CSS 样式属性来调整图片的样式。

  7.关于行内元素对边距与内边距的限制及处理

  定义：

  行内元素对边距与内边距的限制，是指在水平方向上，给行内元素设置内外边距都会生效，但在垂直方向上，给行内元素只能设置外边距，设置内边距无效，虽然在显示上会扩大元素的范围，但对周围元素没有影响。

  特殊的是元素，虽然是一个内联元素，但是它是可以在垂直方向上设置内边距的，因为它被视为一个替换元素，它的内边距会影响到替换元素的内容。

  如何处理：

  1.对于设置了绝对定位的行内元素，可以通过设置top,bottom,left,right属性来控制元素的位置，从而避免元素内边距和外边距的影响

  2.对于未设置绝对定位的行内元素，可以将通过将元素转换成块级元素，再来设置margin和padding属性来控制元素的内边距和外边距

  <1>转换方式
  块级元素=> 行内元素 设置style属性：display:inline

  行内元素=>块级元素 设置style属性：display:block

  行内元素=>（行内）块级元素 设置style属性： display:inline-block

  <2>display:block与display:inline-block
  两个都是将行内元素转成块级元素，但是我们上面在区别中说到了，块级元素一般单独占一行，如果我们想把行内元素转成块级元素，但又不让它单独占一行，就可以使用display:inline-block。display:block则是单独的转换，不具备此功能。