由于存在两层,标准的那一层和浮动的那一层会出现压盖的现象。横向摆放,当元素不同的时候,元素宽度不够的情况下,            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                            精选
                                                        
                            2024-04-10 10:32:12
                            
                                222阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            CSS position定位&z-index层级1. 定位position:(1). 相对定位relative:元素相对定位:
a. 相对于元素在文档流中原本的位置定位的
b. 不脱离文档流
c. 如果不设置偏移量,元素不会发生任何变化不改变元素性质(块级/内联元素)(2). 绝对定位absolute:绝对定位的元素:
a. 相对于最近开启定位的父元素定位,如果没有,则相对于窗口定位
b.            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2023-10-08 22:03:01
                            
                                488阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            一、float 二、absolute 三、fixed            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-07-14 11:07:00
                            
                                318阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            文档流是指HTML文档中元素的自然流动方式。HTML元素在文档流中按照其出现的顺序依次排列,每个元素所占据的空间(包括内容、内边距和边框)被计算在内,相邻元素之间没有空隙。            
                
         
            
            
            
            如果一个元素脱离文档流了,是不是只是显示上脱离而已?在html中是否也会脱离?我用js取这个元素的父节点的childNodes还能否取到这个元素;同时,这个元素的parentNode还是不是html中的父节点?脱离文档流只是对html文档的一种解析方案的说法而已。脱离文档流是相对正常文档流而言的。正...            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2015-04-22 17:23:00
                            
                                460阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            1. 标准文档流 文档流指的是元素排版布局过程中,元素会默认自动从左往右,从上往下的流式排列方式。并最终窗体自上而下分成一行行,并在每行中从左至右的顺序排放元素。 2. 标准流的微观现象: 空白折叠现象。 // 比如,如果我们想让img标签之间没有空隙,必须紧密连接. <img src="img/0            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-05-14 20:20:33
                            
                                293阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            一.什么是脱离文档流?  在前端开发中,通常情况下,块级元素会垂直排列,内联元素会水平排列。脱离文档流指的是HTML元素不再遵循文档的布局流程,不再占据文档流中的空间,后续元素会忽略其存在,就像它不存在一样进行排列。二.脱离文档流的方法  1.浮动(float):使用float属性,定位元素会脱离文档流。其他盒子会无视这个元素,但是其他盒子中的内容会为这个元素让出位置。举例如下            
                
         
            
            
            
            1、代码 (1)示例代码1 (2)示例代码2 2、结论: 使用float脱离文档流时,其他盒子会无视这个元素,但其他盒子内的文本依            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2018-09-14 11:15:00
                            
                                235阅读
                            
                                                                                    
                                2评论
                            
                                                 
                 
                
                             
         
            
            
            
            。 block元素和inline元素在文档流中的排列方式 block元素通常被显示为独立的一块,独占一行,多个block元素会各自新起一行,默认block元素宽度自            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-02-17 17:30:28
                            
                                127阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            脱离文档流与脱离文本流
         根据官方文档所述,脱离文档流的方法有浮动(float)和绝对定位(poistion:absolute/fixed)。
         那么我们接下来来看看他们的区别吧
使用浮动(float)
正常布局下:
 
    <div id=”nf”>
        In CSS, normal flow includes block form            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-07-14 14:22:07
                            
                                896阅读
                            
                                                                             
                 
                
                             
         
            
            
            
             当前所知的脱离文档流的方式有两种:浮动和。 : position的值为absolute、fixed的元素脱离文档流,static、relative没有脱离文档流            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2022-03-29 13:37:34
                            
                                468阅读
                            
                                                                             
                 
                
                             
         
            
            
            
             当前所知的脱离文档流的方式有两种:浮动和定位。 定位: position的值为absolute、fixed的元素脱离文档流,static、relative没有脱离文档流            
                
                    
                        
                                                            
                                                                        
                                                                                        转载
                                                                                    
                            2021-06-30 14:26:47
                            
                                1052阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            块元素:比如li标签或者h1这种,都是默认自上而下摆放的。内联标签:如果是span标签或者strong标签,它是从左到右进行摆放的。可以看到有文本的时候,高矮是不一样的,他们是以底边对其的。高矮不齐的时候是以底边进行对其的。上面都是默认元素会产生的问题。这个时候,就不能使用文档中元素默认的位置去摆放。空格问题,无论在文本            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                            精选
                                                        
                            2024-03-29 16:32:48
                            
                                174阅读
                            
                                                                             
                 
                
                                
                     
                                    
                             
         
            
            
            
            absolute是相对于自己最近的父元素来定位的,relative是相对于自己来定位的relative 不脱离文档流,absolute 脱离文档流。也就是说:relative 的元素尽管表面上看到它偏离了原来的位置,但它实际上在文档流中还是没变。absolute的元素不仅位置改变了,同时也脱离了文档流。所以absolute会把非定位盒子覆盖掉。position:relative日常应用的时候一般是            
                
         
            
            
            
              所谓文档流,指的是元素排版布局过程中,元素会从左往右,从上 往下的流式排列。并最终窗体自上而下分成一行行,并在每一行中按照从左至右的顺序排放 元素。脱离文档流即将元素从普通的布局排版中拿走,其他盒子定位的时候,就当没看到他,两者位置重叠也是可以的。  脱离文档流的方式:浮动和定位。1. 定位脱离文档流html<div class="parent">
    <div clas            
                
         
            
            
            
            标准文档流概述块级元素和行内元素块级元素和行内元素的相互转换
概述宏观的讲, 我们的 web 页面和 photoshop 等设计软件有本质的区别. web 页面的制作, 是个 “流”, 必须从上而下, 像 “织毛衣”. 而设计软件, 想往哪里画个东西, 都能画.我们要看看标准流有哪些微观现象:空白折叠现象: 如果我们想让 img 标签之间没有空隙, 必须紧密连接高矮不齐,            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2021-01-12 08:07:33
                            
                                86阅读
                            
                                                                             
                 
                
                             
         
            
            
            
            文档流            先说说什么如div 每一个div元素占据一行 如果没有            
                
                    
                        
                                                            
                                                                        
                                                                                        原创
                                                                                    
                            2022-08-18 19:15:15
                            
                                131阅读
                            
                                                                             
                 
                
                                
                    