前端笔试之HTML+CSS+JS
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">1、position和float的异同</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">相同点：相应模块都会脱离文档流
<span style="color: black;">区别</span>点：position相应的块级元素会覆盖下面的内容（文字，）
而float只会覆盖块级元素，里面的文字会脱离出来
</div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">下面<span style="color: black;">咱们</span>将进行测试</p>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">代码</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div>
<div style="border: 1px solid red;">
outside
<div style="border: 1px solid blue;">
inside
</div>
</div>
</div></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic2.zhimg.com/80/v2-b0d2a8b660f125f2fe8df1a39c719ba9_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">position</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div>
<div style="border: 1px solid red;">
outside
<div style="position:absolute;top:0;left:0;border: 1px solid blue;">
inside
</div>
</div>
</div></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic3.zhimg.com/80/v2-58da8f3ed410a5452ef942729af272b6_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">Float</p>
<div style="color: black; text-align: left; margin-bottom: 10px;"><div>
<div style="border: 1px solid red;">
outside
<div style="float:left;border: 1px solid blue;">
inside
</div>
</div>
</div></div>
<div style="color: black; text-align: left; margin-bottom: 10px;"><img src="https://pic1.zhimg.com/80/v2-4f5d892f4d5e26c1d4fb300b3dcaa524_720w.webp" style="width: 50%; margin-bottom: 20px;"></div>
<h2 style="color: black; text-align: left; margin-bottom: 10px;">2、给input添加如下样式（CSS3）</h2>
<p style="font-size: 16px; color: black; line-height: 40px; text-align: left; margin-bottom: 15px;">背景为<span style="color: black;">照片</span>1.jpg，背景颜色为蓝色；长度200px;高度50px;文字居中显示，边框为5像素虚线黑色；边框为5像素圆角，文字<span style="color: black;">暗影</span>，模糊。</p>
<div style="color: black; text-align: left; margin-bottom: 10px;">input {
bac<span style="color: black;">公斤</span>round-image: url(img.jpg);
bac<span style="color: black;">公斤</span>round-color: #00f;
width: 200px;
height: 50px;
text-align: center;
border: 5px dashed #fff;
bor</div>
你的见解独到，让我受益匪浅，期待更多交流。 回顾历史，我们感慨万千；放眼未来，我们信心百倍。
页:
[1]