×

新手对于CSS盒模型的认知

作者:ceshi2018.09.12来源:Web前端之家浏览:1079评论:0
关键词:css盒模型
微信公众号

微信公众号

新手对于CSS盒模型的认知,菜鸟一个。

基本概念:标准模型+IE模型

标准模型和IE模型的区别

css如何设置这两种模型

js如何设置获取盒模型对应的宽和高

实例题(根据盒模型解释边距重叠)

BFC(边距重叠解决方案)或者IFC

css标准盒模型

而IE盒模型是计算border 和padding的

css如何设置这两种模型?

box-sizing:content-box;标准模型
浏览器默认的是标准模型

box-sizing:border-box;IE模型

JS如何设置获取盒模型对应的宽和高?

dom节点获取(此处获取的内联样式)
dom.style.width/height

dom.currentStyle.width/height(获取任何引入方式的宽和高,但是只有IE支持)

window.getComputedStyle(dom).width/height(firefox,chrome)原理一样,ie9以下不支持

dom.getBoundingClientRect().width/height
left ,top,bottom,right
ie9以上支持width/height

BFC的基本概念(边距重叠解决方案)?

块级格式化上下文

BFC的原理?

1:BFC元素垂直方向会发生重叠
2:BFC的区域不会与浮动元素的box重叠
3:BFC的页面时一个容器,外部的元素不会影响它里面的元素(里面也不会影响外边)
4:计算BFC高度的时候,浮动元素也会参与计算

如何创建BFC?

1、overflow:hidden,auto
2、float不为none
3、position的值不是static或者relative,就创建了BFC
4、display:inline-box或者与table相关的都是创建了BFC

BFC使用场景有哪些?

IFC的基本概念

内联元素的格式化上下文


温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/hzi9348203808.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • admin

    是的,新版也是不错的。...

  • Qanmy

    火狐56版本最经典。。。...

  • 前端大爆炸

    交换一下链接前端大爆炸!-WEBBANG!BANG!!BANG!!!https://a...

  • Wreb

    加群讨论...

  • 访客

    非常感谢...

  • 访客

    那如果自定义转发的图片未生成完,他给我转发的是默认截屏怎么办...

  • 男装品牌

    文章不错支持一下...

  • 女装品牌

    文章不错非常喜欢...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2013-2018 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.5.2 Zero