<iframe src=”test.jsp” width=”100″ height=”50″ frameborder=”no” border=”0″ marginwidth=”0″ marginheight=”0″ scrolling=”no” allowtransparency=”yes”></iframe>
浮动是可视化格式模型中非常重要的一节。浮动跟stack level也有一定的关系。可视化模型是一个3维的模型，并不是二维的。元素在页面上的排列，从我们的角度看是二维的，元素的位置可以用x，y轴坐标来表
在标准流中，一个块级元素在水平方向会自动伸展，直到包含它的元素边界；而在竖直方向和兄弟元素依次排列，不能并排。使用浮动方式后，块级元素的表现就会不同。简单的说多个不设宽度的块级的元素可以横向排列。
由于浮动框不在文档的普通流中，所以文档的普通流中的块框表现得就像浮动框不存在一样。
在W3CSchool学习web前端时，看完CSS定位-浮动这一节后，感觉没有什么问题。但是在CSS高级-分类这一节的中进行实践时，遇到了如下问题。测试地址：浮动的简单应用。
普通流是默认定位方式，在普通流中元素框的位置由元素在html中的位置决定，元素position属性为static或继承来的static时就会按照普通流定位，这也是我们最常见的方式。
元素的类型分为块级元素和行级元素。 比如div、h1 或 p 元素常常被称为块级元素。这意味着这些元素显示为一块内容，即“块框”。与之相反，span 和 strong 等元素称为“行内元素”，这是因为它们的内容显示在行中，即“行内框”。 可以通过display属性，设置元素的具体表现。比如
可以看到，父元素并没有框住两个float子元素，且父元素高度为0，这种现象就是**float坍塌**。
如果对一个元素进行相对定位，它将出现在它所在的位置上，然后可以通过设置垂直或者水平位置，让这个元素“相对于”它原来的位置进行移动，这时元素依然占据原来的位置，但移动后会覆盖其他的元素，可以通过z-index属性来对其显示位置进行设置。
相对定位指的是设置为相对定位的元素框会偏移某个距离。元素仍然保持其未定位前的形状，它原本所占的空间仍保留。
block元素通常被现实为独立的一块，独占一行，多个block元素会各自新起一行，默认block元素宽度自动填满其父元素宽度。block元素可以设置width、height、margin、padding属性；
内边距、边框和外边距是可选参数属性，默认值：0 ；很多元素由用户代理样式表设置外边距和边框，通过将元素的 margin外边距和padding内边距设置为 0 来覆盖这些浏览器样式
float原本是用于“文字环绕元素”的效果，但是，平时我们经常在布局上用float属性。那么，使用float时，需要注意些什么呢？
本系列面试题旨在学会相关知识点，从而轻松应对面试题的各种形式，本文讲解了 浮动布局 以及 如何清除浮动。
行内元素（如a标签），在文档流中的时候因为是行内元素所以无法设置宽高；而当设置了绝对定位或者浮动，会生成块级框（即变成块级元素），所以就可以设置宽高了。
用ionic也有一段时间了，今天说一下它里面提供的一个小组件：浮动框 浮动框的使用在移动端的项目中已经很少了，只有在少数的一些特殊情况下才会出现。所以官方文档中对于$ionicPopover的介绍也是非常少。
http://www.iyunlu.com/view/css-xhtml/55.html
场景 在使用App时，曾经看到这样一个场景，如下图所示，点击顶部菜单按钮，有一个类似的对话框的列表显示出来，让用户选择其中的一个快递选项，然后选中的快递信息就会填充到底部的Activity中。 act
1. 页面常用布局 常用的页面布局方式主要有：浮动，弹性盒子，定位，设置表格模式，行内与块级相结合。 布局方式 Float flex position table block&Inline-block 兼容性 IE4 IE10 IE7 IE8 IE8 注意 清除浮动 设置自适应子容器与父容器 嵌套使用,各中关系 内容会自适应 效果有局限性，行内块之间有缝隙 1.1.浮动布局（Float） 值 描述 left 元素向左浮动。 right 元素向右浮动。 none 默认值。元素不浮动，并会显示在其在文本中出现
01 国庆长假终于结束了，博主想到以往这个时候，自己就已经回到学校，和一群基友扯扯犊子，顺便吹吹牛，好不快活，可惜这种生活不会再有了。虽说如此，但是参加了工作以后，毕竟有更多的时间去做自己想做的事情，没有了学校里的那么多约束，也不再需要为了考试忙活个半天，想来也是不错的。 好的，再次回到这个系列。 不知不觉，我发现自己在简书已经写了好几万字了。当我无聊的时候，就会去看看自己之前写的文章，然后感到很奇怪，似乎那些东西根本不是自己写的一样。我仿佛是在看别人的文章，好长时间我都有这种感受。 这真的是挺奇怪的，不过
其中 margin 称为外边距，在计算元素整体宽高的时候一般不包括它。CSS3 中新增了一个属性 box-sizing，可以用来指定使用的盒模型计算方式。下面是 CSS3 中支持的盒模型计算方式（CSS2种只支持默认的）
Web前端杂记 学习链接https://www.bilibili.com/video/av75501761?p=2 默认未设置定位 父元素 宽度最大填充父元素，高度正好容纳子元素。 如果子元素左浮动，
在常规流中的框（boxes，元素形成的矩形区域），都属于一个格式化的上下文中，可能是块的，也可能是行内的，但不可能同时是行内的又是块的。块框参与块格式化上下文。行内框参与行内格式化上下文。 块格式化上
标准文档流 指的是元素排版布局过程中，元素会默认自动从左往右，从上往下的 流式排列方式 。并最终窗体自上而下分成一行行，并在每行中从左至右的顺序排放元素。
1、浮动的设置：css属性float：left/right/none 左浮动/右浮动/不浮动（默认）
前言 ---- 之前一直听到有人提到 CSS里的BFC，正巧在 IFE的练习里遇到了外边距折叠的问题，所以正好弄清楚BFC的机制。 一、 什么是 BFC ---- 和之前所有博文一样，还是先从What的角度开始介绍，由浅入深的理解BFC。 所谓的 Formatting context(格式化上下文), 它是 W3C CSS2.1 规范中的一个概念。 它是页面中的一块渲染区域，并且有一套渲染规则. 它决定了其子元素将如何定位，以及和其他元素的关系和相互作用。 而 Block Formatting Cont
static 默认值，无定位，不能当作绝对定位的参照物，并且设置标签对象的left、top等值是不起作用的的。
some inline text more text
more text
font-family可以将多个字体名保存起来，如果浏览器不支持第一个字体会依次尝试后面的字体。
一、Float的特性 1. 应用于文字围绕图片 2. 创建一个块级框 3. 多列浮动布局 4. 浮动元素的宽度、高度自适应，但可以设置其值。 二、核心解决的问题 文字围绕图片：img标签与多个文本标签放置在一个容器中，如果img浮动，文本标签会围绕图片。 001文件内容文件内容文内容文件内容 文件
001文件内容文件内容文内容文件内容 文件
定位（position） 2017的微信公开课pro如期进行了，小程序将于2017年1月9日对个人开放，公司项目的demo版做了个大概，过程中花的时间最多的还是页面布局，所以后面将花一段时间将css的属性在小程序里过一篇，虽然小程序里面对于css支持，但没有说明支持到什么地步。今天就先来说说定位。 一.定位：position属性允许你对元素进行定位。 二.定位机制：有三种：普通流，浮动流，绝对定位。 三.定位属性值：static，relative，absolute，fixed，inherit，-ms-pag
在使用相对定位时，无论是否进行移动，元素仍然占据原来的空间。因此，移动元素会导致它覆盖其它框。
1、浮动元素有什么特征？对父容器、其他浮动元素、普通元素、文字分别有什么影响? 浮动元素：浮动元素的框可以向左或者向右移动，直到它的外边缘碰到父元素包含框或者另一个浮动元素的边框为止；浮动元素不在文档
上篇文章主要介绍了CSS样式更改篇中的列表、表格和轮廓，这篇文章主要介绍CSS样式更改中框模型、定位、浮动、溢出基础知识。
如果父元素只包含浮动元素，且父元素未设置高度和宽度的时候。那么它的高度就会塌缩为零
一. 盒子模型 在css中，width和height指的是内容区域的宽度和高度，增加内边距， 边框和外边距不会影响内容区域的尺寸，但是会增加元素框的尺寸。 二.清除浮动，清除默认样式 ```` /*清除默认样式*/ body{ margin: 0px; padding: 0px; } /*清除浮动*/ .clearfix { zoom: 1; display: table; } ```` 三.使用float应该注意 float 属性定义元素在哪个方向浮动。以往这个
Css对于浮动的定义：使元素脱离了文档流，按照指定方向移动，直到碰到包含框或另一个浮动框为止。
Eclipse作为开发Java的IDE，从出现到现在已经有几年的时间了，其丰富的特性，操作容易和在提高生产力方面收到了广大开发者的青睐。当然一提到Java IDE，人们不禁会提到其他Java IDE像NetBeans、IntelliJ等，那么这些Java IDE之间到底存在着哪些异同呢？
自上次参加完回音分享会后，我下定决心要洗心革面乖乖打基础，于是开启了这个part，争取两个月不间断更新，写完Material Design与iOS中的组件（顺便学学英语），以便今后在使用的时候完全不虚
$(this).scroll(function() { // 页面发生scroll事件时触发
1、CSS的三种定位机制 CSS 规定的定位机制有三种，分别是： 标准文档流（Normal flow）： 特点：从上到下，从左到右，输出文档内容。由块级元素（块级元素特点：从左到右撑满页面，独占一行，触碰到页面边缘时，会自动换行）和行级元素（块级元素特点： 在同一行内显示，不会改变HTML文档结构 ）组成。 浮动（Floats） 绝对定位（Absolute positioning） 言下之意就是网页布局和元素的定位都离不开这三种机制。 2、什么是W3C标准 W3C标准，是由万维网联盟制定的一系列标准，
一、字体属性 字体 font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。 body { font-family: "Microsoft Yahei", "微软雅黑", "Arial", sans-serif } 大小 可以通过font-size来说设置字体大小的像素值，如果设置成inherit表示继承父元素的字体大小值。 p { font-size: 16px; } 字重（粗细）
CSS2.1中，一个框(box，就是元素形成的方块等)可以根据三种定位体系布局。 常规流(Normal flow) 常规流，是对 normal flow的直译。 流者，动也。偏旁是三点水，说明，跟水有
（注1：如果有问题欢迎留言探讨，一起学习！转载请注明出处，喜欢可以点个赞哦！） （注2：更多内容请查看我的目录。）
这样做的优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质例如可以设置宽高等，但它与inline-block还是有一些区别的，第一个就是关于横向排序的时候，float可以设置方向而inline-block方向是固定的；还有一个就是inline-block在使用时有时会有空白间隙的问题
如果能娴熟地将层布局在页面中，页面看起来就会很清爽，浏览也更便捷。基于positon属性的运用，我们可以将页面定位分为静态定位、相对定位、绝对定位、固定定位和浮动五种方式。
font-family可以把多个字体名称作为一个“回退”系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。浏览器会使用它可识别的第一个值。
浮动布局优点就是在图文混排的时候可以很好的使文字环绕在图片周围。另外当元素浮动了起来之后，它有着块级元素的一些性质，例如可以设置宽高等。但它与inline-block还是有一些区别的，第一个就是横向排序的时候，float可以设置方向而inline-block方向是固定的；第二就是inline-block在使用时有时会有空白间隙的问题。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
