偷拍日韩一区,屌视频一区二区三区,每日更新日本无码

布局

1. 三列布局，左右側(cè)欄固定300px，三列高度統(tǒng)一給定，中間自適應(yīng)

此簡單問題，答上三種及格，答上五種優(yōu)秀，分別為：

float
position: absolute
tablecell
flexbox
grid

重點：

塊級元素默認(rèn)寬度為父容器100%無需多余設(shè)置。
flex-direction默認(rèn)為row，flex-wrap默認(rèn)nowrap。
grid布局務(wù)必要掌握，可查閱grid實現(xiàn)布局, https://gridbyexample.com/examples/
響應(yīng)grid布局,張鑫旭 display: grid布局教程, Grid入門精通教程、 A Complete Guide to Grid (需科學(xué)上網(wǎng)) 或 Grid布局指南 - 簡書

答案：

<!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>水平布局</title>
    <style media="screen">
        html * {
            padding: 0;
            margin: 0;
        }
        .layout {
            margin-top: 10px;
        }
        .layout article div {
            min-height: 100px;
        }
    </style>
</head>
<body>
    <section class="layout float">
        <style>
            .layout.float .left{
                float: left;
                width: 300px;
                background: lightcoral;
            }
            .layout.float .right{
                float: right;
                width: 300px;
                background: aquamarine;
            }
            .layout.float .center{
                background: antiquewhite;
                overflow: hidden;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="right"></div>
            <div class="center">
                <h1>浮動解決</h1>
                <p>1. 三欄布局中間部分</p>
                <p>1. 三欄布局中間部分</p>
                <p>1. 三欄布局中間部分</p>
                <p>1. 三欄布局中間部分</p>
                <p>1. 三欄布局中間部分</p>
                <p>1. 三欄布局中間部分</p>
                <p>1. 三欄布局中間部分</p>
            </div>
        </article>
    </section>
    <section class="layout absolute">
        <style>
            .left-right-center {
                height: 100px;
            }
            .layout.absolute .left-right-center>div {
                position: absolute;
            }
            .layout.absolute .left {
                left: 0;
                width: 300px;
                background: lightcoral;
            }
            .layout.absolute .right {
                right: 0;
                width: 300px;
                background: aquamarine;
            }
            .layout.absolute .center {
                left: 300px;
                right: 300px;
                background: yellow;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">
                <h1>絕對布局</h1>
                1. 三欄布局中間部分
                2. 三欄布局中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>
    <section class="layout flexbox">
        <style>
            .layout.flexbox .left-right-center {
                display: flex;
            }
            .layout.flexbox .left {
                width: 300px;
                background: lightcoral;
            }
            .layout.flexbox .right {
                width: 300px;
                background: aquamarine;
            }
            .layout.flexbox .center {
                background: navajowhite;
                flex-grow: 1;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">
                <h1>flexbox</h1>
                1. 三欄布局中間部分
                2. 三欄布局中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>
    <section class="layout table">
        <style>
            .layout.table .left-right-center {
                width: 100%;
                display: table;
                height: 100px;
            }
            .layout.table .left-right-center>div{
                display: table-cell;
            }
            .layout.table .left {
                width: 300px;
                background: lightcoral;
            }
            .layout.table .right {
                width: 300px;
                background: aquamarine;
            }
            .layout.table .center {
                background: lightsalmon;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">
                <h1>table-cell</h1>
                1. 三欄布局中間部分
                2. 三欄布局中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>
    <section class="layout grid">
        <style>
            .layout.grid .left-right-center {
                display: grid;
                width: 100%;
                grid-template-rows: 100px;
                grid-template-columns: 300px auto 300px;
            }
            .layout.grid .left {
                background: lightcoral;
            }
            .layout.grid .right {
                background: aquamarine;
            }
            .layout.grid .center {
                background: orange;
            }
        </style>
        <article class="left-right-center">
            <div class="left"></div>
            <div class="center">
                <h1>grid</h1>
                1. 三欄布局中間部分
                2. 三欄布局中間部分
            </div>
            <div class="right"></div>
        </article>
    </section>
</body>
</html>

ps： tablecell也可以實現(xiàn)帶多行文本的div垂直居中。

.parent {
     display: table;
     width: 300px;
     height: 300px;
     text-align: center;
}
.son {
     display: table-cell;
     height: 200px;
     background-color: yellow;
     vertical-align: middle;
 }

image

2. 三列布局，上下固定高度，中間自適應(yīng)（移動端常見）

目前實現(xiàn)了三種，分別為：

position：absolute
flexbox
grid (稍微做了下變形）

答案：

<!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>垂直布局</title>
    <style>
        html * {
            padding: 0;
            margin: 0;
        }
        .layout .top-center-bottom {
            height: 100vh;
        }
        .layout {
            margin-top: 20px;
        }
        .layout article div {
            width: 100%;
        }
    </style>
</head>
<body>
    <section class="layout absolute">
        <style>
            .layout.absolute .top {
                height: 100px;
                background: lightcoral;
                position: absolute;
                top: 20px;
            }
            .layout.absolute .bottom {
                height: 150px;
                background: aquamarine;
                position: absolute;
                bottom: -20px;
            }
            .layout.absolute .center {
                height: 100%;
                background: antiquewhite;
                padding: 100px 0 150px;
                box-sizing: border-box;
            }
        </style>
        <article class="top-center-bottom">
            <div class="top"></div>
            <div class="center">
                <h1>絕對定位</h1>
                <p>1. 中間填充的文字</p>
                <p>1. 中間填充的文字</p>
            </div>
            <div class="bottom"></div>
        </article>
    </section>
    <section class="layout flex">
        <style>
            .top-center-bottom {
                display: flex;
                flex-direction: column;

            }
            .layout.flex .top {
                height: 100px;
                background: lightcoral;                    
            }
            .layout.flex .bottom {
                height: 150px;
                background: aquamarine;
            }
            .layout.flex .center {
                background: antiquewhite;
                flex-grow: 1;
            }
        </style>
        <article class="top-center-bottom">
            <div class="top"></div>
            <div class="center">
                <h1>flexbox</h1>
                <p>1. 中間填充的文字</p>
                <p>1. 中間填充的文字</p>
            </div>
            <div class="bottom"></div>
        </article>
    </section>
    <section class="layout grid">
        <style>
            .layout.grid .top-center-bottom {
                display: grid;
                grid-template-rows: 100px auto 150px;
                grid-template-columns: 1400px;
                grid-auto-columns: auto;
            }
            .layout.grid .top {
                grid-area: 1/1/2/3;
                background: lightcoral;                    
            }
            .layout.grid .bottom {
                background: aquamarine;
                grid-area: 3/1/4/3;
            }
            .layout.grid .center {
                grid-area: 2/1/3/2;
                background: antiquewhite;
                justify-self: center;
            }
        </style>
        <article class="top-center-bottom">
            <div class="top"></div>
            <div class="center">
                <h1>grid</h1>
                <p>1. 中間填充的文字</p>
                <p>1. 中間填充的文字</p>
            </div>
            <div class="bottom"></div>
        </article>
    </section>
</body>
</html>

3. 用flex和grid繪制帶有hover高亮邊框效果的九宮格

九宮格

  <style>
    .line {
      display: flex;
    }

    .gezi {
      width: 100px;
      height: 100px;
      /* position: relative; */
      border: 5px solid #ccc;
      display: inline-block;
      line-height: 100px;
      text-align: center;
      box-sizing: border-box;
    }

    .gezi+.gezi {
      /* border-left: 0px; */
      margin-left: -5px;
    }

    .line+.line .gezi {
      margin-top: -5px;
    }

    .gezi:hover {
      z-index: 1;
      border-color: crimson;
    }

  </style>
  <div class="line">
    <div class="gezi">1</div>
    <div class="gezi">2</div>
    <div class="gezi">3</div>
  </div>
  <div class="line">
    <div class="gezi">4</div>
    <div class="gezi">5</div>
    <div class="gezi">6</div>
  </div>
  <div class="line">
    <div class="gezi">7</div>
    <div class="gezi">8</div>
    <div class="gezi">9</div>
  </div>

  <style>
    .jiu {
      display:grid;
      width: 300px;
      height: 300px;
      grid-template: 1fr 1fr 1fr / 1fr 1fr 1fr;
      margin-left: 0;
      margin-top: 20px;
      padding: 0;
    }
    .jiu .box {
      list-style-type:none;
      border: 5px solid #ccc;
      margin-top: -5px;
      margin-left: -5px;
      line-height: 90px;
      text-align: center;
    }
    .jiu .box:hover {
      z-index: 1;
      border-color: crimson;
    }
  </style>
  <ul class="jiu">
    <li class="box">1</li>
    <li class="box">2</li>
    <li class="box">3</li>
    <li class="box">4</li>
    <li class="box">5</li>
    <li class="box">6</li>
    <li class="box">7</li>
    <li class="box">8</li>
    <li class="box">9</li>
  </ul>

盒模型

標(biāo)準(zhǔn)模型寬高不計算padding和border；IE模型寬高計算padding和border。
box-sizing : content-box(標(biāo)準(zhǔn)模型-默認(rèn))/border-box(IE模型)
JS獲取寬高
dom.style.width 只能取內(nèi)聯(lián)寬高.
window.getComputedStyle(dom).width 瀏覽器渲染之后的取值，兼容性更好. IE使用dom.currentStyle.width .
dom.getBoundingClientRect().width/height/left/top/bottom/right ,返回所在ViewPort左頂點的絕對位置，常用于計算位置.

BFC (塊級格式化上下文)

BFC布局規(guī)則：（引用自 - 關(guān)于CSS-BFC深入理解 )
1.內(nèi)部的Box會在垂直方向，一個接一個地放置。
2.Box垂直方向的距離由margin決定。屬于同一個BFC的兩個相鄰Box的margin會發(fā)生重疊
3.每個元素的margin box的左邊，與包含塊border box的左邊相接觸(對于從左往右的格式化，否則相反)。即使存在浮動也是如此。
4.BFC的區(qū)域不會與float box重疊。
5.BFC就是頁面上的一個隔離的獨立容器，容器里面的子元素不會影響到外面的元素。反之如此。
6.計算BFC的高度時，float元素也參與計算
創(chuàng)建BFC
1.position 為 absolute 或 fixed (position不為static或relative)
2.浮動元素 (float不為none)
3.display為inline-block | table | flex | grid
4.overflow不為visible
5.<html>標(biāo)簽

零碎小技巧

妙用background：background: url(...) no-repeat center 0;保持圖片在父容器大小變化時，時刻保持水平居中。
清除浮動時，mdn上最新推薦的clearfix寫法：

/* new clearfix */
.clearfix::after {
    content: "";
    display: table;
    clear: both;
    overflow: hidden;
    visibility: hidden;
}

動畫

CSS3

SVG

Convas

多行文本省略號

.element {
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;  // 截斷在第二行
    -webkit-box-orient: vertical; // 方向垂直
    // height: 50px;
}

字體

查看網(wǎng)站引用字體開發(fā)者工具-Application-Frames-Fonts
.woff格式
字體文件
自定義字體
字體圖標(biāo)

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

CSS零碎知識整理

CSS零碎知識整理

布局

1. 三列布局，左右側(cè)欄固定300px，三列高度統(tǒng)一給定，中間自適應(yīng)

2. 三列布局，上下固定高度，中間自適應(yīng)（移動端常見）

3. 用flex和grid繪制帶有hover高亮邊框效果的九宮格

盒模型

BFC (塊級格式化上下文)

零碎小技巧

動畫

CSS3

SVG

Convas

多行文本省略號

字體

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九 欧美,1769亚洲,黄色成人av

CSS零碎知識整理

布局

1. 三列布局，左右側(cè)欄固定300px，三列高度統(tǒng)一給定，中間自適應(yīng)

2. 三列布局，上下固定高度，中間自適應(yīng)（移動端常見）

3. 用flex和grid繪制帶有hover高亮邊框效果的九宮格

盒模型

BFC (塊級格式化上下文)

零碎小技巧

動畫

CSS3

SVG

Convas

多行文本省略號

字體

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容

色偷偷精品伊人,欧洲久久精品,欧美综合婷婷骚逼,国产AV主播,国产最新探花在线,九色在线视频一区,伊人大交九欧美,1769亚洲,黄色成人av

1. 三列布局，左右側(cè)欄固定300px，三列高度統(tǒng)一給定，中間自適應(yīng)

2. 三列布局，上下固定高度，中間自適應(yīng)（移動端常見）