百分比、聖盃和雙飛翼佈局

時間 2019-11-09

標籤百分比雙飛佈局简体版

原文原文鏈接

1.javascript

百分比佈局：核心全部的百分比都是相對父級的css

Div{width:50%;}div的寬是它父級元素寬的百分之五十html

谷歌瀏覽器默認字體大小16px,最小字體是10px。java

面試題html{font-size:62.5%} 由於62.5%*16=10px 這樣方便計算整個頁面的字體大小都是10px，由於字體能夠繼承。面試

Css中哪些屬性是能夠繼承的？瀏覽器

Font text line-height color visibility list-style佈局

2.聖盃佈局：字體

兩端固定，中間自適應spa

<!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>htm

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設置爲負數自身元素就會向右移動

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。