CSS零碎知识整理

2019-02-05 本文已影响0人 burningalive

布局

1. 三列布局，左右侧栏固定300px，三列高度统一给定，中间自适应

此简单问题，答上三种及格，答上五种优秀，分别为：

float
position: absolute
tablecell
flexbox
grid

重点：

块级元素默认宽度为父容器100%无需多余设置。
flex-direction默认为row，flex-wrap默认nowrap。
grid布局务必要掌握，可查阅grid实现布局, https://gridbyexample.com/examples/
响应grid布局,张鑫旭 display: grid布局教程, Grid入门精通教程、 A Complete Guide to Grid (需科学上网) 或 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也可以实现带多行文本的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. 三列布局，上下固定高度，中间自适应（移动端常见）

目前实现了三种，分别为：

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>

盒模型

标准模型宽高不计算padding和border；IE模型宽高计算padding和border。
box-sizing : content-box(标准模型-默认)/border-box(IE模型)
JS获取宽高
dom.style.width 只能取内联宽高.
window.getComputedStyle(dom).width 浏览器渲染之后的取值，兼容性更好. IE使用dom.currentStyle.width .
dom.getBoundingClientRect().width/height/left/top/bottom/right ,返回所在ViewPort左顶点的绝对位置，常用于计算位置.

BFC (块级格式化上下文)

BFC布局规则：（引用自 - 关于CSS-BFC深入理解 )
1.内部的Box会在垂直方向，一个接一个地放置。
2.Box垂直方向的距离由margin决定。属于同一个BFC的两个相邻Box的margin会发生重叠
3.每个元素的margin box的左边，与包含块border box的左边相接触(对于从左往右的格式化，否则相反)。即使存在浮动也是如此。
4.BFC的区域不会与float box重叠。
5.BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素。反之如此。
6.计算BFC的高度时，float元素也参与计算
创建BFC
1.position 为 absolute 或 fixed (position不为static或relative)
2.浮动元素 (float不为none)
3.display为inline-block | table | flex | grid
4.overflow不为visible
5.<html>标签

零碎小技巧

妙用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;
}

字体

查看网站引用字体开发者工具-Application-Frames-Fonts
.woff格式
字体文件
自定义字体
字体图标

CSS零碎知识整理

布局

1. 三列布局，左右侧栏固定300px，三列高度统一给定，中间自适应

2. 三列布局，上下固定高度，中间自适应（移动端常见）

3. 用flex和grid绘制带有hover高亮边框效果的九宫格

盒模型

BFC (块级格式化上下文)

零碎小技巧

动画

CSS3

SVG

Convas

多行文本省略号

字体

猜你喜欢

热点阅读