css的页面布局

2018-12-04  本文已影响0人  浩浩浩浩浩浩荡

css一直是头痛的地方,感觉写出来的页面乱七八糟的,不知道该怎么控制元素的位置,这次通过写新闻网前端页面,让自己学习了不少,会用position和flex后感觉前端页面也没那么难写..

1.通过position:relative来控制一个高宽固定的样式

1.position:relative 与 position:absolute来控制一个有具体高宽并且内容比较复杂的样式

外部div通过position:relative控制,通过left top right bottom和width,height来控制div在页面里的位置,
内部元素直接position:absolute,也通过left top right bottom,来控制与外部div的相对位置实现。
外部div最好能设置高宽,不然之后的div可能会乱套

2.通过flex来控制页面布局

2.flex

在写这种排列的样式可以通过flex来布局,
外部div套用display:flex来使得元素内部变成一个flex布局,
flex-wrap:warp可以使元素自动换行。
justify-content:center可以使元素水平居中

inline-block的意义

3.inline-block

display:inline-block可以使元素内容调整变成块状,但是布局又是通过inline排列。

都是些超基础的内容就可以控制页面布局了,但是之前框架用的太多了,基础差的一批,还是要多些才行

上一篇下一篇

猜你喜欢

热点阅读