块级元素

• 常见的块级元素

  <h1>~<h6>、<p>、<div>

• 块级元素特点

  • 独占一行
  • 可以设置宽度、高度、外边距、边框和内边距
  • 宽度默认是父级容器的宽度
  • 可以存放其他行内元素和块级元素

• 块级元素注意事项

  • 开发时不要在文本类块级元素中添加其他元素，专注于文本存放（h1~h6、p）
  • 块级元素可以相互嵌套，但是 p 标签中不能嵌套其它块级元素(通过浏览器开发人员工具演示)

    行内元素

• 常见的行内元素

  <a>、<span>、<strong>、<b>、<em>、<i>、<del>、<s>、<ins>、<u>

  标签是最典型的行内元素，常用于布局。有的地方也将行内元素称为内联元素。

• 行内元素特点

  • 相邻行内元素在一行显示，一行多个
  • 给行内元素设置宽高是无效的
  • 默认宽度是内容的宽度（被内容撑开）
  • 只能容纳文本或其他行内元素

• 行内元素注意事项

  • 行内元素不能嵌套块级元素
  • 链接不能再放链接
  • 特殊情况的链接可以存放块级元素

    行内块元素

• 常见行内块元素

  <img />、<input />、td

  它们同时具有块元素和行内元素的特点。

• 行内块元素特点

  • 相邻行内元素在一行显示，一行多个（行内元素特点）
  • 默认宽度就是本身内容的宽度（行内元素特点）
  • 可以设置宽度、高度、外边距、边框和内边距（块级元素特点）

    总结

盒子模型

网页布局介绍

• 网页布局的核心知识点：盒子模型、浮动、定位

• 网页布局的步骤

  • 搭建网页结构(摆放盒子)，网页元素基本都是盒子
  • 用 CSS 设置好盒子样式，然后摆放到相应位置
  • 往盒子里面装内容

• 网页布局就是如何利用 CSS 去设置盒子的大小和位置

盒子模型组成

盒子模型：把 HTML 页面中的布局元素看作是一个矩形的盒子，也就是一个盛装内容的容器

CSS 盒子模型本质上是一个盒子，封装周围的 HTML 元素，它包括

• 实际内容
• 边框
• 内边距：内容和盒子边框之间的距离
• 外边距：盒子和盒子之间的距离

边框

边框用法

设置边框的三个要素：边框粗细、边框样式、边框颜色

边框影响盒子实际大小

边框会额外增加盒子的实际大小。因此我们有两种方案解决：

• 测量盒子大小的时候,不量边框。
• 如果测量的时候包含了边框,则需要 width/height 减去边框宽度

div {
  width: 180px;
  height: 180px;
  background-color: orange;
  border: 10px solid black;
}

内边距

内边距用法

内边距用来设置边框和内容之间的距离，使用的属性是 padding(填充)

内边距复合属性

内边距影响盒子大小

• 当我们给盒子指定 padding 值之后，发生了 2 件事情：
  • 内容和边框有了距离，添加了内边距
  • padding 影响了盒子实际大小
• 内边距对盒子大小的影响：
  • 如果盒子已经有了宽度和高度，此时再指定内边距，会撑大盒子
  • 如何盒子本身没有指定width/height属性, 则此时padding不会撑开盒子大小

• 解决方案：

  • 如果保证盒子跟效果图大小保持一致，则让 width/height 减去多出来的内边距大小和边框宽度即可

    案例：新浪导航栏

    

• 相关取值

  • 上边框 3px``#ff8500
  • 下边框 1px``#edeef0
  • 盒子高度 41px，背景色 #fcfcfc
  • 文字颜色 #4c4c4c
  • 整体宽度 550px
  • 鼠标经过的文字颜色 #ff8500 背景颜色 #eee

• 结构代码

  <div class="nav">
  <a href="#">设为首页</a>
  <a href="#">手机新浪网</a>
  <a href="#">移动客户端</a>
  <a href="#">播客</a>
  <a href="#">微博</a>
  <a href="#">关注我</a>
  </div>

• 代码实现

  • 摆放大盒子

    .nav {
    width: 550px;
    height: 41px;
    border-top: 3px solid #ff8500;
    border-bottom: 1px solid #edeef0;
    background-color: #fcfcfc;
    line-height: 41px;
    }

  • a 链接样式

    .nav a {
    display: inline-block;
    padding: 0 20px;
    font-size: 12px;
    color: #4c4c4c;
    text-decoration: none;
    }
    /* 鼠标经过伪样式 */
    .nav a:hover {
    background-color: #eee;
    color: #ff8500;
    }

    解决行内块或者行内元素间隙的问题

• 在上一个案例中给 .nav a 增加背景颜色，你会发现每个 a 之间是有间隙的 ```css .nav a { background-color: red; …… }

- 去除 inline-block 元素之间的间隙
   - 给父元素增加 font-size: 0;
   - 给子元素重新设置字体大小
<a name="AyL8W"></a>
## 外边距
<a name="Sq7h0"></a>
### 外边距用法
margin 属性用于设置外边距，即控制**盒子和盒子之间的距离**
<a name="ng0zJ"></a>
### 外边距复合属性
| 值的个数 | 含义 | 记忆 |
| --- | --- | --- |
| margin: 5px 10px 20px 30px; | 上 / 右 / 下 / 左 | 顺势方向圈 |
<a name="Fhvw1"></a>
### 块元素水平居中
外边距可以让块元素水平居中的两个条件：
- **盒子必须指定了宽度（width）**
- **盒子左右的外边距都设置为 auto**
实现方式：
```css
margin-left: auto;
margin-right: auto;

