盒模型的组成,由里向外分别是content,padding,border,margin
盒子模型在页面中占的实际宽度是:(margin+padding+border)*2 + width,高度同理。
盒模型有标准盒模型和ie盒模型,二者的区别是
标准盒模型的内容大小就是content的大小,而ie盒模型的大小则是content+padding+border总的大小。
通过设置 box-sizing:content-box(W3C)/border-box(IE)就可以达到自由切换的效果。
js如何获取和设置box的宽高呢?
法一:dom.style.width 可以获取到行内设置的样式值,返回的是字符串,带单位
法二:在IE下可以使用obj.currentStyle[name]获取,Chrome,火狐下可以使用getComputedStyle(obj)[name]来获取,获取的宽高是计算后的样式,只包含content的宽高,返回的是带单位的
如果想要兼容浏览器,可以封装一个函数:
function getCss(obj,name) { //用此方法获得样式包含px,获得的是一个字符串
if (obj.currentStyle) {
return obj.currentStyle[name];
}else{
return getComputedStyle(obj)[name];
}
}
以上两种方法只能获取元素的css 大小,无法获取元素本身实际大小,比如内边距、滚动条、边框之类。返回的是带单位的字符串
法三:obj.offsetWidth 可以获取元素的实际大小,包括content,padding,border,返回的是不带单位的值。
法四:obj.clientWidth 可以获取元素的可视区的大小,包括content,padding,返回的是不带单位的值。
offsetLeft可以获得元素距离body的左边距,如果设置了父级position为相对定位,obj为绝对定位,那得到的就是相对于父级的左边距。
margin的小性子:
一、第一个子级设置margin-top会在特定情况下穿透父级
解决方案:1、给父级加边框
2、给父级加overflow:hidden
3、不使用子级的margin-top,而用父级的padding-top代替
二、同一个BFC下外边距会发生折叠
<head>
div{
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
</head>
<body>
<div></div>
<div></div>
</body>
此时,因为两个div元素在同一个BFC容器下,所以第一个div的下边距和第二个div的上边距发生了重叠,所以两个盒子之间的距离只有100px,而不是200px。如果想要避免外边距的重叠,可以将其放在不同的BFC容器中
<div class="container">
<p></p>
</div>
<div class="container">
<p></p>
</div>
.container {
overflow: hidden;
}
p {
width: 100px;
height: 100px;
background: lightblue;
margin: 100px;
}
这时候,两个盒子的距离就是200px了
常见定位方案
1、普通流
在普通流中,元素按照其在 HTML 中的先后位置至上而下布局,在这个过程中,行内元素水平排列,直到当行被占满然后换行,块级元素则会被渲染为完整的一个新行,除非另外指定,否则所有元素默认都是普通流定位,也可以说,普通流中元素的位置由该元素在 HTML 文档中的位置决定。
2、浮动
在浮动布局中,元素首先按照普通流的位置出现,然后根据浮动的方向尽可能的向左边或右边偏移,其效果与印刷排版中的文本环绕相似。
3、绝对定位
在绝对定位布局中,元素会整体脱离普通流,因此绝对定位元素不会对其兄弟元素造成影响,而元素具体的位置由绝对定位的坐标决定。
什么是BFC?
BFC:Block Fromtting Context,块级格式化上下文,是一个独立的布局环境,其中的元素布局是不受外界影响。
具有BFC特性的元素可以看做是隔离了的独立容器,容器里面的元素不会在布局上影响到外面的元素。
如何触发BFC?
- 浮动元素:float 除 none 以外的值
- 绝对定位元素:position (absolute、fixed)
- display 为 inline-block、table-cells、flex
- overflow 除了 visible 以外的值 (hidden、auto、scroll)
虽然添加上述的任意一条都能创建BFC,但会有一些副作用:
1、display: table 可能引发响应性问题
2、overflow: scroll 可能产生多余的滚动条
3、float: left 将把元素移至左侧,并被其他元素环绕
4、overflow: hidden 将裁切溢出元素
因而无论什么时候需要创建BFC,都要基于自身的需要来考虑。
BFC特性及应用
1、同一个BFC下外边距会发生重叠
2、BFC可以包含浮动元素(清除浮动)
3、BFC可以阻止元素被浮动元素覆盖
<div style="height: 100px;width: 100px;float: left;background: lightblue">我是一个左浮动的元素</div>
<div style="width: 200px; height: 200px;background: #eee">我是一个没有设置浮动,
也没有触发 BFC 元素, width: 200px; height:200px; background: #eee;</div>
这时候其实第二个元素有部分被浮动元素所覆盖,(但是文本信息不会被浮动元素所覆盖) 如果想避免元素被覆盖,可触第二个元素的 BFC 特性,在第二个元素中加入 overflow: hidden,就会变成: