前端CSS知识要点总结（1）

Ric
68 阅读4分钟

  1. html语义化

    代码语义化可读性更高;利于SEO

  2. css盒模型

css盒模型.png

  • Margin - 边界外的透明区域。
  • Border - 边框在填充和内容周围。
  • Padding - 内容周围的透明区域。
  • Content - 实际文本和图像。

标准盒模型：盒子宽度为width值+2padding+2*border的和，对应box-sizing:content-box
怪异盒模型：盒子宽度width即为最终宽度，已包含padding+border+content,对应box-sizing:border-box

  1. BFC是什么？

    概念：BFC块级格式化上下文，是页面中一块独立的渲染区域，不影响边界外的其他元素。
    形成条件：
    1. float不为none;
    2. position为absolute或fixed;
    3. display为inline-block, table-cell, table-caption, flex, inline-flex
    4. overflow不为visible

  2. margin负值

未命名文件 (6).png

margin-top：向上移动指定距离
margin-left：向左移动指定距离
margin-bottom：元素本身不受影响，下方元素向上移动指定距离
margin-right：元素本身不受影响，右侧元素向左移动指定距离

  1. 手写clearfix

    .clearfix::after{
        content: '';
        display: table;
        clear: both;
    }
    /* IE6兼容 */
    .clearfix{
        *zoom: 1;
    }

  1. 圣杯布局与双飞翼布局

圣杯布局.png 不管是在圣杯布局还是在双飞翼布局中，中间内容的渲染优先级应该是最高的 区别：圣杯布局使用padding来控制内容区域的左右的重叠区域，而双飞翼则是使用内容区域inner的margin来控制的。

圣杯布局实现：

<style>
    header{
        text-align: center;
        background-color: #ccc;
    }

    #container{
        padding: 0 200px 0;
    }

    #left{
        position: relative;
        height: 400px;
        width: 200px;
        margin-left: -100%;
        left: -200px;
        background-color: green;
    }

    #right{
        height: 400px;
        margin-right: -200px;
        width: 200px;
        background-color: green;
    }

    #main{
        width: 100%;
        background-color: red;
    }

    .col{
        float: left;
    }

    footer{
        clear: both;
        text-align: center;
        background-color: #ccc; 
    }
    .clearfix::after{
        content: '';
        display: table;
        clear: both;
    }
</style>

  <div>
        <header>header</header>
        <div id="container" class="clearfix">
            <div id="main" class="col">main</div>
            <div id="left" class="col">lef colt</div>
            <div id="right" class="col">right</div>
        </div>
        <footer>footer</footer>
    </div>

双飞翼布局实现：

    <style>
        #left{
            margin-left: -100%;
            width: 200px;
            background-color: green;
        }
        #right{
            margin-left: -200px;
            width: 200px;
            background-color: yellow;
        }
        #main{
            width: 100%;
        }
        #main-wrapper{
            margin: 0 200px 0;
            background-color: red;
        }
        .col{
            float: left;
            height: 400px;
        }
    </style>

 <body>
        <main id="main" class="col">
            <div id="main-wrapper">main</div>
        </main>
        <div id="left" class="col">left</div>
        <idv id="right" class="col">right</idv>
    </body>

  1. relative和absolute的区别

    relative: 相对于自身定位
    absolute: 相对于最近一级具有定位属性（relative、absolute、fixed）的元素定位

  2. 实现元素水平垂直居中

行内元素： text-align:center、line-height:容器高度
块级元素：
场景1：已知定位元素尺寸

//使用position:absolute + margin负值
<style>
    #container{
        position: relative;
        width: 500px;
        height: 500px;
        background-color: green;
    }

    #box {
        width: 100px;
        height: 100px;
        background-color: red;

        /* 定位代码 */
        position: absolute;
        left: 50%;
        top: 50%;
        margin-left: -50px;
        margin-top: -50px;
    }
</style>

<body>
    <div id="container">
        <div id="box"></div>
    </div>
</body>

实现效果

image.png

场景2：定位元素尺寸不确定
position:absolute+transform定位
优点：无需知道定位元素尺寸
缺点：transform是css3特性，老版本的浏览器有兼容性问题

<style>
    #container {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: green;
    }

    #box {
        width: 100px;
        height: 100px;
        background-color: red;

        /* 定位代码 */
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
</style>

<body>
    <div id="container">
        <div id="box"></div>
    </div>
</body>

position:absolute + margin:auto
优点：无需知道定位元素尺寸，且无兼容性问题

<style>
    #container {
        position: relative;
        width: 500px;
        height: 500px;
        background-color: green;
    }

    #box {
        width: 100px;
        height: 100px;
        background-color: red;

        /* 定位代码 */
        position: absolute;
        top: 0;
        left: 0;
        bottom: 0;
        right: 0;
        margin: auto;
    }
</style>

<body>
    <div id="container">
        <div id="box"></div>
    </div>
</body>

  1. line-height继承

根据父元素的line-height书写方式，所继承的line-height也不同

<style>
    body{
        font-size: 24px;
        line-height: 20px;
    }
    p{
        font-size: 16px;  /* line-height：20px */
    }
</style>

<body>
    <p>这是一段文字</p>
</body>

<style>
    body{
        font-size: 24px;
        line-height: 1.5;
    }
    p{
        font-size: 16px;  /* line-height：24px */
    }
</style>

<body>
    <p>这是一段文字</p>
</body>

<style>
    body{
        font-size: 24px;
        line-height: 200%;
    }
    p{
        font-size: 16px;  /* line-height：48px */
    }
</style>

<body>
    <p>这是一段文字</p>
</body>

  1. px、em、rem、vh、vw的区别

单位含义
px绝对长度单位
em相对长度单位，相对于父元素
rem相对于长度单位，相对于html根元素
vh网页视口高度1/100
vw网页视口宽度1/100

  1. 响应式布局

媒体查询+rem：使用css media query根据设备宽度设置根元素的字体大小，从而达到自适应，由于媒体查询的“阶梯型”，这种自适应方式无法做到特别精确的自适应变化。
vh/vw: 使用视口高度或视口宽度作为长度单位，弥补了rem布局自适应不够精确的问题，其中vmax表示视口中最长的那一边的1/100，vmin则相反。

avatar
文章
阅读
粉丝