第一次考核总结

1.居中的方法

1）文本居中

text-align:center;

2）块盒在其包含块中居中（常规流）

定宽，左右margin设置为auto

3）定位下的居中

a.定宽（高）
b.将上下（左右）设置为零
c.将左右（上下）margin设置为auto

4）定位居中

<style>
        div{
        background-color: mediumaquamarine;
    width: 100px;
height: 200px;
position: absolute;
    left: 50%;
    top: 50%; 
    margin-left: -50px;
    margin-top: -100px;
}
    </style>

2.图片放在盒子中与边框之间有白边的解决办法

将img的display属性值改为block,之后使图片左浮动，之后解决高度坍塌问题

 <style>
        div{
            border: rgb(78, 2, 28) 3px solid;
            
        }
        
        img{
            display: block;
            float: left;}
 .clearfix::after{
        content:"";
        display:block;
        clear:both;
}

扩展：白边出现的原因

img标签默认的display属性是inline，默认按基线对齐。
vertical-align属性是设置元素垂直对齐方式的，默认值为baseline(基线)，表示元素放置在父元素的基线上。
取值为top：把元素顶端和行内最高元素顶端对齐。
取值为bottom：把元素底端和行内最低元素顶端对齐。
line-height为内容的top和bottom的距离

所以，以上问题还有另几种解决办法：
1.设置vertical-align为bottom
2.设置line-height为零，自然baseline与bottom距离也为零（基线在bottom上方一点点距离）（仅用于div中无其他元素只有img的情况）

3.三栏布局的实现（部分）

a.浮动
左右模块分别左右浮动，中间模块设置宽度

.left{float:left;}
.right{float:right;}
.main{margin:auto}

b.定位（容器脱离了文档流）

.left,.right{
position:absolute;
}
.left{
left:0;}
.right{
right:0;}
.main{margin:auto;}