margin: auto;

margin: 0 auto;

注意：以上方法是让块元素水平居中，行内元素或者行内块元素水平居中给其父元素添加 text-align:center 即可。

浮动

传统布局的三种方式

CSS 提供了三种传统布局方式(简单说,就是盒子如何进行排列顺序)：

• 文档流
• 浮动
• 定位

这三种布局方式都是用来摆放盒子的，盒子摆放到合适位置，布局自然就完成了

注意：实际开发中，一个页面基本都包含了这三种布局方式(还有其它布局方式)

文档流

文档流又称为：标准流/普通流， 就是标签按照规定好的默认方式排列

• 块级元素会独占一行，从上向下顺序排列。常用元素：div、hr、p、h1~h6、ul、ol、dl、form、table
• 行内元素会按照顺序，从左到右顺序排列，碰到父元素边缘则自动换行。常用元素：span、a、i、em 等

以上都是文档流布局，我们前面学习的就是文档流，文档流是最基本的布局方式。

浮动基础

为什么需要浮动

有很多的布局效果，标准流没有办法完成，此时就可以利用浮动完成布局。 因为浮动可以改变元素标签默认的排列方式

• 浮动最典型的应用
  • 可以让多个块级元素在一行内排列显示。
• 网页布局的准则
  • 多个块级元素纵向排列 —— 标准流
  • 多个块级元素横向排列 —— 浮动

什么是浮动

float 属性用于创建浮动框，将其移动到一边，直到左边缘或右边缘触及包含块或另一个浮动框的边缘，语法：

float: left;

练习

• 绘制一个 .w 的盒子，宽度 800px / 高度 400px
• 在 .w 中定义两个盒子：.left 和 .right，宽高都是 100px
• 让 .left 盒子左浮动 / .right 盒子右浮动 ```css .w { width: 800px; height: 400px; }

.left, .right { float: left; width: 100px; height: 100px; background-color: orange; }

.right { float: right; }

<a name="mcSMs"></a>
### 浮动的特性
加了浮动之后的元素,会具有很多特性,需要我们掌握的：<br /> 
1. 脱离标准流（**脱标**）
1. 一行显示并且顶部对齐
1. **具有行内块元素的特性**
   1. 浮动元素的大小根据内容来决定
   1. 浮动的盒子中间是没有缝隙的
4. 如果父级宽度装不下这些浮动的盒子，多出的盒子会另起一行对齐
<a name="TA2ow"></a>
### 浮动元素的使用规则
浮动元素经常和标准流父元素一起使用，这样做的目的是为了约束浮动元素的位置，我们布局网页的一般策略：先用标准流父元素排列上下位置, 之后内部子元素采取浮动排列左右位置<br />![image.png](https://cdn.nlark.com/yuque/0/2022/png/532803/1641887091930-0c0a1451-89b1-4063-b408-968e16b81395.png#clientId=u0bf1baba-093e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=117&id=u9d170907&margin=%5Bobject%20Object%5D&name=image.png&originHeight=234&originWidth=746&originalType=binary&ratio=1&rotation=0&showTitle=false&size=11781&status=done&style=none&taskId=ud3b8d0e5-1f0e-45b1-af9a-0bd5fc57f94&title=&width=373)
<a name="dL8bQ"></a>
## 浮动案例
<a name="RB884"></a>
### 浮动布局练习1
![image.png](https://cdn.nlark.com/yuque/0/2022/png/532803/1641887928999-7473f000-5a7f-4b00-9993-0aa54f7f5e23.png#clientId=u0bf1baba-093e-4&crop=0&crop=0&crop=1&crop=1&from=paste&height=344&id=u167d2c41&margin=%5Bobject%20Object%5D&name=image.png&originHeight=688&originWidth=1799&originalType=binary&ratio=1&rotation=0&showTitle=false&size=29757&status=done&style=none&taskId=u348e4ff2-feb2-4ee1-b506-3038f739aeb&title=&width=899.5)
```css
* {
  margin: 0;
  padding: 0;
}
.box {
  width: 1200px;
  height: 460px;
  margin: 0 auto;
}
.left {
  float: left;
  width: 230px;
  height: 460px;
  background-color: skyblue;
}
.right {
  float: left;
  width: 970px;
  height: 460px;
  background-color: silver;
}

浮动布局练习2

* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.box {
  width: 1226px;
  height: 285px;
  margin: 0 auto;
}
.box li {
  width: 296px;
  height: 285px;
  background-color: teal;
  float: left;
  margin-right: 14px;
}
/* 这里必须写 .box .last 要注意权重的问题  20 */
.box .last {
  margin-right: 0;
}

定位

定位：将盒子定在某一个位置，所以定位也是在摆放盒子， 按照定位的方式移动盒子。

定位也是用来布局的，它有两部分组成：

定位 = 定位模式 + 边偏移(元素位置)

• 边偏移：控制元素在页面/父元素中的位置(元素位置)
• 定位模式：用于指定一个元素在文档中的定位方式

边偏移 就是定位的盒子移动到最终位置。有 top、bottom、left 和 right 4 个属性。

.box { 
     position: absolute; 
  left: 100px;
  top: 100px;
}