Python：Day43 抽屉

1、关于inline-block和float的理解

inline-block和float都可以实现块级标签放在同一行上，inline不好设置左右对齐，只能通过margin和padding调节。而float可以设置左右对齐。

如果inline-block元素在最左边，而同排的folat元素设置向左浮动，那么这个Inline-block将被挤到float后面，原因是因为float本身就是为文本环绕效果而设计的，不会覆盖文本。float一般情况是不会上移的，只会左右浮动。如果上面元素为块级标签，那么不上移，如果上面元素为inline或inline-block标签，那么float会上移，将内容挤到后面。所以如果一行上有元素是float的，其它最好也使用float，这样位置调整好调一些。

当两个元素需要左右紧紧贴合在一起的时候用float，因为我们在写html的时候元素和元素之间通常是有空格或者隔行，这些空格浏览器会解释为一个空格，这样当元素设置为inline-block时，虽然两个元素在一行上了，但是中间会有间隙，这个间隙就是这个空格造成的。虽然可以通过更改后一个标签的margin为负值进行调节，但是由于这个空格的宽度不知道，所设置的数值只是感觉正好的一个值，不能达到非常精确。

2、关于img和background-image的理解

img是一个标签，是html的一部分，即是内容的一部分。在加载页面的时候就直接加载了。

background-image是CSS的一个样式，非内容的一部分，需要在html加载完成后才加载。

img加载的是整张图片，即使它有父边框，父边框的尺寸比图片小，图片也会整张显示，并超出父边框。如果Img只设width或height，则另一边按比例缩放。虽然img是内联标签，但是可以设置width和height，原因如下问。

而background-image是根据标签尺寸大小来显示的，当图片大于标签尺寸的时候，就只会显示图片一部分，这样就可以通过调整图片的位置完成窗口显示指定内容的目的。

2、为何<img>、<input>等内联元素可以设置宽高而<span>等内联元素却不可以？

几乎所有的替换元素都是行内元素，如<img>、<input>等。

替换元素一般有内在尺寸，所以具有width和height，可以设定。

3、CSS渲染顺序

CSS的渲染不是按照CSS的代码从上到下的顺序对HTML进行渲染的，而是根据HTML的代码顺序，然后到CSS中找相应的样式，然后进行渲染的。

4、height和line-height

height设置高度，不继承，但可以通过设定值为inherit来继承父元素，一共有4个值：

auto　　默认。浏览器会计算出实际的高度。

length　　使用 px、cm 等单位定义高度。

%　　基于包含它的块级对象的百分比高度。

inherit　　规定应该从父元素继承 height 属性的值。

line-height设置行高，继承！

5、背景图片会显示在padding区域。

6、内联元素也可以设置margin，因为margin是用于控制元素与元素之间的距离，而内联标签也是元素，所以是可以的。

7、text-align

设置或检索对象中内容的水平对齐方式，适用于块容器。可继承！可让块级标签中的内联标签按对方式对齐。

8、border-radius设置边框圆角。

9、去除ul标签前面的小点小的两种方法：

　　（1）使用ul标签的list-style属性，设置成None，前面的小点点就不见了

　　（2）将li标签的display设置成inline或Inline-block