CSS几种常见的页面布局方式介绍

问题：CSS几种常见的页面布局方式介绍？

CSS常见的有以下7种，必须要掌握的是前3种:
flex弹性盒子（弹性布局）；
rem布局（一般都是flex+rem使用的比较多）；
响应式布局（响应式布局的原理，和适配方案必修掌握）；
固定布局 / 流式布局（百分比布局）/ 浮动布局 / 定位布局；

Flexbox布局
flex布局又称弹性盒子，简单代码量少，可以不用左右浮动了
Flexbox布局在定义伸缩项目大小时伸缩容器会预留一些可用空间，让你可以调节伸缩项目的相对大小和位置。例如，你可以确保伸缩容器中的多余空间平均分配多个伸缩项目，当然，如果你的伸缩容器没有足够大的空间放置伸缩项目时，浏览器会根据一定的比例减少伸缩项目的大小，使其不溢出伸缩容器。综合而言，Flexbox布局功能主要具有以下几点：
第一，屏幕和浏览器窗口大小发生改变也可以灵活调整布局；
第二，可以指定伸缩项目沿着主轴或侧轴按比例分配额外空间（伸缩容器额外空间），从而调整伸缩项目的大小；
第三，可以指定伸缩项目沿着主轴或侧轴将伸缩容器额外空间，分配到伸缩项目之前、之后或之间；
第四，可以指定如何将垂直于元素布局轴的额外空间分布到该元素的周围；
第五，可以控制元素在页面上的布局方向；
第六，可以按照不同于文档对象模型（DOM）所指定排序方式对屏幕上的元素重新排序。也就是说可以在浏览器渲染中不按照文档流先后顺序重排伸缩项目顺序。

rem布局
rem根据页面宽度和的页面的根元素来控制大小，移动端常用方式之一
响应式布局，一套代码适应pc和移动端，设置好几个尺寸分别的样式，根据页面的宽度来改变样式
流式布局也叫百分比布局。把元素的宽,高,margin,padding不再用固定数值,改用百分比,这样元素的高,margin,padding 会根据页面的尺寸随时调整，已达到适应当前页面的目的
百分比是基于元素父级的大小计算得来的；
元素的水平或者竖直间距都是相对于父级的宽度计算的.(margin&padding)
边框不能用百分比设置
浮动布局关键词，float，可以设置left或者right，他使元素脱离文档流进而达到布局的目的，也是目前一个比较主流的布局方式，但是使用浮动的结束以后，别忘记清除浮动

定位布局
定位布局也是目前比较常用的一种布局方式，关键词： position: fixed;固定布局，将元素固定在一个位置，不随页面移动而移动，position: relative;相对定位，相对于元素自身定位，不脱离文档流，相当于定义一个参照物，一般和绝对定位结合使用，position: absolute;绝对定位，脱离文档流，一般和相对定位结合使用，如果不定义相对定义，将会相对于整个浏览器定位，所以定位布局，一般情况下都是相对定位和绝对定位结合着来，相当定位相当于划定一个势力范围，制定一个封闭的容器块，然后绝对定位就行对于相对定位来定位，从而达到有效的布局。

（3）问题扩展

结合布局方式，那么常见的就是css布局方式，对于css样式一般需要涉及到的就是实现以下三种布局：
实现div的水平居中和垂直居中
多元素水平居中
实现栅格化布局

（4）结合项目中使用

1）rem布局先设置根元素（font-size: 100px）方便计算，然后比如div需要100px宽度就是1rem 以此类推
2）流式布局以百分比为主要形式，让屏幕自适应，这种布局方式定义灵活，能够根据屏幕的情况变化，但是这种方式设计的效果不太容易控制，一般移动端结合rem用的比较多，pc端用的不是非常多

黑马程序员Web前端HTML5+CSS3+移动Web前端全套，零基础自学前端必备教程

CSS几种常见的页面布局方式介绍相关推荐

html中页面布局技术,CSS基础之几种常见的页面布局
CSS基础之几种常见的页面布局本人前端菜鸟一枚,在学习 CSS 过程中发现网上流传的教程参差不齐,要么内容不够详细,要么方法就是错的,按照它给出的方法不能实现我想要的目的.于是自己决定写一篇经验.如 ...
几种常见网络抓包方式介绍
几种常见网络抓包方式介绍一.网络分流器(TAP) 二.有网管功能的小交换机三.用两块网卡的Linux方案四.总结无论作为网络运维人员,还是安全渗透工程师,在工作中都会无可避免地碰到网络抓包的需 ...
css几种常见的单位
css几种常见的单位 1.px (pixel,像素):是一个虚拟长度单位,是计算机系统的数字化图像长度单位,如果px要换算成物理长度,需要指定精度DPI(Dots Per Inch,每英寸像素数),在 ...
一文带你掌握OBS的两种常见的鉴权方式
OBS提供了REST(Representational State Transfer)风格API,支持您通过HTTP/HTTPS请求调用.在调用OBS的API前,需要了解OBS的鉴权认证方式.本文就将 ...
9种常见的INTERNET接入方式
9种常见的INTERNET接入方式提到接入网,首先要涉及一个带宽问题,随着互联网技术的不断发展和完善,接入网的带宽被人们分为窄带和宽带,业内专家普遍认为宽带接入是未来发展方向. 宽带运营商网络结构如 ...
【微信小程序】小程序中几种跳转页面的方式
本期内容本期将介绍小程序中,几种跳转页面的方式以及区别目录 1.只能跳转到 tabBar 配置页面 2.返回上一级页面( delta:返回的页面数,默认值为 1,若 delta 大于现有页面数,则 ...
四种常见的高温阀门各自介绍与说明
四种常见的高温阀门各自介绍与说明 1 高温截止阀的选型问题及应用特点高温截止阀最大的特点就是耐高温高压,截止阀阀瓣开启和闭合时,阀体密封面间的摩擦也小于一般的闸阀,因此也有很好的耐磨性.使用寿命很 ...
常见的CSS页面布局方式
详情:CSS页面结构是我们日常生活中最常使用到的,当然目前可能大家用的最多的是elementUI实现布局,简单方柏霓,下面介绍几种常见的原生页面布局的方式公共的样式部分 <style>* ...
常见的5种网站页面布局方式及特点分析
互联网的世界里,网页是我们接触最多的内容展示平台(载体),各种风格设计及不同类型主题的网站数不胜数,笔者作为一名网页设计师,在关注内容本身的同时,也喜欢研究一下网站页面的设计特点,这不失为一种提升网页 ...

CSS几种常见的页面布局方式介绍

CSS几种常见的页面布局方式介绍相关推荐

最新文章

热门文章