电脑技术网——专业手机电脑知识平台,关注科技、手机、电脑、智能硬件
HTMLCSSHTML5Bootstrap

css网页的几种布局实例

2020-10-29 12:08:43 出处:[ 菜菜电脑网 ] 人气:次阅读
本文主要引介了浅谈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%宽度,后面的元素通过负边距可以解决问题Pardosa。当负的边距大约自身的宽度将,只要没有人少于自身宽度就一定会Pardosa</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语法详述 http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html</p>		<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-button"><i>+</i>附加</p>                <p class="layout2">                    <p class="modal-dialog2">                        <span class="modal-text">你是我的小可爱</span>                        <span id="close">废弃</span>                    </p>                </p>            </p>        </p>    </p></body><script type="text/javascript">    document.getElementById("delete-button").onclick= function(){        var layout = document.getElementById("layout")        layout.style.display = "block"    }    document.getElementById("confirm").onclick=function(){        var layout = document.getElementById("layout")        layout.style.display = "none"    }    document.getElementById("cancel").onclick=function(){        var layout = document.getElementById("layout")        layout.style.display = "none"    }    document.getElementById("add-button").onclick=function(){        var layout = document.getElementsByClassName("layout2")        layout[0].style.display = "block"    }    document.getElementById("close").onclick=function(){        var layout = document.getElementsByClassName("layout2")        layout[0].style.display = "none"    }</script></html>

如果我们尝试把父容器上的transform属性掺入,我们可以碰到 子容器没有人基于父容器定位,而是基于body定位的,宽度也是基于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 水平竖直亦同*/    .modal-dialog{        width: 500px;        height: 200px;        border-radius: 10px;        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-button"><i>+</i>填充</p>                <p class="layout2">                    <p class="modal-dialog2">                        <span class="modal-text">你是我的小可爱</span>                        <span id="close">关停</span>                    </p>                </p>            </p>        </p>    </p></body><script type="text/javascript">    document.getElementById("delete-button").onclick= function(){        var layout = document.getElementById("layout")        layout.style.display = "block"    }    document.getElementById("confirm").onclick=function(){        var layout = document.getElementById("layout")        layout.style.display = "none"    }    document.getElementById("cancel").onclick=function(){        var layout = document.getElementById("layout")        layout.style.display = "none"    }    document.getElementById("add-button").onclick=function(){        var layout = document.getElementsByClassName("layout2")        layout[0].style.display = "block"    }    document.getElementById("close").onclick=function(){        var layout = document.getElementsByClassName("layout2")        layout[0].style.display = "none"    }</script></html>

第二:补救在手机上的震荡问题(ps:这个问题我详见了网上大神写就的一篇博客特地移往文末详细信息)

**一、**在webkit内核浏览器中 给fixed再加防抖样式 - webkit - transform: translateZ(0);

**二、**设置html 和body 的css {height:100%;overflow:auto;margin:0;} 这个影响全局样式不建议运用于。

三、在fiexd内设置position:absolute,如下:


<p style="position:fiexd;bottom:0px;">  <p style="position:absolute;">  </p></p>

4、百分比布局 主要通过设置元素的宽度为百分比或者高度为百分比。比如:width:50%; height:50%; 这样的拼写。

5、拥护式布局(主要采用媒体查看来借助鼓动式设计) 主要用到CSS3 @media 来认真各有不同终端的声势浩大式设计

主要在css文件中读取


@media screen and (max-width:600px){    只读当屏幕相等或之和600px时的样式}@media screen and (min-width:900px){    录入当屏幕大于或等于900px时的样式}@media screen and (min-width:600px) and (max-width:900px){    存储当屏幕在600px-900px之间的样式}@media screen and (max-device-width: 480px){    复制到第二大设备宽度为480px,比如说iPhone上的辨识,这里的max-device-width所指的是设备的实际分辨率,也就是指可用面积分辨率}@media only screen and (-webkit-min-device-pixel-ratio: 2){    加载专门针对iPhone4的移动设备样式}@media all and (orientation:portrait){    读取设备在平行时的样式}@media all and (orientation:landscape){    载入设备在交叉时的样式}@media not print and (max-width: 1200px){    not是用来无关某种制订的媒体类型    录入在除复印机设备和设备宽度多于1200px下的所有设备的样式}@media only screen and (max-device-width:240px){    only用来可知某种特定的媒体类型,可以用来考虑到不支持者媒体查看的浏览器。    载入必需在第二大设备宽度为240px的屏幕下采用的样式}

无关录用:

CSS网页错位怎么妥善处理

css网页布局注意事项

成文CSS网页布局错位宽度推算明确指出

以上就是css网页的几种布局实例的具体内容,更多商量高度重视php中文网其它特别文章!

关于我们 - 广告合作 - 联系我们 - 免责声明 - 网站地图 - 投诉建议 - 在线投稿

©CopyRight 2008-2020 caicaipc.com Inc All Rights Reserved.
菜菜电脑网 版权所有 联系QQ:173533152