又是经典的搜索框制作环节

[这次一起来制作极简的搜索栏，再介绍介绍根选择器root和相对单位rem，并在搜索框的实战中使用上]

上效果图！

这是默认状态下的搜索框

这是点击输入后的搜索框

制作搜索栏

这次的搜索栏的制作就略微简略一些，想看详细的可以看前几篇作品，这一次主要的是介绍根选择器root和相对单位rem

直接上HTML代码

<body>
    <!-- 前端的天职把html写好  语义化标签代表,div 有利于搜索引擎优化-->
    <header>
        <form id="from">
            <!-- html5表单的增强能力 -->
            <input type="text" id="search" class="search" placeholder="Search">
        </form>
    </header>
    <main id="main">
        <div class="col">无敌的答辩超人</div>
        <div class="col">百事可乐</div>
        <div class="col">茉莉蜜茶</div>
        <div class="col">冰红茶</div>
        <div class="col">勒布朗</div>
    </main>
    <!-- 阻塞 -->
    <script scr="./movie.js" ></script>
</body>

创建form搜索表单，包含搜索框和相关元素
创建主函数main，涵盖搜索框以下的主体部分

其实和之前大差不差，但还有一些小细节： <header></header>将<div></div>替换了，其主要原因是为了培养我们拥有良好的代码素养，语义化标签代表有利于搜索引擎优化

接下来开始CSS的编写

良好的习惯，先进行全局设置 box-sizing: border-box使元素的宽度和高度包括边框和内边距。

*
    margin 0
    padding 0
    box-sizing border-box

介绍一下`:root`

:root选择器在CSS中用于选取文档的根元素，这种方式定义的CSS变量可以在文档的任何地方使用，允许在整个样式表中复用和动态改变颜色等样式属性，而不需要重复编写相同的代码。说简单点便是：改一处动全身

例如，你可以这样使用这个，如此在进行长编译进行页面设置的时候便可以轻松调用相同的元素

:root
    --primary-color: #f69797;
    --secondary-color: #df6bb6;
    --white-color: #fff;
    --placeholder-color: #346875;
body
    background-color: var(--primary-color)

接着制作搜索框主体

设置搜索框的颜色、布局
设置框内的格式、颜色、以及字体的格式颜色等
构建伪类，实现点击后的焦点事件

html
    font-size: 20px
body
    background-color: var(--primary-color)
    font-family: sans-serif

header
    background-color: var(--secondary-color)
    padding 1rem // rem根据根元素字体大小计算
    display flex
    justify-content: center// 侧轴设置
    flex-direction: column// 主轴设置为垂直居中
    height 100px
    align-items: center// 垂直居中
    .search
        background-color transparent
        border 2px solid var(--primary-color)
        border-radius 50px
        font-family inherit// 继承父元素字体
        font-size 1rem
        padding 0.5rem 1rem
        color: var(--white-color)
        &::placeholder
            color var(--placeholder-color)
        &:focus// 获得焦点
            outline 4px solid rgb(220, 62, 122)
            background-color: var(--primary-color)

可以发现小细节，设置许多长度的单位都为rem,例如：padding 1rem、font-size 1rem、padding 0.5rem 1rem

再介绍介绍`rem`

rem 是相对单位，相对于html这个根元素的font-size其默认字体大小是16px 千万别小瞧它，它是移动端适配的法宝，为了让我们设置的页面能够稳定地在各式各样的手机上完美展现它可是大工程，不管你的手机原始设置是什么牛鬼蛇神，我的大小就根据的牛鬼蛇神来定制

最后制作main部分

我这里就简单的写一些，为了实现各位大佬的功能，还请自行添加

main
    display flex
    flex-wrap: wrap //  换行
    justify-content: flex-start // 侧轴设置
    .col
        width 300px
        height 200px

（附上完整的由styl转编译的CSS代码）

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
:root {
  --primary-color: #f69797;
  --secondary-color: #df6bb6;
  --white-color: #fff;
  --placeholder-color: #346875;
}
html {
  font-size: 20px;
}
body {
  background-color: var(--primary-color);
  font-family: sans-serif;
}
header {
  background-color: var(--secondary-color);
  padding: 1rem;
  display: flex;
  justify-content: center;
  flex-direction: column;
  height: 100px;
  align-items: center;
}
header .search {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  border-radius: 50px;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.5rem 1rem;
  color: var(--white-color);
}
header .search::placeholder {
  color: var(--placeholder-color);
}
header .search:focus {
  outline: 4px solid #dc3e7a;
  background-color: var(--primary-color);
}
main {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
}
main .col {
  width: 300px;
  height: 200px;
}

极简主义的搜索栏，root根选择器及rem相对单位的介绍与使用

又是经典的搜索框制作环节

制作搜索栏

接下来开始CSS的编写

介绍一下:root

再介绍介绍rem

介绍一下`:root`

再介绍介绍`rem`