CSS&CSS3与经典布局

【什么是CSS？什么是CSS3？】

CSS：(Cascading Style Sheets，层叠样式表)是一种用来表现HTML或XML等文件样式的计算机语言。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS3：CSS3是CSS(层叠样式表)技术的升级版本，于1999年开始制订，2001年5月23日W3C完成了CSS3的工作草案，主要包括盒子模型、列表模块、超链接方式、语言模块、背景和边框、文字特效、多栏布局等模块。

【BFC】

具体参考：https://www.itcast.cn/news/20201016/16152387135.shtml

【CSS/CSS3 单位】

1、CSS长度值单位

单位	含义
em	相对于父元素的字体大小
ex	相对于小写字母"x"的高度
gd	一般用在东亚字体排版上，这个与英文并无关系
rem	相对于根元素字体大小
vw	相对于视窗的宽度：视窗宽度是100vw
vh	相对于视窗的高度：视窗高度是100vh
vm	相对于视窗的宽度或高度，取决于哪个更小
ch	相对于0尺寸
px	相对于屏幕分辨率而不是视窗大小：通常为1个点或1/72英寸
in	inch, 表英寸
cm	centimeter, 表厘米
mm	millimeter, 表毫米
pt	1/72英寸
pc	12点活字，或1/12点
%	相对于父元素。正常情况下是通过属性定义自身或其他元素

2、时间、频率、角度单位

单位	含义
deg	degrees, 角度
grad	grads, 百分度
rad	radians, 弧度
turn	turns, 圈数
ms	milliseconds, 毫秒数
s	seconds, 秒数
Hz	Hertz, 赫兹
kHz	kilohertz, 千赫

具体参考：https://www.zhangxinxu.com/wordpress/2011/03/css-css3-unit-units/

 【CSS3新特性】

1、CSS3选择器

2、@font-face特性

3、圆角

4、多列布局

5、阴影

6、CSS3渐变效果

7、CSS弹性盒子模型

8、transition对象变换时过度效果

9、transforms 2D转换效果

10、animations动画效果

具体参考：https://www.cnblogs.com/star91/p/5659134.html

【CSS兼容】

CSS属性兼容性查询网址：http://www.caniuse.com/

兼容性前缀：

1、-webkit-，对应浏览器：Chrome（谷歌）、Safari（游猎）

2、-moz-，对应浏览器：Firefox（火狐）

3、-ms-，对应浏览器：IE

4、-o-，对应浏览器：Opera（欧朋）

兼容性处理参考：https://blog.csdn.net/qq_40001322/article/details/80867660

【盒模型 & 弹性盒模型】

具体参考：盒模型与FlexBox弹性盒模型

【CSS经典布局】

 在布局之前，请先了解 Flex语法 、 Grid语法

1、空间居中布局

.container {
    display: grid;
    place-items: center;
} 

2、并列式布局

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

3、两栏式布局

.container {
    display: grid;
    grid-template-columns: minmax(150px, 25%) 1fr;
}

4、三明治布局

.container {
    display: grid;
    grid-template-rows: auto 1fr auto;
}

5、圣杯布局

<div class="container">
    <header/>
    <div/>
    <main/>
    <div/>
    <footer/>
</div>

.container {
    display: grid;
    grid-template: auto 1fr auto / auto 1fr auto;
}

具体参考：http://www.ruanyifeng.com/blog/2020/08/five-css-layouts-in-one-line.html

【Sass】：https://www.sass.hk/docs/