如何理解HTML语义化

HTML语义化.png

让人更容易读懂（使代码可读性更高）
让搜索引擎更容易读懂（SEO）

默认情况下，那些HTML标签是块级元素、那些是内联元素

块状元素： 无论里面内容多少，都要独占一行

display：block/table；有div、h、table、ul、ol、p、等标签

内联元素： 不会独占一行、会挨着元素往后面排

display：inline/inline-block；有span、img、input、button等标签

选择器

css选择器优先级

如下代码，三个 <p> 分别是什么颜色？

<style>
    #container p { color: blue; }
    div #p1, div #p2 { color: red; }
    #container p.yellow-text { color: yellow; font-weight: bold; }
    div p.green-text { color: green; font-weight: bold; }
    div p { color: gray; }
</style>

<div id="container">
    <p id="p1" class="yellow-text">100</p> 黄
    <p id="p2" class="green-text">200</p> 红
    <p id="p3">300</p> 蓝
</div>

解答

选择器优先级：ID选择器>类选择器>标签选择器（ id > class > tag）
组合选择器要看整体的权重
越具体的，权重越高

参考 css-selector-priority.html

布局

盒模型的宽度如何计算（offsetWidth）

offsetWidth= （内容宽度width+内边距padding+边框宽度border），无外边距

设置box-sizing: border-box;之后，offsetWidth 等于设置的内容宽度width

 <style type="text/css">
     /* 如下代码，请问div1的offsetWidth是多大？ */
     #div1 {
         width: 100px;
         padding: 10px;
         border: 1px solid #ccc;
         margin: 10px;
         /* box-sizing: border-box; */
     }
 </style>
 <div id="div1">this is div1</div>
<script>
   document.getElementById('div1').offsetWidth // 122px
 </script>

margin纵向重叠的问题

相邻元素的margin-top和margin-bottom会发生重叠

空白内容的标签也会重叠

<head>
  <style type="text/css">
    /* 如下代码，AAA和BBB之间的距离是多少？ */
    div {
      font-size: 16px;
      line-height: 1;
      margin-top: 10px;
      margin-bottom: 15px;
    }
  </style>
</head>
<body>
  <div>AAA</div>
  <div></div>
  <div></div>
  <div></div>
  <div>BBB</div>
  答案：15px
</body>

margin负值的问题

对margin的 top、left、right、bottom设置负值，有何效果？

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

BFC理解和应用

什么是BFC、如何应用

Block format context ，块级格式化上下文
一块独立渲染区域，内部元素的渲染不会影响边界以外的元素

形成BFC的常见条件
- float 不是none
- position是absolute 或者fixed
- overflow 不是visible，
- display是flex、inline-block等
BFC的常见应用
- 清除浮动。设置容器的overflow为hidden、浮动元素后面相邻元素的overflow也设置为hidden

float布局的问题，以及clearfix

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

圣杯布局

使用float布局
中间内容部分设置padding，为两侧预留空间
左侧部分设置 margin-left：-100%；position：relative；right：自身宽度；
右侧部分设置margin-right: -自身宽度;

双飞翼布局

使用float布局
中间内容部分设置margin，为两侧预留空间
左侧部分设置 margin-left：-100%；，自身宽度为左侧预留空间宽度
右侧部分设置margin-left: -自身宽度;

手写clearfix

定位

CSS 定位 - 抽屉

使用 HTML + CSS 实现一个网页右侧的抽屉。要求

网页加载时，抽屉不显示
1s 之后显示抽屉，3s 之后隐藏抽屉
显示和隐藏最好要有 transition 效果

position: fixed;定位元素，相对于视口定位的，这意味着即使滚动页面，它也始终位于同一位置。 top、right、bottom 和 left 属性用于定位此元素。

步骤：

使用position: fixed;定位元素
使用定时器控制显隐

<head>
    <title>CSS 抽屉</title>
    <style>
        #drawer-container {
            width: 0;
            height: 100%;
            position: fixed;
            right: 0;
            top: 0;
            transition: width .3s;
        }
    </style>
</head>
<body>
    <p>CSS 抽屉</p>
    <div id="drawer-container" style="background-color: #ccc;">
        抽屉
    </div>

    <script>
        const drawerContainer = document.getElementById('drawer-container')
        
        setTimeout(() => {
            drawerContainer.style.width = '300px'
        }, 1000)

        setTimeout(() => {
            drawerContainer.style.width = '0'
        }, 3000)
    </script>
</body>

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

relative(相对定位)依据自身定位
absolute(绝对定位)依据最近一层的定位元素定位

定位元素

absolute relative fixed
body

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

水平居中：

使用flex：display: flex; justify-content: center
inline元素：text-align:center
block元素：margin:auto
absolute元素：left:50%+margin-left负值（必须知道元素的宽度和高度）

   {
       width: 300px;
       height: 100px;
       position: absolute;
       left: 50%;
       margin-left: -150px;
   }

垂直居中：

使用flex：display: flex; align-items: center
line-height和height一致
absolute元素：top:50%+margin-top负值（必须知道元素的宽度和高度）

 {
     width: 300px;
     height: 100px;
     position: absolute;
     left: 50%;
     margin-left: -150px;
     top: 50%;
     margin-top: -50px;
 }

absolute元素：transform: translate(-50%, -50%)不知道元素的宽度和高度，css3不保证浏览器的兼容性）

  {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%)
  }

