国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

css常見的各種布局下----三列布局

番茄西紅柿 / 721人閱讀

css 三列布局，左右固定寬度右邊自適應

　　1不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局

　　　　　1.1.1 自適應部分一定要放第一個位子，使用浮動，并且設置寬度為100%，不設置浮動元素內容不夠稱不開整個寬度

　　　　　1.1.2 左右固定部位，使用margin-left :負數，使其左右靠齊

　　　　　1.1.3 中間自適應部分嵌套一個div，設置margin-left 和 margin-right 使其空出左右固定的寬度

DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>三列布局title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
    }
    .box .box-content {
        height: 100%;
        float: left; /* 一定要設置浮動，要不下面的模塊上不來 */
        width:100%;/* 一定要設置100%，要不內容不夠稱不開整個頁面 */
        background-color: blue; 
        /* 默認還是整行 */
        } 
    .box .box-content .child {
        margin: 0 210px;
            /* 中間模塊空出左右距離，設置浮動 */
        background: red;
        height: 100%;
    }
    .box .box-left { 
        width: 200px; float: left; 
        margin-left: -100%; /* 設置浮動， margin-left:-100% 可以使元素往上移一行，并且移動到最左邊 */ 
        height: 300px; 
        background-color: green; 
        } 
    .box .box-right { 
        float: left; 
        width: 200px; 
        min-height: 100%; 
        margin-left: -200px;/* 設置浮動， margin-left:負的自身寬度 可以使元素往上移一行，并且移動到最右邊 */ 
        background-color: pink; 
        } 
    header,footer { height: 75px; background-color: aqua; } 
style> 
head>
<body> 
    <header> header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
                中間主題內容
            div>
        div>
        <div class="box-left">
            11dsdasdas不你弟弟呢多帶帶
        div>
        <div class="box-right">
            12酷酷酷酷酷的的是計算機技術升級的歷史記錄
        div> 
    div>
    <footer>

    footer>
body>
html>

　　　1.2 其實只是簡單的中間內容自適應，還可以設置，中間的元素塊狀元素盒子模型為ie下的盒子模型，

　　　　再使用padding也是可以實現的

<style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
    }
    .box .box-content {
        box-sizing:border-box;
        height: 100%;
        float: left; /* 一定要設置浮動，要不下面的模塊上不來 */
        width:100%;/* 一定要設置100%，要不內容不夠稱不開整個頁面 */
        /* 默認還是整行 */
        padding:0 210px;
        } 
    .box .box-content .child {
          /* 中間模塊空出左右距離，設置浮動 */
        background-color: blue; 
        height: 100%;
    }
    .box .box-left { 
        width: 200px; float: left; 
        margin-left: -100%; /* 設置浮動， margin-left:-100% 可以使元素往上移一行，并且移動到最左邊 */ 
        height: 300px; 
        background-color: green; 
        } 
    .box .box-right { 
        float: left; 
        width: 200px; 
        min-height: 100%; 
        margin-left: -200px;/* 設置浮動， margin-left:負的自身寬度 可以使元素往上移一行，并且移動到最右邊 */ 
        background-color: pink; 
        } 
    header,footer { height: 75px; background-color: aqua; } 
style> 
<body> 
    <header> header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
                中間主題內容
            div>
        div>
        <div class="box-left">
            11dsdasdas不你弟弟呢多帶帶
        div>
        <div class="box-right">
            12酷酷酷酷酷的的是計算機技術升級的歷史記錄
        div> 
    div>
    <footer>

    footer>
body>

　　2，上面其實是圣杯布局，我們再使用中間相對定位，左右兩邊絕對定位（中間絕對定位，不設置寬度撐不開容器）

　　　　其實只要中間的位子對應了，左右兩邊不管是相對定位，還是絕對定位都可以

 

　　　　重點當然還是中間怎么取定位（元素順序沒有關系）

　　　　如果中間取相對定位，不設置浮動，設置margin 空出左右距離，

　　　　兩邊取絕對定位，只要設置top:0 一個left:0  一個right:0

DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>三列布局title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
        overflow: hidden;
    }
    .box .box-content {
        position: relative;
        height: 100%;
        margin-left: 210px;
        margin-right: 210px;
        background-color: blue;
    } 
    .box .box-left { 
        width: 200px; 
        position: absolute; 
        height: 300px; 
        left: 0;
        top:0;
        background-color: green; 
    } 
    .box .box-right { 
        width: 200px; 
        position: absolute; 
        min-height: 100%; 
        right: 0px;
        top:0;
        background-color: pink; 
    } 
    header,footer { height: 75px; background-color: aqua; } 
style> 
head>
<body> 
    <header> header> 
    <div class="box"> 
        <div class="box-content">
            <div class="child">
                中間主題內容asdasdasdsadsasda嘎達可根但是薩嘎薩嘎據阿里就夠了及代理商解放螺
