CSS定位——文档流定位

关于CSS的定位机制Ⅰ ㈠概念对于盒子模型来说,也就是页面元素,这些盒子究竟在页面的什么位置,怎样排列它,那么找到它的位置,确定它的位置,这个就是定位机制所决定的. ㈡分类文档流, 浮动定位,层定位㈢三种类型定位的功能 ⑴文档流定位(normal flow) 默认我们不需要额外的设置,每种元素它们在当前的网页上面呈现出来的状态都不同,文档流定位就相当于我们平常写字一样,都是从上到下,从左到右,只是有的元素会单独占一行,有的元素跟其他元素在一行上显示. ⑵浮动定位(float) 改变默…

内联元素的盒子模型与文档流定位padding属性

内联元素的盒子模型 1.内联元素不能设置width宽度和高度height span{width:200px ; height:200px} 与 span{width:100px ; height:100px} 表现效果相同,由此可见内联元素不可以设置高度和宽度 2.内联元素可以设置水平方向的内边距padding-left或padding-right span{padding-left:20px ; padding-right:200px} 3.内联元素可以设置垂直…

css标准文档流

css标准文档流所谓的标准文档流指的是网页当中的一个渲染顺序,就如同人类读书一样,从上向下,从左向右.网页的渲染顺序也是如此.而我们使用的标签默认都是存在于标准文档流当中. 标准文档流当中的特性空格产生折叠当在代码中存在多个空格的时候,空格会出现折叠现象. 2.元素默认底边对齐当多个元素并排显示的时候,默认会采用底边对齐. 3.文字自动换行当在一行范围内去输出文字的时候,当一行的宽度不够时,文字会发生自动换行. 块级元素和行内元素在标准文档流当中,元素分为块级元素和行内元素. 如果想…

div排版+文档流+定位秘诀

由于没有找到自己认为完整的关于普通流.浮动和绝对定位的中文文章,于是鼓起勇气决定自己来写篇. 在普通流中的 Box(框) 属于一种 formatting context(格式化上下文) ,类型可以是 block ,或者是 inline ,但不能同时属于这两者.并且, Block boxes(块框) 在 block formatting context(块格式化上下文) 里格式化, Inline boxes(块内框) 则在 inline formatting context(行内格式化上下文) 里…

css脱离文档流

作者:张秋怡链接:http://www.zhihu.com/question/24529373/answer/29135021来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. Q: 脱离文档流就不占据空间了吗?A: 可以这么说.更准确地一点说,是一个元素脱离文档流(out of normal flow)之后,其他的元素在定位的时候会当做没看见它,两者位置重叠都是可以的. Q: 脱离文档流是不是指该元素从dom树中脱离?A: 不是,用浏览器的审查元素就可以看到脱离文档…

CSS脱离文档流&浮动

什么是文档流? 将窗体从上至下分成一行一行,并在每行中按从左至右依次排放元素,称为文档流,也称为普通流.这个应该不难理解,HTML中全部元素都是盒模型,盒模型占用一定的空间,依次排放在HTML中,形成了文档流. 什么是脱离文档流? 元素脱离文档流之后,将不再在文档流中占据空间,而是处于浮动状态(可以理解为漂浮在文档流的上方,处在另一个平面).脱离文档流的元素的定位基于正常的文档流,当一个元素脱离文档流后,依然在文档流中的其他元素将忽略该元素并填补其原先的空间. 脱离文档流的几个方法 1. 绝对定…

CSS标准文档流块级元素和行内元素

标准文档流什么是标准文档流宏观的将,我们的web页面和ps等设计软件有本质的区别,web 网页的制作,是个“流”,从上而下 ,像 “织毛衣”.而设计软件 ,想往哪里画东西,就去哪里画空白折叠现象: 多个空格会被合并成一个空格显示到浏览器页面中.img标签换行写.会发现每张图片之间有间隙,如果在一行内写img标签,就解决了这个问题,但是我们不会这样去写我们的html结构.这种现象称为空白折叠现象. 高矮不齐,底边对齐文字还有图片大小不一,都会让我们页面的元素出现高矮不齐的现象,但是在浏览器…

