P22-前端基础-CSS文档流

1.概述

文档流（normal flow）
网页是一个多层的结构，一层摞着一层，通过CSS可以分别为每一层来设置样式，作为用户来讲只能看到最顶上一层，这些层中，最底下的一层称为文档流，文档流是网页的基础
对于我们来讲元素主要有两个状态

在文档流中

不在文档流中（脱离文档流）

元素在文档流中有什么特点：

块元素

块元素会在页面中独占一行(自上向下垂直排列)

默认宽度是父元素的全部（会把父元素撑满）

默认高度是被内容撑开（子元素）

行内元素
行内元素不会独占页面的一行，只占自身的大小

行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素

则元素会换到第二行继续自左向右排列（书写习惯一致）

行内元素的默认宽度和高度都是被内容撑开

2.文档流介绍

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>文档流</title><style>/*     文档流（normal flow）- 网页是一个多层的结构，一层摞着一层- 通过CSS可以分别为每一层来设置样式- 作为用户来讲只能看到最顶上一层- 这些层中，最底下的一层称为文档流，文档流是网页的基础我们所创建的元素默认都是在文档流中进行排列- 对于我们来元素主要有两个状态在文档流中不在文档流中（脱离文档流）- 元素在文档流中有什么特点：- 块元素- 块元素会在页面中独占一行(自上向下垂直排列)- 默认宽度是父元素的全部（会把父元素撑满）- 默认高度是被内容撑开（子元素）- 行内元素- 行内元素不会独占页面的一行，只占自身的大小- 行内元素在页面中左向右水平排列，如果一行之中不能容纳下所有的行内元素则元素会换到第二行继续自左向右排列（书写习惯一致）- 行内元素的默认宽度和高度都是被内容撑开*//* 块元素会在页面中独占一行(自上向下垂直排列) */.box1 {background-color: rosybrown;}.box2 {background-color: royalblue;}/* 行内元素不会独占页面的一行，只占自身的大小 */span {background-color: sandybrown;}</style>
</head><body><div class="box1">我是div1</div><div class="box2">我是div2</div><span>我是span1</span><span>我是span2</span><span>我是span2</span><span>我是span2</span><span>我是span2</span><span>我是span2</span><span>我是span2</span><span>我是span2</span><span>我是span2</span><span>我是span2</span>
</body></html>

3.效果预览

P22-前端基础-CSS文档流相关推荐

CSS文档流与块级元素和内联元素
文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
你不知道的 CSS 文档流技巧，让布局更简单
看文章之前,先来看两个例子.这是我们在项目中最常见的项目布局方式. 案例一:多个容器按照相同间距水平排列. 案例二:常见的菜单导航看到这两个案例时,你可以先短暂的想想平时都是如何实现的,很多同学的答 ...
从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...
relative会脱离文档流吗_脱离文档流与脱离文本流
脱离文档流与脱离文本流根据官方文档所述,脱离文档流的方法有浮动(float)和绝对定位(poistion:absolute/fixed). 那么我们接下来来看看他们的区别吧使用浮动(float) ...
vue下载xlsx文档流(导出功能)
一.记录一次前端下载xlsx文档流: 思路: 1. 调用接口接受后台返回的文档流资源, 2.通过内置对象Blob构造器进行解析得到链接地址 3.通过a标签的下载功能得到资源说下中间踩得坑, 首先项目 ...
前端基础-CSS如何布局以及文档流，对于新手来说，特别有用
一. 网页布局方式 1.什么是网页布局方式布局可以理解为排版,我们所熟知的文本编辑类工具都有自己的排版方式比如word,nodpad++等等而网页的布局方式指的就是浏览器这款工具是如何对网页中的 ...
web前端开发自学课程，CSS标准文档流，超详细
前言又逢金三银四,拿到大厂的offer一直是程序员朋友的一个目标,我是如何拿到大厂offer的呢,今天给大家分享我拿到大厂offer的利器,前端核心知识面试宝典,内容囊括Html.CSS.Javas ...
css无效 https_【CSS非全解02】CSS基础-文档流
基本概念文档流 mdn 块.内联.内联块? margin合并两种盒模型文档流 Normal Flow 流式布局 mdn 文档流动方向从左到右:"https://developer.m ...
选择器、像素和百分比、颜色单位、文档流-css基础
网页分成三部分: 结构(HTML) 表现(CSS) 行为(JavaScript) CSS: css是层叠样式表网页实际上是一个多层的结构,通过css可以分别为网页的每一层来设置样式.(是一种3D效果 ...

P22-前端基础-CSS文档流

P22-前端基础-CSS文档流

1.概述

2.文档流介绍

3.效果预览

P22-前端基础-CSS文档流相关推荐

最新文章

热门文章