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

原文地址:https://www.cnblogs.com/sq5288/p/8758658.html