1. 三种基本机制
CSS盒子三种基本定位机制:普通流normal flow
、浮动float
、定位position
文档流(标准流、普通流 normal flow):HTML文档中一些皆为盒子,而盒子在HTML文档中默认的显示标准,称为文档流
2. 块元素
常见的块元素
div h1~h6 p ul ol li
等
特点:
-
独占一行
-
宽度和高度等都可以设置
-
默认宽度是父级宽度的100%
-
块元素是容器,里面可以放块元素、行内元素、行内块元素
注意:
- 文字类的块元素不能自由嵌套(尽量不要放块元素)
3. 行内元素
常见的行内元素
span a strong em ins del
等
特点:
-
和相邻的行内元素(行内块元素)在一行显示
-
宽度和高度设置无效
-
默认宽度是其内容的宽度
-
行内元素可以设置
border、padding、margin
,但是垂直方向不会影响页面的布局 -
行内元素水平外边距不会发生重叠
-
行内元素只能容纳文本或其他行内元素
注意:
-
a
链接中不能放链接 -
特殊情况下,
a
链接中可以放块元素,但是最好将a
转换为块元素
4. 行内块元素
在行内元素中有几个标签:img input td
他们同时拥有块元素与行内元素的特点
因此我们称为 行内块元素
- 特点:
- 和相邻的块元素(行内块元素)在一行显示
- 默认宽度是其内容的宽度
- 宽度和高度等都可以设置
示例如下:
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
span {
background-color: #c7edcc;
width: 200px;
height: 200px;
border: 10px solid red;
padding: 10px;
margin: 100px;
}
.box1 {
background-color: #fde6e0;
width: 200px;
height: 200px;
}
</head>
<body>
<h1>我是标题</h1>
<div>我是div</div>
<p>我是段落
<div></div>
</p>
<span>我是span</span>
<span>我是span</span>
<span>我是span</span>
<div class="box1"></div>
</body>
</html>