absolute元素：top,left,bottom,right=0+margin:auto（既不知道元素的宽度和高度，又要保证浏览器兼容性）

{
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    margin: auto;
}

图文样式

line-height的继承的问题

写具体数值，如30px，则继承该值
写比例，如2、1.5，则继承该比例，
写百分比，如200%，则继承父元素计算出来的值（考点）

line-height继承.png

答案：line-height： 40px

响应式

rem是什么？

rem是一个长度单位

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

如何通过rem实现响应式？

使用media-query（css3中的新定义，可以查询不同屏幕的宽度），根据不同的屏幕宽度设置根元素的font-size
使用rem，基于根元素的相对单位

@media only screen and (max-width: 374px) {
    /* iphone5 或者更小的尺寸，以 iphone5 的宽度（320px）比例设置 font-size */
    html {
        font-size: 86px;
    }
}
@media only screen and (min-width: 375px) and (max-width: 413px) {
    /* iphone6/7/8 和 iphone x */
    html {
        font-size: 100px;
    }
}
@media only screen and (min-width: 414px) {
    /* iphone6p 或者更大的尺寸，以 iphone6p 的宽度（414px）比例设置 font-size */
    html {
        font-size: 110px;
    }
}

body {
    font-size: 0.16rem;
}

vw/vh

rem的弊端
网页视口尺寸
vw/vh

rem的弊端：“阶梯”性

网页视口尺寸：

window.screen.height //屏幕高度
window.innerHeight //网页视口高度
document..body.clientHeight //body高度

vw/vh:

vh网页视口高度的1/100
vw网页视口宽度的1/100
vmax取两者最大值；vmin取两者最小值

    <script>
        // window.innerHeight === 100vh
        // window.innerWidth === 100vw
    </script>

CSS3（flex、动画）

flex

Flex 是 Flexible Box 的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性。

flex画色子

flex实现一个三点的色子

三点的色子.png

<!DOCTYPE html>
<html>
<head>
<style>
.flex-container {
  height: 200px;
  width: 200px;
  background-color: #f1f1f1;
    
  display: flex;   /* flex布局 */
  justify-content: space-between;  /* 两端对齐 */
}

.flex-container > div {
  background-color: DodgerBlue;
  width: 50px;
  height: 50px;
  border-radius: 50%;
}
</style>
</head>
<body>
<div class="flex-container">
  <div></div>
    <!-- 第二项居中对齐 -->
  <div style="align-self: center"></div> 
     <!-- 第三项尾对齐 -->
  <div style="align-self: flex-end"></div>
</div>

</body>
</html>

CSS 布局 “四合院”

如下图，宽度和高度都撑满浏览器。用 HTML + CSS 实现。

CSS四合院.png

注意

清除 body 默认的 margin padding
高度撑满浏览器（body 纵向 flex (flex-direction: column;)+ html { height: 100% } ）
使用HTML 语义化标签（如有导航时，用 <nav>）

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS 四合院</title>
    <style>
        html * {
            margin: 0;
            padding: 0;
        }
        html {
            height: 100%;
        }
        body {
            display: flex;
            flex-direction: column;
            height: 100%;
        }
        #header {
            height: 50px;
            background-color: red;
        }
        #container {
            flex: 1;
            display: flex;
        }
        #left-container {
            width: 100px;
            background-color: green;
        }
        #main-container {
            flex: 1;
            background-color: #ccc;
        }
        #right-container {
            width: 200px;
            background-color: yellow;
        }
        #footer {
            height: 50px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <!-- HTML5 标签 语义化 -->
    <header id="header">
        header
    </header>
    <section id="container">
        <aside id="left-container">left</aside>
        <section id="main-container">main</section> <!-- 或者用 article ，看用途 -->
        <aside id="right-container">right</aside> <!-- 或者用 section ，看用途 -->
    </section>
    <footer id="footer">
        footer
    </footer>
</body>
</html>

动画

定义动画

@keyframes 动画名称 {

from {}

to {}

}

keyframe: 关键帧

from：开始状态

to: 结束状态

还可以用百分数来表示该时间内动画所处的状态

如： from可以写成0%， to可以写成100%

    /* 关键帧 */
        @keyframes ickt {
            /* 关键帧 */
            /* 第一帧 */
            0% {
                transform: translate(0, 0) scale(1) rotate(0);
            }
            /* 第二帧 */
            25% {
                transform: translate(600px, 300px);
            }
            /* 第三帧 */
            50% {
                /* transform: scale(3) rotate(360deg); */
            }
            /* 第四帧 */
            75% {
                transform: scale(0.5) translate(100px, 300px);
            }
            /* 最后一帧：如果要循环播放，最后一帧通常与第一帧一样 */
            100% {
                transform: translate(800px, 0) scale(1) rotate(0);
            }
        }

        /* 关键帧 */
        @keyframes music {
            /* 开始相当于0% */
            from {
                transform: rotate(0);
            }
            /* 结束相当于100% */
            to {
                transform: rotate(360deg);
            }
        }

调用动画

animation

animation: donghua 1.5s linear 0s 3 alternate forwards;

参数解释：

第一个参数：要调用的动画名称

第二个参数：完成一次动画的时间，单位是s。

第三个参数：缓冲描述

第四个参数：延迟时间，单位是s。

第五个参数：动画的次数。infinite(无限)

第六个参数：自动补全反方向的动画。

第七个参数：保持最后一帧的状态。

html-css