- 定位和浮动是不是都撑不开高度？宽度呢？
浮动元素是可以通过清除浮动的影响，去撑开浮动父元素的大小。
但是定位已经脱离了常规流，无法撑开父元素。
由于浮动元素和定位元素内部会创建BFC，默认他们的宽度和高度都是auto,何为auto呢？auto就是如果你不去主动设置他们的大小，他默认是靠父元素去撑开的，就是必须依靠子元素的高度和宽度去撑开。如果子元素是块盒，就要设置的他的宽高，或者依靠子元素的子元素去撑开子元素，再依靠子元素去撑开它。
- 浮动元素的子元素再浮动的话，当前浮动元素会高度坍塌吗？
浮动元素内部会创建bfc，浮动元素他里面的子元素再有浮动元素，不会高度坍塌。
3.常见盒子的水平和垂直居中的总结？
行盒，行块盒
A.水平居中 直接设置行盒（行块盒）父元素text-align:center B.垂直居中 a.单行文字 设置行高 = 当前区域的高度 b.多行文本设置padding去解决
浮动元素
水平和垂直居中 做法是调整margin left right top bottom 去解决。
定位元素
水平和垂直居中 定宽高，设置左右或者上下的坐标为0（top:0, bottom:0），将左右或者上下margin设置为auto，
- Span元素内部能放div吗？
不能，根据mdn ，不能放div。
- 尽量不用元素类型选择器去选中，是因为写的过程可能会更换元素类型。如果用类名就没有这个问题，也是拓展性更高的做法。
6.什么是空白折叠？项目为啥不考虑空白折叠的影响？
<span>1</span>
<span>2</span>
像上面的行盒（行内块）和行盒（行内块）之间由于换行的原因，或者其他原因，前面的span元素和后面的span元素之间有多个空格，而在布局的时候在两个元素之间会出现一个空格的大小，空格的大小，与当前元素的字体大小也有关系，所以在开发的时候要注意中间产生的空格的间距问题。因此在项目中用到行内块的时候，注意父元素要留一点间隙给那个空格。
空白折叠可以通过，只能通过手动删除两个元素之间的空格去解决。
下图是空白折叠的黄色
删除所有空格空白折叠消失
7.什么时间在元素外边要包一层div？什么时间不包div呢？
a.大的布局区域的划分，一般页面会先进行大区域的划分
b.大区域下里面的小区域还需要划分，小区域还需要划分成一块一块的，这个时候需要包div
c.一些行内元素，行内块因为布局上不太好调整就会将这些元素包在一个div里面。这里典型的是img元素，一般图片都是超链接的，典型的做法下面的写法
<div class="img">
<a href="">
<img src="img/cover2.jpg" alt="">
</a>
</div>
8.在列表排列的时候行内块和浮动都在什么时间用？各有什么区别？ 如果列表项的高度是固定的话优先用浮动，因为行内块有空白折叠的问题。当然这里用行内块也是可以的，但是要主要预留下空格的空间，或者你消除空白折叠。 如果列表项的高度不固定，要用行内块，同样要注意空白折叠。
9.在本项目里面可以总结出来哪些常见固定的元素结构写法？或者是套路写法？
1.logo的写法
另外一种做法：
<div class="logo left">
<h1>
<a href="">
豆瓣
</a>
</h1>
</div>
.header .logo a {
width: 154px;
height: 0;
overflow: hidden;
padding-top: 30px;
display: block;
background: url("../img/logo_db.png") no-repeat left top/100%;
}
2.input等元素一般套在form元素里面
<form>
<input type="text" class="txt" placeholder="电影、书籍、音乐">
<button>
<i class="iconfont iconxiazai17"></i>
</button>
</form>
3.img元素的典型做法
<div class="img">
<a href="">
<img src="img/cover2.jpg" alt="">
</a>
</div>
.img {
width: 80px;
height: 80px;
margin: 0 auto;
}
.img img {
display: block;
width: 100%;
}
- 两栏布局，三栏布局的做法
两栏布局的做法
<div class="container">
<div class="aside-left">
</div>
<div class="time-main">
</div>
</div>
.aside-left {
float: left;
width: 100px;
margin-right: 20px;
}
.time-main {
overflow: hidden;
}
三栏布局的做法
<div class="container">
<div class="aside-left">
</div>
<div class="aside-right">
</div>
<div class="main">
</div>
</div>
.aside-left {
float: left;
width: 100px;
margin-right: 20px;
}
.aside-right {
float: right;
width: 265px;
margin-left: 30px;
}
.main {
overflow:hidden;
}
5.在小区域中ul一般不再在外边包div。li里面一般也是直接放子元素。可以引申到块级元素一般外边一般不包div，而行内元素，行内块一般需要包div。
<ul class="list-item">
<li>
<div class="img"><a href=""><img src="./img/cover7.jpg" alt=""></a></div>
<div class="words">
<a href="">镀金时代</a>
<span>夏清影</span>
</div>
<div class="func"><a href="" class="link-block">免费试读</a> </div>
</li>
</ul>
10.vscode 的快捷键总结
option + shift + F 整理代码
cmd + option + ][ 注释代码
先选中某个区域，再 Control + d 选中相同内容的区域
11.为啥 a 要放在div的外边去解决鼠标点击的问题？ 如果是div里面放a元素，由于使用了微元素，微元素相当于在div里面加了一个子元素，而且是后加入的，这样就盖在a元素上面，自然a元素没有办法相应点击事件。做法就是a元素放在div的外边，这样a元素就可以相应点击点击事件了。可以相应点击事件和不可以相应点击的事件的一个具体表现就是放在a元素上面会显示一个小手的图标。
<div class="img iconfont iconbofang">
<a href="">
<img src="img/cover3.jpg" alt="">
</a>
</div>
调整后的代码
<a href="">
<div class="img iconfont iconbofang">
<img src="img/cover3.jpg" alt="">
</div>
</a>
- text-align: justify 这个怎么理解？
text-align:justify 是一种分散对齐，这个项目可以针对前面使用行内块去排布ul的情况，并且一排是两个的情况进行处理，而且justify只能针对最后一排前面的进行处理，所以这里要想去处理还需要在ul的再一个宽度为100%的伪元素，只有这样才能处理原本的以后一行。对于一排不是2个的情况，无法处理，还是要设置margin-right 去处理。
.hot-main ul{
text-align: justify;
line-height: 1.5;
}
.hot-main ul::after{
content: "";
display: inline-block;
width: 100%;
}
13.为什么有时候会出现浏览器显示的元素结构和我们写的不一致的情况，原因可能有哪些呢？
<p class="red">
Lorem, ipsum dolor.
<ul >
<li>Lorem.</li>
<li>Earum.</li>
<li>Sapiente.</li>
</ul>
</p>
.red li {
background-color: red;
}
我们发现元素的结构发生了改变，就需要去查MDN,是不是p元素里面不能放ul元素。
14.什么会出现 外边距的合并问题 上下外边距的合并？
就是当前的要考虑的元素在包含块中处于常规流的布局中就可能会出现，如果当前元素不是常规流，那么和这个元素之间就不会产生外边距，上下外边距的合并。如果要比较的元素处于另外一个BFC中，更不会产生外边距合并。
两个常规流块盒，上下外边距（margin）相邻，会进行合并。
发生外边距的元素有两种关系：
- 两个兄弟元素之间的合并
/* 下面的child1 和 child2 之间垂直间距为 100 而不是 150*/
.child1{
background: lightblue;
height: 300px;
margin-bottom:50px;
}
.child2{
background: red;
height: 100px;
margin-top: 100px;
width: 200px;
}
- 父子元素之间的合并 父子元素一个不设置，默认是0，也会产生合并。只要有一个设置了，另外一个不设置，也会产生合并。
.parent{
background: lightblue;
height: 300px;
margin-top:50px;
/* 用下面的代码代替上面的代码 也就是替代办法*/
/* padding-top: 50px; */
}
.child{
height: 100px;
background: red;
margin-top: 50px;
width: 200px;
}
合并规则：
- 两个外边距取大的哪个值
- 条件：必须是margin要相邻，这里相邻必须是两个margin相邻，如果一个父元素的padding 和子元素的margin 之间的挨着不会产生合并.
15.哪些情况会产生BFC?
1.根元素 意味着，<html>元素创建的BFC区域，覆盖了网页中所有的元素，根元素是创建BFC的元素。
2.浮动和绝对定位元素（当然也包括固定定位，固定定位是绝对定位的一种特殊情况而已）
3.overflow不等于visible的块盒
