• 关于

    浮动布局

    的搜索结果

问题

一个盒子模型的最好的布局方式

a123456678 2019-12-01 19:31:43 904 浏览量 回答数 1

问题

盒子模型

杨冬芳 2019-12-01 19:39:14 844 浏览量 回答数 1

回答

Q1:浮动和定位本就属于CSS两大“定位”技术,浮动之后用绝对定位是什么鬼?一般来说浮动和定位是搭配使用的。举个例子,float可以用来布局,类似2列布局3列布局之类的,而定位则多用来实现布局内部视图模块的多样性,比如轮播图底部的轮播控制按钮。Q2:《CSS权威指南》浮动章节有详细记载。浮动元素的确脱离正常文档流,这里且不说BFC,像你这种浮动方式的确div1会在div2上面,但对于文本框而言,它会避开浮动的元素,也就是你说的div2里面内容会挤到下面,而不是正常被正常左浮动的div1覆盖。这是浏览器对标准的执行,建议多看一些基础书,当然最好是W3C的草案。Q3: clear属性木有bottom...在HTML中,每个元素都是一个相对独立的个体,这些元素按照语言习惯(一般是从左往右)排列,能放在一行的就不会换行,当一行实在放不下时默认会另起一行,所以一个浮动元素设置clear应该明确指明它的左边或右边不能有浮动元素(相当于有浮动元素的那一行已经满了,告诉浏览器从第二行开始渲染元素)所以clear的bottom值是没有必要存在的。存手打,个人意见,有错误欢迎指正。------10/14 更新 --------最近有了解一些关于z-index的知识,发现可以回答你q2的问题,z-index相当于在z轴对css视图的层次进行了描述。详情可以看这里这里只贴出你这个问题的分析-浏览器的部分绘制顺序:1 根元素的背景与边框2 位于普通流中的后代块元素按照它们在 HTML 中出现的顺序堆叠3 浮动块元素4 常规流中的后代行内元素5 后代中的定位元素按照它们在 HTML 中出现的顺序堆叠所以浏览器先绘制浮动的div1,接着绘制常规流中的后代行内元素,也就是你这里面所说的div2/div3的内容(这个内容姑且认为是文本内容,也就是行内元素),对于div2/3的行内元素,因为已经被div1占据了位子,只能避开div1的内容进行内容的绘制(但是div2/3的背景是在div1绘制之前绘制的,所以和div1发生重叠,见顺序2和3)。不知你有没有听懂我的意思,总之对于浏览器来说,除了对水平面的元素进行放置计算外,对于z轴的渲染顺序也得明白,建议你多看多写写实验一下。有疑意欢迎提出。

杨冬芳 2019-12-02 02:34:13 0 浏览量 回答数 0

阿里云试用中心,为您提供0门槛上云实践机会!

0元试用32+款产品,最高免费12个月!拨打95187-1,咨询专业上云建议!

回答

弹性布局,居左定位,左left:0;浮动布局 左浮动

景凌凯 2019-12-02 00:57:54 0 浏览量 回答数 0

回答

