CSS属性固定页面头部(导航栏)

html-css013

CSS属性固定页面头部(导航栏),第1张

其实用postion: fixed并不是很方便,用position: sticky会更容易达到我们的目的。

只需要给头部设置:

即可。

将position设置为sticky,那么头部组件还会占有着上方空间,所以下面的body中的组件可以不用设置预留top。如果是用的fixed属性,那么body下面的组件也要算出导航栏的长度,再设置top属性,这样一来就麻烦了很多

三栏布局一般指的是页面中一共有三栏, 左右两栏宽度固定,中间自适应的布局 ,三栏布局的具体实现:

利用浮动和负边距来实现。父级元素设置左右的 padding,三列均设置向左浮动,中间一列放在最前面,宽度设置为父级元素的宽度,因此后面两列都被挤到了下一行,通过设置 margin 负值将其移动到上一行,再利用相对定位,定位到两边。

实现方式:左右元素浮动,中间元素左右marign值撑开两边距离。

例:

此时看似没有问题,可是如果中间内容过多,超出左右两边高度,我们将看到 文字环绕 问题,如下如所示。

解决办法:

补充flex左右布局,左边固定,右边自适应,并且两列等高自适应