前端学习 -- Css -- 文档流
文档流
文档流处在网页的最底层,它表示的是一个页面中的位置,
我们所创建的元素默认都处在文档流中
元素在文档流中的特点
块元素
- 块元素在文档流中会独占一行,块元素会自上向下排列。
- 块元素在文档流中默认宽度是父元素的100%。
- 块元素在文档流中的高度默认被内容撑开。
内联元素
1.内联元素在文档流中只占自身的大小,会默认从左向右排列,如果一行中不足以容纳所有的内联元素,则换到下一行,继续自左向右。
2.在文档流中,内联元素的宽度和高度默认都被内容撑开。
当元素的宽度的值为auto时,此时指定内边距不会影响可见框的大小,而是会自动修改宽度,以适应内边距。
<!DOCTYPE html>
<html> <head>
<meta charset="UTF-8">
<title></title>
<style>
span {
background-color: yellowgreen;
} .outdiv {
background-color: #bfa;
} .innerdiv {
height: 50px;
} .div3 {
width: 100px;
height: 100px;
background-color: #ff0;
}
</style>
</head> <body>
<div class="outdiv">
<div class="innerdiv"></div>
</div> <div class="div3">
</div> <span>操行有常贤,仕宦无常遇</span>
<span>操行有常贤,仕宦无常遇</span>
<span>操行有常贤,仕宦无常遇</span>
<span>操行有常贤,仕宦无常遇</span>
<span>操行有常贤,仕宦无常遇</span>
<span>操行有常贤,仕宦无常遇</span>
</body> </html>
效果:
前端学习 -- Css -- 文档流的更多相关文章
- CSS文档流与块级元素和内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- CSS文档流与块级元素和内联元素(文档)
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不 少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指 南> ...
- CSS文档流、块级元素、内联元素
CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>, ...
- 前端学习笔记之CSS文档流
先引用一段W3C的文档: 9.3 Positioning schemes In CSS 2.1, a box may be laid out according to three positionin ...
- CSS文档流
文档流 将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不 ...
- 前端-CSS-7-标准文档流&行内元素和块级元素转换
1.什么是标准文档流 <!-- 什么是标准文档流 宏观的将,我们的web页面和ps等设计软件有本质的区别 web 网页的制作 是个“流” 从上而下 ,像 “织毛衣” 而设计软件 ,想往哪里画东 ...
- css 文档流中块级非替换元素水平区域的计算规则(1)
最近在读<Basic Visual Formatting in CSS>,结合以前看的<css权威指南>和css标准.今天就做个笔记. 以前在遇到一些宽度不明确指明的一些布局的 ...
- 从文档流来看内联元素和块元素的css排版
veda原创[抄录]讲得很好存自己这里看 从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的 ...
- Html文档流和文档对象模型DOM理解
前言 在理解浮动和定位时,触碰到文档流概念.为了更好理解浮动和定位,学习了文档流和DOM(文档对象模型). 正文 DOM(文档对象模型)简单理解就是编写的html页面所有内容构成的树形结构.例如: 根 ...
随机推荐
- R语言的数据输入
既然了解了R语言的基本数据类型,那么如何将庞大的数据送入R语言进行处理呢?送入的数据又是如何在R语言中进行存储的呢?处理这些数据的方法又有那些呢?下面我们一起来探讨一下. 首先,数据输入最直接最直观的 ...
- 20155233 《网络对抗技术》EXP3 免杀原理与实践
正确使用msf编码器,msfvenom生成如jar之类的其他文件,veil-evasion,自己利用shellcode编程等免杀工具或技巧 使用msf编码器生成jar包 输入命令msfvenom -p ...
- 20155331《网络对抗技术》Exp4:恶意代码分析
20155331<网络对抗技术>Exp4:恶意代码分析 实验过程 计划任务监控 在C盘根目录下建立一个netstatlog.bat文件(先把后缀设为txt,保存好内容后记得把后缀改为bat ...
- 06-Git-Linux命令
Git 命令 Workspace:工作区 Index / Stage:暂存区 Repository:仓库区(或本地仓库) Remote:远程仓库 一.新建代码库 # 新建一个目录,将其初始化为Git代 ...
- flask之jinjia2模板(二)
1.1.模板传参 (1)主程序 from flask import Flask,render_template app = Flask(__name__) @app.route('/') def he ...
- REST-framework快速构建API--初体验
一.快速上手 1.环境准备 安装restframework,注册app pip install djangorestframework INSTALLED_APPS = [ 'django.contr ...
- Jmeter(十八)_Ubuntu部署jmeter与ant
Docker部署接口自动化持续集成环境第三步,容器化Jmeter与ant! 接上文:Docker_容器化jenkins 为了整合接口自动化的持续集成工具,我将jmeter与ant都部署在了Jenkin ...
- abcdocker 的博客
技术参考总结 abcdocker 的博客 09月 3 篇 20日 Centos7 图形化创建KVM 10日 Nginx 代理Google 进行*** 10日 mac 安装装逼神器cmatrix 08月 ...
- ns3的输入输出奥秘(一) LOGGING系统
1.LOGGING系统 (1)在我们之前对C++的理解,输出好像就是cout,然而 以myfirst.cc为例子 在我们前面的编写的代码中并没有出现cout,那他是如何输出. 可以回忆一下 LogCo ...
- VS2013安装及测试练习
一.安装过程 任务:安装VS2010以上的版本. 其实很闹心,因为看了一下VS的安装包,都很大.以学校的网速,得下到什么时候?这是第一想法. 挺麻烦,也挺周折,最终下好了安装包.但是,还是出了问题,在 ...