re:从0开始的CSS之旅13.文档流
- 创业
- 2025-08-04 06:45:02
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，但是垂直方向不会影响页面的布局 - 行内元素水平外边距不会发生重叠 - 行内元素只能容纳文本或其他行内元素
注意： 1. a 链接中不能放链接 2. 特殊情况下，a 链接中可以放块元素，但是最好将 a 转换为块元素
4. 行内块元素在行内元素中有几个标签：img input td 他们同时拥有块元素与行内元素的特点 因此我们称为 行内块元素
特点： 和相邻的块元素（行内块元素）在一行显示默认宽度是其内容的宽度宽度和高度等都可以设置示例如下：
<!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>re:从0开始的CSS之旅13.文档流由讯客互联创业栏目发布，感谢您对讯客互联的认可，以及对我们原创作品以及文章的青睐，非常欢迎各位朋友分享到个人网站或者朋友圈，但转载请说明文章出处“re:从0开始的CSS之旅13.文档流”
![[Python练习]使用Python爬虫爬取豆瓣top250的电影的页面源码](/0pic/pp_74.jpg)
