CSS重温加固笔记
慕课链接:https://coding.imooc.com/class/chapter/164.html
暑假第一步:因为好久没弄前端的东西了,先系统温故下知识,别说还真有新收获
基础知识
设配移动端的第一步:
在header里面加上**“viewport”**
1 | <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
HTML 相关需要关注的点

1 | <button type="button">普通按钮</button> |
HTML版本迭代
新的HTML5的新增语法:http://h5o.github.io/ 可以像看大纲一样看

验证网站:https://validator.w3.org/check
1 | <!--在XML中--> |
HTML分类
会不会独占一行:块级 block — inline-block — 行内 inline

HTML嵌套关系
块级元素可以包含行内元素的
块级元素不一定能包含行内元素的
“行内元素一般不能包含块级元素” <a>可以包含块级元素
引入CSS Reset 来重置浏览器带来的样式
<style> *{ margin:0; padding:0; } </style>
CSS布局
选择器的分类

选择器权重
累加是不进位的


字体


文字的 vertical-align 来设置一行文字通过什么线进行对齐
使用display: block 将inline换成块元素
滚动
- visible:滚动条隐藏
- hidden:滚动条隐藏
- scroll:滚动条显示
- auto:滚动条自动显示
文字折行
- overflow-wrap 通用换行控制
- word-break 针对多字节文字
- white-space 空白处是否可以换行
如何隐藏checkbox

布局知识体系


- Float
- 可以将inline形成块
- 位置尽量靠上
- 不影响其他块级元素位置
- 影响其他块级元素内部文本
清除浮动的方式:

响应式
隐藏 + 折行 + 自适应空间
加上 viewport

- rem单位:根据font-size进行设置
动画和效果




- transition 使用
- 关键帧使用:


框架集成和CSS工程
预处理器

- 变量:


- mixin 复用样式:直接加在css中



- extend


- loop 循环



- import 模块化

- 框架处理
- compass
- est
Bootstrap
去官网看文档:提供了CSS与JS组件


工程化
- PostCSS


- webpack


本博客所有文章除特别声明外,均采用 CC 4.0 BY-SA 许可协议。转载请注明来自 恒HengY1毅!
评论