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

BUG重现 最近机票团队在一个页面布局复杂的地方发现一个BUG,非常奇怪并且不好定位,这类问题一般最后都会到我这里,这个问题是,改变dom结构,页面却不渲染!!! 如图所示,我动态的改变了dom结构,结果页面那一坨变得什么都没有,相当奇怪!!!在PC模拟iPhone就可以重现,iPhone.note4等手机上也可重现,由于这种BUG我不是第一次碰到,很快便引起了注意,总结起来可以归结于: js代码改变fixed元素的html结构(一般是动画后并且布局相对复杂),页面不会渲染 问题定位-分离法 本…

前言 在理解浮动和定位时,触碰到文档流概念.为了更好理解浮动和定位,学习了文档流和DOM(文档对象模型). 正文 DOM(文档对象模型)简单理解就是编写的html页面所有内容构成的树形结构.例如: 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档节点. 每个 HTML 元素是元素节点. HTML 元素内的文本是文本节点. 每个 HTML 属性是属性节点. 注释是注释节点.   文档流是另一个概念,流实际上就是浏览器在页面上摆放Html元素所用的方…

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

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

float的元素脱离文档流,但不完全脱离,只是提升了半层:…

在一个文档流中,盒子模型元素的位置会互相影响. 当一个BFC出现在文档流中时,BFC内部的盒子模型元素同BFC外部的元素之间的位置不会互相影响. 相当于BFC重新创建了一个文档流. 举例: 一个文档流中出现了一个float元素,float元素会影响后续出现的inline或者inline-block的元素显示位置,而float元素内部的元素显示,同外部元素没有任何关系.…

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

布局转换:文档流->绝对定位(详见妙味JS高级教程,运动课程第6课20分钟起)比如一个DIV中有三张图片并排,个数不确定的布局.需要鼠标移上去图片从中心放大,只使用float:left布局在放大的时候会导致旁边的元素跟着动,所以需要将float布局转换为absolute绝对定位1.先使用文档流布局,可以用float这些2.因为每个图片元素都有offsetLeft和offsetTop,通过遍历获取将offsetLeft和offsetTop赋值给自己的left和top值,最后将元素属性改为绝对定位f…

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