元素浮动之后文字会环绕而不是重合原因示例解答 既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢?上网各种搜、各种问人终于找到了解决方法,感兴趣的朋友不要错过最近在学习CSS,在浮动上遇到一问题:既然浮动元素脱离了文档流,为什么文字会环绕在浮动元素的周边而不是跟浮动元素重合呢? 这问题困扰了我整整一天,上网各种搜、各种问人,也没有让我信服的答案(可能有的答案是正确的,但是我基础差,没有听懂)。最后经过一整天搜索、询问的沉淀,最后在别人的推荐下看了《CSS权威指南》,现在自认为算是基本上明白怎么回事了。以下都是我自己所想,希望可以帮到和我一样的初学者。 为了彻底明白这个问题,必须先弄明白几个问题。 :第一,浮动的目的。最初时,浮动只能用于图像(某些浏览器还支持表的浮动),目的就是为了允许其他内容(如文本)“围绕”该图像。而后来的CSS允许浮动任何元素。 第一,绝对定位与浮动的区别。 复制代码代码如下: <body> <div id="container"> <div id="A">你好</div> <div id="B"> 第一,绝对定位与浮动的区别。绝对定位是将元素彻底从文档流删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块),元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素再也不会影响其他元素的布局了。如果对元素A使用绝对定位的话,元素B占据元素A之前的位置,与元素A重合在一起,并被元素A覆盖。如图所示。 </div> </div> </body> 绝对定位是将元素彻底从文档流删除,并相对于其包含块定位(包含块可能是文档中的另一个元素或者是初始包含块),元素原先在正常文档流中所占的空间会关闭,就好像该元素原来不存在一样,该元素再也不会影响其他元素的布局了。例如,对于上面的html片段,如果将元素A定位到左上角的话,元素B占据元素A之前的位置,与元素A重合在一起,并被元素A覆盖。CSS代码和效果图如下。 复制代码代码如下: body { color:#FFF; } container { position:relative; width:500px; height:250px; background:#039; } A { position:absolute; top:0; left:0; width:200px; height:200px; background:#C00; } 代码如下: 而浮动,会以某种方式将浮动元素从文档的正常流中删除,并把浮动元素向左边和右边浮动,不过它还是会影响布局,关于浮动的有许多规则,读者可自行阅读《CSS权威指南》一书,介绍地很详细。采用CSS的特有方式,浮动元素几乎“自成一派”,不过它们还是对文档的其余部分有影响。这种影响源自于这样一个事实:一个元素浮动时,其他内容会“环绕”该元素。如果将元素A向左浮动的话,CSS代码和效果图如下图所示。由此可见,浮动之后,文字跑到了元素A的右边,即实现了文字环绕浮动元素的功能(如果A不浮动的话,div是块级元素,不可能有两个div处在同一行)。 但是这儿有一小问题,如果你仔细观察CSS代码的话和效果图的话,会发现元素B的背景和元素A的背景重合了一部分。这就是用来解释为什么说浮动元素脱离了正常的文档流但是还会影响布局的原因。之所以说元素A脱离了文档流,是因为元素B确实占据了元素A之前的位置,好像元素A已经不存在了似的。只所以说会影响布局,是因为元素B里的文字并没有随之占据元素A的位置,而是环绕在浮动之后的元素A旁边。这是为了避免元素A将元素B里的文字覆盖了,这恰好就是浮动的目的! 复制代码代码如下: body { color:#FFF; } #container { width:500px; height:250px; background:#039; } #A { float:left; width:200px; height:200px; background:#C00; } #B { width:480px; height:230px; background:#000; CSS布局实例 大家感兴趣的内容1css控制UL LI 的样式详解(推荐)2HTML设置超链接字体颜色和点击后的字体颜色3div水平垂直居中的完美解决方案4CSS 漂亮搜索框美化代码5CSS 首行缩进两个文字6css 中的background:transparent到底是什么意思有什么7CSS自定义select下拉选择框的样式(不用其他标签模拟)8css textarea 高度自适应,无滚动条9css 设置全屏背景图片10CSS圆角效果 -webkit-border-radius(CSS3中border-rad 云服务器 . 最近更新的内容深入剖析z-index属性CSS中的content属性使用教程浅析CSS中calc()的使用CSS3定位和浮动详解CSS盒子模型是什么一些常被你忽略的CSS小知识【必看】CSS默认可继承样式详解知识普及之CSS: body{font-size: 62.5%;}这种写法的原知识普及:彻底搞懂CSS中单位px和em,rem的区别CSS教程之div垂直居中的多种方法.

杨冬芳 2019-12-02 02:40:29 0 浏览量 回答数 0

回答

BFC 就是块级格式上下文,是页面盒模型布局中的一种 CSS 渲染模式,相当于一个独立的容器,里面的元素和外部的元素相互不影响。创建 BFC 的方式有: html 根元素float 浮动绝对定位overflow 不为 visiabledisplay 为表格布局或者弹性布局 BFC 主要的作用是: 清除浮动 防止同一 BFC 容器中的相邻元素间的外边距重叠问题

九旬 2020-05-24 11:48:28 0 浏览量 回答数 0

回答

flex布局,float通过浮动去布局,通过position去布局

大伟hi 2019-12-02 00:57:55 0 浏览量 回答数 0

回答

w3c在描述脱离文档流(out of flow)这个概念的时候,只将绝对定位(属性position为fixed或absolute)描述为完全脱离文档流(removed from the normal flow entirely),而浮动(属性float为left或right,且不为绝对定位)并没有这样表述。也就是说,浮动不是完全脱离文档流的。这是什么意思呢?虽然这个效果很常见,但请注意这些文字其实都是文档流内的,属于普通流(normal flow),如果所谓的“脱离文档流”就是跟文档流毫不相干的话,这些文字怎么会特意为浮动元素留下空间呢?另一方面,浮动元素可能被文档流影响。w3c是这样描述浮动的:In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.可以看到,浮动的效果并不是完全的脱离文档流,而是先基于文档流取得一个位置,然后再向左或向右移动。在题主的例子里,在浮动元素之前有一个普通流的块元素。浮动元素的精确特性规则中有这样一条: The outer top of a floating box may not be higher than the outer top of any block or floated box generated by an element earlier in the source document.这句话的意思是,浮动元素不可以高于任何在源文档(html代码)之前的块元素或浮动元素。这也是说,浮动元素的上边缘位置,是要考虑在它之前的块元素或浮动元素的。再回到题主的例子,那个“正常元素”属于在浮动元素之前的块元素,因此那个“右浮动”在浮动位置时,会把在它之前的块元素也考虑在内,所以就会从块元素的下一行开始。按照前面的“先基于文档流取得一个位置”的解释来理解,也可以得到这个结论。 一般说的“浮动元素不占用普通流元素的布局位置”,还需要更准确的描述一下:普通流取位置时不考虑在它之前的浮动元素(就当它们不存在),但浮动元素取位置时是会考虑在它之前的普通流块元素的。

杨冬芳 2019-12-02 02:34:41 0 浏览量 回答数 0

问题

清除浮动 高度变高

杨冬芳 2019-12-01 19:55:27 873 浏览量 回答数 1

问题

关于div浮动!网页布局

小旋风柴进 2019-12-01 20:19:12 802 浏览量 回答数 1

回答

楼主想的要左右布局,可以都用左浮动,两者都加宽度就行了,要是左侧固定加左浮,左侧不加宽度和浮动也行呀

a123456678 2019-12-02 02:25:25 0 浏览量 回答数 0

回答

用overflow hidden来清除浮动,并形成新的bfc就不会受到左边的浮动高度的影响,右边的高度就是ul里面所占内容的高度。另外关于两列自适应布局 你可以看看这个demo

杨冬芳 2019-12-02 02:45:14 0 浏览量 回答数 0

回答

让多个盒子(div)水平排列成一行,使得天猫转让浮动成为布局的重要手段 浮动最早是用来控制图片,实现文字环绕图片的效果 天猫转让可以实现盒子的左右对齐等等

moduletek 2020-09-11 10:47:28 0 浏览量 回答数 0

回答

浮动对浏览器的性能消耗较大,一般的原则是能够避免使用浮动就尽量避免。如果是我的话,针对这种情况,我的作法应该是:talkDiv, loveDiv全采用 display:inline-block;布局,各占50% with。上面两个div中的内容居中,里面的文字距离图片给一个margin-left即可。

a123456678 2019-12-02 02:25:05 0 浏览量 回答数 0

回答

浮动对浏览器的性能消耗较大,一般的原则是能够避免使用浮动就尽量避免。 如果是我的话,针对这种情况,我的作法应该是:1. talkDiv, loveDiv全采用 display:inline-block;布局,各占50% with。2.上面两个div中的内容居中,里面的文字距离图片给一个margin-left即可。

杨冬芳 2019-12-02 02:31:21 0 浏览量 回答数 0

回答

1.父级div定义 height原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。优点:简单、代码少、容易掌握缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题2,结尾处加空div标签 clear:both原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度优点:简单、代码少、浏览器支持好、不容易出现怪问题缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好3,父级div定义 伪类:after 和 zoom原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持4,父级div定义 overflow:hidden原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度优点:简单、代码少、浏览器支持好缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。很高兴为您解答,如果您对我的回答满意的话,请采纳一下。您的采纳是对我最大的支持阿里云优惠:领取有惊喜。https://promotion.aliyun.com/ntms/yunparter/invite.html?userCode=nb3paa5b阿里云帮助文档:https://help.aliyun.com/智能应答机器人:https://ia.aliyun.com/

景凌凯 2019-12-02 01:39:05 0 浏览量 回答数 0

问题

关于移动端网页布局问题。

杨冬芳 2019-12-01 20:09:29 855 浏览量 回答数 1

回答

讲真,你只贴html代码不贴css代码,真的看不出来好么!目测两个原因:1)bootstrap里设置了默认样式,那么你需要找出来并将它覆盖2)可能是设置了diplay:inline-block的原因,inline-block默认会产生一个间距,你可以设置font-size:0,或者改成浮动(float)布局,或者flex布局

