line-block代替float布局；

float的特性: 1. 元素‘浮动’ 2. 脱离文档流 3. 但不脱离文本流  float 对自身影响: 1. 形成“块”(BFC),可设置宽高 2. 位置尽量靠上 3. 位置尽量靠左(右)  float 对兄弟影响: 1. 一般上面贴非float元素 2. 旁边贴float元素 3. 不影响其它块级元素位置 4. 影响其它块级元素内部文本(3/4点即:脱离文档流,不脱离文本流)  float 对父级元素影响: 1. 从布局上“消失” 2. 高度塌陷 解决高度塌陷方法: i. overflow

使用CSS布局网页,那是前端的基本功了,什么两栏布局,三栏布局,那也是前端面试的基本题了.一般来说,可以使用CSSposition属性进行布局,或者使用CSSfloat属性布局.前者适合布局首页,因为首页上的内容往往可以完全控制.后者适合布局模板,模板中填充的内容你没法控制——比如,在编辑wordpress模板时,你肯定没法考虑每篇博文的长度.这篇博文,就是总结一下怎样使用CSS中的float属性进行布局,其实网上有很多讨论这个话题的文章了,但我觉得都没说到点子上.那就来老生常谈一次吧,CSS之

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

一.bfc布局 以下的代码加了子元素的上边距,为什么没有发生变化? <div class="wrapper"> <div class="content"></div> </div> * { padding: 0; margin: 0; } .wrapper{ position: relative; margin-left:100px; margin-top:100px; width: 100px; height: 10

.clearfix:after { content: ''; display: table; clear: both; } .clearfix { *zoom: 1; }

我所知的常用的布局技巧有四种,原来的三种(1.float布局  2.position布局 3.table布局)以及现在css3新增的flex布局.这四种布局各有优劣 block与inline属性比较 display:block block元素会独占一行,多个block元素会各自新起一行.默认情况下,block元素宽度自动填满其父元素宽度. block元素可以设置width,height属性.块级元素即使设置了宽度,仍然是独占一行. block元素可以设置margin和padding属性. dis

我的主要参考资料是[Object object]的文章 float 布局应该是目前各大网站用的最多的一种布局方式了,但是也特别复杂,这里详细讲一下 首先,什么是浮动? 浮动元素是脱离文档流的,但不脱离文本流,这是什么意思呢,用过 word 的应该知道有一种图片环绕的方式是文字环绕吧,就是这种效果. 那么它有什么特点呢 对自身的影响 float 元素可以形成块,如 span 元素.可以让行内元素也拥有宽和高,因为块级元素具有宽高 浮动元素的位置尽量靠上 尽量靠左(float:left)或右(flo

本文犯了一个错误,就是:需要把 id=xx换成id=”xx“,由于不想再贴一遍代码,故在此说明,更正一下: 再加一个内容:<style></style>中不可以加注释? 只定义子div的高和宽时,父div会被”撑大“: 一.浮动布局,写于<style>   ~   </style>标签中: 语法: float:left: float:right: 二.清除浮动布局,在需要完全显示的那个div的在<style>   </style>控制

ie.firefox.chrome中关于style="display:block" 引发的页面布局错乱的解决办法: table中tr 添加style="display:block" 导致页面布局错乱 对table中tr 不显示时,添加style="display:none",ie.chrome.firefox等都没有问题.但是如果想要显示某个tr,就不能使用style="display:block"了,因为,在ie下,可以正常