2023年前端html、css笔记前端笔记，如何理解语义化，块级元素和内联元素， BFC，圣杯布局和双飞翼布局， fle

1. 如何理解语义化

让搜索引擎更容易读懂（易于seo）

让人更容易读懂（易于读懂）

2. 块级元素和内联元素

块级元素：display为block或者table的元素， div，h1 h2 table ul ol p等

内联元素：display为inline或者inline-block的元素， span img input button等

3. margin 负值问题

top和left 负值元素向上移动向左移动

right 负值的话元素向左移动自身不受影响

bottom 负值向上移动自身不受影响

4. BFC

BFC名称：块级格式化上下文

一块独立渲染区域，内部元素渲染不会影响边界以外的元素

形成BFC的条件:

1. float不是none

2. position是absolute或者fixed

3. overflow不是visble

4. display是flex inline-block

常见应用：

清除浮动

4. 圣杯布局和双飞翼布局

圣杯布局和双飞翼布局的目的

1. 三栏布局，中间一栏最先加载和渲染

2. 两层内容固定，中间内容自适应

3. 一般用于PC网页

技术总结：

1. 使用float布局

2. 两侧使用margin负值，以便和中间内容横向重叠

3. 防止中间内容被两侧覆盖，一个用padding 一个用margin

圣杯布局：

<style>    
    .box{
     padding-left: 200px;
     padding-right: 150px;
    }
    .left{
        position: relative;
        background-color: red;
        width: 200px;
        float: left;
        margin-left:-100%;
        right: 200px;
     
    }
    .right{
        background-color:gold;
        width: 150px;
        float: left;
        margin-right: -150px;

    }
    .center{
       background-color:darkblue;
       width: 100%;
       float: left;


    }
</style>
<body>
    <div class="box">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>

双飞翼布局：

    
    .box{
     margin:0 200px 0  200px
    }
    .left{
        
        background-color: red;
        width: 200px;
        height: 200px;
       float: left;
       margin-left: -100%;
       
      
     
    }
    .right{
        background-color:gold;
        width: 200px;
        height: 200px;
        float: left;
        margin-left: -200px;
      
      

    }
    .center{
       background-color:darkblue;
       width: 100%;
       height: 200px;
       float: left;

    }
</style>
<body>
    <div class="box">
        <div class="center">center</div>
        <div class="left">left</div>
        <div class="right">right</div>
    </div>
</body>
</html>

手写cleafux： 清除浮动影响的样式，统称clearfix代码。

所有float元素的父容器，一般情况都需要添加clearfix这个class。

.clearfix:after{
        content: "";
        display: none;
        clear: both;
    }

5. flex 布局

flex实现一个三点的色子：

常用语法回顾：

flex-direction
justify-content
align-items
flex-wrap
align-self

    
    .box{
    display: flex;
    justify-content: space-between;
    width: 200px;
    height: 200px;
    border: 2px solid #ccc;
    padding:20px
    }
  .item{
    display: block;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #666;
  }
  .item:nth-child(2){
    align-self: center;
  }
  .item:nth-child(3){
    align-self: end;
  }
</style>
<body>
    <div class="box">
        <div class="item"></div>
        <div class="item"></div>
        <div class="item"></div>
    </div>
</body>

6. line-height如何继承

如果是百分比，用父元素计算出来的去继承

7. 响应式的rem

px：绝对长度单位

em：相对长度单位，相对于父元素，不常用

rem:相对长度单位，相对于根元素，常用于响应式布局

rem是一个相对长度单位，用在html根元素定义font-size决定一个rem的大小

media-query：可以查询屏幕宽度来设置根元素的rem

8. 响应式的的vw、vh

rem的弊端：“阶梯性”

网页视口尺寸：

window.screen.height 屏幕高度

window.innerHeight 网页视口高度

clientHeight body高度

vh:视口高度的1/100; vw:视口宽度的1/100； vmax vmin：取两者的最大值和最小值；