为什么position的relative能影响元素滚动呢？

来源：蜘蛛抓取(WebSpider) 时间：2022-06-23 00:44 标签： position absolute和relative

  • 什么是世界上最好的编程语言？丨云托管征文活动

    代金券、腾讯视频VIP、QQ音乐VIP、QB、公仔等奖励等你来拿！

    • 您找到你想要的搜索结果了吗？ 

在《css世界》这本书中有一些“黑魔法”给列举出来，在结合自己的理解。篇幅有点长，希望大家能够坚持看完，一定会有收获！！！
以下是摘自每章内一些重要的概念与技巧。其中有解决图片间隙的问题、小图标与文字居中问题等;
成为文档流，将窗体自上而下分成一行一行，并在每行中按从左至右依次排放元素 （引导元素排列和定位）
什么是流体布局 
利用元素“流”的特性实现的各类布局效果。因为“流”本身具有自适应特性，所以“流体布局”往往都是具有自适应性。
元素宽度按照分辨率宽度进行长度、宽度的调整，但布局不变。
“未定义行为” 
当某个浏览器中出现与其他浏览器不一样的行为或样式表现；
Web应用场景千变万化，Web标准也是不可能面面俱到的，也会存在规范描述以外的场景，此时，各大浏览器厂家只能根据自己的理解与喜好去实现，一旦个性化就会出现差异
currentColor 变量 
 

 
默认情况下，块级元素会新起一行;占据其父元素（容器）的整个空间
 

 
 

 
正是由于“块级元素”具有换行特性，因此理论上它都可以配合clear属性来清除浮动带来的影响
 
list-item（“附加盒子”）名“标记盒子”；因为生成了一个附加的盒子，学名“标记盒子”（marker box），专门用来放圆点、数字这些项目符号；
元素都两个盒子，外在盒子和内在盒子；
外在盒子：外在的“内联盒子”（inline）
内在盒子：内在的“块级容器盒子”（block）
深藏不露的 width:auto 充分利用可用空间
 
出现在table-layout为auto的表格中；当每一列空间都不够的时候，文字能断就断，但中文是随便断的，英文单词不能断
内容很长的连续的英文和数字，或者内联元素被设置了white-space:nowrap
“内部尺寸”和“外部尺寸”
 
“内部尺寸”:尺寸由内部元素决定
“外部尺寸”:宽度由外部元素决定

外部尺寸与流体特性 正常流宽度
 
 

 
 
 
绝对定位元素的宽度表现是“包裹性”，宽度由内部尺寸决定
 
 

 当left/top或top/bottom对立方位的属性值同时存在，元素的宽度表现为“格式化宽度”，
 
 

 其宽度大小相对于最近的具有定位特性（position属性值不是static）的祖先元素计算
 
 
除了“包裹”（max-width:100%），还有“自适应性（元素尺寸由内部元素决定，但永远小于“包含块”容器的尺寸）”
 

 著名的“按钮”元素：极具代表性的inline-block元素
 
 

 按钮上的文字个数比较有限，没机会换行
 
 

 

 文字少的时候居中显示，文字超过一行的时候居左显示
 
 

 东亚文字（如中文）最小宽度为每个汉字的宽度:font-size:14px;
 
 

 西方文字最小宽度由特定的连续的英文字符单元决定（一般会终止于空格（普通空格）、短横线、问号以及其他非英文字符等）
 
是元素可以有的最大宽度（如果内部没有块级元素或者块级元素没有设定宽度值,实际上是最大的连续内联盒子的宽度）
解决替换元素宽度自适应问题

通内联元素（非图片等替换元素），box-sizing无论是什么值，对其渲染表现都没有影响
父元素height为auto，只要子元素在文档流中，其百分比值完全就被忽略了;百分比高度值要想起作用，其父级必须有一个可以生效的高度值;
包含块的高度没有显式指定（即高度由内容决定），并且该元素不是绝对定位，则计算值为auto
 

 
 

 
width:100%有效包含块的宽度取决于该元素的宽度，那么产生的布局在CSS /12/2-...
 
 

 

 实现全兼容的icon fonts图标的旋转效果
 

 利用高度的高度自适应布局
 
改变的是垂直方向的内联元素的文本方向

 

 ps:有什么不清楚、错误，欢迎提出。
 
 
文章来源：segmentfault，作者：散一群逗逼。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：（邮箱中#请改为@）进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。

后台-系统设置-扩展变量-手机广告位-内容正文底部 




                            

                                                

                    

                

            

            


            

                
我要回帖

                

                    

                        
                        
                    

                

            

            

                        

                
更多关于 position absolute和relative 的文章

                

                    
                

            

                    

        

            

                
 

                


                

            

            

            

                
随机推荐