像大黄蜂、擎天柱一般有智慧能思考的“汽车人”成为汽车智能化发展的目标与方向。当前，行业内各大车企也在纷纷努力给汽车注入更多智能基因，不断向自动驾驶迈进，但囿于技术限制，大多数智能汽车都还处于感知智能阶段，无法完全实现安全自动驾驶，因为当人工智能算法对相应的驾驶数据信息进行判断时，会因数据库不完整而难以做出正确抉择，进而导致判断失误，出现安全问题。
那么，面对复杂的自动驾驶场景，长城汽车的底气又从何而来呢？
能思考会学习 实现每一种场景中的准确判断
想要真正实现安全的自动驾驶，汽车需要具备更高阶的认知智能，具备学习、思考和判断等认知能力，能够在驾驶过程中随机应变，除了需要解决车的环境感知、信息融合、路线规划等问题，还需要具备对随时变化的交通环境数据进行推断的功能，从而能够在各种复杂场景中做出快速科学的驾驶判断。
为此，长城汽车针对中国特色的复杂交通状况，通过知识图谱的方式，首创以CSS模型为核心的双认知智能模型，可理解为协同场景安全认知智能模型。这个模型具有思考和学习的能力，不仅可以适应环境，还可以将用户的每一次路况难题记录下来，然后形成大量经验，并将经验总结成了一些公理，再通过专家系统、模式匹配等应用实例找到这些问题的解决办法，成为具有认知智能的AI，在下一次遇到类似问题时自动判别，找到与问题相对应的解决办法。
目前CSS模型总结出的公理包括在事故多发场景下保持警惕，提前规避，避免出现在其他交通参与者的感知盲区等，主动和其他交通参与者交互表达自身驾驶意图，在车辆能力下降时采用谨慎的驾驶策略，让速不让道等，大幅提升了复杂交通状况下自动驾驶的安全性。
数十万复杂场景积累 保障每一次自动驾驶的安全
为了保障自动驾驶在每一个场景中的科学判断，CSS模型采用专家库方式来定义自动驾驶场景，并结合了场景安全因子，应用数据驱动的方式来解决自动驾驶的规控问题，目前在专家库方面，长城汽车已经积累了数十万个典型的自动驾驶场景，覆盖自动驾驶过程中“高速主路－城市开放路－城市快速路－上下匝道－路口”全路形行驶，在不同的交通场景下，均能执行可靠的自动驾驶策略动作，如行人礼让，自动变道等。
值得一提的是，长城汽车CSS模型专家库所积累的海量自动驾驶场景中，大部分是通常所说的自动驾驶“绊脚石”——CONER CASE，也就是不同于常规驾驶场景的复杂边角场景，例如，一个人带着一条狗在高速公路上跑、一匹马车在车流中穿梭等，而当前的AI在面对以上没有学习过的特殊场景时便会表现得束手无策，造成安全问题。CSS模型采用了传统深度学习和增强学习双核心技术，掌握海量边边角角的场景的同时还能实现一些个性化的自生长场景，并科学匹配相应驾驶模式，对于一些没有遇到过的CONER CASE，还能根据专家库挖掘出与之匹配的模式，有效解决自动驾驶应用于复杂场景的驾驶问题，高效助力真正自动驾驶时代到来。
CSS双认知智能模型构建了长城汽车咖啡智驾认知智能的基础根基。作为咖啡智能2.0中的重要一环，咖啡智驾与全新电子电气架构、智慧线控底盘、智能座舱等智能化杀手锏的完美配合，使汽车成为有思想、个性化、可成长的智慧出行伙伴。相信随着长城汽车在智能化领域的不断投入与发展，咖啡智能将实现快速突破，加速长城汽车向全球化智能科技公司转型，而“汽车人”的梦想场景也终将走入我们的生活。
CSS 有 非常重要的 三个特性：层叠性、继承性、优先级。
相同选择器 给设置 相同的样式，此时一个样式就会 覆盖（层叠） 另一个冲突的样式。
层叠主要解决样式冲突的问题 。
层叠性原则：
CSS中的继承：子标签会继承父标签的某些样式，如 文本颜色 和 字号。
简单理解：子承父业。
当同一个元素指定多个选择器，就会有优先级的产生。
优先级注意点：
权重叠加 ：如果是复合选择器，则会有权重叠加，需要计算权重。
练习：
页面布局要学习三大核心： 盒子模型, 浮动 和 定位 .
学习好盒子模型能非常好的帮助我们布局页面.
网页布局过程：
网页布局的核心本质： <u> 就是利用 CSS 摆盒子 </u>。
所谓 盒子模型 ：就是把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器。
CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括：<u>边框</u>、<u>外边距</u>、<u>内边距</u>、和 <u>实际内容</u>
border可以设置元素的边框。边框有三部分组成： 边框宽度(粗细)、 边框样式 、 边框颜色
语法：
CSS 边框属性允许你指定一个元素边框的 样式 和 颜色 。
语法
边框样式 border-style 可以设置如下值：
边框简写：
边框分开写法：
课堂要求：请给一个 200*200 的盒子，设置上边框为红色，其余边框为蓝色（提示：一定注意边框的层叠性）
border-collapse 属性控制浏览器绘制表格边框的方式。它控制相邻单元格的边框。
语法：
边框会额外增加盒子的实际大小。因此我们有两种方案解决:
padding 属性用于设置内边距，即 边框与内容 之间的距离。
padding 属性（简写属性）可以有一到四个值。
以上 4 种情况，我们实际开发都会遇到。
内边距会影响盒子实际大小
当我们给盒子指定 padding 值之后，发生了 2 件事情：
也就是说，如果盒子已经有了宽度和高度，此时再指定内边框，会撑大盒子。
解决方案：
<u>如果保证盒子跟效果图大小保持一致</u>，则 让 width/height 减去多出来的内边距大小 即可。
padding内边距可以撑开盒子,我们可以做非常巧妙的运用.
因为每个导航栏里面的字数不一样多,我们可以不用给每个盒子宽度了,直接给padding最合适。
相关取值:
padding内边距可以撑开盒子, 有时候,也会让我们去修改宽度。
现实开发时候，小米侧边栏，文字距离左侧的距离不能用text-indent调整，这样不精确，实际开发的做法是：给padding值，这样更加精确
如果盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小.
margin 属性用于设置外边距，即控制盒子和盒子之间的距离。
margin 简写方式代表的意义跟 padding 完全一致。
外边距可以让 块级 盒子 水平居中 ，但是必须满足两个条件：
① 盒子必须指定了宽度（width）。
② 盒子 左右的外边距 都设置为 auto 。auto----自动
常见的写法，以下三种都可以：
注意： 以上方法是让块级元素水平居中， 行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。
使用 margin 定义块元素的 垂直外边距 时，可能会出现外边距的合并。
主要有两种情况:
1. 相邻块元素垂直外边距的合并
2. 嵌套块元素垂直外边距的塌陷
当上下相邻的两个块元素（兄弟关系）相遇时，如果上面的元素有下外边距 margin-bottom，下面的元素有 上外边距 margin-top ，则他们之间的垂直间距不是 margin-bottom 与 margin-top 之和。取两个值中的 较大者这种现象被称为 相邻块元素垂直外边距的合并 。
解决方案：
对于两个嵌套关系（父子关系）的块元素，父元素有上外边距同时子元素也有上外边距，此时父元素会塌陷较大的外边距值。
解决方案：
① 可以为父元素定义上边框。
② 可以为父元素定义上内边距。
③ 可以为父元素添加 overflow:hidden。
还有其他方法，比如浮动、固定，绝对定位的盒子不会有塌陷问题，后面再总结。
网页元素很多都带有默认的内外边距，而且不同浏览器默认的也不一致。因此我们在布局前，首先要清除下网页元素的内外边距。
注意： 行内元素为了照顾兼容性，尽量只设置左右内外边距，不要设置上下内外边距(因为设置了也不起作用)。但是转换为块级和行内块元素就可以了。
因为网页美工大部分效果图都是利用 PS（Photoshop） 来做的，所以以后我们大部分切图工作都是在 PS 里面完成。
因为网页美工大部分效果图都是利用 PS（Photoshop） 来做的，所以以后我们大部分切图工作都是在 PS 里面完成。
总结
标签都是有语义的, 合理的地方用合理的标签。比如产品标题 就用 h, 大量文字段落就用p
类名就是给每个盒子起了一个名字,可以更好的找到这个盒子, 选取盒子更容易,后期维护也方便。
大部分情况两个可以混用，两者各有优缺点，但是根据实际情况，总是有更简单的方法实现。
布局有很多种实现方式，同学们可以开始先模仿我的写法，然后再做出自己的风格。
最后同学们一定多运用辅助工具,比如屏幕画笔,ps等等
去掉 li 前面的 项目符号（小圆点）
语法：
圆角边框、盒子阴影、文字阴影
（重点记住前两个，文字阴影做了解）
在 CSS3 中，新增了 圆角边框 样式，这样我们的盒子就可以变圆角了。
border-radius 属性用于设置元素的外边框圆角。
语法：
radius 半径（圆的半径）原理：（椭）圆与边框的交集形成圆角效果
CSS3 中新增了盒子阴影，我们可以使用 box-shadow 属性为盒子添加阴影。
语法：
注意 ：
在 CSS3 中，我们可以使用 text-shadow 属性将阴影应用于文本。
语法：
粗细font-weight
设置文字是否加粗显示 。 有两种类型 ：单词类型、数字类型
单词类型 | 属性值 | 说明
| normal | 默认值，定义批准的字体
| bold | 定义粗体字符 ，b strong标签 的默认值
| bolder | 定义更粗的字体
| ligher | 定义更细的字体
数字类型 100-900之间的整百数字。数字越大文字显示越粗。 400==normal 700==bold
字体风格font-style
设置字体是否斜体显示。
| 属性值 | 说明
|normal | 设置正规的字体 ， 大多是标签的默认值
| italic | 设置斜体的文字 ，主要针对英文，要求英文以字体中的斜体样式显示
| oblique | 设置斜体的文字 ， 只是将文字倾斜显示 ， 与字体无关
**行高 line-height **
设置的是一行文字实际占有的高度，文字字号在行高中是垂直居中的。
| px 像素值 | 设置的行高的具体像素值
| 百分比数值 | 设置的本身字号像素值的百分比
字体综合font
1.字号 、 字体
2.字号 /行高 、字体重点是字号和行高之间使用 /
3.加粗和斜 体两个值之间可以互 换位置 、 字号、行高、字体不能更改位置。
水平对齐text-align
设置文本水平方向的对齐
| 属性名 | 作用 |
| left | 居中对齐，大部分标签的默认值
| center | 居中对齐
|right| 居右对齐
文本修饰 text-decoration
设置文本整体是否有线条的修饰效果
| 属性名 | 作用 |
| none| 没有修饰， 大部分标签的默认值
| overline | 上划线
| line-through | 中划线，删除线<del>标签的默认值
| underline | 下划线，<a>标签的默认值
**缩进 text-indent **
设置段落首行是否进行缩进
| px 单位 | 表示首行缩进多少像素
| em单位 | 首行缩进几个中文字符的位置
| 百分比 | 表示缩进文字所在标签的父级标签width 属性值的百分比
书写元素内容区域 width+height
盒子可以实体化的区域 width + height + padding + border
盒子实际占位的位置width + height + padding + border + margin
宽度width 高度height
设置可以添加元素内容的区域的宽度
| auto | 默认值，浏览器可计算出实际的宽度
| px | 像素值定义的宽度
| % | 定义参考父元素宽度width 的百分比宽度
内边距padding 、 外边距margin
内边距padding：设置的是元素的边框内部到宽高区域之间的距离。
外边距margin： 设置的是盒子与盒子之间的距离。
四值法 上右下左 padding : 10px 20px 30px 40px
三值法 上 左右 下
二值法 上下 左右
单值法 四个值相同
边框border
设置的是内边距外面的边界区域 作为盒子的实体化的最外层
border ：“宽度 线 颜色 “
border-style | 属性值 | 说明
| none | 定义无边框
| solid | 定义实线
| dashed | 定义虚线 在大多数浏览器中呈现为实线
| dotted | 定义点状边框，在大多数浏览器中呈现为实线
| double | 定义为双线，双线的边框的宽度等于 border-width的值
| groove | 定义3D凹槽边框，其效果取决于border-color 的值
| ridge| 定义3D垄装边框，其效果区域于border-color 的值
| inset| 定义3D内容凹陷效果，其效果取决于border-color 的值
| outset | 定义3D内容凸出效果，其效果取决于border-coloe 的值
清除默认样式
1.大部分容器标签都有默认边距，要么用标签选择器的并集方式，要么通配符清除。
2.<ul>和<li>两种列表有默认的列表前缀，清除list-style属性
3.<a>标签的默认样式，顺带设置页面中常用的a的公共样式：color和text-decorstion
4.清除默认加粗效果:设置font-weight
父子盒模型
父元素的width >= 所有子元素width + padding + border + margin
margin塌陷现象
margin塌陷现象：在垂直方向如果有两个元素的外边距有相遇的，浏览器中加载的 真正的外边距不是两个间距的加和，而是两个边距中值较大的，边距值小的塌陷到 了边距值大的值内部
同级元素塌陷： 大的margin吃掉小的
标准文档流：指得是元素排版布局过程中，元素会默认自动从左往右，从上往下的流式排版方式。前面内容发生了变化，后面的内容位置也会随着发生变化
微观现象
1.空白折叠现象。
2.文字类的元素如果排在一行会出现一种高低不齐、底边对齐效果。
3.自动换行，元素内一行内容写满元素的width时会自动进行换行。[图片上传失败...(image-5327c1-1604048626452)]
元素等级
块级元素：大部分容器级标签包括p标签都是块级元素，比如div,h1-h6,p,pre,ul,ol,li,form,table,label
行内元素：大部分的文本及标签比如 a,span，i（斜体）,em（强调）,sub(下标)，sup（上标） 等。
行内块元素： (img，button,input，textarea,select), img等
显示模式display
display 属性更改的显示模式并没有改变标准流本质性质
| 属性值 |作用
|block|表示元素要以块级元素模式加载，具备块级特点
|inline|表示元素要以行内元素模式加载，具备行内特点
|inline-block| 表示标签及行内块模式加载，具备行内块特点
|none| 表示标签及内容直接隐藏，让出原有标准流的位置
脱离标准流
标签元素脱离标准流的方法包括：浮动、绝对定位、固定定位
浮动定义
1.浮动 (float)：让元素脱离标准流，同一级的浮动的元素可以并排在一排显示
float : right / left
浮动的问题二：父元素没有高度，会影响后面元素的标准流位置，如果福哦的那个的子元素足够高，有可能影响到后面浮动的贴边。
[图片上传失败...(image-7923f-1604048626452)]
清除浮动方法
清除浮动一：给标准流的父元素强制给一个合适的高度height
解决：浮动元素影响后面元素标准流位置和贴边。
问题：父元素不能高度自适应，后面父元素之间如果有margin效果不正确。
清除浮动五：溢出隐藏
overflow：hidden
总结 如果父元素高度是固定的，建议使用height属性解决
如果父元素告诉需要自适应，建议使用overflow属性解决浮动问题
要想让每个伪类的状态正常加载，书写顺序必须是：访问前link、访问后visited、 鼠标移上hover、鼠标点击active。
-背景颜色 background-color
-背景图片 background-image 属性 url(图片路径)
-背景重复 background-repeat
| repeat | 重复，默认属性值，表示会使用背景重复加载填满整个盒子背景区域
| no-repeat| 不重复，不论背景图是否大于盒子范围，都只加载依次图片
| repeat-x | 水平重复，使用背景图片水平重复加载铺满第一行，垂直方向不重复
| repeat-y | 垂直重复，使用背景图片垂直重复加载铺满第一列，水平方向不重复
-背景定位 background-position 主要用于设置 不重复 的图片在背景区域的加载开始位置
单词表示法 水平方向可选单词：left、center、right
垂直方向可选单词：top、center、bottom
像素表示法 水平 垂直 border以内的
百分比表示法 100%代表的数值
水平方向，等价于盒子的border以内的背景区域宽度减去图片的宽度。
垂直方向，等价于盒子的border以内的背景区域高度减去图片的高度。
-背景附着 background-attachment
| scroll | 滚动的，表示背景图片与盒子保持相对位置不变，随着页面的滚动而滚走
| fixed| 固定的，背景图的定位的参考点从盒子border，以内的左上顶点变为了浏览器窗口的左 上顶点，页面滚动时，浏览器窗口的左上顶点是不变的，导致背景图固定在浏览器窗口 的某个位置，不会随着页面滚动而滚走
background 属性可以将五个单一属性的值进行合写。 属性值：可以有 1-5 个属性值，值之间用空格进行分隔，背景定位的两个属性值算作 一个属性值，不能被分开也不能颠倒顺序。五个属性值之间可以互换位置。
-背景缩放background-size 设置<img>的尺寸
| px值| 1-2个像素值，只设置1个值，垂直方向等比例拉伸；设置2个值，按照设置值 加载
| 百分比 | 同像素值设置方法相同，设置百分比时，数值参照盒子的宽、高属性
| cover| 自动调整缩放比例，把背景图像扩展至足够大，以使背景图像完全覆盖背景区 域。如有溢出部分则会被隐藏。
| contain | 自动调整缩放比例，把图像图像扩展至最大尺寸，保证图片始终完整显示在背 景区域
-相对定位 relative
相对定位的元素不能脱离标签的原始状态(标准流、浮动),不会让出原来占有的位置
-绝对定位 absolute 脱离标准文档流
子绝父相 、 子绝父绝 、 子绝父固
-固定定位 fixed 脱离标准文档流
-压盖顺序 z-index
HTML5
[图片上传失败...(image-974217-1604048626452)]
<audio>音频标签 ogg mpeg wav
| 属性 | 值 |描述
| autoplay| autoplay| 如果出现该属性，则音频在就绪后马上播放
| controls | controls | 如果出现该属性，则向用户显示控件，比如播放按钮
| loop |loop | 如果出现该属性，则每当音频结束时重新开始播放。
| preload | preload | 如果出现该属性，则音频在页面加载时进行加载，并预备播放。如果使用 "autoplay"，则忽略该属性。
| src | url|要播放的音频的 URL。
<video>视频标签 ogg mp4 webm
[图片上传失败...(image-361a85-1604048626452)]
| 属性 | 值 |描述
|autoplay | autoplay | 视频就绪自动播放（谷歌浏览器需要添加muted来解决自动播放问题）
| controls | controls | 向用户显示播放控件
| loop | loop|放完是否继续播放该视频，循环播放
| preload | auto |（预先加载视频）
none（不应加载视频） 规定是否预加载视频(如果有了autoplay 就忽略该属性）
| src | url | 视频url地址
|width |pixels(像素) |设置播放器宽度
| height | pixels(像素) |设置播放器高度
| poster| Imgurl | 加载等待的画面图片
|muted |muted| 静音播放
属性值 描述
type="email" 限制用户输入必须为Email类型
type="url" 限制用户输入必须为URL类型
type="date" 限制用户输入必须为日期类型
type="time" 限制用户输入必须为时间类型
type="month" 限制用户输入必须为月类型
type="week" 限制用户输入必须为周类型
type="number" 限制用户输入必须为数字类型
type="range"滑动条
type="tel" 手机号码
type="search" 搜索框
type="color" 生成一个颜色选择表单
<datalist>标签
• <datalist>标签规定了 <input>元素可能的选项列表。
• <datalist>元素包含了一组<option>元素，这些元素表示预定义可选值，在<input>元素输入
过程中，会自动响应<option>元素的值。
• 绑定的<input>标签必须设置 list 属性，属性值等于<datalist>标签的 id 属性值。
新增表单属性
属性 值 描述
required required 表单拥有该属性表示其内容不能为空，必填
placeholder提示文本表单的提示信息，存在默认值将不显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定表单，一般页面中放1个
autocomplete off / on当用户在字段开始键入时，浏览器基于之前键入过的值，应该显示出在字段中填 写的选项。
默认已经打开，如 autocomplete=”on “
关闭 autocomplete =”off”
-需要放在表单内同时加上name属性
-同时成功提交
multiple multiple 可以多选文件提交
CSS3
子级选择器
子级选择器用于选取带有特定父元素的元素 书写语法element1>element2
[图片上传失败...(image-bb266d-1604048626452)]
兄弟选择器
--相邻兄弟选择器 用于选择 紧接 在另一个元素后的兄弟元素，而且二者有相同的父元素。
| element1+element2 | 匹同一个父元素中紧跟在element1后面的一个element2元素
--其他兄弟选择器 匹配同一个父元素中在element1后面的 所有 element2元素
| elemenet~element2 | 匹配同一个父元素中elemenet1后面的所有element2元素
E:first-of-type 指定类型E的第一个
E:last-of-type 指定类型E的最后一个
E:nth-of-type(n) 指定类型E的第n个 这个是元素的第几个在元素下选取
属性选择器
E[att] 选择具有att属性的E元素
E[att="val"] 选择具有att属性且属性值等于val的E元素
E[att^="val"] 匹配具有att属性、且值以val开头的E元素
E[att$="val"] 匹配具有att属性、且值以val结尾的E元素
E[att*="val"] 匹配具有att属性、且值中含有val的E元素
box-sizing属性
content-box 标准模式 盒子总体大小为 width(height) + padding + border
border-box 怪异模式盒子总体大小为 width 和 height
[图片上传失败...(image-cdef05-1604048626452)]
文字阴影text-shadow
|属性值 |简介
|h-shadow |必需。水平阴影的位置。允许负值。
|v-shadow |必需。垂直阴影的位置。允许负值。
| blur |可选。模糊的距离。
|color |可选。阴影的颜色。
--transition-property过渡的属性
• none 表示没有属性过渡
• all 表示所有变化的属性都过渡
• 属性名 使用具体的属性名，多个属性名中间逗号分隔
--时间
以秒为单位 0s必须加单位
--transition-timing-function 时间曲线
对元素进行移动、缩放、旋转、拉长或拉伸。配合过渡和即将学习的动画知识，可 以取代大量之前只能靠Flash才可以实现的效果。
位移translate()
translate(x,y)x,y分别为水平和垂直方向位移的距离，可以为px值或百分比， 区分正负
translate(x) 只有一个数值，表示水平方向的位移
translate(y) 只有一个数值，表示垂直方向的位移
缩放 scale()
值 说明
scale(x, y)x,y分别为改变元素的宽度和高度的倍数
scale(n) 只有一个值，表示宽度和高度同时缩放n倍
scaleX(n) 改变元素的宽度
scaleY(n) 改变元素的高度
旋转 rotate(deg)
deg为度数单位，正数表示顺时针旋转，负数表示逆时针旋转
倾斜 skew()
transform: skew(数字deg,数字deg)
两个属性值分别表示水平和垂直方向倾斜的角度，属性值可以为正可以为负，第二个 数值不写默认为0
transform-origin 属性
设置调整元素的水平和垂直方向原点的位置
x 定义 X 轴的原点在何处。可能的值：left 、center、right、像素值、百分比
y 定义 Y 轴的原点在何处。可能的值：top、center、bottom、像素值、百分比
[图片上传失败...(image-ac107d-1604048626452)]
透视属性 perspective
作用：设置在 z 轴的视线焦点的观察位置，从而实现 3D 查看效果。
属性值：像素值，数值越大，观察点距离 z 轴原点越远，图形效果越完整且接近原始尺寸。 注意：透视属性需要设置给 3D 变化元素的父级
3D 旋转
rotateX(angle) 定义沿着 X 轴的 3D 旋转。
rotateY(angle) 定义沿着 Y 轴的 3D 旋转。
rotateZ(angle) 定义沿着 Z 轴的 3D 旋转。
[图片上传失败...(image-e781c5-1604048626452)]
3D 位移
translateX(x)设置 X 轴的位移值。
translateY(y)设置 Y 轴的位移值。
translateZ(z)定义3D位移，设置Z轴的位移值。
属性值为像素值或百分比，正负表示位移的方向。正值向对应轴的正方向移动，负值向对应 轴的负方向移动。
transform-style属性
用于设置被嵌套的子元素在父元素的 3D 空间中显示，子元素会保留自己的 3D 转换坐标轴。
属性值：
flat：所有子元素在 2D 平面呈现
preserve-3d：保留 3D 空间
浏览器兼容
Internet Explorer 10、Firefox 以及 Opera 支持 transform 属性。
Chrome 和 Safari 需要前缀 -webkit-。
Internet Explorer 9 需要前缀 -ms-。
