<html lang="en,zh">
<head>
<meta charset="utf-8">
<title>test7</title>
<link rel="stylesheet" type="text/css" href="test7.css">
</head>
<body>
<div class="right"></div>
<div class="left"></div>
<!--
bfc
block format context
特定的盒子会遵循另一个语法规则
可以解决margin塌陷问题
-->
<!--
如何触发bfc???
position:absolute
display:inline-block
float:left/right
overflow:hidden
-->
<div class="father">
<div class="son">
</div>
</div>
<br>
<span class="box1">123</span>
<span class="box2">456</span>
<div class="demo1">1</div>
<div class="demo2">2</div>
<br><br>
<!--
float能使元素站队
站队的边界就是其父级的边界,最后的位置够放一个就放,不够就下一行
-->
<!--
1.浮动元素产生了浮动流
所有产生了浮动流的元素,块级元素看不到他们。
产生了bfc的元素,文本属性类的元素(inline属性的元素),以及文本都能看到浮动元素
-->
<div class="floatout">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
<br><br><br>
<!--
伪元素天生就存在于各个元素/标签中
before after
伪元素天生就是行级元素
-->
<span class="spann">hansome!!!!</span>
<br><br><br>
<ul>
<li class="tb">天猫</li>
<li class="tb">聚划算</li>
<li class="tb">天猫超市</li>
</ul>
</body>
</html>
*{
margin: 0px;
padding: 0px
}
.right{
position: absolute;
right: 0px;
height: 100px;
width: 100px;
background-color: green;
opacity: 0.5; /*设置透明度*/
}
.left{
height: 100px;
background-color: yellow;
margin-right: 100px;
}
/*垂直方向的margin,父子会粘合到一起,取大一点的那个值*/
/*margin塌陷*/
/*改变父级的渲染规则,使父级触发bfc,可解决margin塌陷问题*/
.father{
margin-top: 100px;
margin-left: 100px;
width: 100px;
height: 100px;
background-color: black;
overflow: hidden; /*溢出部分隐藏*/
}
.son{
margin-left: 50px;
margin-top: 50px;
height: 50px;
width: 50px;
background-color: green;
}
/*在水平方向。margin不共用*/
/*在垂直方向,margin共用,选稍大的那一个*/
/*这个问题叫做margin合并,这个也可以用bfc解决,将要解决的元素增加一个父级,将其父级触发bfc即可解决问题*/
/*但是margin合并的问题在真实的开发环境当中不用解决*/
.box1{
background-color: orange;
margin-right: 100px;
}
.box2{
background-color: green;
margin-left: 100px;
}
.demo1{
background-color: orange;
margin-bottom: 100px;
}
.demo2{
background-color: green;
margin-top: 100px;
}
.floatout{
border: 2px solid black;
}
.content{
float: left;
color: #fff;
width: 100px;
height: 100px;
background-color: black;
}
.floatout::after{
content: "";
clear: both; /*clear的作用就是清除浮动,left/right/both*/
display: block; /*只有块级元素才可以清除浮动*/
}
/*
凡事设置了position:absolute;float:left/right;的元素
系统会自动把元素设置成inline-block
*/
/*伪元素:可以被css操作,但是没有html结构*/
.spann::before{
content: "lhx";
}
.spann::after{
content: "yes";
}
ul{
}
.tb{
display: inline-block;
float: left;
color: #f40;
margin: 5px 10px;
font-family: arial;
font-weight: bold;
border-radius: 20%;
height: 30px;
line-height: 30px;
}
.tb:hover{
color: white;
background-color: #f40;
}
.tb::after{
content: "";
display: block;
clear: both;
}