目录
HTML&C
一、盒模型
在我们HTML页面中，每一个元素都可以被看作一个盒子，而这个盒子由：内容区（content）、填充区（padding）、边框区（border）、外边界区（margin）四部分组成
标准盒模型 （非IE浏览器）
box-sizing:content-box；一个块的总宽度(页面中占的宽度)= width + margin(左右) + padding(左右) + border(左右)
怪异盒模型 （IE浏览器）
box-sizing:border-box；一个块的总宽度= width + margin(左右)（即width已经包含了padding和border值）
怎么获取和设置box的内容宽高
IE： dom.currentStyle.width/height
非IE: window.getComputedStyle(dom).width/height
var obj = document.getElementById("box");
var style = null;
if (window.getComputedStyle) {
style = window.getComputedStyle(obj, null); // 非IE
} else {
style = obj.currentStyle; // IE
}
alert("width=" + style.width + "\nheight=" + style.height);
二.BFC
什么是BFC
BFC就是“块级格式化上下文”的意思，BFC是一块独立的布局环境，保护其中内部元素不收外部影响，也不影响外部。本身BFC是一种css的布局方式，只是我们可以利用它来解决外边距折叠的问题，BFC并不是专门用来解决这个问题而创的；
如何触发BFC
overflow: auto/ hidden;
position: absolute/ fixed;
float: left/ right;
display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
BFC的应用
1 可以用来自适应布局
利用BFC的这个原理可以实现两栏布局，左边定宽，右边自适应。不会相互影响，哪怕高度不相等。
给左边盒子加浮动，右边盒子加overflow:hidden;变成BFC，就可以消除外部左边盒子因浮动对他的影响
2 可以清除浮动
一个父元素中的子元素，设置浮动时，父元素没有设置高度，这时子元素脱离文档流，父元素感知不到子元素的高度，造成父元素的塌陷。
这时候给父元素添加overflow:hidden / auto,变成BFC就可以解决这种问题。
3 解决垂直边距重叠
三、清除浮动
为什么要清除浮动
清除浮动主要是为了解决，父元素因为子级元素浮动引起的内部高度为0的问题
清除浮动
一、 额外标签法： 给谁清除浮动，就在其后额外添加一个空白标签的方法
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
.clear{
clear:both;
}
二、 父级添加overflow方法：
.fahter{
width: 400px;
border: 1px solid deeppink;
overflow: hidden;
}
三、使用after伪元素清除浮动：
<body>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
</body>
.clearfix:after{
content: "";
display: block;
height: 0;
clear:both;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行，其他浏览器不执行*/
}
四、使用before和after双伪元素清除浮动：用法同上
四、position定位的属性方法
position含义是指定位类型, 可取值有: static, relative, absolute, fixed, inherit, sticky(另: sticky是除css3新发布的属性)
1. position: static;
static(没定位)是position的默认值, 元素处于正常的文档流中, 会忽略left, top, right, bottom, z-index属性.
2. position: relative;
relative(相对定位)是给元素设置相对原本位置的定位, 不脱离文档流, 此元素原本位置会保留, 其他元素不会受影响.
3. position: absolute;
absolute(绝对定位)指给元素设置绝对定位，相对定位的对象可以分为两种情况：
- 设置了
absolute的元素如果存在有祖先元素设置了position属性为relative或者absolute，则这时元素的定位对象为此已设置position属性的祖先元素。 - 如果并没有设置了
position属性的祖先元素，则此时相对于body进行定位。
4. position: fixed;
可以简单说fixed是特殊版的absolute，fixed元素总是相对于body定位的。
5. inherit
继承父元素的position属性，但需要注意的是IE8以及往前的版本都不支持inherit属性。
6. sticky (黏性定位,吸顶效果)
设置了sticky的元素，在屏幕范围（viewport）时该元素的位置并不受到定位影响（设置是top、left等属性无效），当该元素的位置将要移出偏移范围时，定位又会变成fixed，根据设置的left、top等属性成固定位置的效果。
五 、盒子水平垂直居中
第一种：盒子宽高 + margin
思路 ：上外边距为自身高度一半，左外边距为自身宽度一半：
.box {
width: 800px;
height: 400px;
border: 1px solid black;
}
.son {
最低0.47元/天 解锁文章
869
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
