前端与 HTML，CSS｜ 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天

第一天学习了前端基本课程内容，我将我理解不深刻的内容做了一些笔记😁。

我本人是搭配Typora来做笔记的，当我观看全屏课程视频的时候，可以把Typora保持在最前端。所以能够一边看视频一边做笔记，很不错。就是不知道换成直播课会怎么样，应该也还可以记录吧。🤩（点赞一下这个掘金写文章，可以识别错别字并提醒修改！！）

接下来看看我的笔记：

什么是前端？

解决多端人机交互。

多看w3c和mdn。

• normal 把多个空格和换行字符省略掉
• nowrap 不自动换行，把多个空格和换行字符省略掉
• pre 不自动换行，保留所有的，保留多个空格和换行字符
• pre-warp 自动换行，保留多个空格和换行字符
• pre-line 自动换行，保留换行字符，多个空格省略

特异度

float 多用在文字环绕

postion:absolute 脱离常规流，相对于最近的非static祖先定位（如relative

顺便还写了个代码片段：无js，纯css操控切换主题🥲

我实在是感慨，这掘金文章也太好用了吧😄！！！（我要为掘金工作奋斗！！！

来看看我的HTML和CSS:

<input id="modeCheckBox" type="checkbox"/>
<div class="content">
  <label for="modeCheckBox" id="icon">
  </label>
  <h1>无js，纯css操控切换主题</h1>

  <img src="https://p3-passport.byteimg.com/img/user-avatar/a3068314b8bc9fd78117da8d0100242d~100x100.awebp" />
  <br>
  <div>青训学习第一天</div>
  <div>点击图标即可切换主题</div>
</div>

body{
  margin: 0;
  padding: 0;
}
.content{
  min-height: 100vh;
  background: white;
  color: black;
  padding: 20px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
#modeCheckBox{
  display: none;
}

#modeCheckBox:checked+.content{
  background: black;
  color: white;
}
#modeCheckBox:checked+.content>#icon::after{
    content: '🌜';
}
#icon::after{
  content: '☀️';
}

实现纯CSS其实关键点就是：#modeCheckBox:checked

input的checkbox类型，可以标记一个属性值，当他改变了主题就跟着变化啦~🤔

这里是[可嘉的掘金博客]([可嘉的掘金博客 的个人主页 - 动态 - 掘金 (juejin.cn)](https://juejin.cn/user/378680749333096))，下次见！