流的布局display--inline;
(转换为行内元素)none(隐藏不保留原来的位置)--重要！
clear:both（清除浮动后内容超出的部分隐藏）复习：float:right;
1.
之前解决父子关系水平嵌套的合并问题。

边框样式border-style：
solid(实线) dotted(点状线) dashed(虚线)
double(双线) groove(凹槽线) ridge(脊线)
inset(内凹) outset(外凸)

盒阴影box-shadow：

    源点(x y)
    模糊半径-blur
    扩散半径-spread-radius
    颜色-color

2.
清除浮动方式：
外部引入一个div.clear：{clear:both;}(最简单的方法，但会破坏原有的布局)
给父级添加overflow: auto;
添加伪元素:after和:before实现（高级方法）

背景裁剪background-clip:
padding-box(仅剪切到边框位置)
border-box(仅剪切到边缘盒子的大小)
content box(内容区域外)

内联块inline-block，既可以拥有块状容器的特性，又能像行内元素一样在一行显示。

伪元素：

:after 和 :before 用于在元素内部插入内容。
元素样式可以应用于伪元素上，但在渲染树中并不存在这些元素。

响应式布局媒体查询：

@media screen and (min-width: 769px){...} //宽屏
@media screen and (max-width: 768px) and (min-width: 481px){...} //平板
@media screen and (max-width: 480px){...}} //手机

动画animation：
animation-name(动画名)
animation-duration(动画时长)
animation-timing-function(动画曲线)
animation-delay(延迟时间)

过渡transition：
transition-property(变更属性)
transition-duration(过渡时长)
transition-timing-function(过渡曲线)
transition-delay(延迟时间)

响应式图片：
使用srcset属性，为不同设备提供不同尺寸的图片。

伪类：

:hover(鼠标悬停状态)
:active(鼠标按下状态)
:focus(获取焦点状态)
:disabled(禁用状态)

CSS变量 --var(--name, value);
用于存储特定的值，并在整个文档中使用该值，提高了代码的可维护性。

响应式背景：
可以使用calc()函数来计算尺寸。
background-size: cover;
保持图片的宽高比填充整个元素。

利用HTML5中的canvas和svg绘制图形：
canvas：使用JavaScript直接在网页上绘图。
svg：矢量图，放大缩小不模糊，支持交互。

CSS选择器优先级：

内联样式 > ID选择器 > 类选择器 > 标签选择器