×

新手对于CSS盒模型的认知

作者:ceshi2018.09.12来源:Web前端之家浏览:206评论: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前端之家编辑修改或补充,转载请注明出处和本文链接:
http://jiangweishan.com/article/hzi9348203808.html

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

发表评论:

最新留言

  • admin

    关于微信小程序,后面会出一些文章的,请关注网站更新。。。...

  • webred

    博主可以分享点小程序的文章......

  • 访客

    可以用。...

  • admin

    可以的,可以联系下QQ,或者加群。...

  • admin

    可以的,可以联系下QQ,或者加群。...

  • Web前端技能

    申请交换友链,可以吗...

  • 访客

    代码不可以用...

  • asidl

    这个DEMO应该再细点更好。。。...

首页|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