<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS基本定位机制-文档流</title>
<style>
/*
CSS盒子三种基本定位机制： 普通流 normal flow、 浮动 float、 定位 position
一、文档流（标准流、普通流 normal flow）：HTML文档中一切皆为盒子，而盒子在HTML文档中默认的显示标准，称为文档流
二、元素在文档流中的显示模式：
1.块元素
1.常见的块元素
div h1~h6 p ul li 等
2.特点：
-独占一行
-宽度和高度等都可以设置
-默认宽度是父级元素宽度的100%
-块元素是容器，里面可以放块元素、行内元素、行内块元素
3.注意：
-文字类的块元素不能自由嵌套（尽量不要放块元素）
2.行内元素
1.常见的行内元素
span a strong em ins del等
2.特点：
-和相邻的行内元素（行内块元素）在一行显示
-宽度和高度设置无效
-默认宽度是其内容的宽度
-行内元素可以设置border、padding、margin，但是垂直方向不会影响页面的布局
-行内元素水平外边距不会发生重叠
-行内元素只能容纳文本或其他行内元素
3.注意：
1.a 链接中不能放链接
2 特殊情况下，a链接可以放块元素，但最好将a转换为块元素
3.行内块元素
在行内元素中有几个标签：img input td 他们同时拥有块元素和行内元素的特点
因此我们称为 行内块元素
1.特点：
1.和相邻的块元素（行内快元素）在一行显示
2.默认宽度是其内容的宽度
3.宽度和高度都可以设置
*/
span{
background-color: #c7edcc;
/*width: 200px;
height: 200px；
设置无效*/
border: 10px solid red;
padding: 10px;
margin: 100px;
}
.box1{
width: 200px;
height: 200px;
background-color: #fed6e0;
}
</style>
</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>
版权属于：
yu
作品采用：
《
署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0)
》许可协议授权
评论 (0)