css页面布局方式有哪些

时间:2020-05-01

静态布局

最传统的布局方式,网页中所有尺寸都是由px作为单位,设置了min-width,如果宽度小于就会出现滚动条,如果大于这个宽度则内容居中外加背景。

流式布局

页面元素以百分比的形式设置,元素宽高能够按照屏幕分辨率适应调整,但整体的布局不变。

特点:页面元素宽高可以自适应调整,但屏幕尺度跨度过大的情况下,页面不能正常显示。比如我们以百分比设置了按钮的宽度,但按钮上文字的大小是用px来设置的,当屏幕尺寸变大时,按钮被拉宽而字体大小没变,这样就会显得很不协调。

响应式布局

通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度),并设置不同的CSS样式,就可以实现响应式的布局。主要依靠是css的媒体查询。

弹性布局

弹性布局又称为盒子布局或flex布局,用来为盒状模型提供最大的灵活性,任何一个容器都可以指定为 Flex 布局。 给父容器添加display: flex/inline-flex;属性,即可使容器内容采用弹性布局显示,而不遵循常规文档流的显示方式;设为flex布局以后,子元素的float、clear和vertical-align属性将失效!

采用Flex布局的元素,称为Flex容器(flex container),简称”容器”。它的所有子元素自动成为容器成员,称为Flex项目(flex item),简称”项目”。

容器最核心的6个属性:

flex-direction, flex-wrap, flex-flow, justify-content, align-items, align-content

项目的6个核心属性:

order, flex-grow, flex-shrink, flex-basis, flex, align-self