CSS

Posted 2021-09-07 kangting

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了CSS相关的知识，希望对你有一定的参考价值。

一.css布局

1.盒模型

/*如下代码，请问div1的offsetWidth是多大？*/
<style>
#div1{
width:100px;
padding:10px;
border:1px solid #ccc;
margin:10px;
}
</style>
<div id="div1"></div>
/*答案：offsetWidth=width+padding+border=122px：*/

/*扩展：如果让offsetWidth=100px,该如何做？*/
<style>
#div1{
width:100px;
padding:10px;
border:1px solid #ccc;
margin:10px;
box-sizing:border-box; /*设置盒模型*/
}
</style>
<div id="div1"></div>

2.margin纵向重叠问题
这个以前知道会重叠但是不知道空标签也会重叠

/*如下代码，AAA和BBB之间的距离是多少？*/
 <style>
    p{
      font-size: 16px;
      line-height: 1;
      margin-top: 10px;
      margin-bottom: 15px;
    }
  </style>

  <p>AAA</p>
  <p></p>
  <p></p>
  <p></p>
  <p>BBB</p>
/*
   答案：15px。
   解释：相邻的margin-top和margin-bottom会发生重叠；
        空白的<p></p>也会重叠。
*/

3.margin负值问题

- margin-top和margin-left负值，元素向上、向左移动；
- margin-right负值，右侧元素移动，自身不受影响；
- margin-bottom负值，下方元素移动，自身不受影响。

4.BFC的理解和应用

什么是BFC?如何应用？
BFC：
    block format context 块级格式化上下文
    一块独立渲染区域，内部元素的渲染不会影响边界以外的元素
形成BFC的常见条件：
     float：不是none
     position：absolute/fixed
     overflow:部位visible
     display:inline-block,flex等
BFC常见应用
    清除浮动

5.如何实现圣杯布局和双飞翼布局

圣杯布局和双飞翼布局的目的
     三栏布局，中间一栏最先加载和渲染（内容最重要）
     两侧内容固定，中间内容随着宽度自适应
     一般用于PC网页
圣杯布局和双飞翼布局的技术总结
    使用float布局
    两侧使用margin负值，以便和中间内容横向重叠
    防止中间内容被两侧覆盖，一个用padding一个用margin

圣杯布局
<!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>Document</title>
</head>
<body>
  <style>
    
    .header{
      width: 100%;
      height: 50px;
      background: red;
    }
    /* 2.padding两边留白 */
    .content{
      padding: 0 200px 0 200px;
      background: yellow;
    }
    /* 1.浮动布局 */
    .content .col{
      float: left;
    }
    .content .main{
      width: 100%;
      height: 50px;
      background: blue;
    }
    /* 3.左 margin-left: -100%;*/
    .content .left{
      width: 200px;
      height: 50px;
      background: #eee;
      margin-left: -100%;
      position: relative;
      right: 200px;
    }
    /* 4.右 margin-right: -200px; */
    .content .right{
      width: 200px;
      height: 50px;
      background: peru;
      margin-right: -200px;
    }

    .footer{
      width: 100%;
      height: 50px;
      background: green;
    }

    /* 手写clearfix */
    .clearfix:after{
      content: \'\';
      display: table;
      clear: both;
    }
    .clearfix{
      *zoom:1;
    }
  </style>

<div class="header">header</div>
<div class="content clearfix">
  <div class="main col">center</div>
  <div class="left col">left</div>
  <div class="right col">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>

双飞翼布局
<!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>Document</title>
</head>
<body>
  <style>
    
    .header{
      width: 100%;
      height: 50px;
      background: red;
    }
    .content{
      width: 100%;
      background: yellow;
    }
    /* 1.浮动布局 */
    .content .col{
      float: left;
    }
    .content .main{
      width: 100%;
      height: 50px;
      background: blue;
    }
    /* 2.margin留白 */
    .content .main-wrap{
      margin: 0 200px 0 200px;
    }
    /* 3.左 margin-left: -100%;*/
    .content .left{
      width: 200px;
      height: 50px;
      background: #eee;
      margin-left: -100%;
    }
    /* 4.右 margin-left: -200px; */
    .content .right{
      width: 200px;
      height: 50px;
      background: peru;
      margin-left: -200px;
    }

    .footer{
      width: 100%;
      height: 50px;
      background: green;
    }

    /* 手写clearfix */
    .clearfix:after{
      content: \'\';
      display: table;
      clear: both;
    }
    .clearfix{
      *zoom:1;
    }
  </style>

<div class="header">header</div>
<div class="content clearfix">
  <div class="main col">
    <div class="main-wrap">center</div>
  </div>
  <div class="left col">left</div>
  <div class="right col">right</div>
</div>
<div class="footer">footer</div>
</body>
</html>

6.手写clearfix

/* 手写clearfix */
    .clearfix:after{
      content: \'\';
      display: table;
      clear: both;
    }
    .clearfix{
      *zoom:1;
    }

7.flex实现一个三点的色子

flex常用语法回顾：
    flex-direction：方向
    justify-content：元素在主轴的对齐方式
    align-items：元素在交叉轴的对齐方式
    flex-wrap：换行
    align-self:子元素在交叉轴的对齐方式

align-self这个其实我一直没仔细看啥意思，现在学习回顾了是怼子元素起作用的

