美文网首页
CSS零碎知识整理

CSS零碎知识整理

作者: burningalive | 来源:发表于2019-02-05 12:37 被阅读0次

    布局

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

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

    1. float
    2. position: absolute
    3. tablecell
    4. flexbox
    5. 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. 三列布局，上下固定高度，中间自适应（移动端常见）

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

    1. position：absolute
    2. flexbox
    3. 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>

    盒模型

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

    BFC (块级格式化上下文)

    1. 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元素也参与计算

    2. 创建BFC
      1.position 为 absolute 或 fixed (position不为static或relative)
      2.浮动元素 (float不为none)
      3.display为inline-block | table | flex | grid
      4.overflow不为visible
      5.<html>标签

    零碎小技巧

    1. 妙用background：background: url(...) no-repeat center 0;保持图片在父容器大小变化时，时刻保持水平居中。
    2. 清除浮动时，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零碎知识整理

          本文链接：https://www.haomeiwen.com/subject/oabysqtx.html

          延伸阅读

          深度阅读

          • 您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！

          栏目导航

          热点阅读

          关于我们|服务条款|联系我们|CSS零碎知识整理|投稿指南|网站地图|RSS订阅|排版工具|手机版

          提供经典美文摘抄,优美散文欣赏,现代诗歌精选,短篇小说,心情随笔,表白情书范文,故事会在线阅读欣赏

          Copyright © 2014-2023 Haomeiwen.com All Rights Reserved. 好美文阅读网 版权所有

          备案信息：桂公网安备 45052102000051号 · 桂ICP备13007215号-3

          本站所收录作品、热点评论等信息部分来源互联网，目的只是为了系统归纳学习和传递资讯

          所有作品版权归原创作者所有，与本站立场无关，如不慎侵犯了你的权益，请联系我们告知，我们将做删除处理！