盒模型
一、什么是盒模型
每一个元素都可以被看作一个盒子,盒子是由:内容(content)、内边距(padding)、边框(border)、外边距(margin)四部分组成
二、盒模型分为那两种
标准盒模型: width + margin(左右) + padding(左右) + border(左右)
怪异盒模型: width + margin(左右) (宽度包含了padding、border)
JS盒模型: 如果是在面试中的话,问你盒模型有几种,你将这个也说出来的话,是一个加分项,说的更全
盒模型的转换
box-sizing:content-box 标准盒模型
box-sizing:border-box 怪异盒模型
三、对JS盒模型的介绍
怎么获取和设置box的内容宽高
IE: document.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并不是专门用来解决这个问题而创的
二、双边距重合问题(边距重叠)
两个box如果都设置了边距,那么在垂直方向上,
两个box的边距会发生重叠,以绝对值大的那个为最终结果显示在页面上。
三、边距重叠的情况(两种)
(1)、父子关系的边距重叠
父子关系,如果子元素设置了外边距,在没有把父元素变成BFC的情况下,父元素也会产生外边距
解决方案:给父元素添加overflow:hidden,这样父元素就变成BFC,不会随子元素产生外边距
(2)、同级兄弟关系的重叠
同级元素在垂直方向上外边距会出现重叠情况,最后外边距的大小取两者绝对值大的那个
解决方案:可以通过加空元素或伪类元素,设置overflow:hidden;解决margin重叠问题
四、如何触发BFC?
在box属性值为这些的情况下,都会让所属的box产生BFC。
- overflow: auto/ hidden;
- position: absolute/ fixed;
- float: left/ right;
- display: inline-block/ table-cell/ table-caption/ flex/ inline-flex
也可以用排除法:
- overflow的值不是visible;
- position的值不是static或relative
- float的值不是none
- display的值是inline-block 或 table-cell 或 flex 或 table-caption 或
inline-flex
清除浮动
一、为什么要清除浮动
主要是为了解决子盒子浮动,父盒子高度为0的问题
二、清除浮动的方式有四种
(1)额外标签法:给谁清除浮动,就在其后额外添加一个空白标签
优点: 通俗易懂,书写方便。(不推荐使用)
缺点: 添加许多无意义的标签,结构化比较差。
给元素small清除浮动(在small后添加一个空白标签clear(类名可以随意),设置clear:both;即可)
<div class="fahter">
<div class="big">big</div>
<div class="small">small</div>
<div class="clear">额外标签法</div>
</div>
.clear{
clear:both;
}
(2)、给父盒子添加overflow:hidden ,这样也会变成BFC
优点: 简单、代码少、浏览器支持好
缺点: 内容增多时候容易造成不会自动换行导致内容被隐藏掉,无法显示需要溢出的元素。不能和position配合使用,因为超出的尺寸的会被隐藏。
(3)、用after伪元素清除浮动 :after方式为空元素的升级版,好处是不用单独加标签了。IE8以上和非IE浏览器才支持:after,,zoom(IE专有属性)可解决ie6,ie7浮动问题(较常用推荐)
优点: 符合闭合浮动思想,结构语义化正确,不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
缺点: 由于IE6-7不支持:after,使用zoom:1
.clearfix:after{/*伪元素是行内元素 正常浏览器清除浮动方法*/
content: "";
display: block;
height: 0;
clear:both;
visibility: hidden;
}
.clearfix{
*zoom: 1;/*ie6清除浮动的方式 *号只有IE6-IE7执行,其他浏览器不执行*/
}
<body>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
<!--<div class="clear">额外标签法</div>-->
</div>
<div class="footer"></div>
</body>
<style>
.father{
border: 1px solid black;
*zoom: 1;
}
.clearfix:after,.clearfix:before{
content: "";
display: block;
clear: both;
}
.big ,.small{
width: 200px;
height: 200px;
float: left;
}
.big{
background-color: red;
}
.small{
background-color: blue;
}
</style>
<div class="father clearfix">
<div class="big">big</div>
<div class="small">small</div>
</div>
<div class="footer"></div>
</div>
补充
父级div定义 height: 父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
优点: 简单、代码少、容易掌握
缺点: 只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题
水平居中
行内元素
首先看它的父元素是不是块级元素,如果是,则直接给父元素设置 text-align: center;
<style>
.father {
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
</style>
<div class="father">
<span id="son">我是行内元素</span>
</div>
如果不是,则先将其父元素设置为块级元素,再给父元素设置 text-align: center;
<style>
.father {
display: block;
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
</style>
<span class="father">
<span id="son">我是行内元素</span>
</span>
块级元素
方案一:(分宽度定不定两种情况)
定宽度:需要谁居中,给其设置 margin: 0 auto; (作用:使盒子自己居中)
<style>
.father {
width: 500px;
height: 300px;
background-color: skyblue;
}
.son {
width: 100px;
height: 100px;
background-color: green;
margin: 0 auto;
}
</style>
<div class="father">
<div class="son">我是块级元素</div>
</div>
不定宽度:默认子元素的宽度和父元素一样,这时需要设置子元素为display: inline-block;
或 display: inline;
即将其转换成行内块级/行内元素,给父元素设置 text-align: center;
<style>
.father {
width: 500px;
height: 300px;
background-color: skyblue;
text-align: center;
}
.son {
background-color: green;
display: inline;
}
</style>
<div class="father">
<div class="son">我是块级元素</div>
</div>
方案二:使用定位属性
首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的left:50%,即让子元素的左上角水平居中;
定宽度:设置绝对子元素的 margin-left: -元素宽度的一半px;
或者设置transform: translateX(-50%);
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
margin-left: -50px;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
不定宽度:利用css3新增属transform:translateX(-50%);
<style>
.father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
.son {
height: 100px;
background-color: green;
position: absolute;
left: 50%;
transform: translateX(-50%);
}
</style>
<div class="father">
<div class="son">我是块级元素</div>
</div>
方案三:使用flex布局实现
使用flexbox布局,只需要给待处理的块状元素的父元素添加属性 display: flex; justify-content: center;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: flex;
justify-content: center;
}
#son {
width: 100px;
height: 100px;
background-color: green;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
多行的行内元素
使用给父元素设置display:table-cell;和vertical-align: middle;
属即可;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
display: table-cell;
vertical-align:middle;
}
#son {
background-color: green;
}
</style>
<div id="father">
<span id="son">我是多行的行内元素</span>
</div>
块级元素
方案一:使用定位
首先设置父元素为相对定位,再设置子元素为绝对定位,设置子元素的top: 50%,即让子元素的左上角垂直居中;
定高度:设置绝对子元素的 margin-top: -元素高度的一半px;
或者设置transform: translateY(-50%);
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
height: 100px;
background-color: green;
position: absolute;
top: 50%;
margin-top: -50px;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
不定高度:利用css3新增属性transform: translateY(-50%);
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 100px;
background-color: green;
position: absolute;
left: 50%;
transform: translateY(-50%);
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
水平垂直居中
方案一:设置父元素为相对定位,给子元素设置绝对定位,top: 0; right: 0; bottom: 0; left: 0; margin: auto;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
margin: auto;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>
方案二:设置父元素为相对定位,给子元素设置绝对定位,left: 50%; top: 50%; margin-left: --元素宽度的一半px; margin-top: --元素高度的一半px;
<style>
#father {
width: 500px;
height: 300px;
background-color: skyblue;
position: relative;
}
#son {
width: 100px;
height: 100px;
background-color: green;
position: absolute;
left: 50%;
top: 50%;
margin-left: -50px;
margin-top: -50px;
}
</style>
<div id="father">
<div id="son">我是块级元素</div>
</div>