HTML与CSS的经典例子_html css例子

1、外面写一个盒子，里面是内容区，让内容区水平居中垂直
html部分代码

<div class="wrapper">
<div class="content"></div>
</div>
1
2
3

CSS部分代码

.wrapper{
    width:100px;
    height:100px;
    background-color: red;
    **padding:50px;**
}
.content{
    width: 100px;
    height:100px;
    background-color: #000;
}
1
2
3
4
5
6
7
8
9
10
11

效果如下图

2、做类似于广告的元素居中
CSS代码

div{
    **position:fixed;**
    left:50%;
    top:50%;
    width:100px;
    height:100px;
    background-color: red;
    **margin-left:-50px;
    margin-top:-50px;**
}
1
2
3
4
5
6
7
8
9
10

效果如下图

3、两栏布局
html代码

 <div class="right"></div>
 <div class="left"></div>
1
2

CSS代码

.right{
    width:100px;
    height:100px;
    background-color: #fcc;
    position:absolute;
    right:0;
}
.left{
    height:100px;
    background-color: #123;
    margin-right:-100px;
}
1
2
3
4
5
6
7
8
9
10
11
12

效果如下图

4、margin塌陷问题
垂直方向margin父子元素是结合到一起的
真正解决这个问题的办法就是给父级元素触发BFC

1. position:absolute;
2. display:inline-block;
3. float:left/right;
4. overflow:hidden;
   以上都能触发BFC，但也会引发新的问题，在开发的时候因情况而定。
   html代码

 <div class="wrapper">
        <div class="content"></div>
        </div>
1
2
3

CSS代码

.wrapper{
            margin-left:100px;
            margin-top: 100px;
            width:100px;
            height:100px;
            background-color: black;
            **overflow:hidden;**
        }
        .content{
            margin-left: 50px;
            *margin-top: 50px;*
            width:50px;
            height:50px;
            background-color: green;
        }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

效果如下图：

5、margin合并
margin合并问题我们选择不解决，可以通过数学的方法进行运算来弥补。
html代码

<div class="demo">1</div>
    <div class="demo1">2</div>
1
2

CSS代码

 .demo{
            background-color: red;
            margin-bottom: 200px;//可以将其改为400px
        }
        .demo1{
            background-color:green;
            ~~margin-top: 200px;~~ 
        }
1
2
3
4
5
6
7
8

出现了margin合并问题?

利用数学计算弥补了缺陷?