当前位置: 首页 > Web前端 > CSS

关于scroll,client,inner,avail,offset等的理解

时间:2023-03-31 12:26:48 CSS

在写例子理解scrollWidth,clientWidth,innerWidth,availWidth,offsetWidth等的时候,无意中发现了合并margin值的问题,记录下同时1个。.html文件偏移量的区别(自己写的例子)

cssstyle比较常用的属性clientWidth:指可见区域(网页,或元素)的宽度clientHeight:指可见区域(网页,或元素)的高度offsetWidth:指元素的宽度(网页,或元素)offsetHeight:指元素(网页,或element)scrollTop:滚动条的滚动距离scrollLeft:滚动条的滚动距离availWidth:屏幕可用区域的宽度availHeight:屏幕可用区域的高度script下面是我在百度上找的一张图。感觉这张图有点复杂。2.合并边距值的问题是当两个垂直的外边距相遇时,就会形成一个边距。合并边距的高度等于两个合并边距的高度中的较大者。另一种是:当父元素没有内边距或边框时,触发BFC时,如果子元素的值大于父元素,则与父元素进行偏移。这时候子元素就是对除父元素之外离它最近的元素的偏移量的一个解。您可以同时更改Margin值,或为元素设置边框和填充,或形成BFC3。关于BFC(blockformattingcontext)内部boxes会在垂直方向,boxes在垂直方向的距离由margin决定,属于同一个bfc相邻两个boxes的margin会重叠在各自的左边元素的边距框,触及包含块边框框的左侧(对于从左到右的格式,反之亦然)。即使有浮动,Bfc的区域也不会和浮动框重叠。Bfc是页面上一个隔离的独立容器。容器内的元素不会影响容器外的元素,反之亦然。在计算bfc的高度时,浮动元素也会参与计算4.构成bfc的条件浮动元素,floatvaluesotherthannoneabsolutepositioningelements,position(absolute,flxed)display:inline-block,table-cells,table-captionsoverflowvaluesvisible以外的正在努力学习,如果对你的学习有帮助,请留下你的mark(点个赞^_^)-sidewebpack打包(附面试题)纯css实现瀑布流(multi-column多列和flex布局)