CSS-文档流-浮动-定位-HTML(一)
关于文档流,浮动和定位之间的关系以及怎么用的等等细节方面一直令我比较困扰的一个地方,总觉得脑子中关于这方面的知识很模糊,最近几天在经过翻阅查看,算是浅显的弄懂了一些,特此记录一下,防止遗忘和分享给同行!我的理解也只建立在众多博主的基础上,站在巨人的肩膀上,才能学的更多!
文档流
什么是文档流,这是一个比较抽象的概念,可以理解为,一个连续的具有逻辑上下的页面整体
概念:将窗体自上而下的分成一行一行,块级元素自上而下,行内元素在每行中从左自右的顺序依次排放的元素
通俗的说就是我们正常写的标签所组成的布局就是文档流,所以目前我们可以这样理解:文档流就是众多标签,众多标签就是文档流
文档流元素主要可以分为块元素和行元素
-
块元素
-
块元素在文档流中独占一行,自上而下垂直排列
-
可以设置宽高,默认宽度是父元素宽度,默认高度是被内容撑开的 (子元素)
-
即使块元素设置宽度,视觉上并没有占满一行,但是浏览器会自动给块元素添加margin使其占满一行
-
对具有代表性的块元素就是div
-
行内元素
-
行内元素不会独占一行,只占自身大小,从左到右水平排列
-
如果一行中不能容纳所有元素,则元素会换到第二行继续从左校友排列 (类似书写习惯)
-
不能设置宽高,宽高是被内容跟撑起来的
-
具有代表性的元素:div a
display的理解和改变元素性质
上面我们所说的两种元素性质其实是diaplay的两种属性,下面我们来了解一下display这个CSS属性:
1.display:none
none这个值表示此元素将不被显示.
没加之前的代码和效果:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style>
.one{
width:100px;
height:100px;
border:solid 2px red;
/*display:none;*/
}
</style>
</head>
<body>
<div class="one">演示</div>
</body>