杨冬芳 2019-12-02 02:41:14 0 浏览量 回答数 0

回答

zoom是一个IE的私有属性,作用在于缩放元素。目前为止,wekbit系列、ie系列(ie6~ie11)均支持。 wekbit系列和ie系列,对于此属性上面实现不一致*,因此,在前端的实际开发中,仅仅是hack式的使用zoom,目的是为了在IE6/7中,设置元素的haslayout属性为true。 /比如inline-block的hack/.ilblk { display: inline-block; display: inline; zoom:1 ; }当然,还有LZ所说的清理浮动功能。 /比如clearfix实现/.clearfix { *zoom: 1; }.clearfix:after {content: "0020"; display: block; height: 0; clear: both; visibility: hidden; }*| zoom的大体思路是使CSS计算值乘以相应的zoom值,但设置zoom后,有些属性如margin,在IE系列下不会将计算后的值乘以zoom,但在chrome下会。 HASLAYOUT就个人整理前端的相关文章而言,这一片是介绍全面且没有谬误的:hasLayout && Block Formatting Contexts。 BFC和haslayout是CSS布局基础之一,在学习之前,最好掌握以下知识点: CSS三种定位体系:常规流、浮动、绝对定位常规流:行内元素与块级元素浮动:浮动与清除浮动(吐槽:搜索前端相关知识,经常能出现一大波垃圾站转载一些乱试属性试出来的“解决方案”,所以对于一个前端来说,能够自己阅读标准并做好相应储备是非常重要的)

