关于浮动
- 使用场景:需要将大的布局排列成一行,一般使用浮动;对于小的布局排列一般使用inline-block即可;
- 浮动使用后一般需要清除浮动:clear:left/right/both 其中第一个的意思是该元素位置在左侧浮动元素的下方,其top在左侧浮动元素bottom元素的下方。
- 浮动可以通过设置margin来达到偏移的效果。如果需要在一列中实现水平平均布局,可以使用flex布局方式
- 浮动除了直接使用clear以外还可以使用伪元素(应用场景是① 将边框撑满;② 使行内元素在直接下方)具体代码为
.clearfix::after{
display: block;
content: "";
clear:both;
}
- 注意: 类似于该种伪元素可以用来撑开边框,或者使用
before
属性在第一个子元素前面再加一个伪元素。伪元素也可以有宽高,也可以有背景色,但是伪元素必须要有 content
,且其值必须为空。
关于定位
- 一般有两种定位方式
position:absolute/relative
其中使用 position: absolute
时一般在其父元素上面要设置相对定位,这样可以将定位确定为以父元素为标准。设置为绝对定位之后,若要设置为居中,可以使用left:50%; top:50%
, 然后在做一个偏移transform:translate(-50px, -50px)
,这样就可以实现居中操作。
- 关于相对定位,其标准就是子元素开始的位置,直接在下面设置
left: 100px; top: 100px
即可。相对定位其子元素开始的位置没有发生变化,位置依然会被占用。
网友评论