css 脱离文档流

一.float <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <title>脱离文本流</title> <style> .c1{ height: 100px; width: 100px; background-color: brown; } .c2 { height: 150px; width: 1…

认识CSS中布局之文档流、浮动、定位以及叠放次序

前端之HTML,CSS(七) CSS CSS布局的核心就是盒子的摆放,即CSS定位.而CSS中定位机制分为:普通流(nomal flow).浮动(float).定位(position). 普通流普通流又被称为文档流或者标准流,普通流是指网页内标签元素正常情况下会按照自上而下,自左向右按顺序排列.即块级元素独占一行,多个块级元素存在会自上而下顺序排列,多个行内元素会共占一行,自左向右排列. <!DOCTYPE html> <html> <head> <meta c…

{03--CSS布局设置} 盒模型二 padding bode margin 标准文档流块级元素和行内元素浮动 margin的用法文本属性和字体属性超链接导航栏 background 定位 z-index

03--CSS布局设置本节目录一盒模型二 padding(内边距) 三 boder(边框) 四简单认识一下margin(外边距) 五标准文档流六块级元素和行内元素七浮动八 margin的用法九文本属性和字体属性十超链接导航栏案例十一 background(背景) 十二定位十三 z-index 一盒模型盒模型在CSS中,"box model"这一术语是用来设计和布局时使用,然后在网页中基本上都会显示一些方方正正的盒子.我们称为这种盒子叫盒模型.…

前端（八）—— 高级布局：文档流、浮动布局、流式布局、定位布局、flex布局、响应布局

高级布局:文档流.浮动布局.流式布局.定位布局.flex布局.响应布局一.文档流 1.什么是文档流将窗体自上而下分成一行一行,块级元素从上至下.行内元素在每行中从左至右的顺序依次排放元素 2.本质文档流本质是 nomal flow (普通流.常规流) 3.BFC(Block Formatting Contxt) 块级格式化上下文,它是一个独立的渲染区域,只有Block-level box参与,它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干 4.BFC的规则…

4、前端--浮动、定位、是否脱离文档流、溢出属性、z-index、透明度、JavaScript简介

浮动 # ps:html代码时没有缩进一说的全部写在一行也可以 """浮动主要就是用于页面布局的!!!""" # 浮动带来的负面影响 """会造成父标签塌陷!!!""" 解决浮动的负面影响 1.再写一个div撑场面(不可取) 2.关键字clear(可以使用) 3.通用解决策略(推荐使用):只要父标签塌陷就使用 .clearfix:after { content: ''; clear:…

文档流&浮动&定位

文档流指元素在文档中的位置由元素在html里的位置决定,块级元素独占一行,自上而下排列:内联元素从左到右排列脱离文档流的方式: 浮动,通过设置float属性绝对定位,通过设置position:absolute 固定定位,通过设置position:fixed 定位 1 relative,relative元素框偏移某个距离.元素仍保持其未定位前的形状,它原本所占的空间仍保留.它的主要效果是使元素偏离正常的位置,其他元素不会调整位置来弥补其偏离后留下来的空隙.其与 absolute 不同,其偏离对…

子元素position:absolute定位之后脱离文档流，怎么使子元素撑开父元素

纯粹的CSS无法实现.因为position:absolute就是脱离文档流,怎么能让父元素不塌陷呢? 目前想到的只能用js和jquery来实现了,用js获取子元素的高度,赋值给父元素. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,initial…

html/css基础篇——DOM中关于脱离文档流的几种情况分析

所谓的文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 当前所知的脱离文档流的方式有两种:浮动和定位. a.定位属性positon 先看一下定位.看一段对定位各个字段的描述,有助于理解值描述 absolute 生成绝对定位的元素,相对于 static 定位以外的第一个父元素进行定位. 元素的位置通过 "left", "top&q…

CSS文档流

文档流将窗体自上而下分成一行行, 并在每行中按从左至右的顺序排放元素,即为文档流. 每个非浮动块级元素都独占一行, 浮动元素则按规定浮在行的一端. 若当前行容不下, 则另起新行再浮动. 内联元素也不会独占一行. 几乎所有元素(包括块级,内联和列表元素)均可生成子行, 用于摆放子元素. 有三种情况将使得元素脱离文档流而存在,分别是浮动,绝对定位, 固定定位. 浮动元素不占任何正常文档流空间,而浮动元素的定位还是基于正常的文档流,然后从文档流中抽出并尽可能远的移动至左侧或者右侧.文字内容会围绕在浮…

CSS文档流与块级元素和内联元素

CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆css布局的理论都变得易于理解,并且体会到CSS这套设计的合理性所在. 于是我根据猜测,再加实验,得出一下说法.如有错误,纯属正常. 文档流将窗…

html/css 关于脱离文档流的几种情况

所谓的文档流顾名思义就是按照顺序流下来,指的是html元素从上往下从左往右的流式排列, 比如说写了5个Div,正常的文档流是依次显示这5个div块: 脱离文档流就是指它所显示的位置和文档代码就不一定一致了.比如可以用css控制,把最后一个div块显示在第一个div块的地方.当前所知的脱离文档流的方式有两种:浮动和定位. 定位属性positon b. 浮动属性float…

23----2013.07.01---Div和Span区别,Css常用属性,选择器,使用css的方式,脱离文档流,div+css布局,盒子模型,框架,js基本介绍

01 复习内容复习之前的知识点 02演示VS创建元素 03div和span区别通过display属性进行DIV与Span之间的转换.div->span 设置display:inline span->div 设置display:block <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Cont…

CSS文档流与块级元素和内联元素（文档）

css盒子模型、文档流、相对与绝对定位、浮动与清除模型

一.CSS中的盒子模型标准模式和混杂模式(IE).在标准模式下浏览器按照规范呈现页面:在混杂模式下,页面以一种比较宽松的向后兼容的方式显示.混杂模式通常模拟老式浏览器的行为以防止老站点无法工作. html元素一般分为块级元素和行内元素块级元素:块级元素排斥其他元素与其位于同一行,可以设定宽(width)和高(height),块级元素一般是其他元素的容器,可容纳块级元素和行内元素, 常见的块级元素有div, p ,h1~h6,ul,table,form,hr等. 每一个块元素都可以分为cont…

从文档流来看内联元素和块元素的css排版

veda原创[抄录]讲得很好存自己这里看从文档流来看内联元素和块元素的css排版 CSS文档流与块级元素(block).内联元素(inline),之前翻阅不少书籍,看过不少文章, 看到所多的是零碎的CSS布局基本知识,比较表面.看过O'Reilly的<CSS权威指南>,发现里面提到的文档流概念让我很敏感. 可恶的是书中并没有解释文档流是什么东西,或许作者觉得这个太简单了以至于不值一提.但我觉得,这个概念实在太重要了.理解了它,一堆CSS布局的理论都变得易于理解,并且体会到CSS这套设计的合理…

css布局与文档流的关系之float（浮动）

所谓文档流,指元素在排版布局的过程中,元素会自动从左到右,从上到下的流式排列.脱离文档流呢,就是元素打乱了这个排列,或是从排版中拿走. 说到文档流呢,我们先来说一下元素,每个元素呢,都有display属性. 行内元素本身是display:inline属性例如:a b span img input select strong .不会自动换行,例如我们插入几个图片标签,它们就会紧密相连,图片因为大小会高矮不切,一行排不下会自动换行. 块级元素本身是display:block属性例如:div ol l…