a123456678 2019-12-02 02:21:09 0 浏览量 回答数 0

回答

现代浏览器,可以尝试使用flex布局,可以避免用浮动来解决问题

tanyafuzhou 2019-12-02 01:39:06 0 浏览量 回答数 0

回答

浮动后元素会脱离文档流,触发bfc,它的布局就不会受环境影响了。

a123456678 2019-12-02 02:25:13 0 浏览量 回答数 0

回答

大概翻译了下:float:left;需要清除浮动,IE6/7下容易出bug(用:after伪元素清除浮动的话)。display:inline;根本不应该拿它来布局, 除了 IE6/7 这俩异端, 可以用 display:inline; zoom:1 hack 出 inline-block 的效果.display:inline-block;最佳选择。在各种浏览器下效果比较一致。 元素之间的空格会被保留。display:table-cell;存在兼容性问题。不仅老版本的IE不支持,新的浏览器也会有区别。还有值得期待的 FlexBox 和 IE9不支持的Columns

a123456678 2019-12-02 02:23:46 0 浏览量 回答数 0

问题

两列布局两种方法实现

a123456678 2019-12-01 19:31:31 836 浏览量 回答数 1

回答

内联元素是会有这种情况出现的,解决办法有两个1、用浮动,float:left2、用flex,flex布局可以解决内联元素间的空格问题

杨冬芳 2019-12-02 02:56:01 0 浏览量 回答数 0

回答

有两个要点。 一是垂直外边距合并。div#content元素设置了margin-top,由于它和它的父元素(这里就是body)之间并没有间隙(例如border、padding),会发生垂直外边距合并。因此,此时margin-top相当于作用在了body上,所以浮动元素div#left的初始排版位置就会改变到那个地方。你可以试试为body增加padding-top: 1px;,这时候就有了间隙,也就不会发生合并。 二是浮动元素的特性。浮动元素在垂直外边距合并的规则里,算作有间隙的情况。因此,div#left元素设置margin-top并不会发生合并。 你可以简单看看CSS 外边距合并。 要实现左侧固定,右侧随屏幕大小适应的布局,我认为比较合适的写法是: <body> <div class="l-container"> <div class="l-sidebar"></div> <div class="l-main"></div> </div> </body> css: .l-container:after{ display: table; clear: both; content: ""; } .l-sidebar{ float: left; width: 220px; } .l-main{ margin-left: 220px; } 如果需要上边距,可以考虑在各部分内部增加div,设置padding-top。这可以很好的避免垂直外边距合并带来的困惑。

杨冬芳 2019-12-02 02:53:53 0 浏览量 回答数 0

回答

