CSS盒模型

 

 1、盒模型基本概念: 标准模型 + IE模型

标准模型的width和height不包含border和padding:

IE模型的width和height包含border和padding:


 2、标准模型 和 IE模型的区别

标准模型的width和height不包含border和padding

IE模型的width和height包含border和padding


3、CSS如何设置这两种模型

用CSS3的属性来区别:

标准模型   box-sizing: content-box

IE模型       box-sizing: border-box

 浏览器默认的content-box(即标准模型)


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

(css样式分为三种:1.节点内嵌/内联,即通过style样式直接写;2.通过增加的<style></style>标签或节点的方式;3.通过link外部引入css样式表,即外联)

(1) dom.style.width/height

只能取到该dom节点的内联属性样式的宽和高

(2) IE -> dom.currentStyle.width/height

Chrome/FireFox ->  window.getComputedStyle(dom).width/height

该属性取到的是浏览器渲染后的宽和高,相对比较真实准确

(3) dom.getBoundingClientRect().width/height

用于获得页面中某个元素的左,上,右和下分别相对浏览器视窗的位置,返回一个Object对象,

该对象有6个属性:top、lef、right、bottom、width、height。 这个值也是比较真实准确的


5、BFC( 边距重叠解决方案 )

BFC概念: 块级格式化上下文

IFC概念: 内联元素格式化上下文

BFC原理(即渲染规则): 

(1) 在BFC这个元素的垂直方向的边距会发生重叠

(2) BFC的区域不会与浮动元素的box重叠,即用来清楚浮动布局的

(3) BFC在页面上是一个独立的容器,里面的元素与外面的元素不会相互影响

(4) 计算BFC高度的时候,浮动元素也会参与计算

创建BFC的方式:

(1) float值不为none

(2) position的值不为 static和relative

(3) display的值为table的几个属性:table、table-cell、table-column . . .

(4) overflow的值不为visible , 即hidden或者auto都可以 

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值