1、左边固定,右边自适应布局的两种实现方式效果图如下:大屏展示:小屏展示: 第一种实现方式通过负边距与浮动 实现左边固定,右边自适应的布局。 主要代码如下: .left{ float: left; width: 100%; height: 200px; background-color: red; } .left-content{ margin-left: 30%; } .right{ float: left; widt...
本文主要介绍了浅谈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语法介绍
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-butto2023-07-27
CSS常用布局介绍:单栏双栏,圣杯,双飞翼/附各类居中技巧 