这个翻译不是很确切,我来谈下我的理解: 首先是这段话的翻译: When the float occurs between two collapsing margins, the float is positioned as if it had an otherwise empty anonymous block parent taking part in the flow. The position of such a parent is defined by the rules in the section on margin collapsing. 当浮动出现两个折叠外边距之间时,浮动会如同它有一个参与常规流的空匿名父块一样来定位。该父块的位置由关于外边距折叠那章的规则规定。 然后我们看下那章是如何规定的: If the top and bottom margins of a box are adjoining, then it is possible for margins to collapse through it. In this case, the position of the element depends on its relationship with the other elements whose margins are being collapsed. •If the element's margins are collapsed with its parent's top margin, the top border edge of the box is defined to be the same as the parent's. •Otherwise, either the element's parent is not taking part in the margin collapsing, or only the parent's bottom margin is involved. The position of the element's top border edge is the same as it would have been if the element had a non-zero bottom border. Note that the positions of elements that have been collapsed through have no effect on the positions of the other elements with whose margins they are being collapsed; the top border edge position is only required for laying out descendants of these elements. 如果一个盒的上下外边距相邻,则外边距可能穿过盒而折叠。这种情况下,元素的定位取决于它同其他外边距折叠的元素的关系。 •如果该元素的外边距同其父元素的上外边距折叠,则该盒的上边框边缘同其父元盒的上边框边缘相同。 •否则,要么该元素的父元素的外边距不折叠,要么只有父元素的下外边距折叠。如果该元素下边框非零,则上边框边缘的位置不变。 需要注意的是,被折叠穿过的元素的定位对其他外边距折叠的元素的定位无影响;其上边框边缘的定位仅用于布局其后代元素。 以上中文皆我自己的翻译,可参看我的专栏文章。 题主给出的翻译会让人不明所以,其实意思是给浮动盒一个匿名父盒,这个匿名父盒就是“被外边距穿过的元素……其上边框边缘的定位仅用于布局其后代元素”。我们先给匿名父盒定位,而浮动盒再参照这个匿名父盒定位。所以匿名父盒就是用来确定浮动盒的位置的。 题主提问的是浮动元素在两个合并外边距之间,那情况是很简单的。有一点需要注意的是,即便是高度为零的垂直外边距,也是可以参与外边距合并的。当浮动元素有了一个匿名父盒后,情况就变成了匿名父盒的外边距同那两个合并外边距之间的合并。 <style type="text/css"> *{ padding: 0px; margin: 0px; } .box1, .box2, .box3 { width: 100px; height: 100px; background: red; } .box1 { margin: 50px 0; } .box2 { background: green; float: left; } .box3 { margin-top: 100px; } </style> <div class="area"> <div class="box1"></div> <div class="anonymous"><div class="box2"></div></div> <div class="box3"></div> </div> 假设是这样的片段。.anonymous 用来模拟那个匿名父盒。这时候的情况就是:.anonymous 的上下外边距(折叠到一起了)同 .box1 下外边距折叠,其上边框边缘在 .box1 的下外边距边缘之后,所以浮动了的 .box2 上外边距边缘距离 .box1 的下边框边缘 50px。而 .box3 的上外边距与 .anonymous 的上下外边距折叠,继而再与 .box1 的下外边距折叠,从而 .box3 到 .box1 的下边框边缘 100px。 假如是这样的结构(CSS不变): <div class="area"> <div class="anonymous"><div class="box2"></div></div> <div class="box1"></div> <div class="box3"></div> </div> 这时候,.area 上外边距 同 .anonymous 上下外边距折叠,继而同 .box1 的上外边距折叠,故 .area 也拥有了 50px 的上外边距。.anonymous 的上边框同 .area 上边框重合,也距离上面 50px。

杨冬芳 2019-12-02 02:42:55 0 浏览量 回答数 0

问题

JavaScript实现菜单的隐藏与显示

小旋风柴进 2019-12-01 20:11:00 1000 浏览量 回答数 1

问题

JavaScript实现菜单的隐藏与显示

小旋风柴进 2019-12-01 20:26:42 1057 浏览量 回答数 1

问题

CSS左右布局浮动高度问题

a123456678 2019-12-01 19:32:06 817 浏览量 回答数 1

回答

什么是 BFC: BFC(Block Formatting Context)格式化上下文,是 Web 页面中盒模型布局的 CSS 渲染模式,指一个独立的渲染区域或者说是一个隔离的独立容器。 形成 BFC 的条件: 浮动元素,float 除 none 以外的值 定位元素,position(absolute,fixed) display 为以下其中之一的值 inline-block,table-cell,table-caption overflow 除了 visible 以外的值(hidden,auto,scroll) BFC 的特性 内部的 Box 会在垂直方向上一个接一个的放置。 垂直方向上的距离由 margin 决定 bfc 的区域不会与 float 的元素区域重叠。 计算 bfc 的高度时,浮动元素也参与计算 bfc 就是页面上的一个独立容器,容器里面的子元素不会影响外面元素。

茶什i 2019-12-02 03:16:40 0 浏览量 回答数 0
阿里云大学 云服务器ECS com域名 网站域名whois查询 开发者平台 小程序定制 小程序开发 国内短信套餐包 开发者技术与产品 云数据库 图像识别 开发者问答 阿里云建站 阿里云备案 云市场 万网 阿里云帮助文档 免费套餐 开发者工具 企业信息查询 小程序开发制作 视频内容分析 企业网站制作 视频集锦 代理记账服务 2020阿里巴巴研发效能峰会 企业建站模板 云效成长地图 高端建站