首页 > 代码库 > 前端样式实践出真知系列(一)

前端样式实践出真知系列(一)

1、float:对前面的元素不会有影响,无论是块级元素还是行内元素的float,对后面的元素的影响都是:先假设当前元素不存在,后面元素的位置应该是什么样子的,然后再考虑下,float后的元素的大小是其真正的大小(即使是块级元素,大小=内容+padding+border+margin),这个大小会对后一个元素形成挤压。

(备注:float和postion:absolution的主要区别是前者不会后受影响的内容重叠,会形成挤压,后者会重叠,相当于在另一个层上。)

使用float和postion:absolution的元素的宽高都不会影响父元素的宽高,因为已不属于父元素内容的一部分。

2、很多元素尤其默认的属性,我们经常需要对其进行格式化(如dd默认右外边距-webkit-margin-start: 40px;

3、父容器(如div),大小固定时,子容器(未设宽度时,默认父容器的宽度)内容超过父容器宽度时就会自动换行,除非子容器显示定义了宽度(可能比父容器宽,但父容器宽度不会随之增大)。

4、元素类型:inline和block,即行内元素和块级元素,这里有个要注意的点: inline类型的无法指定宽(width)和高(height)。padding(内边距)和margin(外边距)可以被应用到inline显示的元素,但是不会影响包含的元素。

除了inline和block类型的显示,这里还有一个inline-block的显示方式。它显示的方式类似于inline,但是它相关的属性,例如,宽度,高度还有padding/margin等等遵循于block显示类型的规则。inline-block可以帮助我们实现类似float元素的效果,但是也有自己的问题。

前端样式实践出真知系列(一)