模拟电商网页

一.在css写样式的过程中，有许多注意点和坑，在这里记录一下：

1.元素浮动

图片出现乱序状态，高度坍塌：

原因：浮动框可以左右移动，直到遇到另一个浮动框或者遇到它外边缘的包含框，浮动框不属于文档流中的普通流，当元素浮动之后，不会影响块级元素的布局，只会影响内联元素的布局。此时文档流中的普通流就会表现的该浮动框不存在一样的布局模式。当包含框的高度小于浮动框的时候，就会出现高度坍塌。

解决方案：

使用带clear属性的空元素，在浮动元素后使用一个空元素
使用css的overflow属性(hidden/auto),在ie6中，需要设置haslayout；
给浮动的元素的容器添加浮动
给浮动元素后面的元素添加clear属性
使用css的:after伪元素（代表一个元素之后最近的元素）---给浮动元素的容器添加一个clearfix的class,给class添加一个:after伪元素实现元素末尾添加一个看不见的块元素

2.img是inline，为什么width和height可以设置？

img是可替换元素，在 CSS 中，可替换元素的展现效果不是由 CSS 来控制的。这些元素是一种外部对象，它们外观的渲染，是独立于 CSS 的。简单来说，它们的内容不受当前文档的样式的影响。CSS 可以影响可替换元素的位置，但不会影响到可替换元素自身的内容。

3.在css中，top,left,margin-top,offsetx等相当重要，要知道其关系

模拟电商网页

（这两张图片都来源于网络）

4.对于常用的块级元素，行内元素，行内块元素要了解：

块级元素：

<caption>， <dd>，<div>，<dl> ， <dt>，<form> ，<h1> ，<h2> ，<h3> ，<h4> ，<h5> ，<h6> ，<hr> ，<legend> <li> 等

行内元素：<a>,<br>,<abbr>,<i>,<em>,<img>等

行内块元素：部分<input>等

5.对于整个页面的处理过程中，适合一块一块来做，可以通过div，div间的嵌套等等来实现页面的布局，当然现在流行flex布局来定义三栏布局等等

二.在整个处理过程中遇到的问题

1.一直以为父元素参与margin的重叠，但是在写程序的过程中布局出现了错误

经过排查和查阅资料，终于发现了自己对于重叠的误区

1>如果元素的margin和它的父元素的margin-top重叠在一起，盒模型border-top的边界定义和它的父元素相同；

2>任意元素的父元素不参与margin的重叠，或者说只有父元素的margin-bottom是参与计算的，如果怨怒是的border-top非零，那么元素的border-top边界位置与原来一样；

3>一个应用了清除操作的元素的margin-top绝不会和它的块级父元素的margin-bottom重叠

4>根元素的垂直margin不会被重叠

2.若出现溢出，该如何处理

Text-overflow:clip----修剪文本，ellipsis---省略号，string---用给定的字符串来代替

提取码：67l9