搜索框
div{
overflow:hidden;
}
input{
width:300px;
height:49px;
border:1px solid red;
float:left;
}
button{
display:inline-block;
width:70px;
height:53px;
border:1px solid #000;
background-image: url('放大镜.png');
background-repeat: no-repeat;
background-position: center center;
background-size: contain;
float:left;
z-index:1000;
}
</style>
</head>
<body>
<div>
<input type="text"><button></button>
</div>
两栏双浮动布局
<style>
.parent{
margin:0 auto;
}
.box1{
width:230px;
height:460px;
border:1px solid red;
float:left;
background:red;
}
.box2{
display:inline-block;
width:970px;
height:460px;
border:1px solid #000;
float:left;
background:purple;
}
</style>
</head>
<body>
<div class="parent">
<div class="box1"></div>
<div class="box2"></div>
</div>
第二个盒子不加浮动也可以：
溢出文字显示省略号
div{
width:200px;
border:1px solid red;
white-space:nowrap;
overflow:hidden;
text-overflow:ellipsis;
}
</style>
</head>
<body>
<div>
hdwhdkgewagfu3y8473y8ri43urfhjkehfkjasd
</div>
图片底侧空隙问题解决
div{border:2px solid red;}
img{vertical-align:bottom;border:1px solid #000;}
</style>
</head>
<body>
<div>
<img src="放大镜.png" alt="">
</div>
因为行内块元素会和文字基线对齐才导致这个问题！！
图片和表单与文字对齐
vertical-align作用与行内块元素****他们默认的vertical-align是关于基线对齐
，默认文字和图片是关于基线对齐
img{
vertical-align:middle;
border:1px solid red;
}
</style>
</head>
<body>
<img src="放大镜.png" alt=""><span>这是一段文字</span>
textarea的resize问题和input和textarea的轮廓取消
input,textarea{
outline:none;
}
textarea{
resize:none;
}
</style>
</head>
<body>
<input type="text">
<textarea name="" id="" cols="30" rows="10"></textarea>
导航栏的三角显示
.box2{
width:0;
height:0;
border:10px solid transparent;
border-top-color:red;
}
</style>
</head>
<body>
<div class="box1"></div>
<div class="box2"></div>
加上定位即可实现
