css页面布局实例(css设置绝对布局)
各位老铁们好，相信很多人对css页面布局实例都不是特别的了解，因此呢，今天就来为大家分享下关于css页面布局实例以及css设置绝对布局的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！
css网页的几种布局实例
本文主要介绍了浅谈css网页的几种布局的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧，希望能帮助到大家。
2018年已经过了一周，总结一下2017年在公司wiki上写的一篇关于css布局的知识，当时也借鉴了几个大神写的css布局知识，和自己在项目中遇到的坑。废话不多说。请看以下的干货。
1、左边固定，右边自适应布局的两种实现方式
效果图如下：
大屏展示：
小屏展示：
第一种实现方式通过负边距与浮动实现左边固定，右边自适应的布局。主要代码如下：
<style type="text/css">
.left{
float: left;
width: 100%;
height: 200px;
background-color: red;
}
.left-content{
margin-left: 30%;
}
.right{
float: left;
width: 30%;
margin-left:-100%;
height: 200px;
background-color: green;
}
.layout0{
clear: both;
width: 100px;
height: 100px;
background-color: yellow;
}
</style>
<body>
<p id="body">
<p class="left">
<p class="left-content">
设置子元素的margin,然后父元素必须浮动。
用父元素包裹，主要是因为right会覆盖left，从而导致left内容不可以看到，如果直接在left上设置margin或者padding会导致布局变化，因此只能再用一个p包裹内容，并且去除right覆盖的宽度。
</p>
</p>
<p class="right">-margin必须大于或等于自身的宽度才会上移</p>
<p class="layout0"></p>
</p>
</body>实现过程中需要注意的是:
1.自适应的容器需要容器包裹住，否则容器内的内容会被覆盖。
2.right容器的负边距必须大于或等于自身的宽度才会上移。
3.如果right容器负边距等于自身的宽度它会靠右对齐，如果负边距等于-100%，则会靠左对齐。
第二种通过浮动布局来实现左边固定，右边自适应的布局
主要的代码如下：
<style type="text/css">
.left{
float: left;
width: 200px;
height: 200px;
background-color: yellow;
}
.right{
padding-left: 200px;
height: 200px;
background-color: red;
}
@media(min-width: 650px) and(max-width: 1000px){
.left{
width: 150px;
}
.right{
margin-left: 150px;
}
}
@media(max-width: 640px){
.left{
width: 100px;
}
.right{
margin-left: 100px;
}
}
</style>
<body>
<p id="main">
<p class="left">左边固定宽度，右边自适应</p>
<p class="right"></p>
</p>
</body>实现过程中需要注意的是： 1. left需要脱离文档流，而right只需要正常显示就可以。
2.left只是覆盖在right上边，因此想要让right内容完整显示需要给right padding-left或者margin-left。
大屏展示：
小屏展示：
主要代码如下：
<style type="text/css">
#head{
height: 200px;
background-color: yellow;
}
#body{
width: 100%;
float: left;
}
.main{
background-color: green;
min-height: 200px;
margin: 0 210px;
}
.left{
float: left;
background-color: red;
width: 200px;
height: 200px;
margin-left:-100%;
}
.right{
float: right;
background-color: blue;
width: 200px;
height: 200px;
margin-left:-200px;
}
#footer{
clear: both;
height: 200px;
background-color: orange;
}
</style>
<body>
<p id="head">即左右固定，中间自适应，它可以利用margin-left为负数来实现，它的实现原理就是margin为负值可以改变float元素的排列位置</p>
<p id="body">
<p class="main">当多个元素同时从标准流中脱离开来时，如果前一个元素的宽度为100%宽度，后面的元素通过负边距可以实现上移。当负的边距超过自身的宽度将上移，只要没有超过自身宽度就不会上移</p>
</p>
<p class="left"></p>
<p class="right"></p>
<p id="footer"></p>
</body>实现过程中需要注意:
1.中间自适应的p需要放在left和right容器前面并且内容p需要用父容器包裹
2.left和right容器向同一个方向浮动。
主要代码如下：
<style type="text/css">
#head{
height: 200px;
background-color: yellow;
}
#body{
overflow: hidden;
}
.left{
float: left;
background-color: red;
width: 200px;
height: 200px;
}
.right{
float: right;
background-color: blue;
width: 200px;
height: 200px;
}
.main{
background-color: green;
height: 200px;
margin: 0 210px;
}
#footer{
clear: both;
height: 200px;
background-color: orange;
}
</style>
<body>
<p id="head">左右固定宽度并且向两边浮动，中间的p设置两边的margin</p>
<p id="body">
<p class="left"></p>
<p class="right"></p>
<p class="main">该方案有一个缺陷，在小屏幕情况下回导致right被挤下去，main没有了</p>
</p>
<p id="footer"></p>
</body>实现过程中需要注意:
1.该方式只需要注意中间自适应的p需要放在left和right容器的后面。
2.left和right容器向两边浮动。
主要代码如下：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<head>
<title>使用flex实现“双飞翼布局”</title>
</head>
<style type="text/css">
#main{
display: flex;
display:-webkit-flex;//谷歌浏览器加前缀
flex-flow: row nowrap;
justify-content: flex-start;
align-items: center;
}
.left{
flex: 0 0 auto;
width:100px;
height: 200px;
background-color: red;
word-wrap: break-word;
overflow: hidden;
}
.main{
flex: 1 1 auto;
height: 200px;
background-color: green;
}
.right{
flex: 0 0 auto;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
<body>
<p id="main">
<p class="left">flex语法我参照了阮一峰关于flex语法介绍 ;
<p class="main"></p>
<p class="right"></p>
</p>
</body>
</html>如果未了解过flex布局请移至文末点击链接查看阮一峰大神写的关于flex语法
3、定位布局
这边就不絮絮叨叨的讲一些基础的css定位知识了（ps:不会的请自行到w3c官网查阅），我主要来讲解一下工作中遇到的坑。以免其他人和我一样掉入坑中。
第一：使用多个fixed时，注意自己需要基于什么定位，因为如果父级有用transform属性时，可能会导致子元素的fixed基于父元素容器定位，而不是基于body定位。效果如下：
在上图中我可以发现中间黑色的小框是基于父级来定位，并且宽度也基于父容器的50%。详细的请看下面代码：
<!DOCTYPE html>
<html>
<head>
<title>关于position的定位的坑</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
i{
font-style: normal;
cursor: pointer;
}
#delete-button{
position: absolute;
left: 45%;
top: 45%;
text-align: center;
vertical-align: middle;
height: 50px;
margin: auto;
cursor: pointer;
}
#delete-button> i{
display: inline-block;
width: 32px;
height: 32px;
border-radius: 16px;
background-color: orange;
color: red;
font-size: 32px;
vertical-align: middle;
line-height: 28px;
}
/*第一个模态框的样式*/
#layout{
display: none;
width: 100%;
height: 100%;
}
/*使用flex布局水平竖直居中*/
/*#layout-box{
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
display: flex;
display:-webkit-flex;
flex-flow: column nowrap;
justify-content: center;
align-items: center;
background-color: rgba(0,0,0,0.3);
}*/
/*使用postion和 transform水平垂直居中*/
#layout-box{
position: fixed;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.3);
}
.modal-dialog{
position: absolute;
left: 50%;
top: 50%;
width: 500px;
height: 200px;
border-radius: 10px;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
background-color:#fff;
}
.dialog-title{
text-align: center;
color:#333;
font-size: 28px;
margin-bottom: 10px;
}
.dialog-content{
text-align: center;
color:#666;
font-size: 18px;
}
.dialog-button{
margin-top: 20px;
width: 100%;
color:#333;
}
.dialog-button>.button-box{
display: inline-block;
width: 48%;
text-align: center;
}
.button-box span{
display: inline-block;
padding: 10px;
color:#fff;
border-radius: 6px;
cursor: pointer;
}
#confirm{
background-color:#27ad9a;
}
#cancel{
background-color: red;
}
/*添加按钮的样式*/
#add-button> i{
display: inline-block;
width: 32px;
height: 32px;
border-radius: 16px;
background-color:#27ad9a;
color:#fff;
font-size: 32px;
vertical-align: middle;
line-height: 28px;
text-align: center;
}
#add-button{
display: inline-block;
cursor: pointer;
}
/*第二个模态框的样式*/
.layout2{
display: none;
position: fixed;
width: 100%;
height: 100%;
left: 0;
top: 0;
background-color: rgba(0,0,0,0.2);
}
.modal-dialog2{
position: fixed;
left: 50%;
top: 50%;
width: 50%;
height: 50%;
border-radius: 10px;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-o-transform: translate(-50%,-50%);
background-color: rgba(0,0,0,0.2);
}
.modal-dialog2> span{
display: block;
}
.modal-text{
float: left;
}
#close{
color: red;
font-size: 24px;
float: right;
cursor: pointer;
}
</style>
<body>
<p id="delete-button"><i>-</i>删除</p>
<p id="layout">
<p id="layout-box">
<p class="modal-dialog">
<p class="dialog-title">提示</p>
<p class="dialog-content">是否删除该项,点击确定</p>
<p class="dialog-button">
<p class="button-box">
<span id="confirm">确定</span>
</p>
<p class="button-box">
<span id="cancel">取消</span>
</p>
</p>
<p id="add-butto
前端面试题系列之-CSS及页面布局篇
CSS3弹性盒（ Flexible Box或 flexbox），是一种当页面需要适应不同的屏幕大小以及设备类型时确保元素拥有恰当的行为的布局方式。引入弹性盒布局模型的目的是提供一种更加有效的方式来对一个容器中的子元素进行排列、对齐和分配空白空间。可以用简单的方式满足很多常见的复杂的布局需求。它的优势在于开发人员只是声明布局应该具有的行为，而不需要给出具体的实现方式。浏览器会负责完成实际的布局。该布局模型在主流浏览器中都得到了支持。
采用flex布局的元素，成为flex容器。它的所有子元素自动成为容器成员，称为flex项目。常用的，设置到容器上的属性有：
设置到项目上的属性：
(Block Formatting Context)块级格式化上下文。BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之也如此.并且在一个BFC中，块盒与行盒（行盒由一行中所有的内联元素所组成）都会垂直的沿着其父元素的边框排列。
上述方法都可以创建BFC，但是会带来一些负面影响：
::before是css3的写法，:before是css2的写法，用来设置对象前的内容
:before的兼容性要比::before好
更准确的说法
1、transition是过渡，是样式值的变化的过程，只有开始和结束；animation其实也叫关键帧，通过和 keyframe结合可以设置中间帧的一个状态；
2、animation配合@keyframe可以不触发时间就触发这个过程，而 transition需要通过 hover或者 js事件来配合触发；
3、animation可以设置很多的属性，比如循环次数，动画结束的状态等等，transition只能触发一次；
4、animation可以结合 keyframe设置每一帧，但是 transition只有两帧；
常规方法
不需要使用transform属性时
webkit内核
参考链接：
CSS实现不换行/自动换行/文本超出隐藏显示省略号
object-fit CSS属性指定可替换元素的内容应该如何适应到其使用的高度和宽度确定的框。这个CSS属性可以达到最佳最完美的居中自动剪裁图片的功能
@import规则一定要先于除了@charset的其他任何CSS规则。
不推荐使用@import:
因为浏览器的兼容的问题，不同浏览器有些标签的默认值是不同的，如果没有CSS初始化往往会出现浏览器之间的页面显示差异。
伪元素和伪类的区别总结
css继承指的是被包在内部的标签将拥有外部标签的样式性，即子元素可以继承父元素的属性。
相关链接：
CSS继承，哪些属性能继承，哪些不能
z-index可以改变元素层叠顺序，z-index较大的会叠加在z-index较小的元素上方。z-index值相同时，则按照文档流顺序，后面的覆盖前边的。
px就是pixel的缩写，意为像素。px就是一张图片最小的一个点，一张位图就是千千万万的这样的点构成的，比如常常听到的电脑像素是1024x768的，表示的是水平方向是1024个像素点，垂直方向是768个像素点。注意css中的1px并不一定是物理像素的一个像素块，需要根据DPR计算，对应多少物理像素块
设备像素比：dpr=物理像素/逻辑像素(px)，例如，iPhone6的dpr为2，物理像素750（x轴）,则它的逻辑像素为375
参考物是父元素的font-size，具有继承的特点。如果自身定义了font-size按自身来计算（浏览器默认字体是16px），整个页面内1em不是一个固定的值。
css3新单位，相对于根元素html（网页）的font-size，不会像em那样，依赖于父元素的字体大小，而造成混乱。
css3新单位，viewpoint width的缩写，视窗宽度，1vw等于视窗宽度的1%。举个例子：浏览器宽度1200px, 1 vw= 1200px/100= 12 px。
1英寸（inch）=2.54厘米（cm）
手机对角线的长度换算成英寸
屏幕横向和纵向的像素点
1px即代表一个物理像素点/像素块
PPI，是每英寸可以显示的像素点的英文缩写。如果说上面分辨率是一个质量总量的概念，那么，ppi就是密度的概念。我们可以通过屏幕的像素总量除以屏幕大小来计算屏幕的PPI，公式如下： a：横向像素数量，b：纵向像素数量，c：屏幕尺寸（英寸）
1px与多少厘米之间是不能直接划等号的，需要看分辨率。
一般电脑的像素分辨率是72ppi，计算公式：(((1**2+ 1**2)**0.5)/72)*2.54，此时1px=0.0498cm，1cm=25px；
很多手机是300ppi，计算公式：(((1**2+ 1**2)**0.5)/300)*2.54，此时1px=0.0119cm。
参考链接：
画一条0.5px的线
在继承性上：
一开始针对低版本的浏览器构建页面，满足最基本的功能，再针对高级浏览器进行效果，交互，追加各种功能以达到更好用户体验,换句话说，就是以最低要求，实现最基础功能为基本，向上兼容。以css为例，以下这种写法就是渐进增强。
一开始针对一个高版本的浏览器构建页面，先完善所有的功能。然后针对各个不同的浏览器进行测试，修复，保证低级浏览器也有基本功能就好，低级浏览器被认为“简陋却无妨(poor, but passable)”可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。也就是以高要求，高版本为基准，向下兼容。同样以css为例，优雅降级的写法如下。
渐进增强，开发时间长，成本高，优雅降级，节约成本，开发周期短。
...其中最常用的是div加css进行页面布局 阐述这种布局的
优点：
第一、利于搜索引擎蜘蛛爬行
根据总结和经验，div+css布局有利于蜘蛛的爬行，拿html的table布局和div+css布局的网页来做对比，很显然table的字节大于div+css的，字节小就有益于搜索引擎蜘蛛下载页面所用的时间，而且也有益于蜘蛛爬行到网站深处。
第二、易于修改
在一般情况下，div+css布局的网站，都是将html页面和css文件分开的，div+css的特点就是能将网页的内容和表现形式分离，所以，假如你要修改网站整站布局的话，一般只需要修改css文件里的的个别属性即可，而这种特点是table不具备的。
第三、减少网页加载时间
前面就提到过，div+css是将css文件和html文件分开的，当用户点击网站时，是在同时下载css文件和html文件，所以可以提高打开网页的速度。
缺点：
第一、开发技术高
众所周知，div+css要兼容各种浏览器，这样增加了div+css开发的难度。
第二、开发时间长
div+css布局相对于table布局来说，div+css的耗费时间要比table布局的时间长很多，另外考虑到浏览器兼容的问题，各种浏览器间的测试也是一个费时的事情。
第三、开发成本高
就上两点所说，高技术和长时间决定了他的成本。
关于css页面布局实例的内容到此结束，希望对大家有所帮助。