1.属性名单词
- font：字体
- face：字的外观
2.定义：用于定义元素的自定义字体。
3.自定义字体？ - 自定义字体是非系统字体。也是非安全字体。
4.什么是安全字体？ - 安全字体就是系统字体。
- 系统字体就是安全字体。
- 设置font-family首选安全字体。
- 自从@font-face规则出现后，我们可以在网页中引入非安全字体。
实现过程 语法
/*css文件*/
@font-face{
/*该font-family是规则符，不是属性。用于描述*/
font-family:'serif';
}
/*第一步自定义*/
@font-face{ /*大括号：设置引入自定义字体的规则*/
/* 描述符：向系统字体列表中添加新字体 */
font-family: 'zhangsan';
/* src描述符，描述自定义字体文件的位置 */
src: url(自定字体义文件.otf);
/*url：指*/
}
/* font-family: '思源宋体 Regular'; 把这个写到指定需要更改字体的位置 */
body{
font-family:'serif';
}
自定义字体免费字库
阿里巴巴图标库
浮动布局
1.浮动是什么？
- 浮动是HTML元素存在的第二种状态
浮动元素的五大特征
- 这种状态下：（特征：“浮” “动” “块” “并排” “混排”）
- 所有的元素都是块元素
- 浮：元素会脱离文档流。（浮动元素后面的流动元素会占据浮动元素的原有位置）
- 动：浮动元素会向左或向右无限运动，直到它碰到另一个元素。
- 块：所有的浮动元素都是块元素，都可以设置宽高。（没有行内元素）
- 并排：浮动元素会发生并排现象。
- 混排：文字会环绕浮动图片排列。（图片是浮动的，而文字没有）
2.浮动的问题和解决办法
浮动属性
定义
float 属性定义元素元素的浮动方式
语法
选择器{
float:none | left | right;
}
属性值：
- none：默认值。元素不浮动。
- left：让元素向左浮动。
- right：让元素向右浮动。
浮动带来的影响
- 高度坍塌是指子元素浮动之后，父元素失去高度
- 造成后续元素上移，造成笔记发生混乱。
如何设置元素并排
- 第一步：确定子元素
- 第二步：确定父元素
- 第三步：给子元素添加float属性
- 第四步：给子元素设置合理宽度
- 第五步：清除浮动
如何清除浮动
- 第一种：BFC | haslayout
- 第二种：使用伪元素
- 第三种：使用空元素(不推荐)
clear属性
定义：清除元素两侧的浮动影响 。
语法
clear: left | right | both | none
- left：清除元素左侧的浮动影响。
- right：清除元素右侧的浮动影响。
- both：两侧清除。
- none：默认值。
定位布局
网页布局
web1.0时代：一盘散沙 混乱 没有标准IE大行其道
1989年 没有css：使用标签的属性来做页面外观
布局方式：表格布局
web2.0：HTML结构+css样式+js行为 互相独立、分离
2000年 以后
布局方式：div布局（div）
- 流动布局
- 浮动布局：口字型 工字型 两栏 三栏布局 自适应布局 双飞布局 圣杯布局
- 定位布局
2013年：移动互联网时代 - 弹性盒模型
- 网格布局：普适布局系统
关于边距负值
margin可以取负值
向HTML页面引入css的方式
1.使用link标签引入
2.使用style标签引入
3.使用style属性引入
4.@import规则引入
