css中和模型及其相关的问题

megatron 发布于2019-08-29 17:24 / 463人阅读

摘要：是指元素右边界距窗口最左边的距离，是指元素下边界距窗口最上面的距离是什么直译为块级格式化上下文。

什么是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来实现自适应布局

云服务器 GPU云服务器及其相关上传数据的相关问题神经网络模型及其matlab仿真程序设计 js中和的区别

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/114301.html

常见的面试问题：【CSS】CSS盒模型

摘要：标准盒模型盒子总宽度高度。以上支持，除此外还可以取到相对于视窗的上下左右的距离。包括高度宽度内边距和边框，不包括外边距。主要看怎么父元素的盒模型如何设置。空元素的边距重叠是取与的最大值。一、概念 CSS盒模型本质上是一个盒子，封装周围的HTML元素，它包括：外边距（margin）、边框（border）、内边距（padding）、实际内容（content）四个属性。CSS盒模型：标准模...

android_c 2019-08-30 15:44 评论0 收藏0
Laravel Telescope：优雅的应用调试工具

摘要：文章转自视频教程优雅的应用调试工具新扩展是由和开源的应用的调试工具。计划任务列出已运行的计划任务。该封闭函数会被序列化为一个长字符串，加上他的哈希与签名如出一辙该功能将记录所有异常，并可查看具体异常情况。事件显示所有事件的列表。文章转自：https://laravel-china.org/topics/19013视频教程：047. 优雅的应用调试工具--laravel/telesco...

MasonEast 2019-07-01 10:54 评论0 收藏0
双十二大前端工程师读书清单

摘要：本文最早为双十一而作，原标题双大前端工程师读书清单，以付费的形式发布在上。发布完本次预告后，捕捉到了一个友善的吐槽读书清单也要收费。这本书便从的异步编程讲起，帮助我们设计快速响应的网络应用，而非简单的页面。本文最早为双十一而作，原标题双 11 大前端工程师读书清单，以付费的形式发布在 GitChat 上。发布之后在读者圈群聊中和读者进行了深入的交流，现免费分享到这里，不足之处欢迎指教...

happen 2019-08-02 16:00 评论0 收藏0