css盒模型

时间: 2019-12-01阅读: 201标签: 模型

盒模型:box-sizing

  • 标准盒模型: content-box 宽高即为content的宽高
  • IE盒模型:border-box 宽高为content+padding+border


获取盒子的宽高

  1. dom.style.width/height 只能获取内联样式设置的宽高
  2. dom.currentStyle.width/height 只兼容IE
  3. window.getComputedStyle(dom).width/height 兼容chromefirefox
  4. dom.getBoundingClientRect() 可以拿到top left width height


BFC块级格式上下文

原理/渲染规则:

  1. 垂直方向上子元素边距重叠
  2. BFC的区域不会与浮动元素的区域重叠
  3. 在页面上是一个独特的元素(外面的元素不回影响里面,里面的元素也不会影响外面)
  4. 计算BFC的高度,浮动元素也会参与计算

创建BFC

  1. 设置了浮动(float)
  2. position 只要不是static,relative || 反之 fixed 和 absolute
  3. display inline-block、table-cell、table-caption table
  4. overflow: hidden/auto 不为visible

应用场景

  • 消除边距重叠 - 给边距重叠的一个元素添加一个BFC的父元素
  • 浮动重叠影响 - 给元素设置BFC,这样就不回与浮动元素重叠
  • 清除浮动 -子元素float,也会参与BFC的高度计算,从而清除浮动


站长推荐

1.阿里云: 本站目前使用的是阿里云主机,安全/可靠/稳定。点击领取2000元代金券、了解最新阿里云产品的各种优惠活动点击进入

2.腾讯云: 提供云服务器、云数据库、云存储、视频与CDN、域名等服务。腾讯云各类产品的最新活动,优惠券领取点击进入

3.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/6755

盒模型大小取决于它的padding,margin,border数值

盒模型规定了元素框处理元素内容width与height值、内边距padding、边框border 和 外边距margin 的数值大小。边框内的空白是内边距padding,边框外的空白是外边距margin,如下所示,这个盒模型元素框的宽度值=内容区域的宽度+2(内边距+外边距+边框)

浏览器事件模型

我想你很可能听说过事件驱动, 但是事件驱动到底是什么?为什么说浏览器是事件驱动的呢?为什么 NodeJS 也是事件驱动的 ? 两者是一回事么?实际上不管是浏览器还是 Nodejs 都是事件驱动的

MVC和MVVM模型

那时计算机世界天地混沌,浑然一体,然后出现了一个创世者,将现实世界抽象出模型形成model,将人机交互从应用逻辑中分离形成view,然后就有了空气、水、鸡啊、蛋什么的。

CSS盒子模型

什么叫框模型?页面元素皆为框(盒子),定义了元素框处理元素内容,内边距,外边距以及边框的计算方式。外边距围绕在元素边框外的空白距离(元素与元素之间的距离),语法:margin,定义4个方向的外边距

CSS3中的弹性盒子模型

css3中新提出的一种布局方案。是一种为了应对针对不同屏幕宽度不同设备的一整套新的布局方案。主要是对一个容器中的子元素进行排列、对齐和分配空白空间的方案的调整。

CSS盒子模型与怪异盒模型

盒子模型(Box Modle)可以用来对元素进行布局,包括内边距,边框,外边距,和实际内容这几个部分。盒子模型分为两种 第一种是W3c标准的盒子模型(标准盒模型)

CSS层模型的应用

如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来(即不依赖与前面的一个DIV的位置可以独立设置位置)

Three.js模型几何体面积、体积计算

在工作中通过Three.js开发项目的时候,一些特定的情况下你可能需要计算一个三维模型的表面积或者体积,比如在3D打印的Web项目中,你需要计算一个三维模型的体积

PHP下用Swoole实现Actor并发模型

Actor对于PHPer来说,可能会比较陌生,写过Java的同学会比较熟悉,Java一直都有线程的概念(虽然PHP有Pthread,但不普及),它是一种非共享内存的并发模型,每个Actor内的数据独立存在

CSS3 box-sizing 属性 有趣的盒模型

盒模型的组成大家肯定都懂,由里向外content,padding,border,margin.盒模型是有两种标准的,一个是标准模型,一个是IE模型。盒模型的宽高只是内容(content)的宽高,而在IE模型中盒模型的宽高是内容(content)+填充(padding)+边框(border)的总宽高。

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广