这几天有空,整理了关于CSS浮动和定位的一些知识点,有什么欠缺的地方,欢迎大家批评指正. 一.文档流的概念指什么?有哪种方式可以让元素脱离文档流? 文档流,指的是元素排版布局过程中,元素会自动从左往右,从上往下的流式排列.并最终窗体自上而下分成一行行,并在每行中按从左到右的顺序排放元素.脱离文档流即是元素打乱了这个排列,或是从排版中拿走. 让元素脱离文档流的方法有:浮动和定位. 二.有几种定位方式,分别是如何实现定位的,使用场景如何? CSS定位方式有四种:默认定位(static).相对定位(r…

今天学的是浮动.定位.表格.表单等内容,这些是CSS中最容易混淆的知识,有许多小技巧在写代码过程中需要注意.下面是主要知识点: 一.float浮动1.块元素在一行显示2.内联元素支持宽高3.默认内容撑开宽度4.脱离文档流5.提升层级半层二.clear清除浮动1.加高(扩展性不好)给浮动元素的父级设置同样的高度2.给父级加浮动(页面中所有元素都要加浮动,margin左右失效)3.inline-block(margin左右auto失效)4.空标签加浮动(div )(任何用到的地方都要加).clear…

外边距塌陷 解决方案: ◆给父盒子加border ◆overflow:hidden; bfc 行内元素可以定义左右的内外边距,上下会被忽略掉. 行内块可以定义内外边距. 文档流(标准流) 元素自上而下,自左而右,块元素独占一行,行内元素在一行上显示,碰到父集元素的边框换行. 1 浮动布局 float: left | right 特点: ★元素浮动之后不占据原来的位置(脱标) ★浮动的盒子在一行上显示 ★行内元素浮动之后转换为行内块元素.(不推荐使用,转行内元素最好使用display: inlin…

css操作元素位置有以下几种方式:float.position.top等. I float part 1.浮动首先会先将元素在正常文档流中删除,父容器无法获取元素高度,但是该元素依然影响布局. 2.任何元素被浮动后先生成一个块级框,然后为自己指定一个包含块. 3.浮动元素与正常元素重叠时,行内框自行置顶,块框只有内容置顶. 4.定位属性强于浮动属性. 5.clear清除是产生一个清除域,加在上外边距之外,域中不允许浮动元素的存在. II position part 1.relative.stat…

一.浮动float 在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素. 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的边框为止. 由于浮动框不在文档的普通流中,所以文档的普通流中的块框表现得就像浮动框不存在一样. 三种…

在了解CSS中的浮动和定位之前有必要先了解清楚标准流和脱离标准流的特性 标准流的默认特性 1.分行.块级元素,并且能够dispay转换. 2.块级元素(block):默认独占一行,不能并列显示,能够设置宽.高,宽度为父盒子的100%.例如:div.p.标题元素(h1-h6).列表元素(ul li.dl dt dd) 3.行内元素(inline):默认并排显示,不能设置宽.高,宽度为内容的宽度.例如:span.a.b.i 4.margin-bottom 和margin-top 塌陷,以最大值为准.…

第四章 盒子的浮动与定位 本章的重点和难点是深刻地理解”浮动“和”定位“这两个重要的性质,对于复杂页面的排版至关重要. 4.1 盒子的浮动 在标准流中,一个块级元素在水平方向会自动伸张,直到包含它的元素的边界:而在竖直方向和兄弟元素依次排列,不能并排.使用“浮动”方式后,块级元素就可以并排了. CSS中的float属性,默认为none.就是标准流通常的情况. 如果将float属性的值设置为left或right,元素就会向其父元素的左侧或右侧靠紧.同时默认情况下,盒子的宽度不再伸张,而是根据盒子里…

  一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点.   说白了width:auto试图…

---恢复内容开始--- 一.width:auto和width:100%的区别   1.width:100%的作用是占满它的参考元素的宽度.(一般情况下参考元素 == 父级元素,这里写成参考元素而不是父级元素,在下面我会再细说) 2.width:auto也是以"占满参考元素宽度"为目标.但不同的地方在于,它能根据margin和padding的值动态地调整width的值.当参考元素的宽度一定时,子元素的margin或者padding多一点,那么子元素的width就会少一点.   说白了w…

先来说一下CSS中的浮动 一.浮动 1.标准流中的块级盒子,宽度将自动伸展为100%,而浮动的块级盒子,宽度不会自动伸展,而是由内容撑开 2.当一个盒子浮动,标准流中未浮动的其他盒子,将视浮动盒子不存在而占据浮动盒子原来的位置.(浮动盒子,会盖在这个盒子的上方) 但是,未浮动盒子中的文字内容,将会受到浮动盒子宽度的影响.(未浮动盒子中的内容,不会被浮动盒子盖住) 3.由于第二条的原因. 可以给收影响的盒子,添加clear属性,清除掉浮动盒子对自身的影响 clear可选值:left-清除左浮动影响…