这是我参与「第四届青训营 」笔记创作活动的的第3天
在页面中使用CSS
CSS是如何工作的
选择器优先级
如果一个元素使用了多个选择器，则会按照选择器的优先级来定样式。
css计算
块级元素
什么是块级元素：
- 块级元素结独占一行
- 允许设置宽高
- 可设置width、height、margin、padding
常见块级元素：div、p、h1-h6、form、ul、ol、dl、dt、dd、li、table、tr、td、th、hr
行内元素
- 不能独占一行，与其他行内元素排成一行
- 不能设置width、height、margin、padding
- 默认宽度为其内容宽度（盒子宽高由内容撑起）
常见行内元素：span、img、a、label、code、input、abbr、em、b
行内块元素
- 可设宽高（默认是内容宽高），也可以设置内外边距
- 默认宽度就是他本身内容的宽度
- 和相邻行内块在一行上，但是之间会有空白间隙
注：添加css可转化为行内块：display: inline-block
布局
布局是什么？
- 确定内容的大小和位置的算法
- 依据元素，容器，兄弟节点和内容等信息来计算
静态布局
- 布局特点：静态布局是最为原始的布局方式，制作的网页上的元素尺寸一律以px为单位。
- 优点：这种布局对于新手而言较为简单，容易让人学会。这种布局一般用于企业的门户网站。
- 缺点：大小固定死，不会随屏幕大小而发生变化。
自适应布局
- 布局特点：屏幕分辨率变化时，页面里面元素的位置会变化而大小不会变化。
- 优点：对网站的复杂程度兼容性更大，测试时更加容易，运营相对更加精准。
- 缺点：需要根据不同使用场景开发多套界面。
流式布局
- 布局特点：流式布局是用于解决类似的设备不同分辨率之间的兼容 (一般分辨率差异较少)，使用百分比布局，页面元素的宽度按照屏幕分辨率进行适配调整，但整体布局不变。代表作栅栏系统（网格系统）。
- 优点：用来应对不同尺寸的PC屏幕，在移动端开发也是常用布局方式
- 缺点：如果屏幕尺度跨度太大，那么在相对其原始设计而言过小或过大的屏幕上不能正常显示。
响应式布局
- 布局特点：每个屏幕分辨率下面会有一个布局样式，即元素位置和大小都会变。
- 优点：适应pc和移动端，如果足够耐心，效果完美
- 缺点：（1）媒体查询是有限的，也就是可以枚举出来的，只能适应主流的宽高。（2）要匹配足够多的屏幕大小，工作量不小，设计也需要多个版本。
弹性布局
- 布局特点：包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位，使用em/rem做单位，可以使包裹文字的元素随着文字的缩放而缩放。
- 优点：理想状态是所有屏幕的高宽比和最初的设计高宽比一样，或者相差不多，完美适应。
- 缺点：高度没有做到自适应，一些对高度，或者元素间距要求比较高的设计，则这种布局没有太大的意义。如果只是宽度自适应，更推荐响应式设计。
总结
本次对CSS的学习，学习的内容很多，要记的东西不少但是都很有趣，结合例程再通过自身在VS code上的实践，更能够强化我自身的动手能力和学习领悟，深化了自身对于CSS一些基本概念的学习和掌握程度，并通过学习了解了CSS和HTML之间的联系及如何互相结合运用，收获了很多新的东西。
