摘要:是指元素右边界距窗口最左边的距离,是指元素下边界距窗口最上面的距离是什么直译为块级格式化上下文。
什么是css和模型
又称框模型 (Box Model) ,包含了元素内容(content)、内边距(padding)、边框(border)、外边距(margin)几个要素
IE模型区别是宽度和高度不同,标准模型宽度和高度是content的高度,IE模型的宽度是border 和padding
css 如何设置这两种模型 box-sizing:content-box
box-sizing:border-box IE模式下 padding计算在里边
box-sizing:content-box 默认
获取css中dom的宽高方法
第一种
dom.style.height dom.style.width
这种情况有一个只有在内联样式中能够获取到 而写到上边或者外联都获取不到样式
第二种
dom.currentStyle.width 只有IE支持
第三种方法
window.getComputedStyle(a).height
第四种方法
原生JS提供了一个getBoundingClientRect()方法,用于获取左,上,右和下分别相对浏览器视窗的位置。
right是指元素右边界距窗口最左边的距离,bottom是指元素下边界距窗口最上面的距离
BFC 是什么?
BFC(Block formatting context)直译为"块级格式化上下文"。它是一个独立的渲染区域,只有Block-level box参与, 它规定了内部的Block-level Box如何布局,并且与这个区域外部毫不相干
原理:bfc垂直方向边距发生重叠,bfc区域不会与浮动元素的box重叠
bfc是一个容器外边元素不会影响里边的元素,计算bfc高度浮动元素也会参与计算
如何形成:
根元素
float属性不为none
position为absolute或fixed
display为inline-block, table-cell, table-caption, flex, inline-flex
overflow不为visible
作用:
创建BFC来避免垂直外边距叠加
创建BFC来清除浮动
创建BFC来实现自适应布局
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/114301.html
摘要:标准盒模型盒子总宽度高度。以上支持,除此外还可以取到相对于视窗的上下左右的距离。包括高度宽度内边距和边框,不包括外边距。主要看怎么父元素的盒模型如何设置。空元素的边距重叠是取与的最大值。 一、概念 CSS盒模型本质上是一个盒子,封装周围的HTML元素,它包括:外边距(margin)、边框(border)、内边距(padding)、实际内容(content)四个属性。CSS盒模型:标准模...
摘要:文章转自视频教程优雅的应用调试工具新扩展是由和开源的应用的调试工具。计划任务列出已运行的计划任务。该封闭函数会被序列化为一个长字符串,加上他的哈希与签名如出一辙该功能将记录所有异常,并可查看具体异常情况。事件显示所有事件的列表。 文章转自:https://laravel-china.org/topics/19013视频教程:047. 优雅的应用调试工具--laravel/telesco...
摘要:本文最早为双十一而作,原标题双大前端工程师读书清单,以付费的形式发布在上。发布完本次预告后,捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起,帮助我们设计快速响应的网络应用,而非简单的页面。 本文最早为双十一而作,原标题双 11 大前端工程师读书清单,以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流,现免费分享到这里,不足之处欢迎指教...
阅读 2814·2021-11-25 09:43
阅读 2434·2021-10-09 09:44
阅读 2779·2021-09-22 15:49
阅读 2520·2021-09-01 11:43
阅读 2522·2019-08-30 14:16
阅读 428·2019-08-29 17:24
阅读 3007·2019-08-29 14:00
阅读 1358·2019-08-29 13:05