css之佈局結構篇

時間 2019-12-01

標籤 css 佈局結構欄目 CSS 简体版

原文原文鏈接

1、如何實現左端寬度固定，右端寬度自適應

//DOM公共部分結構
<div class='box'>
    <div class='box-left'></div>
    <div class='box-right'></div>
</div>
複製代碼

1.利用 float + margin 實現

.box{
        height: 200px;
    }
    .box>div{
        height: 100%;
    }
    .box-left{
        width: 200px;
        float: left;
        background: blue;
    }
    .box-right{
        margin-left: 200px;
        background: red;
    }
複製代碼

2.利用calc計算寬度

.box{
        height: 200px;
    }
    .box>div{
        height: 100%;
    }
    .box-left{
        width: 200px;
        float: left;
        background: blue;
    }
    .box-right{
        width: calc(100% - 200px);//注意這邊寫法 ‘-’ 號兩邊要要空格 否則不識別
        float: right;
        background: red;
    }
複製代碼

3.利用float + overflow實現

.box{
        height:200px;
    }
    .box>div{
        height:100%;
    }
    .box-left{
        width:200px;
        background:blue;
        float:left
    }
    .box-right{
        overflow:hidden;
        background:red;
    }
複製代碼

3.利用flex-grow實現

.box{
        height:200px;
        display: flex;
    }
    .box>div{
        height:100%;
    }
    .box-left{
        width:200px;
        background:blue;
        float:left
    }
    .box-right{
        background: red;
        flex-grow: 1;//flex-grow屬性都爲1，則它們將等分剩餘空間
    }
複製代碼

2、聖盃佈局和雙飛翼佈局的實現方法和區別

實現效果：聖盃佈局和雙飛翼佈局達到的效果基本相同，都是側邊兩欄寬度固定，中間欄寬度自適應。 二者區別：主要不一樣之處就是在解決中間部分被擋住的問題時，採起的解決辦法不同，聖盃佈局是在父元素上設置了padding-left和padding-right，在給左右兩邊的內容設置position爲relative，經過左移和右移來使得左右兩邊的內容得以很好的展示，而雙飛翼則是在center這個div中在加一個div來放置內容，給這個新的div設置margin-left和margin-right

雙飛翼佈局實現代碼：html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{
        font-size: 50px;
        font-weight: bolder;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .header{
        height: 60px;
        background: rosybrown;
    }
    .footer{
        height: 60px;
        background: rosybrown;
    }
    .context{
        overflow: hidden;
    }
    .context>div{
        float: left;
        height: 300px;
        line-height: 300px;
    }
    .middle{
        width: 100%;
    }
    .left{
        width: 200px;
        background: cornflowerblue;
        margin-left: -100%;
    }
    .right{
        width: 200px;
        background: darkblue;
        margin-left: -200px;
    }
    .center{
        background: darkorange;
        margin: 0 200px;
    }
</style>
<body>
    <div class="header">header</div>
    <div class="context">
        <div class="middle">
            <div class="center">center</div>
        </div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>
</html>
複製代碼

聖盃佈局實現代碼面試

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    body{
        font-size: 50px;
        font-weight: bolder;
        margin: 0;
        padding: 0;
        text-align: center;
    }
    .header{
        height: 60px;
        background: rosybrown;
    }
    .footer{
        height: 60px;
        background: rosybrown;
    }
    .context{
        overflow: hidden;
        padding: 0 200px;
    }
    .context>div{
        float: left;
        height: 300px;
        line-height: 300px;
    }
    .center{
        width: 100%;
        background: darkorange;
        box-sizing: border-box;
    }
    .left{
        width: 200px;
        margin-left: -200px;
        background: cornflowerblue;
        position: relative;
    }
    .right{
        width: 200px;
        margin-left: -200px;
        background: darkblue;
        position: relative;
        left: 200px;
    }
</style>
<body>
    <div class="header">header</div>
    <div class="context">
        <div class="left">left</div>
        <div class="center">center</div>
        <div class="right">right</div>
    </div>
    <div class="footer">footer</div>
</body>
</html>
複製代碼

ps:感受我不怎麼用到這個東西，我都是flex佈局來的！bash

3、如何讓一個元素水平垂直居中

這個是一個很常見的問題,在工做中和麪試中好像常常會碰到這種問題，我本身就在面試中被問到了好幾回。這邊也就簡單的總結一下 方法一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .center{
        width: 300px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: -150px;
        margin-left: -150px;
        background: burlywood;
        text-align: center;
    }
</style>
<body>
    <div class="center">center</div>
</body>
</html>
複製代碼

方法二佈局

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .center{
        width: 300px;
        height: 300px;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        background: burlywood;
        text-align: center;        
    }
</style>
<body>
    <div class="center">center</div>
</body>
</html>
複製代碼

方法三flex

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    .center{
        width: 300px;
        height: 300px;
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
        background: burlywood;
        text-align: center;        
    }
</style>
<body>
    <div class="center">center</div>
</body>
</html>
複製代碼

還有啥問題我想不大起來了，後面遇到了在補吧。不過如今的flex 佈局更方便的但會遇到一些兼容性問題，好比在ie中和min-height min-width 不能兼容這個得注意。不過有這個方法以後佈局就更簡單了。ui

相關標籤/搜索

每日一句

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