<!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>Document</title>
</head>
<body>
  <style>
   .box{
     width: 200px;
     height: 200px;
     border: 1px solid #333;
     /* flex布局 */
     display: flex;
     justify-content: space-between;
   }
   .point{
     width: 50px;
     height: 50px;
     background-color: #666;
     border-radius: 50%;
   }
   .point:nth-child(2){
     align-self: center;
   }
   .point:nth-child(3){
     align-self: flex-end;
   }
  </style>

  <div class="box">
    <div class="point"></div>
    <div class="point"></div>
    <div class="point"></div>
  </div>
</body>
</html>

二.css定位

1.absolute和relative分别依据什么定位？

relative依据自身定位
absolute依据最近一层的定位元素定位
    定位元素：absolute，relative，fixed
             body

2.居中对齐有哪些实现方式？

水平居中
    1. inline元素：text-align:center
    2. block元素：margin:auto
    3. absolute元素：left50%+margin-left负值
    4. flex元素：display: flex; jusitity-content: center;
垂直居中
    1. inline元素：line-height的值等于height的值
    2. absolute元素1：top50%+margin-top负值
    3. absolute元素2：transform:translate(-50%,-50%)
    4. absolute元素3：top,bottom,left,right=0+margin:auto
      可以实现元素水平垂直居中，既保证兼容性又不必知道子元素的长度。
    5. flex元素：display: flex; align-items: center;

<!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>Document</title>
</head>
<body>
  <h1>水平居中</h1>
  <style>
  .shuiping{
    border:1px solid #333;
    padding: 20px;
  }
  .shuiping .container {
    background: #666;
    margin-bottom: 10px;
    height: 50px;
  }
  .shuiping .inline{
    text-align: center;
  }
  .shuiping .inline .content{
    background: green;
  }
  .shuiping .block{
  }
  .shuiping .block .content{
    width: 300px;
    margin: 10px auto;
    background: green;
  }
  .shuiping .absolute{
    position: relative;
  }
  .shuiping .absolute .content{
    width: 200px;
    height: 40px;
    position: absolute;
    background: green;
    left: 50%;
    margin-left: -100px;
  }
  .shuiping .flex{
    display: flex;
    justify-content: center;
  }
  .shuiping .flex .content{
    background: green;
  }
  </style>
  <div class="shuiping">
    <div class="container inline"><span class="content">inline元素</span></div>
    <div class="container block">
        <div class="content">block元素</div>
      </div>
    <div class="container absolute">
      <div class="content">absolute</div>
    </div>
    <div class="container flex">
      <div class="content">flex元素</div>
    </div>
  </div>
  <h1>垂直居中</h1>
  <style>
  .cz{
    border:1px solid #333;
    padding: 20px;
  }
  .cz .container {
    background: #666;
    margin-bottom: 10px;
    height: 50px;
  }
  .cz .inline{
  }
  .cz .inline .content{
   line-height: 50px;
    background: green;
  }
  .cz .absolute{
    position: relative;
  }
  .cz .absolute .content{
    width: 200px;
    height: 40px;
    position: absolute;
    background: green;
    left: 50%;
    margin-left: -100px;
    top: 50%;
    margin-top: -20px;
  }
  .cz .absolute2{
    position: relative;
  }
  .cz .absolute2 .content{
    width: 200px;
    height: 40px;
    position: absolute;
    background: green;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
  }
  .cz .transform{
   position: relative;
  }
  .cz .transform .content{
    background: green;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%)
  }
  .cz .flex{
    display: flex;
    justify-content: center;
    align-items: center
  }
  .cz .flex .content{
    background: green;
  }
  </style>
  <div class="cz">
    <div class="container inline"><span class="content">inline元素</span></div>
    <div class="container absolute">
      <div class="content">absolute</div>
    </div>
    <div class="container absolute2">
      <div class="content">absolute2</div>
    </div>
    <div class="container transform">
      <div class="content">transform</div>
    </div>
    <div class="container flex">
      <div class="content">flex元素</div>
    </div>
  </div>
</body>
</html>

三.css图文样式

1.line-height:如何继承

如下代码，p的行高将会是多少？
<style>
body{
font-size:20px;
line-height:200%
}
p{
font-size:16px;
}
</style>
<body>
<p>AAA</p>
</body>
答案：40px（font-size * line-height）=20*200%=40

我也不知道写百分比继承的是计算出来的值，以前都没有用过百分比这种line-height

写具体值，如30px，则继承该值（比较好理解）
写比例，如2/1.5，则继承该值(比较好理解)
写百分比，如200%，则继承计算出来的值（考点）

四.CSS响应式

1.rem是什么？

rem是一个长度单位
px：绝对长度单位，最常用
em：相对长度单位，相对于父元素，不常用
rem：相对长度单位，相对于根元素，常用于响应式布局

2.响应式布局的常见方案？

media-query:根据不同的屏幕宽度设置根元素font-size
rem:基于根元素的相对单位

3.vw/vh

rem&media-query弊端：阶梯性
网页视口尺寸：
    window.screen.height:屏幕高度
    window.innerHeight:网页视口高度
    document.body.clientBody:body高度
vw/vh:
    vh:网页视口高度1/100
    vw:网页视口宽度1/100
    vmax取两者最大值，vmin取两者最小值
    window.innerHeight=100vh
    window.innerwidth=100vw

以上是关于CSS的主要内容，如果未能解决你的问题，请参考以下文章

VSCode自定义代码片段7——CSS动画

VSCode自定义代码片段6——CSS选择器

css常用代码片段 (更新中)

CSS代码片段