归零——CSS学习-第七天
2020-03-01 本文已影响0人
夏沫雪殇
奥运五环正解
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>奥运五环正解</title>
<style type="text/css">
*{
margin: 0;
padding: 0px;
}
.plat{
position: absolute;
left: 50%;
top: 50%;
margin-left: -190px;
margin-top: -93px;
height: 186px;
width: 380px;
}
.circle1,.circle2,.circle3,.circle4,.circle5{
position: absolute;
width: 100px;
height: 100px;
border: 10px solid black;
border-radius: 50%;
}
.circle1{
border-color: red;
left: 0;
top: 0;
}
.circle2{
border-color: green;
left: 130px;
top: 0;
}
.circle3{
border-color: yellow;
left: 260px;
top: 0;
}
.circle4{
border-color: blue;
left: 65px;
top: 70px;
z-index: 1;
}
.circle5{
border-color: black;
left:195px;
top: 70px;
z-index: 1;
}
</style>
</head>
<body>
<div class="plat">
<div class="circle1"></div>
<div class="circle2"></div>
<div class="circle3"></div>
<div class="circle4"></div>
<div class="circle5"></div>
</div>
</body>
</html>
奥运五环效果图.png
两栏布局
代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
*{
margin: 0;
padding: 0px;
}
/*两栏布局css*/
.right{
position: absolute;
width: 100px;
height: 100px;
right: 0;
background-color: #fcc;
}
.left{
height: 100px;
background-color: #123;
margin-right: 100px;
}
</style>
</head>
<body>
<!--两栏布局,注意一定要right在前-->
<div class="right"></div>
<div class="left"></div>
</body>
</html>
效果图
两栏布局.png
两个常见bug
1、margin塌陷
当未设置border-top: 1px solid black;时，margin塌陷，效果如图：
margin塌陷.png
设置后，效果如图：
margin正常.png
代码如下：
<style type="text/css">
*{
margin: 0;
padding: 0px;
}
/*两个bug:margin塌陷,margin合并*/
.wrapper{
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: palevioletred;
/*2.一种简单粗暴的解决方法*/
border-top: 1px solid black;
}
.content{
margin-left: 50px;
/*1.当设置margin-top小于父级设置的时候无动于衷，当大于父级时连带父级一起下移,*/
margin-top: 150px;
width: 50px;
height: 50px;
background-color: burlywood;
}
</style>
<div class="wrapper">
<div class="content"></div>
</div>
2、margin合并
当两个垂直外边距相遇时，它们将形成一个外边距。合并的外边距的高度等于两个发生合并的外边距的高度中的较大者。
解决方法：通过数学方法解决
BFC(block format context块级格式化上下文)
如何触发bfc?
➢position：absolute；
➢diaplay：inline-block；
➢float：left/right；
➢overflow：hidden；
利用bfc解决margin塌陷问题，代码如下：
<style type="text/css">
.wrapper{
margin-left: 100px;
margin-top: 100px;
width: 100px;
height: 100px;
background-color: palevioletred;
/*bfc*/
/*overflow: hidden;*/
/*display: inline-block;*/
position: absolute;
}
</style>
浮动模型（float）
☐浮动
.wrapper{
width: 350px;
height: 350px;
border: 1px solid black;
}
.content{
float: right;
color: #fcc;
background-color:palevioletred;
width: 100px;
height: 100px;
text-align: center;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
}
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
☐浮动元素产生了浮动流
试例代码如下：
<div class="box"></div>
<div class="demo"></div>
.box{
float: left;
width: 100px;
height: 100px;
background-color: cadetblue;
opacity: 0.5;
}
.demo{
width: 150px;
height: 150px;
background-color: plum
}
浮动元素产生了浮动流.png
所有产生了浮动流的元素，块级元素看不到；产生了bfc的元素和文本类属性的元素以及文本都可以看见浮动元素
<div class="box"></div>
<span class="demo">123</span>
.box{
float: left;
width: 100px;
height: 100px;
background-color: cadetblue;
opacity: 0.5;
}
.demo{
width: 150px;
height: 150px;
background-color: palegreen;
}
事例.png
解决浮动流
<!--解决浮动流-->
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
<p></p>
</div>
/*解决浮动流*/
.wrapper{
border: 1px solid black;
}
.content{
float: left;
color: #fcc;
background-color:palevioletred;
width: 100px;
height: 100px;
text-align: center;
margin-left: 10px;
margin-top: 10px;
margin-right: 10px;
}
p{
border-top: 0px solid green;
clear: both;
}
border-top为5px时.png
boder-top为0时.png
