Web前端布局

标准文档流

  • 标准文档流为从上到下排列

  • 这样的布局显得呆板，如果想要横过来

浮动

  • 所谓元素的浮动是指设置了浮动属性的元素会脱离标准文档流的控制，移动到其父元素中指定位置的过程。

注意：使用浮动那么接下来的不用浮动的元素记得清楚浮动，清除浮动操作详见塌陷解决和清楚同级子元素浮动。

选择器float: 属性值：

1
2
3
div{
    float: left;
}

说明：

如果未有设置浮动的元素和其浮动的元素一起用，那么为设置浮动的将会占在浮动元素的本身位置上进行定位（其实是设置浮动的元素的碰撞箱没有了），也就是说会覆盖掉浮动位置的元素位置，除非两者都是浮动。

塌陷解决

如果有父元素包裹浮动元素那么就有可能造成塌陷，塌陷就是指父元素未定义长宽所以并不会被子元素撑开，想要防止塌陷那就要在父类的时候进行塌陷消除，那就要使用overflow属性设置为hidden。

1
2
3
dicv{
    overflow: hidden;
}

第二种：

1
2
3
4
5
.father:after{
	content: "";
	display: block;
	clear: both;
}

清除同级子元素浮动

1
2
3
div{
    clear: both;
}

clear只能清除元素左右两侧浮动影响；

  • 脱离文档流之后，块元素的宽度和高度默认被内容撑开，除非事先定义好高宽；

  • 元素浮动后，block块级元素的显示模式就变成了inline-block，宽度本身是100%的元素，因为显示模式的改变，宽度变为自身内容宽度。

  • block块级元素的宽是独占一行，如果不通过盒模型设置，宽度继承100%占满文档。

  • 行内元素浮动后变为行内 块元素（inline-block），不需要转成块元素，就能够设置宽度、高度了。

定位布局

position属性用于定义元素的定位模式，其基本语法格式如下：

1
2
3
div{
	position: relative;
}

relative为相对定位

absolute为绝对定位

relative相对定位：

保留了同级元素的碰撞箱，默认不覆盖到其他同级盒子，并且相对！！其进行定位

absolute绝对定位：

绝对定位，如果没有在其父元素知道相对定义(也就是父级元素定义position为relative)，则就是依据body来定位。

默认忽略掉同级元素盒子以父盒子或者body来进行定位。

固定位置

是以浏览器窗口为基准进行元素进行定位，脱离基本文档流。

overflow可以解决文档溢出问题

flex配合justify-content实现控件水平平均分布。