絲釘結案率放假啊了解
            div>
        div>
        <div class="box-left">
            11dsdasdas不你弟弟呢多帶帶
        div>
        <div class="box-right">
            12酷酷酷酷酷的的是計算機技術升級的歷史記錄
        div> 
    div>
    <footer>

    footer>
body>
html>

　　3.我們再看下使用定位的雙飛燕布局， 雙飛燕，要對父容器設置padding ,大小等一左右固定寬度

  　　左右兩邊據對定位，就這個和上面的方法差不多，我們一起看看左右兩邊相對定位

　　如果左右兩邊相對定位，設置margin和和left

DOCTYPE HTML>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <title>三列布局title>
    <style>
    .box{
        height: 500px;
        background-color: bisque;
        position: relative;
        overflow: hidden;
        padding: 0 210px;
    }
    .box .box-content {
        height: 100%;
        float: left;
        background-color: blue;
    } 
    .box .box-left { 
        width: 200px; 
        position: relative; 
        height: 300px; 
        float: left;
        left: -210px;
        margin-left: -100%;
        background-color: green; 
    } 
    .box .box-right { 
        width: 200px; 
        position: relative; 
        min-height: 100%; 
        float: left;
        margin-left: -200px;
        right: -210px;
        background-color: pink; 
    } 
    header,footer { height: 75px; background-color: aqua; } 
style> 
head>
<body> 
    <header> header> 
    <div class="box"> 
        <div class="box-content">
            夠了及代理商解放螺絲釘結案率放假啊了解多嘎多gags廣東省水水水水水水水水水水
水水頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂頂
        div>
        <div class="box-left">
            11dsdasdas不你弟弟呢多帶帶
        div>
        <div class="box-right">
            12酷酷酷酷酷的的是計算機技術升級的歷史記錄
        div> 
    div>
    <footer>

    footer>
body>
html>

 　　4.是用flex實現三列布局，左右固定中間自適應，父元素設置display: flex, 左右分別設置flex: 0 0 200px ，父元素為display:flex

　　　　那么子元素的float、clear和vertical-align屬性將失效，兼容性有問題，一般都用于移動端

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>三列布局title>
    <style>
        .box{
            height: 500px;
            background-color: bisque;
            position: relative;
            display: flex;
        }

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/981.html

相關文章

  • css常見的各種布局下----三列布局

    摘要：三列布局，左右固定寬度右邊自適應不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局自適應部分一定要放第一個位子，使用浮動，并且設置寬度為，不設置浮動元素內容不夠稱不開整個寬度左右固定部位，使用負數，使其左右靠齊中間自適應部分嵌套一css 三列布局，左右固定寬度右邊自適應 1不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局 1.1.1 自適應部分一定要放第一個位子，使...

    tigerZH 評論0 收藏0

  • css常見的各種布局下----三列布局

    摘要：三列布局，左右固定寬度右邊自適應不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局自適應部分一定要放第一個位子，使用浮動，并且設置寬度為，不設置浮動元素內容不夠稱不開整個寬度左右固定部位，使用負數，使其左右靠齊中間自適應部分嵌套一css 三列布局，左右固定寬度右邊自適應 1不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局 1.1.1 自適應部分一定要放第一個位子，使...

    mingde 評論0 收藏0

  • css常見的各種布局下----三列布局

    摘要：三列布局，左右固定寬度右邊自適應不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局自適應部分一定要放第一個位子，使用浮動，并且設置寬度為，不設置浮動元素內容不夠稱不開整個寬度左右固定部位，使用負數，使其左右靠齊中間自適應部分嵌套一css 三列布局，左右固定寬度右邊自適應 1不使用定位，只使用浮動可以實現左右固定，中間寬度自適應布局 1.1.1 自適應部分一定要放第一個位子，使...

    Joonas 評論0 收藏0

  • 前端面試之CSS總結(上)

    摘要：重點介紹一下常見的三列布局之圣杯布局和雙飛翼布局。兩種布局方式的不同之處在于如何處理中間主列的位置圣杯布局是利用父容器的左右內邊距定位雙飛翼布局是把主列嵌套在后利用主列的左右外邊距定位。 CSS總結 由于最近在準備前端方面的面試，所以對自己平常工作中用到的地方做出一些總結。該篇是CSS部分(上)，有許多地方敘述的并不是十分詳細，只是大致的描述一下，給自己提供一個知識輪廓。本篇中主要描述...

    琛ｈ。 評論0 收藏0

  • CSS

    摘要：在元素之后添加內容控制表單控件的禁用狀態。生成相對定位的元素，相對于其正常位置進行定位。雙冒號是在當前規范中引入的，用于區分偽類和偽元素。 1.介紹一下標準的CSS的盒子模型？低版本IE的盒子模型有什么不同的？ 有兩種，?IE 盒子模型、W3C 盒子模型； 盒模型：?內容(content)、填充(padding)、邊界(margin)、?邊框(border)；區? 別：?IE的cont...

    Lyux 評論0 收藏0

發表評論

0條評論

最新活動
閱讀需要支付1元查看
<