css布局方式，css页面布局
今天给各位分享css布局方式的知识，其中也会对css页面布局进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！
CSS3布局方式有哪些
1.静态布局
——最传统的布局方式，网页中所有尺寸都是由px作为单位，设置了min-width,如果宽度小于就会出现滚动条，如果大于这个宽度则内容居中外加背景
实现方式：PC：居中布局，所有样式使用绝对宽度/高度(px)，设计一个Layout，在屏幕宽高有调整时，使用横向和竖向的滚动条来查阅被遮掩部分；
移动设备：另外建立移动网站，单独设计一个布局，使用不同的域名如wap.或m.。
优点：采用之前的css2的布局·方式，布局简单，没有兼容性问题。
缺点:在手机端不能合理的显示，移动端不能使用pc端页面，需要再写一个布局来呈现。
实践案例：Float布局、绝对布局
2.自适应布局
——可以看成是不同屏幕下由多个静态布局组成的。自适应布局是为不同的屏幕分辨率分别定义不同的布局。改变屏幕分辨率可以切换不同的静态布局（页面元素位置可能发生改变），但在每个静态布局中，页面元素不随窗口大小的调整发生变化。自适应布局页面里面元素的位置会变化，很好的解决了流式布局中的大屏空间利用率不高弊端。
注：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
3.流失布局（百分比布局%）
网页中主要的划分区域的尺寸使用百分数（搭配min-*、max-*属性使用),分别为不同的屏幕设置布局格式，当屏幕大小改变时，会出现不同的布局，意思就是在这个屏幕下这个元素块在这个地方，但是在那个屏幕下，这个元素块又会出现在那个地方。只是布局改变，元素不变。可以看成是不同屏幕下由多个静态布局组成的。
而流式布局的特点是随着屏幕的改变，页面的布局没有发生大的变化，可以进行适配调整，这个正好与自适应布局相补。使用%百分比定义宽度，高度大都是用px来固定住，可以根据可视区域(viewport)和父元素的实时尺寸进行调整，尽可能的适应各种分辨率。往往配合 max-width/min-width等属性控制尺寸流动范围以免过大或者过小影响阅读。这种布局方式在Web前端开发的早期历史上，用来应对不同尺寸的PC屏幕（那时屏幕尺寸的差异不会太大），在当今的移动端开发也是常用布局方式，但缺点明显：主要的问题是如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。因为宽度使用%百分比定义，但是高度和文字大小等大都是用px来固定，所以在大屏幕的手机下显示效果会变成有些页面元素宽度被拉的很长，但是高度、文字大小还是和原来一样（即，这些东西无法变得“流式”
注：屏幕分辨率变化时，页面里元素的大小会变化而但布局不变。
主要实践案例：左侧固定+右侧自适应、左右固定宽度+中间自适应、圣杯布局、双飞翼布局
4.响应式布局（媒体查询）
——通过响应式设计能使网站在手机和平板电脑上有更好的浏览阅读体验。屏幕尺寸不一样展示给用户的网页内容也不一样.利用媒体查询可以检测到屏幕的尺寸(主要检测宽度)，并设置不同的CSS样式，就可以实现响应式的布局。主要依靠是css的媒体查询。
注：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
5.弹性布局
——rem/em、flex布局
css布局方式有哪些,具体是什么意思
css布局方式有哪些：
五种基本布局定位类型:
*弹性布局-总体宽度及其中所有栏的值都以 em单位编写。这应使布局能够使用浏览器的指定基本字体大小缩放。对于视力不好的用户,这可能更有吸引力、更易于访问,因为栏宽度将变得更宽,能以任何大小显示更舒适、更可读的行长度。由于总体宽度将缩放,您的设计必须允许可这宽度。
*固定布局-总体宽度及其中所有栏的值都以像素单位编写。布局位于用户浏览器的中心。
*流体布局-总体宽度及其中所有栏的值都以百分比编写。百分比通过用户浏览器窗口的大小计算。
*混合布局-混合布局组合两种其他类型的布局-弹性和流体。页面的总宽度为 100%,但侧栏值设置为 em单位。
*绝对定位布局-所有前述布局的外栏使用浮动内容。而绝对定位布局完全如其名所示-有绝对定位的外栏。必须记住,当使用这些布局时,侧栏会“提出文档流程”,因而可能有一些不合适的结果(例如,页脚可能“看不见”在侧栏在何处结束并在主要内容区域包含的内容少于侧栏的页面与页脚重叠)。
CSS有几种实现三栏布局的方法
这次给大家带来CSS有几种实现三栏布局的方法，CSS实现三栏布局的注意事项有哪些，下面就是实战案例，一起来看一下。
前言
其实不管是三栏布局还是两栏布局都是我们在平时项目里经常使用的，也许你不知道什么事三栏布局什么是两栏布局但实际已经在用，或许你知道三栏布局的一种或两种方法，但实际操作中也只会依赖那某一种方法，本文具体的介绍了三栏布局的四种方法，并介绍了它的使用场景。
所谓三栏布局就是指页面分为左中右三部分然后对中间一部分做自适应的一种布局方式。
1.绝对定位法
HTML代码如下:
<p class="left">Left</p>
<p class="main">Main</p>
<p class="right">Right</p>CSS代码如下：
//简单的进行CSS reset
body,html{
height:100%;
padding: 0px;
margin:0px;
}
//左右绝对定位
.left,.right{
position: absolute;
top:0px;
background: red;
height:100%;
}
.left{
left:0;
width:100px;
}
.right{
right:0px;
width:200px;
}
//中间使用margin空出左右元素所占据的空间
.main{
margin:0px 200px 0px 100px;
height:100%;
background: blue;
}该方法有个明显的缺点，就是如果中间栏含有最小宽度限制，或是含有宽度的内部元素，当浏览器宽度小到一定程度，会发生层重叠的情况。
2.圣杯布局
HTML代码如下：
//注意元素次序
<p class="main">Main</p>
<p class="left">Left</p>
<p class="right">Right</p>CSS代码如下：
//习惯性的CSS reset
body,html{
height:100%;
padding: 0;
margin: 0
}
//父元素body空出左右栏位
body{
padding-left: 100px;
padding-right: 200px;
}
//左边元素更改
.left{
background: red;
width: 100px;
float: left;
margin-left:-100%;
position: relative;
left:-100px;
height: 100%;
}
//中间部分
.main{
background: blue;
width: 100%;
height: 100%;
float: left;
}
//右边元素定义
.right{
background: red;
width: 200px;
height: 100%;
float: left;
margin-left:-200px;
position: relative;
right:-200px;
}相关解释如下：
(1)中间部分需要根据浏览器宽度的变化而变化，所以要用100%，这里设左中右向左浮动，因为中间100%，左层和右层根本没有位置上去
(2)把左层margin负100后，发现left上去了，因为负到出窗口没位置了，只能往上挪
(3)按第二步这个方法，可以得出它只要挪动窗口宽度那么宽就能到最左边了，利用负边距，把左右栏定位
(4)但由于左右栏遮挡住了中间部分，于是采用相对定位方法，各自相对于自己把自己挪出去，得到最终结果
3.双飞翼布局
HTML代码如下：
<p class="main">
<p class="inner">
Main
</p>
</p>
<p class="left">Left</p>
<p class="right">Right</p>CSS代码如下：
//CSS reset
body,html{
height:100%;
padding: 0;
margin: 0
}
body{
/*padding-left:100px;*/
/*padding-right:200px;*/
}
.left{
background: red;
width: 100px;
float: left;
margin-left:-100%;
height: 100%;
/*position: relative;*/
/*left:-100px;*/
}
.main{
background: blue;
width: 100%;
float: left;
height: 100%;
}
.right{
background: red;
width: 200px;
float: left;
margin-left:-200px;
height: 100%;
/*position:relative;*/
/*right:-200px;*/
}
//新增inner元素
.inner{
margin-left: 100px;
margin-right: 200px;
}圣杯布局实际看起来是复杂的后期维护性也不是很高，在淘宝UED的探讨下，出来了一种新的布局方式就是双飞翼布局，代码如上。增加多一个p就可以不用相对布局了，只用到了浮动和负边距。和圣杯布局差异的地方已经被注释。
4.浮动
HTML代码如下：
//注意元素次序
<p class="left">Left</p>
<p class="right">Right</p>
<p class="main">Main</p>CSS代码如下：
//CSS reset
body,html{
height:100%;
padding: 0;
margin: 0
}
//左栏左浮动
.left{
background: red;
width: 100px;
float: left;
height: 100%;
}
//中间自适应
.main{
background: blue;
height: 100%;
margin:0px 200px 0px 100px;
}
//右栏右浮动
.right{
background: red;
width: 200px;
float: right;
height: 100%;
}这种方式代码足够简洁与高效，也容易理解
相信看了本文案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！
推荐阅读：
用HTML+CSS实现下拉菜单
用CSS3实现发光方格边框
CSS做出鼠标上移图标旋转
关于css布局方式到此分享完毕，希望能帮助到您。