百分比圣杯和双飞翼布局
Posted yuanyeds
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了百分比圣杯和双飞翼布局相关的知识，希望对你有一定的参考价值。
1.
百分比布局：核心 所有的百分比都是相对父级的
Divwidth:50%;div的宽是它父级元素宽的百分之五十
谷歌浏览器默认字体大小16px,最小字体是10px。
面试题htmlfont-size:62.5% 因为62.5%*16=10px 这样方便计算整个页面的字体大小都 是10px，因为字体可以继承。
Css中哪些属性是可以继承的？
Font text line-height color visibility list-style
2.圣杯布局：
两端固定，中间自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.cont
width: 800px;
height: 100px;
border: 1px solid red;
margin: 0 auto;
padding:0 200px ;
.cont>div
float: left;
height: 100px;
.center
background: red;
width: 100%;
.left
background: gray;
width: 200px;
margin-left: -100%;
position: relative; /*相对自己的位置*/
/*right: 200px;*/
left: -200px;
.right
background: pink;
width: 200px;
margin-right: -200px;
.aa
width: 200px;
height: 200px;
background: blue;
</style>
</head>
<body>
<div class="cont">
<div class="center">
1111
</div>
<div class="left">
左
</div>
<div class="right">
右
</div>
</div>
<div class="aa">
</div>
</body>
</html>
<script type="text/javascript">
console.log("111");
</script>
3.双飞翼：中间固定，两边自适应
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.box
width: 800px;
height: 400px;
border: 1px solid red;
margin: 100px auto;
.box>div
float: left;
height: 400px;
.cont
width: 100%;
.center
background: red;
margin: 0 200px;
height: 400px;
.left
background: blue;
width: 200px;
margin-left: -100%;
.right
background: pink;
width: 200px;
margin-left: -200px;
</style>
</head>
<body>
<div class="box">
<div class="cont">
<div class="center">
哈哈哈
</div>
</div>
<div class="left">
zuo
</div>
<div class="right">
you
</div>
</div>
</body>
</html>
Magin-right设置为正数 不会对自身元素造成影响 让平行元素往右移动
Magin-left设置为负数 自身元素就会向右移动
以上是关于百分比圣杯和双飞翼布局的主要内容，如果未能解决你的问题，请参考以下文章