.box {
width: 400px;
}
.left {
width: 200px;
height: 300px;
background: red;
float: left;
}
.right {
width: 200px;
float: left;
background-color: aqua;
}
.div {
width: 180px;
height: 180px;
background: rgb(49, 49, 185);
padding: 15px;
}
<div class="box">
<div class="left">div>
<div class="right">
<div class="div">
div>
div>
div>
.box1 {
width: 400px;
}
.left1 {
background: red;
float: left;
}
.right1 {
background: blue;
float: right;
}
<div class="box1">
<div class="left1">
<h3>左侧h3>
div>
<div class="right1">
<h3> 右侧h3>
div>
div>
.div1{width: 100px;height: 100px;background: red;float: left;}
.div2{width: 200px;height: 200px;background: blue;float: left;}
<div class="div1">div>
<div class="div2">div>
p{width: 100px;height: 100px;background-color: aquamarine;}
<p>
<h3>h3>
p>
解决方法:overflow:hidden
解决办法:切背景平铺
解决方法: 1.父级加浮动 float:left
2.父级加overflow: hidden;(IE6下不兼容)
3.IE6下触发haslayout
4.父级有边框的时候,子元素的margin值消失
![在这里插入图片描述](https://img-blog.csdnimg.cn/7d9b68ed2ed248e386f3fc16f5e9c99b.png)
.div3{ background-color:brown;border: 1px solid #000; }
.div4{width: 200px;height: 200px;background-color: aquamarine;margin: 100px;}
<div class="div3">
<div class="div4">div>
div>
margin-right 一行右侧第一个元素有双边距
margin-left 一行左侧第一个元素有双边距
解决方法:display:inline;
.div5{ float: left;border:10px solid #000}
.div5 div{width: 100px;height: 100px;background: red;margin: 0 20px;border: 5px solid #ccc;float: left;}
<div class="div5">
<div>1div>
<div>2div>
<div>3div>
<div>4div>
<div>5div>
div>
解决办法:
1.给li加浮动
2.给li加vertical-align
解决方法:用div把注释或者内嵌元素用div包起来
解决办法:给绝对定位元素外面包div
![在这里插入图片描述](https://img-blog.csdnimg.cn/0c00dd78337f4a81913655c12589fcfb.png)
<div class="div6">
<ul>ul>
<div>
<span>span>
div>
div>
.div6{width: 200px;height: 200px;border: 1px solid #000;position: relative;}
span{width: 50px;height: 50px;background: yellow;position: absolute;right: -20px;top :0;}
ul{width: 150px;height: 150px;background: red;margin: 0 0 0 50px;padding: 0;float: left;display: inline;}
解决办法:给父级也加相对定位
![在这里插入图片描述](https://img-blog.csdnimg.cn/e547a37cbdda426391d99b74c76d806c.png)
.div14{width: 200px;height: 200px;border: 1px solid #000;overflow: auto;position: relative;}
.div141{width: 150px;height: 300px;background: yellow;position: relative;}
<div class="div14">
<div class="div141">div>
div>
解决办法:加浮动
解决办法:重置input的背景
解决方法:把背景加给父级,并且清掉输入表单的背景
.div18{width: 100px;height: 30px;border: 1px solid red;background: url(ball.png) no-repeat; }
input{width: 100px;height: 30px;border: none;margin: 0;padding: 0;background: none;}
<div class="div18">
<input type="text">
div>