什么是标准流？

就是标签的排列顺序，在标准流中，

  • 块级元素：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;
}


效果展示：

盒子模型、浮动、定位_内边距_02

盒子模型

每个标签就像一个盒子

盒子模型、浮动、定位_边距_03

  • 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;
}


效果展示： 

盒子模型、浮动、定位_内边距_04

②、设置页边距

问：如果两个标签同时设置了页边距，那这两个标签之间的页边距是它们的和吗？

盒子模型、浮动、定位_行内元素_05


<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;
}


结果：会选择最大的那个页边距

盒子模型、浮动、定位_边距_06

③、设置内容


width:60px;   //块宽度
height:100px;   //高度
line-height:50px;     //文字位置（让文本垂直居中）


 效果展示：

盒子模型、浮动、定位_内边距_07

浮动：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（清除浮动）
}


展示效果：

盒子模型、浮动、定位_行内元素_08

定位：position

position 属性的五个值：

  • ​​static​​：没有定位，遵循正常的文档流对象
  • ​​relative​​：相对定位，相对于原来的位置偏离了多少
  • ​​fixed​​：元素的位置相对于浏览器窗口是固定位置。
  • ​​absolute​​：绝对定位的元素的位置相对于最近的已定位父元素，如果元素没有已定位的父元素，那么它的位置相对于<html>
  • ​​sticky​​：定位的元素和其他元素重叠

相对定位：

盒子模型、浮动、定位_边距_09