CSS的三种手段让元素脱离标准本文档流

1、浮动

  浮动是CSS中用到的最多的一个选项,他有三个性质。关于浮动我们要强调一点,永远不是一个东西单独浮动,浮动都是一起浮动,要浮动,大家都浮动。

  1.1 浮动元素脱离标准文档流

    1.1.1 大概描述:有两个盒子,一个盒子浮动,一个盒子不浮动。浮动的盒子会脱离标准文档流,不浮动的盒子会在标准文档流中成为第一个,所以两者出现覆盖现象。

    

    1.1.2 大概描述:一个行内标签在标准文档流中是不能设置宽高的,但是使用float使其脱离文档流之后,就可以对其设置宽高了。所有浮动的标签不会去区分行内标签和块级标签。也就是说: 一旦一个元素浮动了,那么,将能够并排了,并且能够设置宽高了。无论它原来是个div还是个span。

  1.2 浮动的元素互相贴靠 

    以float向左浮动为例:

    如果有足够空间,那么就会靠着2哥。如果没有足够的空间,那么会靠着1号大哥。

    如果没有足够的空间靠着1号大哥,自己去贴左墙。

    

  1.3 浮动元素有“自围”的效果

    自围效果就是:浮动的盒子可以遮盖文档标准流的第一个盒子,但是不会遮盖里面的文字,文字会围绕浮动的盒子显示。

    在CSS代码中让div浮动,p不浮动,那么p中的文字就睡形成这种自围效果。

<div>
    <img src="images/1.jpg" alt="" />
</div>
<p>123文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字文字
</p>

    

2、绝对定位

3、固定定位

4、父子关系:儿子就是占用父亲内容的宽高,和父亲的padding没有关系。

时间: 2024-10-01 04:36:34

CSS的三种手段让元素脱离标准本文档流的相关文章

三种可视化格式模型:普通文档流、相对定位与绝对定位、浮动

在CSS中是有三种定位机制的:普通文档流.浮动和绝对定位.在未指定其它两种定位机制的情况下,所有框都是在普通文档流中定位的. 普通文档流: 普通文档流,顾名思义,就是根据块级元素的标签在HTML里的顺序,像水流一样,从上至下.当然对于行内元素而言,还是在一行中水平排列的. 这里插入一个积累的小知识点. 行内元素可 以在水平(内间距.边框.外边距)方向上修改它们水平尺寸,但是在垂直方向上对行内元素的高度是毫无影响的,还有就是直接定义行内元素的 width/height也是毫无影响.对与行内元素来说

脱离标准文档流(2)---定位

定位 三种定位 可以使标准流脱离的定位:绝对定位,固定定位. 相对定位 属性值:relative(相对的)----权当我复习了一边英语单词. 下面是我对于相对定位的理解: 绝对定位在某种程度上相当于灵魂出窍(脑洞大开),也就是说那些被我们通过偏移量所移动的元素,他们的灵魂仍在原来的位置,我们所看到的是实体. 但是客观一点来说的话,就是相对定位无法使标准流脱标,所以我们所移动的元素仍是标准流,标准流的特点就是独自占有一行,一个标签换一次行. 图示如下:       我们可以看出来蓝色块已经不再原处

前端学习随笔:float布局问题------float元素是否脱离了文档流

问题: 今天学习2016-03-13,我知道float的原始作用为实现文字的环绕效果,但是老师说:对元素设置float属性后,该元素依然处于标准文档流中,同时浮动会 引起父元素的高度塌陷问题(怎么解决,目前不知道).但是,紧随其后的块元素会无视设置float属性的元素,但是后面元素的文本依然会为float元素让出位置,环绕于周围.既然后元素没有按照标准文档流单独占一行,我是不是可以理解为浮动的元素脱离了文档流??前后矛盾了. 解答:回答这个问题之前,首先解释一下什么叫脱离文档流! css中脱离文

Js之Dom学习-三种获取页面元素的方式、事件、innerText和innerHTML的异同

一.三种获取页面元素的方式: getElementById:通过id来获取 <body> <input type="text" value="请输入一个值:" id="txt"/> <input type="button" value="按钮" id="btn"/> <script> var txt=document.getElementB

【CSS】CSS的三种选择器

css概述 为了让网页元素的样式更加丰富,也为了让网页的内容和样式能拆分开,CSS由此思想而诞生,CSS是 Cascading Style Sheets 的首字母缩写,意思是层叠样式表.有了CSS,html中大部分表现样式的标签就废弃不用了,html只负责文档的结构和内容,表现形式完全交给CSS,html文档变得更加简洁. css基本语法 css的定义方法是: 选择器 { 属性:值: 属性:值: 属性:值:} 选择器是将样式和页面元素关联起来的名称,属性是希望设置的样式属性,每个属性有一个或多个

HTML引入CSS样式三种方法及优先级 CSS样式的写法

HTML引入CSS样式三种方法及优先级: 方法 css的样式引用由3种方式.分别为行内样式.内部样式(嵌入式)和外部样式: 行内样式:                  在对象的标记内使用对象的style属性定义适用的样式表属性,格式定义为 :<div style="内容"><div>: 内部样式(嵌入式):是由<style></style>标记对放在<head></head>中: 外部样式 :          

CSS的三种使用方式以及常用的选择器

一.CSS的三种使用方式: 1. 内联样式              * 在标签内使用style属性指定css代码              * 如:<div style="color:red;">hello css</div>2. 内部样式             * 在head标签内,定义style标签,style标签的标签体内容就是css代码             * 如:                 <style>           

CSS的三种网页布局模式

流动模型(一) 先来说一说流动模型,流动(Flow)是默认的网页布局模式.也就是说网页在默认状态下的 HTML 网页元素都是根据流动模型来分布网页内容的. 流动布局模型具有2个比较典型的特征: 第一点,块状元素都会在所处的包含元素内自上而下按顺序垂直延伸分布,因为在默认状态下,块状元素的宽度都为100%.实际上,块状元素都会以行的形式占据位置.如右侧代码编辑器中三个块状元素标签(div,h1,p)宽度显示为100% 流动模型(二) 第二点,在流动模型下,内联元素都会在所处的包含元素内从左到右水平

JS的三种使用方式/CSS的三种使用方式/JS中的DOM事件模型/JS中匿名函数的书写及调用/媒体查询@media的三种使用方式

一.JS的三种使用方式 1.html标签中内嵌JS(不提倡使用.)                <button onclick="javascript:alert('你真点啊.')" > 有本事点我呀!!!!</button>                                2.HTML页面中直接使用JS:                <script type="text/javascript">