HTML与CSS

回流与重绘

CSS盒模型

标准盒子模型

width等于内容宽

IE盒子模型

width=内容宽+padding+border

BFC

隔离的独立容器

触发条件

  • 浮动元素,float不为none

  • 绝对定位元素,position为absolute或者fixed

  • display 为 inline-block、table-cells、flex

  • 设置了overflow,但是不为visible

作用

  • 清除浮动

  • BFC子元素margin不重叠

布局

左边固定,右边自适应

<!-- html -->
<div id="parent">
<div id="child1">自适应自适应自适应自适应自适应自适应</div>
<div id="child2">自适应自适应自适应自适应自适应自适应</div>
</div>
<!-- css-->
<style>
/* 绝对定位 */
#child1 {
width: 100px;
height: 100px;
position: absolute;
left: 0;
top: 0;
background-color: lime;
}
#child2 {
margin-left: 100px;
background-color: red;
}
/* flex */
#parent {
display: flex;
}
#child1 {
flex-basis: 100px;
background-color: lime;
}
#child2 {
background-color: red;
}
</style>

居中

文本垂直居中

line-height=height

文本水平居中

text-align:center

水平垂直居中

<!-- html -->
<div class="parent">
<div class="child">div</div>
</div>
<!-- css-->
<style>
/* flex */
.parent {
display: flex;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
}
/* 绝对定位+transform */
.parent {
width: 100px;
height: 100px;
}
.child{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
/* 绝对定位+margin */
.parent {
width: 100px;
height: 100px;
}
.child{
width: 40px;
height: 20px;
position: absolute;
top: 50%;
left: 50%;
margin-top: -10px;
margin-left: -20px;
}
</style>