什么是标准流？
就是标签的排列顺序，在标准流中，
- 块级元素：div，占一行
- 行内元素：span，有多少占多少 ，上一个接下一个
问：行内元素能变成块级元素吗？
<body> <div class="menu">栏目一</div> <span class="menu xian">栏目二</span> <span class="menu">栏目三</span> <span class="title">这是<span>一</span>条新闻标题</span> </body> .xian{ display:block; }
效果展示：
盒子模型
每个标签就像一个盒子
- Margin(外边距) - 清除边框外的区域，外边距是透明的。
- Border(边框) - 围绕在内边距和内容外的边框。
- Padding(内边距) - 清除内容周围的区域，内边距是透明的。
- Content(内容) - 盒子的内容，显示文本和图像。
实战
①、设置边框
<body> <div class="menu">栏目一</div> <span class="menu xian">栏目二</span> <span class="menu">栏目三</span> <span class="title">这是<span>一</span>条新闻标题</span> </body> .menu { /*第一种写法：单独设置样式*/ border-width: 3px; border-color: red; border-style: solid; /*第二种写法：一起设置样式。注意：用空格隔开，不要用逗号*/ border: 3px solid red; }
效果展示：
②、设置页边距
问：如果两个标签同时设置了页边距，那这两个标签之间的页边距是它们的和吗？
<body> <div class="menu">栏目一</div> <span class="menu xian">栏目二</span> <span class="menu">栏目三</span> <span class="title">这是<span>一</span>条新闻标题</span> </body> .menu { border: 3px solid red; //边框 margin: 5px; //页边距 } .xian { display: block; margin-top: 30px; }
结果：会选择最大的那个页边距
③、设置内容
width:60px; //块宽度 height:100px; //高度 line-height:50px; //文字位置（让文本垂直居中）
效果展示：
浮动：float
<body> <div class="menu">栏目一</div> <div class="menu xian">栏目二</div> <div class="menu">栏目三</div> <div class="title">这是<span>一</span>条新闻标题</div> </body> .menu { border: 3px solid red; float: left; //添加左浮动 //clear：left（清除浮动） }
展示效果：
定位：position
position 属性的五个值：
- static：没有定位，遵循正常的文档流对象
- relative：相对定位，相对于原来的位置偏离了多少
- fixed：元素的位置相对于浏览器窗口是固定位置。
- absolute：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
- sticky：定位的元素和其他元素重叠
相对定位：
