固定内联块div,负边距和浮动浮动:-4px有以下特别之处:
display: inline-block
float: left
float: right
总结:固定内联块div,负边距和浮动浮动:-4px的组合,可以用于调整元素的位置和间距,实现更精细化的布局效果。
从业三年,项目无数,现在回过头来,想要把一些重要的知识用白话整理出来:这个东西是什么?怎样才是最佳实践?希望对自己知识体系有梳理作用, 也希望对大家有些许帮助。...直到inline-block出来后,浮动也有它自己独特的使用场景。 浮动有哪些特征? 浮动的特征就体现在前文的那句话中,别忘了默念三次!此外,浮动带来的负效果也算是它的特征之一。...浮动可以内联排列 浮动会向左/向右浮动,直到碰到另一个浮动元素为止,这是浮动可以内联排列的特征。也就是说,浮动可以设置宽高,并且能够一行多个,是介于block和inline之间的存在。 ?...BFC的主要特征 BFC容器是一个隔离的容器,和其他元素互不干扰;所以我们可以用触发两个元素的BFC来解决垂直边距折叠问题。 BFC可以包含浮动;通常用来解决浮动父元素高度坍塌的问题。...写这些文章主要目的是为了梳理知识点,没有固定计划,想到哪写到哪,如果大家有想了解的话,可以留言,我会结合经验梳理知识,并告诉你为什么要这样,怎么样做才是最佳实践。
一,浮动的定义 一个浮动盒会向左或向右移动,直到其外边(outer edge)挨到包含块边沿或者另一个浮动盒的外边。如果存在行盒,浮动盒的外top(边)会与当前行盒的top(边)对齐。...这里有一篇写行盒(line box)垂直方向的文章链接描述 ? 4.浮动会脱离普通流 普通流中所遵循的规则是块级元素占据一行,行内元素占据内容的宽度。...行内元素设置浮动之后,可以设置宽高,内外边距。...当我们取消浮动,结果是div占据一整行,span不能设置宽高和内外边距。 ?...五:浮动和负margin 两个浮动元素,如果因放不下导致其中一个下移,对下移的元素设置负 margin 值。 当-margin加自身的宽度小于容器的宽度,可将其上移.
浮动和清除浮动:了解浮动属性和清除浮动的方法,以实现元素的自适应布局和多列布局。...常见的块级元素有div、p、h1-h6、ol、ul、li、table、form、address、blockquote等。 块级元素可以设置宽度、高度、内外边距等属性,可以包含其他块级元素和内联元素。...内联块状元素(inline-block elements):内联块状元素结合了块级元素和内联元素的特性,可以设置宽度、高度、内外边距等属性,同时以行的形式显示在页面上。...,来查看当前元素和其包含元素,在外边距设置为正时是如何推开周边元素,以及设置为负时,是如何收缩空间的。...对于浮动元素、绝对定位元素、内联块元素或者有边框、内边距或清除浮动的元素,外边距合并的规则会有所不同。
: 100px; } // 要使内联元素可以设置宽高,只需将其定义为块级或者内联块级元素即可。...// 清除浮动,方法请参考第8条 // 通常出现这样的情况都是由于没有清除浮动而引起的,所以Debug时应第一时间想到是否有未清除浮动的地方 18....该方法优点在于结构简洁,不理想的地方:1.由于使用场景不同,负缩进的值可能会不一样,不易抽象成公用样式;2.当该元素为链接时,在非IE下虚线框将变得不完整;3.如果该元素被定义为内联级或者内联块级,不同浏览器下会有较多的差异...外边距合并只出现在块级元素上; // b. 浮动元素不会和相邻的元素产生外边距合并; // c. 绝对定位元素不会和相邻的元素产生外边距合并; // d....内联块级元素间不会产生外边距合并; // e. 根元素间不会产生外边距合并(如html与body间); // f.
你知道margin有什么特性吗?你知道什么是垂直外边距合并?margin在块元素、内联元素中的区别?什么时候该用padding而不是margin?你知道负margin吗?...你知道负margin在实际工作中的用途吗?常见的浏览器下margin出现的bug有哪些?…… Margin是什么 CSS 边距属性定义元素周围的空间。...margin在块元素、内联元素中的区别 HTML(这里说的是html标准,而不是xhtml)里分两种基本元素,即block和inline。...原理分析:块级对象默认的display属性值是block,当设置了浮动的同时,还设置了它的外边距就会出现这种情况。也许你会问:“为什么之后的对象和第一个对象之间就不存在双倍边距的Bug”?...在IE6/7下左侧应用了absolute属性的块级元素与右边的自适应的文字内容重叠。 解决方法:把左侧块级元素更改为内联元素,比如把div更换为span。
关于标签嵌套: 一般,块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素,它只能包含其它内联元素。...block(内联标签设置为块级标签) span {display:block;} 注意:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。 ...(margine)和内边距(padding) 盒子模型 ?...10px 左右边距为20px margin:25px; 所有的4个边距都是25px 居中应用 margin: 0 auto; 思考1:body的外边距 ...允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 但是需要注意的是:clear属性只会对自身起作用,而不会影响其他元素。
浮动特征:具有且不仅仅有 内联块 inline-block 的特征 1.1.1 块级元素在一行显示 1.1.2 内联元素支持宽高... 3、浮动相关问题: 3.1 两个div,给其中一个div设置左浮动,为什么第二个div会被第一个div覆盖? ...: top; 1.8 文字复制问题:两个浮动元素中间,有内联元素或者注释,并且和父级元素宽度相差不超过3px-->会出现小尾巴(文字自动被复制到内联元素中) 解决办法1:两个浮动元素中间避免出现内联元素或注释...3.1 两个div,给其中一个div设置左浮动,为什么第二个div会被第一个div覆盖? ...: top; 1.8 文字复制问题:两个浮动元素中间,有内联元素或者注释,并且和父级元素宽度相差不超过3px-->会出现小尾巴(文字自动被复制到内联元素中) 解决办法1:两个浮动元素中间避免出现内联元素或注释
块级元素的特点: (1)总是从新行开始 (2)高度,行高、外边距以及内边距都可以控制。 (3)宽度默认是容器的100% (4)可以容纳内联元素和其他块元素。...块级元素和行内元素区别 块级元素的特点: (1)总是从新行开始 (2)高度,行高、外边距以及内边距都可以控制。 (3)宽度默认是容器的100% (4)可以容纳内联元素和其他块元素。...的定位机制有3种:普通流(标准流)、浮动和定位。...为什么要用定位? 那么定位,最长运用的场景再那里呢? 来看几幅图片,你一定会有感悟! 如图, 小黄色块可以再图片上移动: 元素的定位属性 元素的定位属性主要包括定位模式和边偏移两部分。..., 元素添加了 绝对定位和固定定位之后, 元素模式也会发生转换, 都转换为 行内块模式, 因此 比如 行内元素 如果添加了 绝对定位或者 固定定位后 浮动后,可以不用转换模式,直接给高度和宽度就可以了。
15、如何用DIV+CSS实现3栏布局(左右固定200pX,中间自适应)?...22、内联元素可以实现浮动吗? 在CSS中,任何元素都可以浮动。不论浮动元素本身是何种元素,都会生成个块级框。因此,对于内联元素,如果设置为浮动,会产生和块级框相同的效果。...(1)当两个相邻的外边距都是正数时,折叠的结果是它们两者中较大的值 (2)当两个相邻的外边距都是负数时,折叠的结果是两者中绝对值较大的值。 (3)当两个外边距一正一负时,折叠的结果是两者相加的和。...50、常用的块属性标签及其特征有哪些? 常用块标签有div、hl、h6、ol、ul、li、d、 table、p、br、form。块标签的特征有独占一行,换行显示,可以设置宽、高,块可以套块和行。...IE6双边距Bug是指在块属性标签float后又有横行的 margin时,在IE6中显示的margin比设置的大浮动IE产生的双倍距离(IE6的双边距问题是指在IE6下,如果对元素设置了浮动,同时又设置了
安装两列布局的传统做法,我们可以想到两列都浮动、左栏浮动+右栏左边距以及负边距等很多方案。...但是再对比一下需求,右栏的特性否决了两栏都浮动的方式,左栏的宽度不固定否定了负边距的方式。...左栏浮动加右栏左边距将会遭遇[cref bfc-element-margin-bug-in-webkit webkit核心浏览器的BFC元素边距bug]。...既然已经有了经过实践验证的方案,为什么要改进呢?因为我们在实践中也遇到了一些麻烦,那就是右栏中的复杂内容,复杂到会有溢出容器的浮层。...* img要左浮动,img和txt之间的距离只能加在img上(原因之前说了,webkit的bug)。 * txt要创建BFC,要清除浮动(这两个问题在模拟zoom的时候一并解决了)。
定义 外边距折叠是指有时候上边距与下边距坍缩成较大的那一个边距的行为。它只会发生在同一BFC的块级元素间,并且永远不会发生在浮动元素或绝对定位元素间。...可能的情况 毗邻的兄弟元素 相邻的兄弟元素垂直边距会发生折叠,但最后一个元素需要清除浮动时例外。...父元素和第一个/最后一个子元素 父元素与第一个子元素的margin-top可能重合,与最后一个子元素的margin-bottom可能重合。...如果要在这种情况下避免外边距折叠,请将两者的margin区分开。区分margin-top的方法有设置border、padding、inline content、清除浮动、避免创建BFC区域。...:yellow">上面的间隙是10px 上面的间隙是16px,下面的间隙是4px <p style="
它在什么情况下才能生效? BFC(块格式化上下文) 常见布局的实现 1. 伪类和伪元素 为什么引入? css引入伪类和伪元素概念是为了格式化文档树以外的信息。...清除浮动常用的四种方式: 父级div定义height 额外标签法:在有浮动的父级元素的末尾插入了一个没有内容的块级元素div 并添加样式clear:both。...负边距[22]是这两种布局中的重中之重 不同点:解决“中间栏div内容不被遮挡”的思路不同 圣杯布局 1.三者都设置向左浮动 2.设置middle宽度为100%; 3.设置负边距, left设置负左边距为...面板的right值为负的right面板的值 但是圣杯布局有个问题:当面板的middle部分比两边的子面板宽度小的时候,布局就会乱掉。...3.设置 负边距,left设置负左边距为100%,right设置负左边距为负的自身宽度 4.设置middle-content的margin值给左右两个子面板留出空间。
-- 为什么不是main在前面,因为浮动的特性 --> aside aside...content footer 圣杯布局 利用浮动和负边距的特性实现的两(三)栏布局。...">aside extra 这两个布局都比较老,用了浮动和负边距的特性。...做布局的时候,要分清布局块和内容块!布局块DIV只用来布局,内容快DIV只用来添加网页内容。bootstrop就用栅格系统做布局块,内容块是自己设计的独立元素。 例子:简单的头部导航布局 ?...加一个wrapper的作用是使用负margin扩大8像素,为了不与外面的pics冲突(pics用来布局,居中)所以再包裹一个div。又一次显示出布局块和内容块的区别。
(以破折号分隔) :.div1 ~ p{font-size: 30px; } 注意,关于标签嵌套: 一般,块级元素可以包含内联元素或某些块级元素,但内联元素不能包含块级元素...,长宽设置无效,大小由内容多少而定,不独占一行 inline-block 兼具块级和内联标签的特性,可以设置长宽,但是不独占一行 none(隐藏某标签) 1 p{display:none;} 注意与...block(内联标签设置为块级标签) 1 span {display:block;} 注意:一个内联元素设置为display:block是不允许有它内部的嵌套块元素。 ...允许两边都可以有浮动对象 left : 不允许左边有浮动对象 right : 不允许右边有浮动对象 both : 不允许有浮动对象 但是需要注意的是:clear属性只会对自身起作用,而不会影响其他元素。...3、clear:both:对自己起作用,加载时判断左右两边有没有浮动元素,如div2加了此属性,其后面有div3,其实和clear:left作用差不多,因为加载div2时即判断两边有没有浮动元素,此时div3
border:没有设定方向和修饰属性就是四边加设置颜色宽度样式 border-color:就是全部四边加只设置颜色 border-top:就是全部颜色宽度样式都设置并且只给上面上边框 border-left-style...:就是只设置左边且只设置样式 块元素属性 margin外边距与padding内边距 块元素与内联元素 块元素:会独占一行,默认宽度是填充父元素的宽度,高度是内容的高度。...可再自定义宽高 常见的块元素有:ul列表、form表单、h1-h6标题、hr水平线、p段落、div 内联元素:不会独占一行,不能设置宽高还有边距这些,范围只是仅仅包裹内容。...常见的内联元素有:a链接、em斜体、img图片、input输入控件、label标签、select下拉选择器、textarea多行文本输入、span 块和内联的转换: display:block 内转块...display:inline 块转内 display:inline-block 转成内联块,此元素不仅有块的特性修改宽高边距等还可以同行只要宽度够 浮动:通过设置浮动可以到达同行的效果不用去转内联块
在这种方式里,块级元素在它们的包含块里一个一个垂直延伸,行内元素在它们的包含块里从左至右的水平排布。 值得注意的是,在正常流里垂直边距(vertical margin)是重叠的。...也就是说,上下两个块级盒之间的边距由它们之中边距较大的元素决定,而不是他们的和!...在一个BFC中,两个相邻的块级盒子的垂直外边距会产生折叠。即是在BFC中相邻的块级元素的垂直边距会折叠(collapse)。...折叠的结果: 两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。 两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。 两个外边距一正一负时,折叠结果是两者的相加的和。...因为BFC内部的元素和外部的元素绝对不会互相影响,因此,当BFC外部存在浮动时,它不应该影响BFC内部Box的布局,BFC会通过变窄,而不与浮动有重叠。
Dreamweaver不理解它 负边距不会在DW的设计窗口展示出效果。那你为什么还用DW的设计窗口查看效果呢? 与其共事 负边距如果可以正确的使用的话它的功能是很强大的。有两种场景负边距是很重要的。...比如有一列宽度100%,另一列有固定的宽度,比如说100px。...学以致用 既然我们知道使用负边距在CSS2中是有效的,使用它可以给我们提供一些非常有趣的CSS技巧。 把单个列表变成三列 如果你有一个列表垂直方向太长了,为什么不把它分成几列呢?...负边距可以让你在不增加任何浮动和标签的情况下完成。...假如你把第十个div插入到9个其他的div中,不知道什么原因没有正确的排列,使用负边距来调整这个div就不需要改变其他9个div了,很方便。
W3C对BFC的定义如下: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“...块格式化上下文(BFC)的行为通过一个简单的float示例很容易理解。在下面的示例中,我有一个框,其中包含向左浮动的图像和一些文本。...如果我们有足够多的文本,它会环绕浮动的图像和边框,然后环绕整个区域。 I am a floated element....两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。 两个外边距一正一负时,折叠结果是两者的相加的和。 产生折叠的必备条件:margin必须是邻接的!...如果我们把盒子设为 BFC,它现在包含了标签 p 和它们的边距,这样它们就不会折叠,我们可以看到边距后面容器的灰色背景。
W3C对BFC的定义如下: 浮动元素和绝对定位元素,非块级盒子的块级容器(例如 inline-blocks, table-cells, 和 table-captions),以及overflow值不为“visiable...块格式化上下文(BFC)的行为通过一个简单的float示例很容易理解。在下面的示例中,我有一个框,其中包含向左浮动的图像和一些文本。...如果我们有足够多的文本,它会环绕浮动的图像和边框,然后环绕整个区域。...两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。 两个外边距一正一负时,折叠结果是两者的相加的和。 产生折叠的必备条件:margin必须是邻接的!...如果我们把盒子设为 BFC,它现在包含了标签 p 和它们的边距,这样它们就不会折叠,我们可以看到边距后面容器的灰色背景。
领取专属 10元无门槛券
手把手带您无忧上云